閱讀微信官方的設(shè)計(jì)文檔是最有效的方式。

里面提供了大量的用戶界面實(shí)例，開發(fā)者只需嚴(yán)格依據(jù)這份設(shè)計(jì)文檔，就可以做出兼具美觀、實(shí)用的 UI 與交互模式。

　　為了幫助大家更快地理解設(shè)計(jì)文檔，知曉程序（微信號(hào) zxcx0101）專門準(zhǔn)備了這份文檔解讀，不僅將設(shè)計(jì)文檔的篇幅濃縮到二分之一，還在文末增加了小程序 UI 設(shè)計(jì)與傳統(tǒng)的移動(dòng)應(yīng)用設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)的差異比較。

　　現(xiàn)在， 只需花一半的時(shí)間看這篇文章，你就能掌握設(shè)計(jì)文檔的所有要點(diǎn)。

　　注：本文主要針對(duì)小程序開發(fā)者和 UI 設(shè)計(jì)師。如果想零基礎(chǔ)學(xué)習(xí)小程序開發(fā)，請(qǐng)繼續(xù)關(guān)注知曉程序（微信號(hào) zxcx0101）的后續(xù)內(nèi)容。

　　小程序官方設(shè)計(jì)文檔解讀

　　基本規(guī)則

　　微信小程序設(shè)計(jì)文檔將所有的設(shè)計(jì)范例分為了四個(gè)部分，分別是：

1. 友好禮貌

2. 清晰明確

3. 便捷優(yōu)雅

4. 統(tǒng)一穩(wěn)定

　　除此之外，微信官方還提供了一些便于開發(fā)者使用的組件，這些組件可以在微信官方的小程序 IDE 中直接使用。

設(shè)計(jì)文檔也針對(duì)這部分組件進(jìn)行了詳細(xì)說明，包括每個(gè)組件的適用范圍。同時(shí)，還提供了 Sketch 與 Photoshop 的設(shè)計(jì)模板，便于 UI 設(shè)計(jì)師直接使用。

知曉程序（微信號(hào) zxcx0101）建議：沒有太多設(shè)計(jì)經(jīng)驗(yàn)的開發(fā)者請(qǐng)盡可能使用微信提供的組件樣式，這樣可以在快速開發(fā)的前提下，保證小程序的用戶體驗(yàn)。

　　1. 友好禮貌

　　微信官方希望小程序?qū)Ｗ⒔鉀Q用戶當(dāng)前的問題，做一個(gè)「管家」，而非是在用戶處理問題時(shí)候，一直制造干擾的「推銷員」。

　　首先，每一個(gè)頁面都應(yīng)該聚焦于某個(gè)重點(diǎn)功能，不能與該功能無關(guān)。

　　例如，搜索頁面的功能應(yīng)該是「搜索」，與搜索無關(guān)的功能或內(nèi)容（如 banner 廣告以及誘導(dǎo)搜索關(guān)鍵詞推廣等）應(yīng)該盡可能去除掉。

　　

　　官方錯(cuò)誤示例，在搜索頁中添加無用信息

　　其次，頁面的導(dǎo)航應(yīng)該按照用戶的預(yù)期進(jìn)行。

　　例如，用戶跳轉(zhuǎn)進(jìn)入一個(gè)頁面時(shí)，小程序不應(yīng)該彈出與之無關(guān)的廣告，因?yàn)閺V告不符合用戶進(jìn)入頁面的預(yù)期。

　　

　　官方錯(cuò)誤示例，進(jìn)入頁面彈出與功能無關(guān)廣告

　　知曉程序（微信號(hào) zxcx0101）建議：小程序設(shè)計(jì)時(shí)應(yīng)該以快速解決用戶問題為目標(biāo)，并為其提供明確且符合預(yù)期的步驟導(dǎo)航。而這與張小龍?jiān)谘葜v中提到的「用完即走」的概念是吻合的。

　　2. 清晰明確

　　用戶在操作小程序時(shí)，小程序應(yīng)該為用戶明示當(dāng)前狀態(tài)，同時(shí)應(yīng)盡力減少用戶在操作上的限制和等待時(shí)間。

　　微信官方已經(jīng)為小程序提供了全局導(dǎo)航欄，包括導(dǎo)航區(qū)（返回按鈕）、標(biāo)題區(qū)和操作區(qū)三組。

