2017年最新小程序制作規(guī)范

　　從微信、公眾號(hào)、微信支付再到小程序，微信正在從一個(gè)「即時(shí)通訊工具」變成一個(gè)「操作系統(tǒng)」。而大家在制作的時(shí)候也總是會(huì)拿app來(lái)進(jìn)行比較，hishop在制作小程序時(shí)看了小程序的UI部分的設(shè)計(jì)原則，今天就拿它和蘋(píng)果的HIG(Human Interface Guidelines)做個(gè)比較（公眾號(hào)快速注冊(cè)并認(rèn)證小程序），其實(shí)兩者在一些大的原則處理上可以說(shuō)是一致的。

　　一、友好禮貌

　　對(duì)應(yīng)蘋(píng)果規(guī)范：Less is more

　　蘋(píng)果早在iOS7的時(shí)候就做了非常大的界面調(diào)整，以內(nèi)容為主，去掉所有干擾用戶的元素，這個(gè)風(fēng)格一直延續(xù)至今。

　　微信小程序的設(shè)計(jì)規(guī)范在一開(kāi)始就堅(jiān)持了這個(gè)原則，并以正反例示意。不允許在搜索的頁(yè)面上放置不相關(guān)的元素，盡量添加最近搜索詞，常用搜索詞;也不要給用戶太多的選擇項(xiàng)。

　　官方錯(cuò)誤示例，在搜索頁(yè)面添加無(wú)用信息

　　頁(yè)面的導(dǎo)航也要按照用戶的預(yù)期進(jìn)行，進(jìn)入一個(gè)頁(yè)面時(shí)，不應(yīng)該彈出無(wú)關(guān)的廣告，盡量要少使用彈窗一類的控件。

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

　　二、清晰明確

　　對(duì)應(yīng)蘋(píng)果規(guī)范：Clarity

　　蘋(píng)果的HIG三大原則之首就是清晰，這里面包含了幾種含義，其中之一就是為了通過(guò)導(dǎo)航欄設(shè)置解答用戶的三大疑問(wèn)：

　　當(dāng)前在哪

　　可以去到哪

　　去的地方是可以做什么的

　　微信小程序的設(shè)計(jì)規(guī)范中也再次強(qiáng)調(diào)了導(dǎo)航設(shè)計(jì)清晰的重要性，并且直接在微信層面就把當(dāng)前去哪和如何回去的問(wèn)題解決了。一般導(dǎo)航欄除了根據(jù)自己品牌的調(diào)性去更改顏色之外，沒(méi)有什么需要去做的了。

　　最好不要在微信導(dǎo)航頁(yè)面內(nèi)再鑲嵌一個(gè)自有導(dǎo)航欄，如果需要盡量使用Tab,包括底部和頂部樣式，數(shù)量盡量控制在2-4個(gè)，放太多不利于用戶操作。

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

　　三、反饋及時(shí)

　　對(duì)應(yīng)蘋(píng)果規(guī)范：Responsiveness

　　微信小程序規(guī)范花了大量的篇幅強(qiáng)調(diào)加載頁(yè)面必須要及時(shí)有反饋。除了啟動(dòng)頁(yè)有l(wèi)ogo之外，其余元素都不能改動(dòng)，很多程序內(nèi)的反饋動(dòng)畫(huà)都是微信自定義的，這一點(diǎn)跟iOS原生app的靈活性有很大的差別。

　　但是不管是微信小程序還是iOS原生app，他們?cè)诖蟮脑瓌t上是一致的，必須要確保界面對(duì)用戶的操作做出及時(shí)的響應(yīng)反饋，哪怕是在加載。

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

　　而微信小程序提供了三種結(jié)果提示方式，提示效果從輕至強(qiáng)分別為小彈窗提示、模態(tài)框提示和單獨(dú)成功結(jié)果頁(yè)面。小編建議在操作反饋時(shí)用模態(tài)框提示，詢問(wèn)行為的時(shí)候用小彈窗提示，表單提交后用單獨(dú)頁(yè)面提示。

　　模態(tài)框提示、小彈窗提示、成功結(jié)果頁(yè)面

　　對(duì)于異常情況的處理設(shè)計(jì)，一定要基于異常情況要明確告知用戶哪里出了問(wèn)題，、應(yīng)該如何解決。如果在表單中出現(xiàn)錯(cuò)誤，小程序應(yīng)該在頂部彈出提示，并在錯(cuò)誤項(xiàng)目的右側(cè)提供錯(cuò)誤icon，以便用戶定位問(wèn)題。

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

