微信小程序官方設(shè)計(jì)規(guī)范（附PSD+Sketch源文件）

為方便設(shè)計(jì)師進(jìn)行設(shè)計(jì)，微信提供一套可供Web設(shè)計(jì)和小程序使用的基礎(chǔ)控件庫(kù)；

同時(shí)提供方便開(kāi)發(fā)者調(diào)用的資源。

 

基礎(chǔ)樣式庫(kù)預(yù)覽地址：https://weui.io

手機(jī)微信掃碼預(yù)覽更好

 

下載鏈接在文章底部

 

PSD預(yù)覽圖

 

sketch文件包預(yù)覽圖

 

1. 字體規(guī)范

 

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

 

 

5種字體顏色，每一種顏色都有嚴(yán)格的使用場(chǎng)合。

 

 

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

 

 

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

 

 

 

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

 

3. 表單輸入視覺(jué)規(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)使用原則

 

基礎(chǔ)樣式庫(kù)預(yù)覽地址：https://weui.io

手機(jī)微信掃碼預(yù)覽更好

 

 

PSD和Sketch源文件及字體包

▼