一胳施、設計原則
1溯祸、小程序在設計時應該注意減少無關的設計元素對用戶目標的干擾，清晰的向用戶展示程序提供的服務舞肆，友好的引導用戶進行操作焦辅。
2、明確頁面中的重點椿胯，便于用戶進入頁面后能快速的理解內容筷登，應盡量避免頁面上出現與頁面不相關的內容，如廣告等哩盲。
3前方、頁面流程明確，避免出現用戶目標流程以外的內容打斷用戶操作
4廉油、明確的告知用戶身在何處惠险，又可以往何處去，確保用戶在頁面中游刃有余的穿梭而不迷路
二抒线、導航
1班巩、目的
要告訴用戶，當前在哪兒十兢，可以去哪兒趣竣，如何回去。
2旱物、小程序導航
微信不提供統一的導航欄樣式遥缕，開發(fā)者可根據需要自行設計小程序首頁和次級頁面界面導航，建議在次級頁面左上角提供返回鍵宵呛。
3单匣、官方小程序菜單
小程序的所有頁面，包括小程序內嵌網頁和插件都會放置。
他的位置固定户秤，不能改變
如圖
他的內容不能改變码秉，可以選擇深淺兩種配色
如圖
4、頁面導航
1）標簽分頁（Tab）導航
標簽數量大于等于2個鸡号，小于等于5個转砖，建議數量不超過4個。
一個頁面避免出現一組以上的標簽分頁欄
如圖
2）頂部標簽分頁欄
保持分頁標簽的可用性鲸伴、可視性府蔗、可操作性
如圖
三、加載
1汞窗、啟動頁加載
啟動頁除品牌LOGO展示外姓赤，其他元素，如加載進度指示仲吏，均有微信統一提供不能更改不铆，無需開發(fā)者開發(fā)
如圖
2、頁面下來加載
微信提供標準的頁面下來刷新加載能力和樣式裹唆，無需自行開發(fā)
如圖
3誓斥、頁面內容加載反饋
可自定義頁面內容加載樣式，建議不管是局部還是全局加載品腹，加載樣式應盡可能簡潔岖食。簡單動畫告知用戶加載過程
如圖
4、模態(tài)加載
覆蓋整個頁面舞吭，由于無法明確告知具體加載的位置和內容可能引發(fā)用戶的焦慮感泡垃，因此謹慎使用。除了在否寫全局操作下羡鸥，否則不要使用模態(tài)加載蔑穴。
如圖
5、局部加載反饋
局部加載反饋只在觸發(fā)加載的頁面局部進行反饋惧浴，這樣反饋更加有針對性存和，頁面跳動小，是微信推薦的反饋方式
如圖
6衷旅、全局加載反饋
推薦使用標題欄提示加載小程序頁面內容過程
如圖
7捐腿、加載反饋注意事項
1）若加載時間長，應提供取消操作柿顶，并使用進度條顯示載入的進度
2）載入過程中茄袖，保持動畫效果，無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺
3）不要在同一個頁面同時使用多個加載動畫
四嘁锯、結果反饋
1宪祥、頁面局部操作結果反饋
直接反饋聂薪，如多選按鈕控件，微信設計中心提供控件庫
WeUI組件庫：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
如圖
2蝗羊、頁面全局操作結果—圖標型彈出提示
1.5秒后自動消失藏澳，不打斷流程，對用戶的影響較小
適用于輕量級的成功提示或不需要強調的操作提醒耀找。如翔悠。成功提示，
不適用錯誤提示涯呻。因為錯誤提示需明確告知用戶凉驻，而不適合使用一閃而過的彈出提示
如圖
3、頁面全局操作結果—文字型彈出提示
1.5秒后自動消失复罐，不打斷流程，對用戶的影響較小
適用于輕量化的文字解釋當前狀態(tài)或提醒不嚴重的錯誤
如圖
4雄家、頁面全局操作結果—模態(tài)對話框
適用于用戶明確知曉的操作結果狀態(tài)效诅。
如圖
5、頁面全局操作結果—結果頁
適用于趟济，操作結果已是當前流程的終結情況乱投，可使用操作結果頁來反饋。這種方式明確的告知用戶操作已完成顷编，并根據實際情況給予下一步的操作的指引
如圖：
五戚炫、異常可控媳纬，有路可退
異常場景往往是用戶最為沮喪和需要幫助的時候双肤，因此需要格外注意異常狀態(tài)的設計，在出現異常時需要給予用戶必要的狀態(tài)提示钮惠，并告知解決方案茅糜，使其有路可退。
如：表單報錯
如圖
六素挽、減少輸入
手機鍵盤區(qū)域小且密集蔑赘，輸入困難，容易輸入錯誤预明，因此在設計小程序時盡量減少用戶輸入缩赛。利用現有接口和其他一些易于操作的選擇空間來改善用戶輸入體驗
1、如：在添加銀行卡時撰糠，采用攝像頭識別來幫助用戶輸入
2酥馍、盡量讓用戶做選擇，回憶易于記憶窗慎，讓用戶在有限的選項中做選擇通常來說容易完全靠記憶輸入
七物喷、避免誤操作
手機屏幕分辨率各不相同卤材，因此最適宜點擊像素尺寸也不完全一致，但換算成物理尺寸后大致是在7mm-9mm之間峦失。
在微信提供的標準組件庫中扇丛，各種控件元素均已考慮到了頁面點擊效果以及不同屏幕的適配，因此再次推薦使用或模仿標準控件尺寸進行設計尉辑。
八帆精、利用接口提升性能
微信設計中心已推出了一套網頁標準控件庫，包括?sketch設計控件庫 和?Photoshop設計控件庫隧魄，后續(xù)還將完善小程序組件卓练，這些控件都已充分考慮了移動端頁面的特點，能夠保證其在移動端頁面上的可用性和操作性能购啄；
九襟企、統一穩(wěn)定
注意不同頁面間的統一性和延續(xù)性，在不同的頁面盡量使用一致的控件和交互方式
十狮含、視覺規(guī)范
1顽悼、字體大小
微信內字體的使用與所運行的系統字體保持一致，常用字號為20, 18, 17, 16,14 13, 11(pt)几迄，使用場景具體如下：
2蔚龙、字體顏色
主內容black?黑色，次要內容grey灰色映胁；時間戳與表單缺省值light灰色木羹；大段的說明內容而且屬于主要內容用semi黑
藍色為鏈接用色，綠色為完成字樣色解孙，紅色為出錯用色?Press?與?Disable?狀態(tài)分別降低透明度為20%與10%
3坑填、列表
4、表單輸入
5妆距、按鈕
6穷遂、圖標
微信小程序設計指南
https://developers.weixin.qq.com/miniprogram/design/