　　四、便捷優(yōu)雅

　　對(duì)應(yīng)蘋(píng)果規(guī)范：User Friendly

　　微信小程序主要提到了減少輸入和避免誤操作的問(wèn)題，這跟蘋(píng)果是一致的。蘋(píng)果要求的最小觸控范圍是44pt以上，微信小程序就更為精準(zhǔn)，把這個(gè)換算成了物理尺寸7mm-9mm之間，可點(diǎn)擊元素要保證足夠大，以便用戶能夠有明確的點(diǎn)擊反饋，保證誤操作概率更低。

　　微信小程序的核心也是可以敏捷的解決問(wèn)題。比如，當(dāng)用戶在進(jìn)行輸入時(shí)，可以通過(guò)聯(lián)想、API接口(例如掃描銀行卡的方式，幫助用戶快速準(zhǔn)確的填充輸入內(nèi)容。

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

　　五、視覺(jué)規(guī)范

　　對(duì)應(yīng)蘋(píng)果規(guī)范：Legibility

　　蘋(píng)果對(duì)于文本的可讀性要求極高，并且在2015年的時(shí)候推出了自己的字體SF(San Fransisco),此外還定義了一套動(dòng)態(tài)字體標(biāo)準(zhǔn)，保證任何人都可以愉悅的在iPhone和iPad上閱讀。

　　而微信小程序在字體上肯定和系統(tǒng)保持一致，其他的考慮和蘋(píng)果也是大同小異。為了保證文本清晰可讀，微信更進(jìn)了一步，直接把各種文本的顏色也定死了。大家在設(shè)計(jì)的時(shí)候要文本要按照微信官方給的規(guī)范進(jìn)行設(shè)計(jì)。

　　就兩者的控件而言，微信的控件沒(méi)有發(fā)揮的空間，尺寸、顏色、字號(hào)都是規(guī)定好的，相比之下iOS的控件給開(kāi)發(fā)者提供了廣闊的定制空間。

　　這樣的原則有助于保證用戶的認(rèn)知穩(wěn)定性，設(shè)計(jì)師在設(shè)計(jì)小程序的時(shí)候就可以避免里面包含多種元素導(dǎo)致風(fēng)格差異較大的情況，從一定程度上保證了小程序的視覺(jué)統(tǒng)一性。

　　小程序的分享是不支持鏈接跳轉(zhuǎn)的，就是你從哪個(gè)頁(yè)面分享出去，點(diǎn)進(jìn)去就是你分享的當(dāng)前截圖，所以類似一些活動(dòng)，當(dāng)用戶領(lǐng)取完成之后分享出去，新的用戶只能看到你的結(jié)果頁(yè)面，不能跳轉(zhuǎn)到活動(dòng)頁(yè)面的首頁(yè)。我們的做法是在結(jié)果頁(yè)的最底部加一個(gè)按鈕，寫(xiě)上我也要領(lǐng)取，讓用戶點(diǎn)進(jìn)這個(gè)頁(yè)面后自己跳轉(zhuǎn)到活動(dòng)首頁(yè)，位置大概三分之二下端就可以了，因?yàn)榉窒斫貓D顯示的是當(dāng)前頁(yè)面上半部分的三分之二，底部增加按鈕不影響。

　　分享顯示內(nèi)容是頁(yè)面的三分之二

　　hishop總結(jié)：就現(xiàn)行總體而言蘋(píng)果和微信在UI設(shè)計(jì)理念上是相通的，就是簡(jiǎn)單、清晰、反饋及時(shí)，微信刻畫(huà)的要更加細(xì)致，而蘋(píng)果三大設(shè)計(jì)原則中除了Clarity,還有Deference(遵從)和Depth(深度)，后兩者微信提及的很少，畢竟兩者的定位不同。

　　而對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)，微信小程序的設(shè)計(jì)思維和規(guī)范跟移動(dòng)端基本無(wú)異，且不需要為iOS與Android分別設(shè)計(jì)界面，只需要將有差異的部分進(jìn)行分情況討論即可。而因?yàn)槲⑿盘峁┑脑丶^為有限，只提供了基本控件樣式，其他控件就需要自己根據(jù)實(shí)際風(fēng)格去設(shè)計(jì)了。

　　相信大家在了解以上信息之后，能夠更加清楚小程序和app之間的差別，在UI層面上，小程序的界面統(tǒng)一，長(zhǎng)得一副微信的樣子，而app則是千人千面，更加的豐富多彩。