微信小程序設計指南 · 小程序(下)

2016-9-27    資深UI設計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里 

視覺規(guī)范

為方便設計師進行設計,微信提供一套可供Web設計和小程序使用的基礎(chǔ)控件庫;同時提供方便開發(fā)者調(diào)用的資源。

預覽地址:https://weui.io

字體規(guī)范

微信內(nèi)字體的使用與所運行的系統(tǒng)字體保持一致,常用字號為20, 18, 17, 16,14 13, 11(pt),使用場景具體如下:

微信小程序設計指南 · 小程序-IAMUE-交互設計學堂

字體顏色

微信小程序設計指南 · 小程序-IAMUE-交互設計學堂

主內(nèi)容 Black 黑色,次要內(nèi)容 Grey 灰色;時間戳與表單缺省值 Light 灰色;大段的說明內(nèi)容而且屬于主要內(nèi)容用 Semi 黑;

微信小程序設計指南 · 小程序-IAMUE-交互設計學堂

藍色為鏈接用色,綠色為完成字樣色,紅色為出錯用色 Press與 Disable狀態(tài)分別降低透明度為20%與10%;

微信小程序設計指南 · 小程序-IAMUE-交互設計學堂

列表視覺規(guī)范

微信小程序設計指南 · 小程序-IAMUE-交互設計學堂

表單輸入視覺規(guī)范

微信小程序設計指南 · 小程序-IAMUE-交互設計學堂

按鈕使用原則

列表外按鈕上文字標準

按鈕高度為44px下使用: 顏色 #000000 / #353535 字號 18pt

  • 可點狀態(tài)下文字調(diào)整透明度為60%
  • 不可點狀態(tài)下文字調(diào)整透明度為30%微信小程序設計指南 · 小程序-IAMUE-交互設計學堂

列表外按鈕上文字標準

按鈕高度為25px下使用: 顏色 #000000 / #353535 字號 14pt

頁面線性按鈕上文字標準

按鈕高度為35px下使用: 顏色 #09BB07 / #353535 字號 16pt

圖標使用原則

微信小程序設計指南 · 小程序-IAMUE-交互設計學堂

微信小程序設計指南 · 小程序-IAMUE-交互設計學堂

藍藍設計m.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計 、 包裝設計  圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務 

日歷

鏈接

個人資料

藍藍設計的小編 http://m.bouu.cn

存檔