每個(gè)UI設計師都希望自己的產(chǎn)品能夠獲得用戶(hù)的喜愛(ài)，那么如何才能做到這點(diǎn)呢？今天我們不妨從提升信息錄入效率這個(gè)角度來(lái)優(yōu)化產(chǎn)品用戶(hù)體驗。因為UI設計本質(zhì)上就是創(chuàng )建一個(gè)可供用戶(hù)完成交互的界面，說(shuō)白了就是人與機器(手機、電腦)交流，提升信息錄入效率就意味著(zhù)加快交流速度。
錄入組件
要提升信息錄入效率，設計師因為牢記一個(gè)原則——盡量避免用戶(hù)手動(dòng)輸入。因為每個(gè)用戶(hù)都期望以最方便、快速的方式完成信息錄入，他們不愿意打開(kāi)鍵盤(pán)自己一個(gè)字一個(gè)字的去敲。當然了單獨的 “盡量避免用戶(hù)手動(dòng)輸入”原則不成立，目的是效率，前提是非手動(dòng)輸入方式更高效才成立。會(huì )有些場(chǎng)景下手動(dòng)輸入才會(huì )更高效。比如通訊錄列表中從上千好友中找某人，手動(dòng)輸入搜索效率比去列表中選擇高。
一個(gè)表單里有六七個(gè)項目，但是錄入樣式只有輸入框，每一項信息錄入都要靠用戶(hù)自己手動(dòng)去輸入，這樣設計師很省事，但是用戶(hù)會(huì )很不爽啊。相比于打字，用戶(hù)更愿意去選擇。所以用戶(hù)更愿意看到下拉列表，選擇器而不是滿(mǎn)屏的輸入框。當然輸入框也不是一無(wú)是處，一些備注或者詳細地址類(lèi)的無(wú)法給用戶(hù)提供選項，那么用輸入框就很合適了。
可供用戶(hù)進(jìn)行選擇操作的組件很多，但是有些很小眾，用途很局限，例如日期選擇器DatePicker(日期選擇器設計總結)和評分Rate這種。在我看來(lái)真正具備普遍適用性的選擇型組件主要有兩種：下拉列表和單選框。
下拉列表/單選框
下拉列表主要的使用場(chǎng)景是用戶(hù)在眾多選項中進(jìn)行選擇進(jìn)而完成信息的快速錄入。其主要樣式如下圖：
那么我們可以發(fā)現其主要的優(yōu)點(diǎn)在于：
1 節約界面空間
2 無(wú)限量展示選項
所以當界面空間很緊張，而且可供選擇的項目比較多的時(shí)候，下拉列表是一個(gè)很合適的組件。但是下拉列表的缺點(diǎn)也是很明顯的：
1 用戶(hù)必須點(diǎn)擊才能看到所有的選項；
2 所有的選項都是從上至下排列，無(wú)法體現優(yōu)先級。
說(shuō)完下拉框，我們再來(lái)說(shuō)單選框。為什么把它倆放在一起說(shuō)呢？因為在我看來(lái)，單選框和下拉列表像是一個(gè)硬幣的正反面，雙方的優(yōu)缺點(diǎn)正好相反。
從樣式上我們可以看出來(lái)，單選框跟下拉列表最大的不同是在于選項的展示。單選框會(huì )把所有的選項都展示給用戶(hù)，一目了然。下拉列表想要看選項就要點(diǎn)擊，多了一個(gè)操作步驟。以下圖為例，這里表單項目都是下拉列表樣式，整個(gè)界面看起來(lái)也很整齊劃一，但是我們更“挑剔”一點(diǎn)會(huì )發(fā)現，性別這欄使用下拉列表并不是很合適，因為總共就男/女兩個(gè)選項，直接用單選框展示更合理一些。
單選框不能展示過(guò)多的選項，特別是針對移動(dòng)端設計，因為移動(dòng)端相對來(lái)說(shuō)屏幕小，可展示的空間有限。此外單選框與下拉列表相比另一個(gè)缺陷是用戶(hù)無(wú)法完成多級選擇，最常見(jiàn)的就是省市區錄入。
所以從上面的分析我們可以給單選框和下拉列表的各自的使用場(chǎng)景做一個(gè)簡(jiǎn)單的總結：當選項較少，且界面空間比較充足的情況下，推薦使用單選框；單選項過(guò)多，且存在層級結構關(guān)系的時(shí)候使用下拉列表更加合適。
不過(guò)現在UI設計中很多的壁壘被打破，很多的組件都是相互組合使用的。之前的選項都是彈框展示，而且是從上至下依次排列的?，F在的選項可以一個(gè)新的界面以按鈕組的樣式展示，你甚至可以將其看成是單選框的一個(gè)變形。
所以UI設計是一個(gè)變化很快的行業(yè)，我一直認為設計師一定要跟開(kāi)發(fā)多溝通，去明白每個(gè)組件的適用場(chǎng)景，去明白你所設計的組件能否還原出來(lái)？能否有更好的實(shí)現方案？
數據錄入
說(shuō)完兩個(gè)最常見(jiàn)的錄入組件，接下來(lái)我們說(shuō)的深入一些，專(zhuān)門(mén)說(shuō)一下數字錄入。數字錄入是信息錄入的重要一環(huán)，關(guān)于數字錄入有兩個(gè)很常用的組件。一個(gè)是計數器InputNumber，而另一個(gè)是滑塊Slider。
計數器的優(yōu)勢在于計數器支持用戶(hù)點(diǎn)擊遞增遞減也支持手動(dòng)輸入，所以可以完成數據的精準錄入，而滑塊只能完成完成一定區間內的數據錄入。
而滑塊的優(yōu)點(diǎn)主要有兩個(gè)，第一個(gè)就是用戶(hù)不僅可以錄入具體數值還可以錄入數值范圍，這點(diǎn)是計數器做不到的。
滑塊的第二個(gè)優(yōu)勢在于其是滑動(dòng)操作的。這兩個(gè)組件其實(shí)代表了不同的手勢，一個(gè)是點(diǎn)擊，一個(gè)是滑動(dòng)。從用戶(hù)體驗的角度來(lái)說(shuō)，滑動(dòng)比點(diǎn)擊更加舒服。接下來(lái)我就通過(guò)虎撲的例子來(lái)具體談?wù)劵瑒?dòng)和點(diǎn)擊這兩個(gè)手勢。
虎撲的新聞和專(zhuān)區帖子里的評論展示方式是不一樣的，新聞里的評論類(lèi)似瀑布流，無(wú)限下拉滾動(dòng)刷新，而專(zhuān)區里的帖子評論卻是分頁(yè)展示的。
瀑布流展示用戶(hù)想要查看更多評論就要滑動(dòng)，所有信息都在當前界面中展示，用戶(hù)不需要每次都要等一個(gè)新的界面加載完成，加快瀏覽速度。而且我們剛才也說(shuō)了，滑動(dòng)手勢比點(diǎn)擊更受用戶(hù)的喜愛(ài)。此外不用展示分頁(yè)按鈕，節省了界面的空間，評論按鈕可以獲得更多的展示空間，更容易吸引用戶(hù)的注意力。評論按鈕和分頁(yè)按鈕放在一起很不明顯，我曾經(jīng)以為點(diǎn)擊這個(gè)按鈕可以手動(dòng)錄入頁(yè)數完成跳轉。
上面我們說(shuō)了滑動(dòng)手勢的優(yōu)點(diǎn)，接下來(lái)說(shuō)下缺點(diǎn)。用戶(hù)越往下滑動(dòng)，當前界面所加載的內容就越多，會(huì )降低頁(yè)面性能。但是考慮評論中主要是文字，圖片較少，所以這個(gè)缺點(diǎn)在這里并不是很明顯。另一個(gè)缺點(diǎn)是無(wú)法完成位置標記，你在瀏覽的時(shí)候，突然想起上面有個(gè)評論挺不錯的，你想翻上去找到，你只能一條條去看。但是如果有分頁(yè)功能，你就會(huì )可以直接跳轉到那個(gè)頁(yè)面，很快速的就能找到信息。
總結
以上就是我關(guān)于信息錄入的組件和手勢做的一個(gè)總結，希望可以給大家帶來(lái)幫助。
來(lái)源：UI中國，成都軟件開(kāi)發(fā)，APP開(kāi)發(fā)公司