　　如果開發(fā)者有需要，可以在小程序的首頁中使用頁面內(nèi)導(dǎo)航，包括頂部 Tab 樣式和底部標(biāo)簽樣式。每種樣式至少需要兩個(gè)標(biāo)簽，最多不能超過五個(gè)標(biāo)簽，而 微信官方給出建議是最多不要超過四個(gè)。

　　

　　官方提供的底部標(biāo)簽和頂部 Tab 樣式

　　開發(fā)者可以定義導(dǎo)航欄和頁面內(nèi)導(dǎo)航的風(fēng)格顏色。在定義顏色時(shí)，開發(fā)者需要注意元素辨識(shí)度，不能出現(xiàn)刺眼和按鈕與文字可視性差的情況。

　　小程序中的加載反饋細(xì)節(jié)也是影響整體體驗(yàn)的重要部分。 微信提供了一個(gè)下拉刷新組件，只需要按照要求套用即可。

　　同時(shí)，頁面內(nèi)的加載提示推薦使用局部加載反饋而非全局加載反饋。加載時(shí)間較長時(shí)，建議提供進(jìn)度條以減緩用戶等待的焦灼感。

　　

　　下拉刷新樣式和局部加載示例

微信小程序提供三個(gè)結(jié)果提示方式，提示效果從輕至強(qiáng)的分別為小彈窗提示（toast）、模態(tài)框提示（modal）和單獨(dú)的成功結(jié)果頁面。開發(fā)者需要根據(jù)實(shí)際情況，對(duì)不同程度的提示進(jìn)行合理利用。

知曉程序（微信號(hào) zxcx0101）建議：操作反饋時(shí)用 toast，詢問行為時(shí)用 modal，表單提交后用頁面。

　　

　　Toast、Modal 和成功頁面

　　這份設(shè)計(jì)文檔特別強(qiáng)調(diào)了異常情況的設(shè)計(jì)。在小程序中，異常情況需要明確告知用戶出現(xiàn)了問題，同時(shí)明確告知用戶問題出在哪里、應(yīng)該如何解決。

　　文檔對(duì)表單中填寫出錯(cuò)情況的提示樣式進(jìn)行了規(guī)定。

　　

　　表單錯(cuò)誤提示示例

　　如果表單中出現(xiàn)錯(cuò)誤，小程序應(yīng)該在頂部彈出提示，并在錯(cuò)誤項(xiàng)目的右側(cè)提供錯(cuò)誤 icon，以便用戶定位問題。

　　3. 便捷優(yōu)雅

　　微信官方希望小程序可以敏捷地解決問題。

　　比如，當(dāng)用戶在進(jìn)行輸入時(shí)，可以通過聯(lián)想、API 接口以及其他方式（例如掃描銀行卡等），幫助用戶快速準(zhǔn)確地填充輸入內(nèi)容。

　　

　　掃描銀行卡快速填充內(nèi)容

　　在設(shè)計(jì)時(shí)，應(yīng)該確保用戶的誤操作概率更低。

　　微信官方在文檔中提到， 可點(diǎn)擊元素應(yīng)該要保證足夠大，以便用戶能夠有明確的點(diǎn)擊反饋。但知曉程序（微信號(hào) zxcx0101）提醒，文案及 icon 不讓用戶困惑也是減少誤操作的重要方式之一。

　　4. 統(tǒng)一穩(wěn)定

　　在設(shè)計(jì)文檔中，有關(guān)于統(tǒng)一穩(wěn)定的說法更傾向于「統(tǒng)一」。即 小程序在整體上應(yīng)該要為用戶提供整齊劃一的功能，避免同一種視覺元素中在不同頁面中有不同的樣式。

　　這樣的原則，有助于保證用戶的認(rèn)知穩(wěn)定性。設(shè)計(jì)師在設(shè)計(jì)的時(shí)候，應(yīng)盡可能避免一個(gè)小程序中多種元素風(fēng)格差異較大的情況。這樣既不能保證小程序的視覺統(tǒng)一性，同時(shí)也對(duì)用戶的認(rèn)知穩(wěn)定造成嚴(yán)重破壞。

　　知曉程序（微信號(hào) zxcx0101）建議：在開發(fā)過程中，可以將相同的組件的樣式規(guī)定于一個(gè)全局 WXSS 文件中，以便開發(fā)時(shí)快速復(fù)用并保證視覺統(tǒng)一。

　　差異比較

