2019-5-14 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近設計群里經常有人問起小程序設計規范的問題，雖然官方有提供樣式庫的下載，但是停留在 16 年版，不是的。而設計經驗這部分網絡上也沒有比較全面的分享，這促使我停下手上的計劃，加快輸出本篇文章。正好近期剛結束幾個小程序項目，總結下經驗，并結合微信小程序的官方設計指南，一起分享給大家，希望幫助大家更快速地上手。
隨著 2018 年小程序的迅猛發展，小程序現已被各大企業廣泛采用，「觸手可及、用完即走」的用戶體驗備受青睞，隨之小程序設計也成為設計師的必備技能，那在進行小程序界面設計時，應該如何快速做設計？過程中又要注意哪些問題呢？
對于已經開發了 App 的產品，在進行小程序設計時需遵守小程序的規范，同時要保持小程序界面設計與 App 的風格統一性。
小程序的「所有頁面」右上角位置，都固定放置了小程序的菜單，在設計界面時需預留出該區域空間。
1. 小程序菜單固定樣式
微信提供了深淺兩種配色樣式，以便更好地融合到各種風格的頁面中，需注意保持小程序菜單清晰的辨識度。
線上案例：
2. 交互注意事項
如果要在小程序菜單附近放置交互元素，要考慮是否有交互沖突，應盡量避免誤觸的可能。
建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異，以便區分。
如上圖，小紅書的自有導航樣式個人不推崇，理由如下：
微信讀書既有微信線條外框的 DNA，又區別于官方樣式，是不錯的綜合。以上僅限個人觀點，還需用戶數據來客觀驗證。
3. 搜索框常見的幾種表現形式
1. 小程序設計規范
頂部標簽分頁欄顏色可自定義，一般會沿用 App 的設計風格，以保證兩個平臺的視覺統一性。
2. 常見的幾種表現形式
1. 小程序設計規范
微信有提供小程序的底部標簽樣式，建議標簽數量在 2-4 個適宜。
也可根據產品需要選擇或者去掉底部標簽欄功能。
2. 常見的幾種表現形式
啟動頁除品牌 Logo 外，其他元素都由微信統一提供，且不能更改，設計師僅需提供 2 倍和 3 倍尺寸的 Logo 即可。
1. 小程序設計規范
全局加載是小程序名稱左側的加載圖標。模態的加載樣式將覆蓋整個頁面，由于無法明確告知具體加載的位置或內容，可能會引起用戶的焦慮感，建議謹慎使用。
2. 常用的加載樣式
需告知用戶具體加載的位置形狀，減輕用戶焦慮情緒。
對于沒有開發App來說，可依據官方推出的《微信小程序設計指南》來設計，以確保快速設計出符合規范的小程序。
小程序設計應遵循友好、、一致的設計原則，每個頁面都應有明確的重點，清晰明確地告知用戶身在何處，又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路。
最后，推薦幾個常用的平臺設計網站。
1. BAT各平臺小程序設計規范網站
微信小程序設計指南：https://developers.weixin.qq.com/miniprogram/design/
支付寶小程序設計規范：https://docs.alipay.com/mini/design
百度-智能小程序設計規范：
https://smartprogram.baidu.com/docs/design/overview/introduction/
2. 其他常用的設計規范網站
蘋果-人機界面指南：https://developer.apple.com/design/human-interface-guidelines/
詳細介紹了 iOS 設計規范，同時還提供了 UI 設計資源下載。
安卓-MD設計指南：https://material.io/design/
螞蟻設計：https://design.alipay.com/#ds
提供移動和 Web 端的設計組件，還有設計案例和心得的文章供學習。
微信樣式庫：https://weui.io/
提供微信內的網頁和小程序設計規范。
藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。