引用
一荣病、概要
本文主要為微信小程序設(shè)計指南文章中码撰，視覺規(guī)范部分的筆記
微信小程序 設(shè)計指南一
二、字體規(guī)范
（1）字號大小
微信中字體的使用和所運(yùn)行的系統(tǒng)字體保持一致个盆，常用字號為20, 18, 17, 16, 14, 13, 11(pt), 使用場景如下：
| 字號 | 使用場景 |
|---|---|
light 40pt |
只能是阿拉伯?dāng)?shù)字信息， 如金額或者時間等等 |
medium 20pt |
頁面大標(biāo)題朵栖，一般用于結(jié)果颊亮，空狀態(tài)等信息單一頁面 |
regular 18pt |
頁面內(nèi)大按鈕字體，和按鈕搭配使用 |
regular 17pt |
首頁內(nèi)首要層級信息陨溅，基準(zhǔn)的终惑，可以是連續(xù)的，如列表標(biāo)題门扇，消息氣泡 |
regular 14pt |
頁面內(nèi) 次要描述信息雹有， 服務(wù)于首要信息并與之關(guān)聯(lián)，如列表摘要 |
regular 13pt |
頁面輔助信息臼寄，需要弱化的內(nèi)容霸奕，如鏈接，小按鈕 |
regular 11pt |
如版權(quán)信息等不需要用戶關(guān)注的信息 |
（2）字體顏色
| 顏色 | 使用場景 | 樣式 |
|---|---|---|
黑色#000000 （RGB(00, 00, 00) |
主要內(nèi)容 |
 |
semi 黑色#353535 (RGB(53, 53, 53) |
大段的說明內(nèi)容而且屬于主要內(nèi)容使用 |
 |
灰色#888888(RGB(136, 136, 136) |
次要內(nèi)容吉拳， |
 |
light灰色 #b2b2b2 (RGB(178, 178, 178)) |
時間戳和表單缺省值為light 灰色 |
 |
藍(lán)色#576b95 (RGB(87, 107, 149) |
鏈接用色 |
 |
綠色#09bb07(RGB(9, 187, 7) |
完成字樣色 |
 |
紅色#e64340(RGB(230, 67, 64) |
出錯用色 |
 |
藍(lán)色质帅，綠色，紅色的按鈕 press, disable 狀態(tài)下分別降低透明度為20%, 10%
三留攒、列表視覺規(guī)范
四煤惩、表單輸入視覺規(guī)范
五、按鈕使用原則
（1）大按鈕使用原則
對當(dāng)前頁面整體的即時操作炼邀， 用于鼓勵用戶操作的按鈕魄揉，必須有效且滿足用戶需求 按鈕的高度固定是94px（47pt），圓角大小為10px(5pt) 主操作在一個頁面中只能出現(xiàn)一次
| 類型 | 參數(shù) | 樣式 |
|---|---|---|
主操作按鈕 |
18pt, #fff |
 |
頁面主操作 press狀態(tài) |
18pt, #fff, alpha: 0.6 |
 |
頁面主操作 disable狀態(tài) |
18pt, #fff, alpha: 0.3 |
 |
輔助操作 |
18pt, #000 |
 |
輔助操作 press狀態(tài) |
18pt, #000, alpha: 0.6 |
 |
輔助操作 disable狀態(tài) |
18pt, #000, alpha: 0.3 |
 |
警告類操作 |
18pt, #fff |
 |
警告類操作 press狀態(tài) |
18pt, #fff, alpha: 0.6 |
 |
警告類操作 disable狀態(tài) |
18pt, #fff, alpha: 0.3 |
 |
（2）中按鈕使用原則
中按鈕操作在頁面層級中重要程度不高拭宁， 不鼓勵用戶操作的按鈕洛退，或者大按鈕的使用會擾亂信息瀏覽時候票彪，可用中按鈕代替 中按鈕寬度最小是360px, 180pt 文本兩邊間距最小為60px ,30pt ,最大不限制，不能夠拉伸按鈕寬度 按鈕高度固定為70px不狮， 35pt降铸，圓角大小固定為8px， 4pt
| 樣式一 | 樣式二 | 樣式三 |
|---|---|---|
 |
 |
 |
（3）小按鈕使用原則
僅對頁面某項內(nèi)容的操作摇零，選擇推掸，小按鈕是可以重復(fù)出現(xiàn)的 小按鈕寬度最小為120px， 60pt 內(nèi)距離文字間距最小為30px驻仅， 15pt谅畅， 不夠則拉伸按鈕寬度 按鈕高度固定為60px， 30pt噪服， 圓角大小固定為6px毡泻， 3pt
| 樣式一 | 樣式二 | 樣式三 |
|---|---|---|
 |
 |
 |
（4）其他按鈕（失效， 等待）
| 失效按鈕 | 等待按鈕 |
|---|---|
表明該操作已經(jīng)失效粘优，按鈕上面必須有提示文案 |
操作需要請求服務(wù)器仇味，無法馬上反饋及時，loading的圖標(biāo)可以出現(xiàn)在按鈕上 |
 |
 |
