微信小程式設計規範&經驗分享
最近設計群裡經常有人問起小程式設計規範的問題，雖然官方有提供樣式庫的下載，但是停留在16年版，不是最新的。設計經驗這部分網路上也沒有比較全面的分享，這促使我停下手上計劃，加快輸出本篇文章。正好近期剛結束幾個小程式專案，總結下經驗，並結合微信小程式的官方設計指南，一起分享給大家，希望幫助大家更快速的上手。
作者：孫青Cynthia_Sun
站酷ID：https://anne5300.zcool.com.cn/
隨著2018年小程式的迅猛發展，小程式現已為各大企業廣泛採用，“觸手可及、用完即走”的使用者體驗備受青睞。隨之小程式設計也成為設計師的必備技能，那在進行小程式介面設計時，應該如何快速做設計？過程中又要注意哪些問題呢？接下來是乾貨時間～
內容大綱
- 小程式設計區域
- Nav Bar 設計
- Tool Bar 設計
- Tab Bar 設計
- 啟動頁設計
- 載入樣式
- 沒有App如何設計
- 常用平臺設計網站推薦
小程式設計區域
小程式的“所有頁面”右上角位置，都固定放置了小程式的選單，在設計介面時需預留出該區域空間。
Nav Bar 設計
1、小程式選單固定樣式
微信提供了深淺兩種配色樣式，以便更好的融合到各種風格的頁面中，需注意保持小程式選單清晰的辨識度。
線上案例
2、互動注意事項
如果要在小程式選單附近放置互動元素，要考慮是否有互動衝突，應儘量避免誤觸的可能。
建議開發者設計的自有導航樣式與微信官方小程式選單樣式保持一定差異，以便區分。
如上圖，小紅書的自有導航樣式個人不推崇，理由如下：
1）樣式與官方選單樣式未區分開，容易產生疑惑
2）NavBar欄兩端對稱在頂部，視覺上顯得過於呆板
微信讀書既有微信線條外框的DNA, 又區別於官方樣式，是不錯的綜合。以上僅限個人觀點，還需使用者資料來客觀驗證。
3、搜尋框常見的幾種表現形式
Tool bar 設計
1、小程式設計規範
頂部標籤分頁欄顏色可自定義，一般會沿用App的設計風格，以保證兩個平臺的視覺統一性。
2、常見的幾種表現形式
Tab Bar 設計
1、小程式設計規範
微信有提供小程式的底部標籤樣式，建議標籤數量在2-4個適宜。
也可根據產品需要選擇或者去掉底部標籤欄功能
2、常見的幾種表現形式
啟動頁圖示
啟動頁除品牌Logo外，其他元素都由微信統一提供，且不能更改，設計師需要提供2倍和3倍尺寸的Logo即可。
載入樣式
1、小程式設計規範
全域性載入是小程式名稱左側的載入圖示。模態的載入樣式將覆蓋整個頁面的，由於無法明確告知具體載入的位置或內容將可能引起使用者的焦慮感，建議謹慎使用。
2、常用的載入樣式
需告知使用者具體載入的位置形狀，減輕使用者焦慮情緒。
推薦幾個常用的平臺設計網站
1、BAT各平臺小程式設計規範網站
1）微信小程式設計指南：
https://developers.weixin.qq.com/miniprogram/design/
2）支付寶小程式設計規範：
https://docs.alipay.com/mini/design
3）百度-智慧小程式設計規範：
https://smartprogram.baidu.com/docs/design/overview/introduction/
2、其他常用的設計規範網站
1）蘋果-人機介面指南：詳細介紹了ios設計規範，同時還提供了Ui設計資源下載
https://developer.apple.com/design/human-interface-guidelines/
2）安卓-MD設計指南
https://material.io/design/
3）螞蟻設計：提供移動和Web端的設計組建，還有設計案例和心得的文章供學習
https://design.alipay.com/#ds
4）微信樣式庫：提供微信內的網頁和小程式設計規範
https://weui.io/
小編注：關於設計規範，大家可以從設計導航裡獲得更多，比如 APP 設計規範、平面設計尺寸規範等等。
http://hao.shejidaren.com/