每個UI設(shè)計師都希望自己的產(chǎn)品能夠獲得用戶的喜愛，那么如何才能做到這點呢？今天我們不妨從提升信息錄入效率這個角度來優(yōu)化產(chǎn)品用戶體驗。因為UI設(shè)計本質(zhì)上就是創(chuàng)建一個可供用戶完成交互的界面，說白了就是人與機器(手機、電腦)交流，提升信息錄入效率就意味著加快交流速度。

錄入組件

要提升信息錄入效率，設(shè)計師因為牢記一個原則——盡量避免用戶手動輸入。因為每個用戶都期望以最方便、快速的方式完成信息錄入，他們不愿意打開鍵盤自己一個字一個字的去敲。當然了單獨的 “盡量避免用戶手動輸入”原則不成立，目的是效率，前提是非手動輸入方式更高效才成立。會有些場景下手動輸入才會更高效。比如通訊錄列表中從上千好友中找某人，手動輸入搜索效率比去列表中選擇高。

 

一個表單里有六七個項目，但是錄入樣式只有輸入框，每一項信息錄入都要靠用戶自己手動去輸入，這樣設(shè)計師很省事，但是用戶會很不爽啊。相比于打字，用戶更愿意去選擇。所以用戶更愿意看到下拉列表，選擇器而不是滿屏的輸入框。當然輸入框也不是一無是處，一些備注或者詳細地址類的無法給用戶提供選項，那么用輸入框就很合適了。

 

可供用戶進行選擇操作的組件很多，但是有些很小眾，用途很局限，例如日期選擇器DatePicker(日期選擇器設(shè)計總結(jié))和評分Rate這種。在我看來真正具備普遍適用性的選擇型組件主要有兩種：下拉列表和單選框。

下拉列表/單選框

下拉列表主要的使用場景是用戶在眾多選項中進行選擇進而完成信息的快速錄入。其主要樣式如下圖：

那么我們可以發(fā)現(xiàn)其主要的優(yōu)點在于：

1 節(jié)約界面空間

2 無限量展示選項

所以當界面空間很緊張，而且可供選擇的項目比較多的時候，下拉列表是一個很合適的組件。但是下拉列表的缺點也是很明顯的：

1 用戶必須點擊才能看到所有的選項；

2 所有的選項都是從上至下排列，無法體現(xiàn)優(yōu)先級。

說完下拉框，我們再來說單選框。為什么把它倆放在一起說呢？因為在我看來，單選框和下拉列表像是一個硬幣的正反面，雙方的優(yōu)缺點正好相反。

 

從樣式上我們可以看出來，單選框跟下拉列表最大的不同是在于選項的展示。單選框會把所有的選項都展示給用戶，一目了然。下拉列表想要看選項就要點擊，多了一個操作步驟。以下圖為例，這里表單項目都是下拉列表樣式，整個界面看起來也很整齊劃一，但是我們更“挑剔”一點會發(fā)現(xiàn)，性別這欄使用下拉列表并不是很合適，因為總共就男/女兩個選項，直接用單選框展示更合理一些。

 

單選框不能展示過多的選項，特別是針對移動端設(shè)計，因為移動端相對來說屏幕小，可展示的空間有限。此外單選框與下拉列表相比另一個缺陷是用戶無法完成多級選擇，最常見的就是省市區(qū)錄入。

 

所以從上面的分析我們可以給單選框和下拉列表的各自的使用場景做一個簡單的總結(jié)：當選項較少，且界面空間比較充足的情況下，推薦使用單選框；單選項過多，且存在層級結(jié)構(gòu)關(guān)系的時候使用下拉列表更加合適。

 

不過現(xiàn)在UI設(shè)計中很多的壁壘被打破，很多的組件都是相互組合使用的。之前的選項都是彈框展示，而且是從上至下依次排列的?，F(xiàn)在的選項可以一個新的界面以按鈕組的樣式展示，你甚至可以將其看成是單選框的一個變形。

 

所以UI設(shè)計是一個變化很快的行業(yè)，我一直認為設(shè)計師一定要跟開發(fā)多溝通，去明白每個組件的適用場景，去明白你所設(shè)計的組件能否還原出來？能否有更好的實現(xiàn)方案？

數(shù)據(jù)錄入

說完兩個最常見的錄入組件，接下來我們說的深入一些，專門說一下數(shù)字錄入。數(shù)字錄入是信息錄入的重要一環(huán)，關(guān)于數(shù)字錄入有兩個很常用的組件。一個是計數(shù)器InputNumber，而另一個是滑塊Slider。

 

計數(shù)器的優(yōu)勢在于計數(shù)器支持用戶點擊遞增遞減也支持手動輸入，所以可以完成數(shù)據(jù)的精準錄入，而滑塊只能完成完成一定區(qū)間內(nèi)的數(shù)據(jù)錄入。

 

而滑塊的優(yōu)點主要有兩個，第一個就是用戶不僅可以錄入具體數(shù)值還可以錄入數(shù)值范圍，這點是計數(shù)器做不到的。

滑塊的第二個優(yōu)勢在于其是滑動操作的。這兩個組件其實代表了不同的手勢，一個是點擊，一個是滑動。從用戶體驗的角度來說，滑動比點擊更加舒服。接下來我就通過虎撲的例子來具體談?wù)劵瑒雍忘c擊這兩個手勢。

 

虎撲的新聞和專區(qū)帖子里的評論展示方式是不一樣的，新聞里的評論類似瀑布流，無限下拉滾動刷新，而專區(qū)里的帖子評論卻是分頁展示的。

 

瀑布流展示用戶想要查看更多評論就要滑動，所有信息都在當前界面中展示，用戶不需要每次都要等一個新的界面加載完成，加快瀏覽速度。而且我們剛才也說了，滑動手勢比點擊更受用戶的喜愛。此外不用展示分頁按鈕，節(jié)省了界面的空間，評論按鈕可以獲得更多的展示空間，更容易吸引用戶的注意力。評論按鈕和分頁按鈕放在一起很不明顯，我曾經(jīng)以為點擊這個按鈕可以手動錄入頁數(shù)完成跳轉(zhuǎn)。

上面我們說了滑動手勢的優(yōu)點，接下來說下缺點。用戶越往下滑動，當前界面所加載的內(nèi)容就越多，會降低頁面性能。但是考慮評論中主要是文字，圖片較少，所以這個缺點在這里并不是很明顯。另一個缺點是無法完成位置標記，你在瀏覽的時候，突然想起上面有個評論挺不錯的，你想翻上去找到，你只能一條條去看。但是如果有分頁功能，你就會可以直接跳轉(zhuǎn)到那個頁面，很快速的就能找到信息。

總結(jié)

以上就是我關(guān)于信息錄入的組件和手勢做的一個總結(jié)，希望可以給大家?guī)韼椭?/span>

來源：UI中國，成都軟件開發(fā)，APP開發(fā)公司