每個(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è)字的去敲。

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

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

下拉列表/單選框

下拉列表主要的使用場景是用戶在眾多選項(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)先級

說完下拉框种柑，我們再來說單選框。為什么把它倆放在一起說呢匹耕？因?yàn)樵谖铱磥砭矍耄瑔芜x框和下拉列表像是一個(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)，特別是針對移動(dòng)端設(shè)計(jì)函荣，因?yàn)橐苿?dòng)端相對來說屏幕小显押，可展示的空間有限。此外單選框與下拉列表相比另一個(gè)缺陷是用戶無法完成多級選擇傻挂，最常見的就是省市區(qū)錄入乘碑。

所以從上面的分析我們可以給單選框和下拉列表的各自的使用場景做一個(gè)簡單的總結(jié)：當(dāng)選項(xiàng)較少，且界面空間比較充足的情況下踊谋，推薦使用單選框蝉仇；單選項(xiàng)過多，且存在層級結(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è)組件的適用場景，去明白你所設(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)勢在于計(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)勢在于其是滑動(dòng)操作的橙困。這兩個(gè)組件其實(shí)代表了不同的手勢瞧掺，一個(gè)是點(diǎn)擊，一個(gè)是滑動(dòng)凡傅。從用戶體驗(yàn)的角度來說辟狈，滑動(dòng)比點(diǎn)擊更加舒服。接下來我就通過虎撲的例子來具體談?wù)劵瑒?dòng)和點(diǎn)擊這兩個(gè)手勢夏跷。

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

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

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

總結(jié)

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