現在微信小程序可以在電腦端和手機等移動端訪問操作了,但移動端的操作仍然是主流。因此小程序開發人員在設計過程中要充分利用手機特性,讓用戶便捷優雅地操控界面。
1、減少輸入
手機觸屏鍵盤區域小且密集,輸入困難的同時還易引起輸入錯誤,因此在設計小程序頁面時應盡量減少用戶輸入,利用現有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。
如下圖中在添加銀行卡時,采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ,充分利用這些接口將大大提高用戶輸入的效率和準確性,進而優化體驗。
除了利用接口外,在不得不讓用戶進行手動輸入時,應盡量讓用戶做選擇而不是鍵盤輸入。
一方面,回憶易于記憶,讓用戶在有限的選項中做選擇通常來說是容易于完全靠記憶輸入;另一方面,仍然是考慮到手機鍵盤密集的單鍵輸入極易造成輸入錯誤。例如圖中,在用戶搜索時提供搜索歷史快捷選項將幫助用戶快速進行搜索,而減少或避免不必要的鍵盤輸入。
2、 避免誤操作
因為在手機上我們通過手指觸摸屏幕來操控界面,手指的點擊精確度遠不如鼠標,因此在設計頁面上需點擊的控件時,需要充分考慮到其熱區面積,避免由于可點擊區域過小或過于密集而造成誤操作。
當簡單地將原本在電腦屏幕上使用的界面不做任何適配直接移植到手機上時,往往就容易出現這樣的問題。由于手機屏幕分辨率各不相同,因此最適宜點擊像素尺寸也不完全一致,但換算成物理尺寸后大致是在7mm-9mm之間。
在微信提供的標準組件庫中,各種控件元素均已考慮到了頁面點擊效果以及不同屏幕的適配,因此再次推薦使用或模仿標準控件尺寸進行設計。
3、利用接口提升性能
微信設計中心已推出了一套網頁標準控件庫,包括sketch設計控件庫和Photoshop設計控件庫,后續還將完善小程序組件,這些控件都已充分考慮了移動端頁面的特點,能夠保證其在移動端頁面上的可用性和操作性能。
同時微信開發團隊也在不斷完善和擴充微信小程序接口,并提供微信公共庫,利用這些資源不但能夠為用戶提供更加快捷的服務,而且對頁面性能的提高有極大作用,無形之中提升了用戶體驗。