注冊

微信小程序設計規(guī)范便捷優(yōu)雅,利用小程序接口提升性能

2020-09-27
導讀:三、便捷優(yōu)雅 從PC時代的物理鍵盤鼠標到移動端時代手指,雖然輸入設備極大精簡,但是手指操作的準確性卻大大不如鍵盤鼠標精確。為了適應這個變化,需要開發(fā)者在設計過程中充分...

三、便捷優(yōu)雅

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

1. 減少輸入

微信小程序設計規(guī)范便捷優(yōu)雅,利用小程序接口提升性能

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

例如下圖中,在添加銀行卡時,采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口,充分利用這些接口將大大提高用戶輸入的效率和準確性,進而優(yōu)化體驗。

 

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

 

2. 避免誤操作

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

3. 利用接口提升性能

微信設計中心已推出了一套網(wǎng)頁標準控件庫,包括 sketch設計控件庫 和 Photoshop設計控件庫,后續(xù)還將完善小程序組件,這些控件都已充分考慮了移動端頁面的特點,能夠保證其在移動端頁面上的可用性和操作性能; 同時微信開發(fā)團隊也在不斷完善和擴充微信小程序接口,并提供微信公共庫,利用這些資源不但能夠為用戶提供更加快捷的服務,而且對頁面性能的提高有極大作用,無形之中提升了用戶體驗。

更多微信小程序開發(fā)教程,可以關注hi小程序。
重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)