微信小程序設(shè)計規(guī)范（3） 便捷優(yōu)雅

三、便捷優(yōu)雅

從PC時代的物理鍵盤鼠標(biāo)到移動端時代手指，雖然輸入設(shè)備極大精簡，但是手指操作的準(zhǔn)確性卻大大不如鍵盤鼠標(biāo)精確。為了適應(yīng)這個變化，需要開發(fā)者在設(shè)計過程中充分利用手機(jī)特性，讓用戶便捷優(yōu)雅的操控界面。

1. 減少輸入

由于手機(jī)鍵盤區(qū)域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設(shè)計小程序頁面時因盡量減少用戶輸入，理由現(xiàn)有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗(yàn)。

減少輸入，巧用接口

例如下圖中，在添加銀行卡時，采用攝像頭識別SDK接口來幫助用戶輸入。除此之外微信團(tuán)隊還對外開放例如地理位置接口等多種SDK接口（詳見微信JS-SDK），充分利用這些接口將大大提高用戶輸入的效率和準(zhǔn)確性，進(jìn)而優(yōu)化體驗(yàn)。

除了利用接口外，在不得不讓用戶進(jìn)行手動輸入時，應(yīng)盡量讓用戶做選擇而不是鍵盤輸入。一方面，回憶易于記憶，讓用戶在有限的選項(xiàng)中做選擇通常來說是容易于完全靠記憶輸入；另一方面，仍然是考慮到手機(jī)鍵盤密集的單鍵輸入極易造成輸入錯誤。例如圖中，在用戶搜索時提供搜索歷史快捷選項(xiàng)將幫助用戶快速進(jìn)行搜索，而減少或避免不必要的鍵盤輸入。

2. 避免誤操作

一位內(nèi)在手機(jī)上我們通過手指觸摸屏幕來操控界面，手指的點(diǎn)擊精確度遠(yuǎn)不如鼠標(biāo)，因此在設(shè)計頁面上需點(diǎn)擊的控件時，需要充分考慮到其熱區(qū)面積，避免由于可點(diǎn)擊區(qū)域過小或過于密集而造成誤操作。當(dāng)簡單的將原本在電腦屏幕上使用的界面不做任何適配直接移植到手機(jī)上時，往往就容易出現(xiàn)這樣的問題。由于手機(jī)屏幕分辨率各不相同，因此最適宜點(diǎn)擊像素尺寸也不完全一致，但換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標(biāo)準(zhǔn)控件庫中，各種控件均已考慮到了頁面點(diǎn)擊效果以及不同屏幕的適配，因此再次推薦使用或模仿標(biāo)準(zhǔn)控件尺寸進(jìn)行設(shè)計。

3. 利用接口提升性能

微信設(shè)計中心已推出了一套網(wǎng)頁標(biāo)準(zhǔn)控件庫，包括sketch設(shè)計控件庫和WeUI重構(gòu)代碼庫，這些控件都已充分考慮了移動端頁面的特點(diǎn)，能夠保證其在移動端頁面上的可用性和操作性能；同事微信web開發(fā)團(tuán)隊也在不斷完善和擴(kuò)充微信JS-SDK接口，并提供微信公共庫，利用這些資源不但能夠?yàn)橛脩籼峁└涌旖莸姆?wù)，而且對頁面性能的提高有極大作用，無形之中提升了用戶體驗(yàn)。