對于(yu)頁面(mian)局部的(de)操作(zuo)，可在操作(zuo)區域予以直(zhi)接反饋，例如點擊多選控(kong)件(jian)前后如下圖。對于(yu)常用控(kong)件(jian)，微信設計(ji)中心(xin)將提(ti)供(gong)控(kong)件(jian)庫(ku)，其中的(de)控(kong)件(jian)都已提(ti)供(gong)完整(zheng)操作(zuo)反饋。

頁面全局操作結(jie)果(guo)——圖標型彈出(chu)提示

圖標型(xing)彈(dan)出(chu)(chu)提(ti)示(shi)適(shi)用(yong)(yong)(yong)于輕量(liang)級的(de)成(cheng)功(gong)提(ti)示(shi)，1.5秒后自動消失，并(bing)不打(da)斷流程，對用(yong)(yong)(yong)戶影響較(jiao)小(xiao)，適(shi)用(yong)(yong)(yong)于不需要強(qiang)調的(de)操作提(ti)醒，例如成(cheng)功(gong)提(ti)示(shi)。特別注意該形式(shi)不適(shi)用(yong)(yong)(yong)于錯誤提(ti)示(shi)，因為錯誤提(ti)示(shi)需明確告知用(yong)(yong)(yong)戶，因而不適(shi)合使用(yong)(yong)(yong)一閃而過(guo)的(de)彈(dan)出(chu)(chu)式(shi)提(ti)示(shi)。

頁面全局操(cao)作(zuo)結(jie)果——文字型彈(dan)出提示

文(wen)字(zi)型(xing)彈出提示適用于(yu)需(xu)要輕量化地用文(wen)字(zi)解(jie)釋當前狀(zhuang)態或提醒不(bu)嚴(yan)重的錯誤。1.5秒后自動消失(shi)，不(bu)打斷流程，對用戶影響較小。

頁面全局操作結果(guo)——模態對話(hua)框

對于需要用戶明確(que)知曉的(de)操作結果狀態可(ke)通過模態對話(hua)框來提示，并可(ke)附帶下一步操作指引。

頁面全局操作結(jie)果—結(jie)果頁

對于操作結(jie)果(guo)已經是(shi)當前流程的(de)(de)終(zhong)結(jie)的(de)(de)情況，可(ke)使用操作結(jie)果(guo)頁來(lai)反饋。這種方式最為強烈和明確的(de)(de)告知用戶操作已經完成，并可(ke)根(gen)據實際情況給出下一步(bu)操作的(de)(de)指(zhi)引。

異常可控，有路可退

在設計任何(he)的任務和(he)流程時(shi)(shi)(shi)，異(yi)常狀態和(he)流程往(wang)(wang)往(wang)(wang)容易被忽略，而這些異(yi)常場(chang)景(jing)往(wang)(wang)往(wang)(wang)是(shi)用(yong)戶最為沮喪和(he)需要幫(bang)助的時(shi)(shi)(shi)候，因此需要格外注意異(yi)常狀態的設計，在出(chu)現異(yi)常時(shi)(shi)(shi)予以用(yong)戶必要的狀態提示，并告知解決方(fang)案，使(shi)其有路可退。

要(yao)杜絕異常(chang)狀(zhuang)態(tai)(tai)下，用(yong)戶莫(mo)名其妙(miao)又無處可去，停滯在某一個(ge)頁(ye)(ye)面的情況。上(shang)文中所(suo)提到的模態(tai)(tai)對話框和結果頁(ye)(ye)面都可作為異常(chang)狀(zhuang)態(tai)(tai)的提醒方式。除此之外，在表單(dan)頁(ye)(ye)面中尤其是表單(dan)項較多的頁(ye)(ye)面中，還(huan)應明(ming)確指出出錯項目，以便(bian)用(yong)戶修改。

異(yi)常狀態——表單出錯

表單報錯，在表單頂部(bu)告知錯誤原因(yin)，并標識出錯誤字(zi)段提示用戶修改(gai)。

便捷優雅

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

減少輸入

由于手機鍵(jian)盤區域(yu)小(xiao)且密集，輸(shu)(shu)(shu)入(ru)困難的同時還易引起(qi)輸(shu)(shu)(shu)入(ru)錯(cuo)誤，因(yin)此(ci)在設(she)計小(xiao)程序(xu)頁面時應盡量(liang)減(jian)少(shao)用戶(hu)輸(shu)(shu)(shu)入(ru)，利用現有接口(kou)或其他一些(xie)易于操作的選擇(ze)控件來改善用戶(hu)輸(shu)(shu)(shu)入(ru)的體驗。

例如下(xia)圖中，在添加銀行卡時(shi)，采用攝像(xiang)頭識別接口來(lai)幫助用戶輸(shu)入。除(chu)此之外微(wei)信團隊(dui)還對(dui)外開放例如地(di)理位置接口等(deng)多種微(wei)信小程序(xu)接口 ，充分利用這些(xie)接口將大大提高用戶輸(shu)入的效率(lv)和準確性(xing)，進而優化(hua)體(ti)驗。

