張小龍?jiān)谀瓿醯囊粓?chǎng)演講中络拌，提出了「應(yīng)用號(hào)」的概念俭驮，引起巨大反響。現(xiàn)在春贸，變身為「小程序」的應(yīng)用號(hào)混萝，等待各位的耕耘遗遵。
接下來，我們準(zhǔn)備了系列文章譬圣，如果你希望在小程序中有所作為瓮恭，或者只是希望能從小程序中接觸編程，我們都希望通過這個(gè)系列文章來幫助你進(jìn)行開發(fā)厘熟。
本文是第二篇：設(shè)計(jì)規(guī)范解讀篇屯蹦。本文針對(duì)有開發(fā)小程序意向的個(gè)人開發(fā)者，以及有小程序界面設(shè)計(jì)需求的企業(yè) UI 設(shè)計(jì)師绳姨。我們希望通過講解《微信小程序設(shè)計(jì)指南》登澜，幫助開發(fā)者輕松開發(fā)出具有優(yōu)良體驗(yàn)的小程序。
為什么要研究這個(gè)指南飘庄？
從微信脑蠕、到公眾賬戶、再到微信支付跪削，最后是小程序谴仙，微信正逐漸將自己變成一個(gè)操作系統(tǒng)。在這個(gè)「跨平臺(tái)的操作系統(tǒng)」之上碾盐，保證用戶體驗(yàn)也是微信團(tuán)隊(duì)的重點(diǎn)關(guān)注問題晃跺，而事關(guān)用戶體驗(yàn)最重要的一環(huán)就是 UI 及交互設(shè)計(jì)。
對(duì)于微信團(tuán)隊(duì)來說毫玖，微信這個(gè)跨平臺(tái)操作系統(tǒng)需要兼顧 iOS 及 Android 兩套 UI 標(biāo)準(zhǔn)掀虎。兩套標(biāo)準(zhǔn)的風(fēng)格差異巨大，微信團(tuán)隊(duì)需要幫助小程序開發(fā)者兼顧兩種平臺(tái)的界面風(fēng)格并保證小程序與微信本身的體驗(yàn)統(tǒng)一付枫。指南是其中的一個(gè)最有效的手段烹玉。
小程序設(shè)計(jì)文檔本身已經(jīng)為開發(fā)者提供優(yōu)良用戶界面實(shí)例，開發(fā)者不需要經(jīng)過特殊設(shè)計(jì)阐滩，只需嚴(yán)格依據(jù)這份設(shè)計(jì)文檔二打，就可以做出兼具美觀疾忍、實(shí)用的 UI 與交互模式峰档。
同時(shí)，對(duì)于擁有較強(qiáng)的自主設(shè)計(jì)能力的開發(fā)者來說允悦，為了保證用戶在微信中使用不會(huì)造成困惑和障礙衅疙，也有必要參考這份設(shè)計(jì)文檔進(jìn)行設(shè)計(jì)。
基本規(guī)則
《微信小程序設(shè)計(jì)指南》將所有的設(shè)計(jì)范例分為了四個(gè)部分鸳慈，分別是：
友好禮貌
清晰明確
便捷優(yōu)雅
統(tǒng)一穩(wěn)定