　　如果網(wǎng)頁設(shè)計(jì)師或移動(dòng)應(yīng)用 UI 設(shè)計(jì)師轉(zhuǎn)向開發(fā)小程序的話，了解小程序與之前設(shè)計(jì)領(lǐng)域的異同是很有必要的。

　　知曉程序（微信號(hào) zxcx0101）以這份設(shè)計(jì)文檔為基礎(chǔ)，講解小程序 UI 設(shè)計(jì)與傳統(tǒng)的移動(dòng)應(yīng)用設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)的差異。

　　1. 如果你是網(wǎng)頁設(shè)計(jì)師

　　對(duì)于網(wǎng)頁設(shè)計(jì)師來說，小程序界面設(shè)計(jì)最大的挑戰(zhàn)在于 以往桌面為先的思維需要轉(zhuǎn)向移動(dòng)為先，因?yàn)樽鳛橐豢钜蕾囀謾C(jī)運(yùn)行的應(yīng)用，微信小程序需要聚焦于移動(dòng)使用。

　　移動(dòng)端與桌面端的區(qū)別在于：

• 屏幕尺寸與比例。移動(dòng)設(shè)備的屏幕一般會(huì)比桌面設(shè)備的屏幕更小，同時(shí)屏幕比例從橫向變成了縱向。

• 輸入設(shè)備。桌面設(shè)備擁有鼠標(biāo)和鍵盤，而移動(dòng)設(shè)備上，用于信息輸入的幾乎只有手指。

• 網(wǎng)絡(luò)特性。桌面端不需要考慮網(wǎng)絡(luò)問題，但在移動(dòng)設(shè)備上，用戶使用的網(wǎng)絡(luò)可能會(huì)有流量限制或速率限制。

　　因此，知曉程序（微信號(hào) zxcx0101）要提醒網(wǎng)頁設(shè)計(jì)師，在設(shè)計(jì)小程序界面的時(shí)候需要注意這些差異：

• 多花點(diǎn)功夫在排版上。在移動(dòng)設(shè)備上使用程序，不像是在電腦上使用那么輕松自在。為小程序的元素和文字進(jìn)行排版時(shí)，這些元素和文字應(yīng)適當(dāng)放大，同時(shí)加大間距。

• 避免花哨元素。過于花哨的元素在小屏幕上容易「吸」走用戶的注意力，不符合設(shè)計(jì)文檔中的規(guī)范，同時(shí)會(huì)增加用戶的網(wǎng)絡(luò)流量和載入時(shí)間。

• 注意導(dǎo)航系統(tǒng)設(shè)計(jì)。小程序沒有「面包屑」（導(dǎo)航指示器），在設(shè)計(jì)的時(shí)候需要確保用戶不會(huì)在頁面中迷失，同時(shí)需要保證用戶的下一步符合其預(yù)期。

• 多測(cè)試。在轉(zhuǎn)換至小程序的初期，強(qiáng)烈建議將設(shè)計(jì)原型稿放到真機(jī)進(jìn)行測(cè)試和評(píng)估。

　　2. 如果你是移動(dòng) UI 設(shè)計(jì)師

　　對(duì)于 UI 設(shè)計(jì)師來說，小程序帶來了一個(gè)好消息和一個(gè)壞消息。

　　好消息：移動(dòng) UI 中的設(shè)計(jì)思維和范式，絕大部分都能用在小程序設(shè)計(jì)上，且設(shè)計(jì)師不需要為 iOS 與 Android 分別設(shè)計(jì)界面，只需將有差異的部分進(jìn)行分情況討論即可。

　　壞消息：微信原生提供的控件較為有限。微信中只提供了多種按鈕、Toast、提示 icon、開關(guān)、多選框、復(fù)選框和滑塊等幾種控件。其他的控件需要自己根據(jù)實(shí)際風(fēng)格進(jìn)行開發(fā)和設(shè)計(jì)。

　　此外，微信小程序的風(fēng)格與 iOS HIG 和 Material Design 兩種設(shè)計(jì)范式差異都較大。 在設(shè)計(jì)時(shí)，需要多加注意設(shè)計(jì)文檔中的說明和范例，以便設(shè)計(jì)出符合標(biāo)準(zhǔn)的小程序界面。

對(duì)微信小程序設(shè)計(jì)文檔的解讀就到這里為止了。希望通過這份解讀文檔，能幫助開發(fā)者輕松開發(fā)出具有優(yōu)良體驗(yàn)的小程序。