微信小程序官方设计规范(附PSD+Sketch源文件)

来源:
秋秋
时间:
2017-09-11 10:10:10
阅读:
4115

为方便设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;

同时提供方便开发者调用的资源。

 

基础样式库预览地址:https://weui.io

手机微信扫码预览更好

 

下载链接在文章底部

 

PSD预览图

 

sketch文件包预览图

 

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. 图标使用原则

 

基础样式库预览地址:https://weui.io

手机微信扫码预览更好

 

 

PSD和Sketch源文件及字体包

 

 



转载请注明:优波设计


扫描二维码可分享给好友