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

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

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

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

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

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

　　基本規(guī)則

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

1. 友好禮貌

2. 清晰明確

3. 便捷優(yōu)雅

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

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

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

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

　　1. 友好禮貌

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

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

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

　　

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

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

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

　　

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

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

　　2. 清晰明確

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

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

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

　　

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

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

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

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

　　

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

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

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

　　

　　Toast、Modal 和成功頁面

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

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

　　

　　表單錯誤提示示例

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

　　3. 便捷優(yōu)雅

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

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

　　

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

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

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

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

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

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

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

　　差異比較

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

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

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

　　對于網(wǎng)頁設(shè)計師來說，小程序界面設(shè)計最大的挑戰(zhàn)在于 以往桌面為先的思維需要轉(zhuǎn)向移動為先，因為作為一款依賴手機(jī)運行的應(yīng)用，微信小程序需要聚焦于移動使用。

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

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

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

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

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

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

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

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

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

　　2. 如果你是移動 UI 設(shè)計師

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

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

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

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

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