起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識小程序規范怎么設計？干貨整理看這里
編輯導讀：小程序以它輕量的運營和技術難度，承載了絕大多數基礎功能，深受商家喜愛。在小程序運用越來越廣泛的今天，它的規范要如何設計呢？本文作者對此進行了分析，希望對你有幫助。
近期工作上有遇到關于微信小程序規范優化的事情，在完成整個規范優化后，感覺有一些要點還是非常適合產品同學，于是就快速整理了一下。
首先，這篇小程序規范比較適合產品崗，一些設計上的規范我覺得沒有必要去闡述，更多的是產品設計以及保證用戶體驗的案例。話不多說，上干貨。
一、加載樣式
1. 全局加載
針對全局頁面加載，微信提供官方的加載樣式，針對安卓和ios會有相應的適配樣式。
全局加載還有一種常見的模態加載樣式，但由于無法明確告知用戶進度，一般建議謹慎使用。
看完上述兩種加載方式，我們需要注意同一個頁面切勿存在多個加載動畫，會給用戶造成一定的迷惑性。
2. 關于加載的優化方案
針對優先級較高的頁面，我們通常更希望減少用戶的等待時長，因此在一些首頁或重要頁面，我們會對其進行優化。
- 靜態模塊優先展示
- 數據加載優先展示緩存數據，沒緩存展示0，異步更新后顯示
- 動態區域用占位圖，需考慮動態區域的內容是否大多數場景下展示
以上三點，稍微解釋下。通常一個頁面都會有靜態模塊，這部分內容可以優先展示，不需要加載時間；第二點主要是頁面內數據的加載形式；第三點中的占位圖好理解，但我們用占位圖時需要考慮動態區域是否有為空的情況，如果動態區域加載后為空，實際的效果相當于先告知用戶此處有加載內容，加載完成該模塊又沒有任務信息，這種設計也是不可取的。
3. 局部加載
局部加載很好理解，通常一些tab分類固定的列表頁，我們會針對局部區域給予加載提示。而且不光是頁面的加載，一些操作流程上的頁面，我們也可以用按鈕的局部加載樣式給予提示。
二、頁面轉場
頁面轉場場景下，基本會有動效和無動效兩種形式。無動效基本就是頁面間的跳轉，動效場景，基本也是進入切出的樣式。
針對小程序跳轉webview的頁面，微信有固定的進度條樣式，無需進行開發。
為了便捷設計，我們有時候會有頁面跳轉頁面的設計，針對跳轉到導航頁，一般不建議這樣設計。常規的用戶使用習慣都是右滑返回，如果跳轉導航頁右滑則會出現直接退出小程序的情況。
三、熱區點擊
微信規范文檔中有特意介紹熱區設計，為了避免一些點擊誤操作，我們通常需要設計合理的熱區面積，既不要過小也不要過于密集。
常規需要注意的熱區一般就是帶文字的icon以及表單頁，避免不規范的熱區設計。
四、異常情況
常規的異常處理，大多數產品應該比較熟悉。類似于缺省頁面提示規范一致，異常頁面不是死胡同等等，在此特別介紹下表單的報錯形式。
針對異常表單的報錯，微信官方其實有推薦的樣式。頂不告知報錯原因同時標識錯誤信息。
之所以單獨把這個樣式拿出來，是因為日常工作中看到太多同學設計的樣式，導致報錯樣式五花八門。
五、常規要點
除了以上這些設計規范要點，微信官方有自己的一套設計口訣。
友好禮貌-重點突出；流程明確；
清晰明確-導航明確，來去自如；減少等待，反饋及時；異常可控，有路可退；
便捷優雅-減少輸入；避免誤操作；利用接口提高性能；
統一穩定
以上這些點基本是比較常規的，需要我們增加敏感度去感知我們的產品所缺失的體驗。看幾個案例就能更清晰的感知：
上述這種頁面基本就是沒有明確的意圖，同時在用戶的流程上增加了過多的干擾。
第二種比較常見的就是一些分享、轉發的操作，我們通常會忽略操作完成后的提示，這種其實就屬于沒有反饋及時。
除了以上這些，再給大家推薦一些常規的設計規范，希望可以給你帶來幫助。
1.微信小程序設計指南
https://developers.weixin.qq.com/miniprogram/design/
2.支付寶小程序設計規范
https://docs.alipay.com/mini/design
3.螞蟻設計
https://design.alipay.com/#ds
作者：紅塵；公眾號：都市擺渡人
本文由 @都市擺渡人 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
- 目前還沒評論，等你發揮！
