UI設(shè)計(jì)師教你如何提升信息入效率

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

錄入組件

要提升信息錄入效率，設(shè)計(jì)師因?yàn)槔斡浺粋€(gè)原則——盡量避免用戶手動(dòng)輸入。因?yàn)槊總€(gè)用戶都期望以最方便、快速的方式完成信息錄入，他們不愿意打開(kāi)鍵盤(pán)自己一個(gè)字一個(gè)字的去敲。當(dāng)然了單獨(dú)的 “盡量避免用戶手動(dòng)輸入”原則不成立，目的是效率，前提是非手動(dòng)輸入方式更高效才成立。會(huì)有些場(chǎng)景下手動(dòng)輸入才會(huì)更高效。比如通訊錄列表中從上千好友中找某人，手動(dòng)輸入搜索效率比去列表中選擇高。

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

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

下拉列表/單選框

下拉列表主要的使用場(chǎng)景是用戶在眾多選項(xiàng)中進(jìn)行選擇進(jìn)而完成信息的快速錄入。其主要樣式如下圖：

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

1 節(jié)約界面空間

2 無(wú)限量展示選項(xiàng)

所以當(dāng)界面空間很緊張，而且可供選擇的項(xiàng)目比較多的時(shí)候，下拉列表是一個(gè)很合適的組件。但是下拉列表的缺點(diǎn)也是很明顯的：

1 用戶必須點(diǎn)擊才能看到所有的選項(xiàng)；

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

說(shuō)完下拉框，我們?cè)賮?lái)說(shuō)單選框。為什么把它倆放在一起說(shuō)呢？因?yàn)樵谖铱磥?lái)，單選框和下拉列表像是一個(gè)硬幣的正反面，雙方的優(yōu)缺點(diǎn)正好相反。

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

單選框不能展示過(guò)多的選項(xiàng)，特別是針對(duì)移動(dòng)端設(shè)計(jì)，因?yàn)橐苿?dòng)端相對(duì)來(lái)說(shuō)屏幕小，可展示的空間有限。此外單選框與下拉列表相比另一個(gè)缺陷是用戶無(wú)法完成多級(jí)選擇，最常見(jiàn)的就是省市區(qū)錄入。

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

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

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

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

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

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

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

滑塊的第二個(gè)優(yōu)勢(shì)在于其是滑動(dòng)操作的。這兩個(gè)組件其實(shí)代表了不同的手勢(shì)，一個(gè)是點(diǎn)擊，一個(gè)是滑動(dòng)。從用戶體驗(yàn)的角度來(lái)說(shuō)，滑動(dòng)比點(diǎn)擊更加舒服。接下來(lái)我就通過(guò)虎撲的例子來(lái)具體談?wù)劵瑒?dòng)和點(diǎn)擊這兩個(gè)手勢(shì)。

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

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

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

總結(jié)

以上就是我關(guān)于信息錄入的組件和手勢(shì)做的一個(gè)總結(jié)，希望可以給大家?guī)?lái)幫助。

相關(guān)文章--《UI大牛教你產(chǎn)品的設(shè)計(jì)心得》