微信小程序設(shè)計(jì)規(guī)范（5） 視覺規(guī)范

五、視覺規(guī)范

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

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

1. 字體規(guī)范

常用字號(hào)為20，18，17，16，14，13，11（pt），使用場(chǎng)景具體如下：

微信類字體的使用與所運(yùn)行的系統(tǒng)字體保持一致，以導(dǎo)航為例，iOS與Android對(duì)應(yīng)字體如下：

導(dǎo)航（iOS和Android）

字體顏色

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

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

2. 列表視覺規(guī)范

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

4. 按鈕使用原則

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

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

• 可點(diǎn)狀態(tài)下文字調(diào)整透明度為60%
• 不可點(diǎn)狀態(tài)下文字調(diào)整透明度為30%

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

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

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

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

5. 圖標(biāo)使用原則