微信小程式設計規格（3） 便捷優雅

三、便捷優雅

從PC時代的實體鍵盤滑鼠到行動裝置時代手指，雖然輸入裝置極大精簡，但是手指操作的準確性卻大大不如鍵盤滑鼠精確。為了適應這個變化，需要開發者在設計過程中充分利用手機特性，讓使用者便捷優雅的操控介面。

1. 減少輸入

由於手機鍵盤區域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設計小程式頁面時因盡量減少用戶輸入，理由現有介面或其他一些易於操作的選擇控制項來改善使用者輸入的體驗。

減少輸入，巧用介面

例如下圖中，在新增銀行卡時，採用攝影機辨識SDK介面來幫助使用者輸入。除此之外微信團隊也對外開放例如地理位置介面等多種SDK介面（詳見微信JS-SDK），充分利用這些介面將大幅提升使用者輸入的效率與準確性，進而優化體驗。

除了利用介面外，在必須讓使用者進行手動輸入時，應盡量讓使用者做選擇而不是鍵盤輸入。一方面，回憶易於記憶，讓使用者在有限的選項中做選擇通常來說是容易於完全靠記憶輸入；另一方面，仍然是考慮到手機鍵盤密集的單鍵輸入極易造成輸入錯誤。例如圖中，在使用者搜尋時提供搜尋歷史快速選項將幫助使用者快速進行搜索，而減少或避免不必要的鍵盤輸入。

2. 避免誤操作

一位內在手機上我們透過手指觸摸螢幕來操控介面，手指的點擊精確度遠不如滑鼠，因此在設計頁面上需點選的控制項時，需要充分考慮其熱區面積，避免因可點擊區域過小或過於密集而造成誤操作。當簡單的將原本在電腦螢幕上使用的介面不做任何適配直接移植到手機上時，往往就容易出現這樣的問題。由於手機螢幕解析度各不相同，因此最適合點擊像素尺寸也不完全一致，但換算成物理尺寸後大致是在7mm-9mm之間。在微信提供的標準控制庫中，各種控制均已考慮了頁面點擊效果以及不同螢幕的適配，因此再次推薦使用或模仿標準控制尺寸進行設計。

3. 利用介面提升效能

微信設計中心已推出了一套網頁標準控制庫，包括sketch設計控制項庫和WeUI重構程式碼庫，這些控制項都已充分考慮了行動裝置頁面的特點，能夠保證其在移動端頁面上的可用性和操作性能；同事微信web開發團隊也在不斷完善和擴充微信JS-SDK接口，並提供微信公共庫，利用這些資源不但能夠為用戶提供更加快捷的服務，而且對頁面效能的提升有極大作用，無形之中提升了使用者體驗。