可速云小編:為了做出更優(yōu)質(zhì)、更受人喜歡的小程序,這份微信小程序設(shè)計指南您一定要收下。
頁面全局操作結(jié)果——圖標(biāo)型彈出提示
圖標(biāo)型彈出提示適用于輕量級的成功提示,1.5秒后自動消失,并不打斷流程,對用戶影響較小,適用于不需要強(qiáng)調(diào)的操作提醒,例如成功提示。特別注意該形式不適用于錯誤提示,因為錯誤提示需明確告知用戶,因而不適合使用一閃而過的彈出式提示。

頁面全局操作結(jié)果——文字型彈出提示
文字型彈出提示適用于需要輕量化地用文字解釋當(dāng)前狀態(tài)或提醒不嚴(yán)重的錯誤。1.5秒后自動消失,不打斷流程,對用戶影響較小。

頁面全局操作結(jié)果——模態(tài)對話框
對于需要用戶明確知曉的操作結(jié)果狀態(tài)可通過模態(tài)對話框來提示,并可附帶下一步操作指引。

頁面全局操作結(jié)果—結(jié)果頁
對于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況,可使用操作結(jié)果頁來反饋。這種方式最為強(qiáng)烈和明確的告知用戶操作已經(jīng)完成,并可根據(jù)實際情況給出下一步操作的指引。

異常可控,有路可退
在設(shè)計任何的任務(wù)和流程時,異常狀態(tài)和流程往往容易被忽略,而這些異常場景往往是用戶最為沮喪和需要幫助的時候,因此需要格外注意異常狀態(tài)的設(shè)計,在出現(xiàn)異常時予以用戶必要的狀態(tài)提示,并告知解決方案,使其有路可退。
要杜絕異常狀態(tài)下,用戶莫名其妙又無處可去,停滯在某一個頁面的情況。上文中所提到的模態(tài)對話框和結(jié)果頁面都可作為異常狀態(tài)的提醒方式。除此之外,在表單頁面中尤其是表單項較多的頁面中,還應(yīng)明確指出出錯項目,以便用戶修改。
異常狀態(tài)——表單出錯
表單報錯,在表單頂部告知錯誤原因,并標(biāo)識出錯誤字段提示用戶修改。

便捷優(yōu)雅
從PC時代的物理鍵盤鼠標(biāo)到移動端時代手指,雖然輸入設(shè)備極大精簡,但是手指操作的準(zhǔn)確性卻大大不如鍵盤鼠標(biāo)精確。為了適應(yīng)這個變化,需要開發(fā)者在設(shè)計過程中充分利用手機(jī)特性,讓用戶便捷優(yōu)雅的操控界面。
減少輸入
由于手機(jī)鍵盤區(qū)域小且密集,輸入困難的同時還易引起輸入錯誤,因此在設(shè)計小程序頁面時因盡量減少用戶輸入,利用現(xiàn)有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。
例如下圖中,在添加銀行卡時,采用攝像頭識別接口來幫助用戶輸入。除此之外微信團(tuán)隊還對外開放例如地理位置接口等多種微信小程序接口 ,充分利用這些接口將大大提高用戶輸入的效率和準(zhǔn)確性,進(jìn)而優(yōu)化體驗。

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

避免誤操作
因為在手機(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è)計。
利用接口提升性能
微信設(shè)計中心已推出了一套網(wǎng)頁標(biāo)準(zhǔn)控件庫,包括 sketch設(shè)計控件庫 和 Photoshop設(shè)計控件庫,后續(xù)還將完善小程序組件,這些控件都已充分考慮了移動端頁面的特點(diǎn),能夠保證其在移動端頁面上的可用性和操作性能; 同時微信開發(fā)團(tuán)隊也在不斷完善和擴(kuò)充微信小程序接口,并提供微信公共庫,利用這些資源不但能夠為用戶提供更加快捷的服務(wù),而且對頁面性能的提高有極大作用,無形之中提升了用戶體驗。
統(tǒng)一穩(wěn)定
除了以上所提到的種種原則,建議接入微信的小程序還應(yīng)該時刻注意不同頁面間的統(tǒng)一性和延續(xù)性,在不同的頁面盡量使用一致的控件和交互方式。
統(tǒng)一的頁面體驗和有延續(xù)性的界面元素都將幫助用最少的學(xué)習(xí)成本達(dá)成使用目標(biāo),減輕頁面跳動所造成的不適感。正因如此,小程序可根據(jù)需要使用微信提供的標(biāo)準(zhǔn)控件,以達(dá)到統(tǒng)一穩(wěn)定的目的。
視覺規(guī)范
字體
微信內(nèi)字體的使用與所運(yùn)行的系統(tǒng)字體保持一致,常用字號為20, 18, 17, 16,14 13, 11(pt),使用場景具體如下:

字體顏色

主內(nèi)容 Black 黑色,次要內(nèi)容 Grey 灰色;時間戳與表單缺省值 Light 灰色;大段的說明內(nèi)容而且屬于主要內(nèi)容用 Semi 黑。

藍(lán)色為鏈接用色,綠色為完成字樣色,紅色為出錯用色 Press 與 Disable 狀態(tài)分別降低透明度為20%與10%。

列表

表單輸入

按鈕




圖標(biāo)


以上就是可速云小編為大家?guī)淼?a href="http://www.dqrqedu.cn" data-ke-src="http://www.dqrqedu.cn" target="_blank">小程序指南,更多相關(guān)資訊請點(diǎn)擊“可速云”查閱。
上篇文章,點(diǎn)擊查閱
熱門文章:隨機(jī)鏈接1,隨機(jī)鏈接2,隨機(jī)鏈接3