正所謂無規(guī)矩不成方圓，凡是都有一定的規(guī)則，微信小程序也不例外，今天小編就來與大家分享一下“微信小程序在設(shè)計(jì)的時(shí)候需要遵循哪些規(guī)則?”的有關(guān)內(nèi)容，希望對(duì)大家有所幫助。

1、頁面設(shè)計(jì)需要考慮除微信導(dǎo)航以外其它導(dǎo)航頁面的設(shè)計(jì)，遵循“導(dǎo)航明確，來去自如”，也就是能讓客戶知道，當(dāng)前在哪，可以去哪，如何回去等問題。

2、頁面設(shè)計(jì)需要遵循重點(diǎn)突出，并且不能出現(xiàn)與業(yè)務(wù)無關(guān)的業(yè)務(wù)入口，正反舉例：

錯(cuò)誤示例

以上頁面主題是查詢，但查詢按鈕下面卻出現(xiàn)“今日熱點(diǎn)|頭條新聞”的無關(guān)內(nèi)容

正確示例

以上頁面查詢按鈕下面顯示的是最新搜索過的關(guān)鍵詞，與頁面主題匹配

3、頁面設(shè)計(jì)無需考慮微信一級(jí)菜單的導(dǎo)航，微信系統(tǒng)內(nèi)的所有小程序均會(huì)自帶有微信提供的導(dǎo)航欄

標(biāo)準(zhǔn)導(dǎo)航圖

4、微信導(dǎo)航欄自定義顏色規(guī)則，開發(fā)者如果需要自設(shè)導(dǎo)航需要與官方定義的顏色和諧搭配

官方定義導(dǎo)航顏色

5、小程序首頁可選擇微信提供的原生底部標(biāo)簽分頁樣式，該樣式僅供小程序首頁使用。初期的頁面內(nèi)導(dǎo)航設(shè)計(jì)盡可能利用微信自帶導(dǎo)航Tab，添加自有導(dǎo)航可以添加標(biāo)簽分頁(Tab)導(dǎo)航，標(biāo)簽數(shù)量不得少于2個(gè)，最多不得超過5個(gè)，為確保點(diǎn)擊區(qū)域，建議標(biāo)簽數(shù)量不超過4項(xiàng)。

小程序標(biāo)準(zhǔn)導(dǎo)航樣式

6、小程序已經(jīng)明確定義了標(biāo)準(zhǔn)的啟動(dòng)頁面和頁面下拉刷新加載樣式，無需開發(fā)者設(shè)計(jì)，啟動(dòng)頁面只能上傳品牌LOGO且不能更改。

小程序啟動(dòng)頁標(biāo)準(zhǔn)樣式

下拉加載頁標(biāo)準(zhǔn)樣式

7、小程序頁面的加載反饋和結(jié)果反饋應(yīng)提供載入進(jìn)度和結(jié)果提示，并且每個(gè)頁面都要有明確的指引操作和退出提示。

加載頁必須有加載提示如右邊圖

結(jié)果反饋必須有明確提示如：已發(fā)送

8、小程序頁面設(shè)計(jì)需要遵循“減少輸入，巧用接口，多用選擇”的原則，最大限度的優(yōu)化用戶體驗(yàn)，減少或避免不必要的鍵盤輸入。

搜索內(nèi)容建議設(shè)計(jì)成按鈕選擇而不是讓用戶手工輸入

持卡人和卡號(hào)不建議讓用戶直接輸入而是調(diào)用接口讓用戶選擇

9、小程序頁面的字體盡量與用戶所運(yùn)行的系統(tǒng)字體保持一致，常用字號(hào)為20, 18, 17, 16,14 13, 10(pt)，字體顏色主內(nèi)容 Black 黑色，次要內(nèi)容 Grey 灰色;時(shí)間戳與表單缺省值 Light 灰色;大段的說明內(nèi)容而且屬于主要內(nèi)容用 Semi 黑;藍(lán)色為鏈接用色，綠色為完成字樣色，紅色為出錯(cuò)用色 Press與 Disable狀態(tài)分別降低透明度為20%與10%

字體規(guī)范

字體顏色

主內(nèi)容 Black 黑色，次內(nèi)容 Grey 灰色;時(shí)間戳與表單缺省值 Light 灰色;大段說明內(nèi)容用 Semi 黑;

藍(lán)色為鏈接用色，綠色為完成字樣色，紅色為出錯(cuò)用色

10、小程序頁面同樣明確定義了列表視覺規(guī)范、表單輸入視覺規(guī)范、按鈕使用原則、圖標(biāo)使用原則等詳細(xì)的規(guī)范。

以上僅為筆者為大家整理出來的小程序設(shè)計(jì)最值得重視的諸多要點(diǎn)，如果您對(duì)小程序設(shè)計(jì)比較關(guān)注，請(qǐng)持續(xù)關(guān)注呆盟說后續(xù)推出的對(duì)《小程序設(shè)計(jì)指南》更專業(yè)的解讀文章。

以上就是關(guān)于“微信小程序在設(shè)計(jì)的時(shí)候需要遵循哪些規(guī)則?”的有關(guān)內(nèi)容，希望對(duì)大家有所幫助，如果您還想了解更多的內(nèi)容，可以關(guān)注本站，以便您獲取相關(guān)的資訊。