除了利用(yong)(yong)接口外，在不(bu)得不(bu)讓用(yong)(yong)戶進行手(shou)動輸(shu)入(ru)(ru)時(shi)，應盡(jin)量(liang)讓用(yong)(yong)戶做(zuo)選擇而(er)(er)不(bu)是(shi)(shi)(shi)鍵(jian)盤輸(shu)入(ru)(ru)。一方面，回憶(yi)易于記憶(yi)，讓用(yong)(yong)戶在有(you)限(xian)的(de)選項中做(zuo)選擇通常來說是(shi)(shi)(shi)容易于完全靠記憶(yi)輸(shu)入(ru)(ru)；另一方面，仍(reng)然(ran)是(shi)(shi)(shi)考慮到(dao)手(shou)機(ji)鍵(jian)盤密集(ji)的(de)單鍵(jian)輸(shu)入(ru)(ru)極易造(zao)成輸(shu)入(ru)(ru)錯誤。 例如圖(tu)中，在用(yong)(yong)戶搜(sou)索時(shi)提供搜(sou)索歷史(shi)快(kuai)捷選項將(jiang)幫助用(yong)(yong)戶快(kuai)速(su)進行搜(sou)索，而(er)(er)減少或(huo)避免不(bu)必要的(de)鍵(jian)盤輸(shu)入(ru)(ru)。

避免誤操作

因為在(zai)手機(ji)上(shang)(shang)我們(men)通過手指觸摸屏(ping)(ping)幕來操控(kong)(kong)界(jie)面(mian)，手指的(de)(de)點擊精確度遠不(bu)如(ru)鼠(shu)標，因此(ci)在(zai)設計頁面(mian)上(shang)(shang)需點擊的(de)(de)控(kong)(kong)件時(shi)，需要充分(fen)考慮到(dao)其(qi)熱區面(mian)積，避(bi)免由于可點擊區域過小或過于密集而造成(cheng)誤(wu)操作。當簡(jian)單的(de)(de)將原(yuan)本在(zai)電腦屏(ping)(ping)幕上(shang)(shang)使用的(de)(de)界(jie)面(mian)不(bu)做任(ren)何(he)適(shi)(shi)配直接移植到(dao)手機(ji)上(shang)(shang)時(shi)，往(wang)往(wang)就容易出現這(zhe)樣的(de)(de)問題。由于手機(ji)屏(ping)(ping)幕分(fen)辨(bian)率各(ge)不(bu)相同(tong)，因此(ci)最適(shi)(shi)宜點擊像素尺(chi)寸(cun)也不(bu)完(wan)全(quan)一致(zhi)，但換算成(cheng)物理尺(chi)寸(cun)后大致(zhi)是在(zai)7mm-9mm之間。在(zai)微信提供的(de)(de)標準組件庫中，各(ge)種控(kong)(kong)件元(yuan)素均已(yi)考慮到(dao)了(le)頁面(mian)點擊效(xiao)果以及不(bu)同(tong)屏(ping)(ping)幕的(de)(de)適(shi)(shi)配，因此(ci)再次(ci)推薦使用或模仿標準控(kong)(kong)件尺(chi)寸(cun)進行設計。

利用接口提升性能

微(wei)(wei)(wei)信設(she)計中心已(yi)推出了一套網頁(ye)標準控(kong)件(jian)庫，包括 sketch設(she)計控(kong)件(jian)庫 和 Photoshop設(she)計控(kong)件(jian)庫，后續還將完(wan)善小程(cheng)序(xu)組件(jian)，這些控(kong)件(jian)都已(yi)充(chong)分考慮了移(yi)動端頁(ye)面(mian)的特(te)點，能夠(gou)保證其在(zai)(zai)移(yi)動端頁(ye)面(mian)上的可用(yong)性和操(cao)作性能；同時微(wei)(wei)(wei)信開(kai)發團隊也在(zai)(zai)不(bu)斷(duan)完(wan)善和擴(kuo)充(chong)微(wei)(wei)(wei)信小程(cheng)序(xu)接口，并提供(gong)微(wei)(wei)(wei)信公共庫，利用(yong)這些資源不(bu)但(dan)能夠(gou)為用(yong)戶提供(gong)更加快捷的服務，而且對頁(ye)面(mian)性能的提高有(you)極大作用(yong)，無形(xing)之中提升了用(yong)戶體驗。

統一穩定

除(chu)了以上所提到的(de)(de)種(zhong)種(zhong)原則，建(jian)議(yi)接入微(wei)信的(de)(de)小程序還應(ying)該時刻注意(yi)不同頁面(mian)間的(de)(de)統(tong)一(yi)性(xing)(xing)和延續性(xing)(xing)，在不同的(de)(de)頁面(mian)盡量(liang)使用(yong)一(yi)致(zhi)的(de)(de)控件和交互方式。

統一的(de)頁面體(ti)驗和有延續(xu)性的(de)界面元素都將幫助用(yong)最少的(de)學(xue)習成(cheng)(cheng)本達成(cheng)(cheng)使(shi)用(yong)目標，減(jian)輕頁面跳動所造成(cheng)(cheng)的(de)不適(shi)感。正因如(ru)此，小(xiao)程序(xu)可根(gen)據需要(yao)使(shi)用(yong)微信提供的(de)標準控件(jian)，以達到統一穩定的(de)目的(de)。

視覺規范 字體

微信(xin)內字體(ti)的使(shi)用(yong)與所運行的系統(tong)字體(ti)保持一致，常用(yong)字號為22, 17, 15, 14, 12(pt)，使(shi)用(yong)場景具體(ti)如下：

字體顏色

色板

列表

按鈕

圖標

資源下載

為方便設(she)計師進行設(she)計，微信(xin)提(ti)供一套可供Web設(she)計和小(xiao)程序使用的(de)基礎控件(jian)庫(ku)；同(tong)時提(ti)供方便開發(fa)者調用的(de)資源(yuan)。

預覽地址：