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

錄入組件

要提升信息錄入效率，設(shè)計(jì)師因?yàn)槔斡浺粋€(gè)原則——盡量避免用戶手動(dòng)輸入。因?yàn)槊總€(gè)用戶都期望以最方便、快速的方式完成信息錄入，他們不愿意打開鍵盤自己一個(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)然輸入框也不是一無是處，一些備注或者詳細(xì)地址類的無法給用戶提供選項(xiàng)，那么用輸入框就很合適了。

 

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

下拉列表/單選框

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

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

1 節(jié)約界面空間

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

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

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

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

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

 

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

 

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

 

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

 

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

 

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

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

說完兩個(gè)最常見的錄入組件，接下來我們說的深入一些，專門說一下數(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)的角度來說，滑動(dòng)比點(diǎn)擊更加舒服。接下來我就通過虎撲的例子來具體談?wù)劵瑒?dòng)和點(diǎn)擊這兩個(gè)手勢(shì)。

 

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

 

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

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

總結(jié)

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

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