微信小程式設計規範(5) 視覺規範
五、視覺規範
為方便設計師進行設計,微信提供一套可供Web設計和小程式使用的基礎控制項庫;同時方便開發者呼叫。
預覽網址:https://weui.io
#1. 字體規格
常用字號為20,18,17, 16,14,13,11(pt),使用場景具體如下:
#微信類別字體的使用與所運行的系統字體保持一致,以導航為例, iOS與Android對應字體如下:
導覽(iOS和Android)
字體顏色
主內容Black黑色,次要內容Grey灰色;時間戳與表單缺省值Light灰色;大段的說明內容而且屬於主要內容用Semi黑;
藍色為連結用色,綠色為完成字樣顏色,紅色為出錯用色Press與Disable狀態分別降低透明度為20%與10%;
#2. 清單視覺規格
3. 表單輸入視覺規格
4. 按鈕使用原則
列表外按鈕上文字標準
#按鈕高度為44px下使用:顏色#000000 / #353535 字號18pt
- 可點狀態下文字調整透明度為60%
- 不可點狀態下文字調整透明度為30%
清單外按鈕上文字標準
按鈕高度為25px下使用:顏色#000000 / #353535 字號14pt
頁面線性按鈕上文字標準
按鈕高度為35px下使用:顏色#09BB07 / #353535 字號16pt