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

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

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

視覺(jué)規(guī)范

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

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

字體規(guī)范

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

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

字體顏色

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

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

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

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

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

列表視覺(jué)規(guī)范

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

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

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

按鈕使用原則

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

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

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

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

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

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

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

圖標(biāo)使用原則

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

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

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

日歷

鏈接

個(gè)人資料

存檔