引用
一、概要
本文主要为微信小程序设计指南文章中，视觉规范部分的笔记
微信小程序 设计指南一
二、字体规范
（1）字号大小
微信中字体的使用和所运行的系统字体保持一致，常用字号为20, 18, 17, 16, 14, 13, 11(pt), 使用场景如下：
| 字号 | 使用场景 |
|---|---|
light 40pt |
只能是阿拉伯数字信息， 如金额或者时间等等 |
medium 20pt |
页面大标题，一般用于结果，空状态等信息单一页面 |
regular 18pt |
页面内大按钮字体，和按钮搭配使用 |
regular 17pt |
首页内首要层级信息，基准的，可以是连续的，如列表标题，消息气泡 |
regular 14pt |
页面内 次要描述信息， 服务于首要信息并与之关联，如列表摘要 |
regular 13pt |
页面辅助信息，需要弱化的内容，如链接，小按钮 |
regular 11pt |
如版权信息等不需要用户关注的信息 |
（2）字体颜色
| 颜色 | 使用场景 | 样式 |
|---|---|---|
黑色#000000 （RGB(00, 00, 00) |
主要内容 |
 |
semi 黑色#353535 (RGB(53, 53, 53) |
大段的说明内容而且属于主要内容使用 |
 |
灰色#888888(RGB(136, 136, 136) |
次要内容， |
 |
light灰色 #b2b2b2 (RGB(178, 178, 178)) |
时间戳和表单缺省值为light 灰色 |
 |
蓝色#576b95 (RGB(87, 107, 149) |
链接用色 |
 |
绿色#09bb07(RGB(9, 187, 7) |
完成字样色 |
 |
红色#e64340(RGB(230, 67, 64) |
出错用色 |
 |
蓝色，绿色，红色的按钮 press, disable 状态下分别降低透明度为20%, 10%
三、列表视觉规范
四、表单输入视觉规范
五、按钮使用原则
（1）大按钮使用原则
对当前页面整体的即时操作， 用于鼓励用户操作的按钮，必须有效且满足用户需求 按钮的高度固定是94px（47pt），圆角大小为10px(5pt) 主操作在一个页面中只能出现一次
| 类型 | 参数 | 样式 |
|---|---|---|
主操作按钮 |
18pt, #fff |
 |
页面主操作 press状态 |
18pt, #fff, alpha: 0.6 |
 |
页面主操作 disable状态 |
18pt, #fff, alpha: 0.3 |
 |
辅助操作 |
18pt, #000 |
 |
辅助操作 press状态 |
18pt, #000, alpha: 0.6 |
 |
辅助操作 disable状态 |
18pt, #000, alpha: 0.3 |
 |
警告类操作 |
18pt, #fff |
 |
警告类操作 press状态 |
18pt, #fff, alpha: 0.6 |
 |
警告类操作 disable状态 |
18pt, #fff, alpha: 0.3 |
 |
（2）中按钮使用原则
中按钮操作在页面层级中重要程度不高， 不鼓励用户操作的按钮，或者大按钮的使用会扰乱信息浏览时候，可用中按钮代替 中按钮宽度最小是360px, 180pt 文本两边间距最小为60px ,30pt ,最大不限制，不能够拉伸按钮宽度 按钮高度固定为70px， 35pt，圆角大小固定为8px， 4pt
| 样式一 | 样式二 | 样式三 |
|---|---|---|
 |
 |
 |
（3）小按钮使用原则
仅对页面某项内容的操作，选择，小按钮是可以重复出现的 小按钮宽度最小为120px， 60pt 内距离文字间距最小为30px， 15pt， 不够则拉伸按钮宽度 按钮高度固定为60px， 30pt， 圆角大小固定为6px， 3pt
| 样式一 | 样式二 | 样式三 |
|---|---|---|
 |
 |
 |
（4）其他按钮（失效， 等待）
| 失效按钮 | 等待按钮 |
|---|---|
表明该操作已经失效，按钮上面必须有提示文案 |
操作需要请求服务器，无法马上反馈及时，loading的图标可以出现在按钮上 |
 |
 |
