微信小程序官方設(shè)計(jì)規(guī)范（附PSD+Sketch源文件）
- 來源：
- 秋秋
- 時(shí)間：
- 2017-09-11 10:10:10
- 閱讀：
- 9176
為方便設(shè)計(jì)師進(jìn)行設(shè)計(jì)，微信提供一套可供Web設(shè)計(jì)和小程序使用的基礎(chǔ)控件庫；
同時(shí)提供方便開發(fā)者調(diào)用的資源。
基礎(chǔ)樣式庫預(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)，使用場景具體如下：
5種字體顏色，每一種顏色都有嚴(yán)格的使用場合。
主內(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
頁面線性按鈕上文字標(biāo)準(zhǔn)
按鈕高度為35px下使用: 顏色 ＃09BB07 / ＃353535 字號(hào) 16pt
5. 圖標(biāo)使用原則
基礎(chǔ)樣式庫預(yù)覽地址：https://weui.io
手機(jī)微信掃碼預(yù)覽更好
PSD和Sketch源文件及字體包
▼
