设计指南二 视觉规范

引用

官方文档

一、概要

本文主要为微信小程序设计指南文章中，视觉规范部分的笔记

微信小程序 设计指南一

二、字体规范

（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的图标可以出现在按钮上