除此之外饱溢，微信官方還提供了便于開發(fā)者使用的組件。
這些組件都可以在微信官方的小程序 IDE 中直接使用走芋。指南中也針對(duì)這部分組件進(jìn)行了詳細(xì)說明绩郎，包括每種組件的適用范圍潘鲫。
同時(shí)，指南中也提供了 Sketch 與 Photoshop 的設(shè)計(jì)模板肋杖，便于 UI 設(shè)計(jì)師直接使用溉仑。
友好禮貌
微信官方希望小程序?qū)Ｗ⒔鉀Q用戶當(dāng)前的問題，做一個(gè)「管家」状植，而非是在用戶處理問題時(shí)候浊竟，一直制造干擾的「推銷員」。
首先津畸，每一個(gè)頁(yè)面都應(yīng)該聚焦于某個(gè)重點(diǎn)功能振定，不能與該功能無關(guān)。
例如肉拓，搜索頁(yè)面的功能應(yīng)該是「搜索」后频，與搜索無關(guān)的功能或內(nèi)容（如 bannar 廣告以及誘導(dǎo)搜索關(guān)鍵詞推廣等）應(yīng)該盡可能去除掉。
其次暖途，頁(yè)面的導(dǎo)航應(yīng)該按照用戶的預(yù)期進(jìn)行卑惜。
例如，用戶跳轉(zhuǎn)進(jìn)入一個(gè)頁(yè)面時(shí)驻售，小程序不應(yīng)該彈出與之無關(guān)的廣告露久，因?yàn)閺V告不符合用戶進(jìn)入頁(yè)面的預(yù)期。
簡(jiǎn)而言之芋浮，小程序應(yīng)該以最快的速度解決用戶問題抱环，并為其提供明確且符合預(yù)期的步驟導(dǎo)航。這與張小龍?jiān)谘葜v中提到的「用完即走」的概念是吻合的纸巷。
清晰明確
用戶操作小程序時(shí)镇草，小程序應(yīng)該為用戶明示當(dāng)前狀態(tài)，同時(shí)應(yīng)盡力減少用戶在操作上的限制和等待時(shí)間瘤旨。
微信官方已經(jīng)為小程序提供了全局導(dǎo)航欄梯啤，包括導(dǎo)航區(qū)（返回按鈕）、標(biāo)題區(qū)和操作區(qū)三組存哲。
如果開發(fā)者有需要因宇，可以在小程序的首頁(yè)中使用頁(yè)面內(nèi)導(dǎo)航，包括頂部 Tab 樣式和底部標(biāo)簽樣式祟偷。兩種樣式至少需要兩個(gè)標(biāo)簽察滑，不能超過五個(gè)標(biāo)簽，微信官方在文檔中建議不要超過五個(gè)標(biāo)簽修肠。
開發(fā)者可以定義導(dǎo)航欄和頁(yè)面內(nèi)導(dǎo)航的風(fēng)格顏色贺辰。在定義顏色時(shí)，開發(fā)者需要注意元素辨識(shí)度，不能出現(xiàn)刺眼饲化、按鈕與文字可視性差的情況莽鸭。
小程序中的加載反饋細(xì)節(jié)也是影響整體體驗(yàn)的重要部分。微信提供了一個(gè)下拉刷新組件吃靠，只需要按照要求套用即可硫眨。同時(shí)，頁(yè)面內(nèi)的加載提示推薦使用局部加載反饋而非全局加載反饋巢块，加載時(shí)間較長(zhǎng)時(shí)建議提供進(jìn)度條以減緩用戶等待的焦灼感礁阁。
微信小程序提供三個(gè)結(jié)果提示方式，提示效果從輕至強(qiáng)的分別為小彈窗提示（toast）夕冲、模態(tài)框提示（modal）和單獨(dú)的成功結(jié)果頁(yè)面氮兵。開發(fā)者需要根據(jù)實(shí)際情況，對(duì)提示進(jìn)行利用歹鱼。
這份設(shè)計(jì)指南中特別強(qiáng)調(diào)了通常容易忽略的異常情況的設(shè)計(jì)泣栈。在小程序中，異常情況需要明確告知用戶出現(xiàn)了問題弥姻，同時(shí)明確告知用戶問題出在哪里南片、應(yīng)該如何解決。
指南中庭敦，對(duì)表單中填寫出錯(cuò)的情況的提示樣式進(jìn)行了規(guī)定疼进。表單中出現(xiàn)錯(cuò)誤，小程序應(yīng)該在頂部彈出提示秧廉，并在錯(cuò)誤項(xiàng)目的右側(cè)提供錯(cuò)誤 icon伞广，以便用戶定位問題。
便捷優(yōu)雅
微信官方希望小程序是可以敏捷解決問題疼电。
比如嚼锄，當(dāng)用戶在進(jìn)行輸入時(shí)，可以通過聯(lián)想蔽豺、API 接口以及其他方式（例如掃描銀行卡等）区丑，幫助用戶快速準(zhǔn)確地填充輸入內(nèi)容。
在設(shè)計(jì)時(shí)修陡，應(yīng)該確保用戶的誤操作概率更低沧侥。
微信官方在指南中提到可點(diǎn)擊元素應(yīng)該要保證足夠大，以便用戶能夠有明確的點(diǎn)擊反饋魄鸦。但在實(shí)際開發(fā)過程中宴杀，文案及 icon 不要讓用戶困惑也是減少誤操作的重要方式之一。
統(tǒng)一穩(wěn)定
在這份指南中拾因，有關(guān)于統(tǒng)一穩(wěn)定的說法更傾向于「統(tǒng)一」旺罢。即小程序在整體上應(yīng)該要為用戶提供整齊劃一的功能斯棒，避免同一種視覺元素中在不同頁(yè)面中有不同的樣式。
這樣的原則主经，有助于保證用戶的認(rèn)知穩(wěn)定性。設(shè)計(jì)師在設(shè)計(jì)的時(shí)候庭惜，應(yīng)盡可能避免一個(gè)小程序中多種元素風(fēng)格差異較大的情況罩驻。這樣既不能保證小程序的視覺統(tǒng)一性，同時(shí)也對(duì)用戶的認(rèn)知穩(wěn)定造成嚴(yán)重破壞护赊。
在開發(fā)過程中惠遏，可以將相同的組件的樣式規(guī)定于一個(gè)全局 WXSS 文件中，以便開發(fā)時(shí)快速?gòu)?fù)用并保證視覺統(tǒng)一骏啰。
差異比較
對(duì)于之前作為網(wǎng)頁(yè)設(shè)計(jì)師或移動(dòng)應(yīng)用 UI 設(shè)計(jì)師的身份轉(zhuǎn)向小程序的人來說节吮，了解小程序與以往自己的設(shè)計(jì)領(lǐng)域異同還是很有必要的。我們以這份設(shè)計(jì)指南為基礎(chǔ)判耕，講解小程序 UI 設(shè)計(jì)與傳統(tǒng)的移動(dòng)應(yīng)用設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)的差異透绩。
我是網(wǎng)頁(yè)設(shè)計(jì)師……
對(duì)于以往作為網(wǎng)頁(yè)設(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ì)有流量限制或速率限制呜师。

針對(duì)這些差異，我們提醒網(wǎng)頁(yè)設(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ì)在頁(yè)面中迷失邢疙，同時(shí)需要保證用戶的下一步符合其預(yù)期。
多測(cè)試望薄。在轉(zhuǎn)換至小程序的初期疟游，強(qiáng)烈建議將設(shè)計(jì)原型稿放到真機(jī)進(jìn)行測(cè)試和評(píng)估。

我是移動(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ì)出符合標(biāo)準(zhǔn)的小程序界面莺禁。
Hello小程序將與您共同成長(zhǎng)留量。微信號(hào)：130870319 QQ群：40726600