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

為方便設計師進行設計，微信提供一套可供Web設計和小程序使用的基礎控件庫；

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

 

基礎樣式庫預覽地址：https://weui.io

手機微信掃碼預覽更好

 

下載鏈接在文章底部

 

PSD預覽圖

 

sketch文件包預覽圖

 

1. 字體規(guī)范

 

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

 

 

5種字體顏色，每一種顏色都有嚴格的使用場合。

 

 

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

 

 

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

 

 

 

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

 

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

 

4. 按鈕使用原則

 

列表外按鈕上文字標準

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

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

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

 

列表外按鈕上文字標準

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

頁面線性按鈕上文字標準

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

 

5. 圖標使用原則

 

基礎樣式庫預覽地址：https://weui.io

手機微信掃碼預覽更好

 

 

PSD和Sketch源文件及字體包

▼