为方便设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;
同时提供方便开发者调用的资源。
基础样式库预览地址:https://weui.io
文末附规范文档PSD和sketch源文件下载。
视觉规范
**1. 字体规范**
常用字号为20,18,17,16,14,13,11(pt),使用场景具体如下:
![](https://box.kancloud.cn/e19d3c1a115541e7382bc382950565d2_937x404.jpg)
微信类字体的使用与所运行的系统字体保持一致,以导航为例,iOS与Android对应字体如下:
导航(iOS和Android)
![](https://box.kancloud.cn/9617777bbcb5cc03271934180fb8120c_937x404.jpg)
字体颜色
![](https://box.kancloud.cn/246ebd23ab5d4eaeb80eddc3b100ea6a_937x405.jpg)
主内容Black黑色,次要内容Grey灰色;时间戳与表单缺省值Light灰色;大段的说明内容而且属于主要内容用Semi黑;
![](https://box.kancloud.cn/c742d57855b89eaffc565d38f7181ae8_937x404.jpg)
蓝色为链接用色,绿色为完成字样颜色,红色为出错用色Press与Disable状态分别降低透明度为20%与10%;
![](https://box.kancloud.cn/ec50001cce4cc02c1abf618564a9150b_937x405.jpg)
**2. 列表视觉规范**
![](https://box.kancloud.cn/ecb25f01e79a61685c4846dcd8bb9d16_937x405.jpg)
**3. 表单输入视觉规范**
![](https://box.kancloud.cn/70259522ae70e7ea561981771fd1ee49_937x405.jpg)
**4. 按钮使用原则**
列表外按钮上文字标准
按钮高度为44px下使用:颜色#000000 / #353535 字号18pt
可点状态下文字调整透明度为60%
不可点状态下文字调整透明度为30%
![](https://box.kancloud.cn/159c011f6be0fab9ccbfb8f475f98a90_916x397.jpg)
列表外按钮上文字标准
按钮高度为25px下使用:颜色#000000 / #353535 字号14pt
页面线性按钮上文字标准
按钮高度为35px下使用:颜色#09BB07 / #353535 字号16pt
![](https://box.kancloud.cn/4fefdcd2038bd43f637903dd0c2075d7_937x405.jpg)
**5. 图标使用原则**
![](https://box.kancloud.cn/c4ab949525d21b39f7b49a5c0e59b3ce_937x404.jpg)
规范文档PSD和sketch源文件已上传至百度网盘,下载地址:
https://pan.baidu.com/s/1hrGlDoK
- 前言
- 前端开发规范
- 基本规范
- 小程序设计规范(官方)文档
- 微信小程序css篇
- 微信小程序css篇----字体
- 微信小程序css篇----颜色
- 微信小程序css篇----边框
- 微信小程序css篇----边距
- 微信小程序css篇----尺寸
- 微信小程序css篇----布局
- 微信小程序css篇----定位
- 微信小程序css篇----属性
- 微信小程序css篇----flex模型
- 微信小程序css篇---文本溢出
- 微信小程序js篇
- 微信小程序js篇----变量
- 微信小程序js篇----方法
- 微信小程序js篇----对象
- 微信小程序js篇----属性
- 微信小程序js篇----语句
- 微信小程序js篇----类型
- 微信小程序js篇----事件
- 微信小程序js篇----构造器
- 微信小程序js篇----逻辑
- 微信小程序逻辑层
- 微信小程序视图层
- 微信小程序组件
- 微信小程序api
- 后端开发规范
- 基本规范
- 通用程序规范
- 控制器规范
- 模型层规范
- 逻辑层规范
- 视图层规范
- 接口开发规范
- 数据库设计规范
- 开发规范
- 安全规范
- 包含文件
- 命名规则
- 存放规则
- 安全规则
- 编码规范
- 命名规范
- 变量命名
- 类命名
- 方法或函数