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

2016-9-27    資深UI設(shè)計者

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

視覺規(guī)范

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

預(yù)覽地址:https://weui.io

字體規(guī)范

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

微信小程序設(shè)計指南 · 小程序-IAMUE-交互設(shè)計學(xué)堂

字體顏色

微信小程序設(shè)計指南 · 小程序-IAMUE-交互設(shè)計學(xué)堂

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

微信小程序設(shè)計指南 · 小程序-IAMUE-交互設(shè)計學(xué)堂

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

微信小程序設(shè)計指南 · 小程序-IAMUE-交互設(shè)計學(xué)堂

列表視覺規(guī)范

微信小程序設(shè)計指南 · 小程序-IAMUE-交互設(shè)計學(xué)堂

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

微信小程序設(shè)計指南 · 小程序-IAMUE-交互設(shè)計學(xué)堂

按鈕使用原則

列表外按鈕上文字標(biāo)準(zhǔn)

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

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

列表外按鈕上文字標(biāo)準(zhǔn)

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

頁面線性按鈕上文字標(biāo)準(zhǔn)

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

圖標(biāo)使用原則

微信小程序設(shè)計指南 · 小程序-IAMUE-交互設(shè)計學(xué)堂

微信小程序設(shè)計指南 · 小程序-IAMUE-交互設(shè)計學(xué)堂

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

分享本文至:

日歷

鏈接

個人資料

存檔