小程序模板元件(小程序如何进行模块操作)

（点击上方公号，可快速关注）

　　转自：BAT（ID：batfun）

　　为方便设计师进行设计，微信提供一套可供Web设计和小程序使用的基础控件库；同时提供方便开发者调用的资源。

　　下面是图片来的，真正的下载链接在文章中间。

　　PSD预览图

　　sketch文件包预览图

　　PSD和sketch源文件及字体包B哥已经上传至百度网盘，下载地址：

　　https://pan.baidu.com/s/1nvRgXuh

　　或者长按二维码：

　　1. 字体规范

　　微信内字体的使用与所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)，使用场景具体如下：

　　5种字体颜色，每一种颜色都有严格的使用场合。

　　主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑；

　　蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press与 Disable状态分别降低透明度为20%与10%；

　　2. 列表视觉规范

　　3. 表单输入视觉规范

　　4. 按钮使用原则

　　列表外按钮上文字标准

　　按钮高度为44px下使用: 颜色 ＃000000 / ＃353535 字号 18pt

　　可点状态下文字调整透明度为60%

　　不可点状态下文字调整透明度为30%

　　列表外按钮上文字标准

　　按钮高度为25px下使用: 颜色 ＃000000 / ＃353535 字号 14pt

　　页面线性按钮上文字标准

　　按钮高度为35px下使用: 颜色 ＃09BB07 / ＃353535 字号 16pt

　　5. 图标使用原则

关注『UI设计达人』

看更多精选 UI 设计文章

↓↓↓