A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的,旨在微信生态类建立有号、高效、一致的用户体验的同时,最大程度顺应和支持各业务需求设计,实现用户与程序的共赢。
【文末有规范文档免费下载】


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

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

文末附规范文档PSD和sketch源文件下载。

视觉规范
1. 字体规范

常用字号为20,18,17,16,14,13,11(pt),使用场景具体如下:

微信类字体的使用与所运行的系统字体保持一致,以导航为例,iOS与Android对应字体如下:

导航(iOS和Android)

字体颜色



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



规范文档PSD和sketch源文件已上传至百度网盘,下载地址:http://pan.baidu.com/s/1bpwurk7
                                                                  密码:
游客,如果您要查看本帖隐藏内容请回复
(密码回复可见





19 个回复

倒序浏览
谢谢哈谢谢哈
回复 使用道具 举报
谢谢哈谢谢哈
回复 使用道具 举报
感谢楼主分享
回复 使用道具 举报
很有用的资料
回复 使用道具 举报
谢谢楼主
回复 使用道具 举报
很有用的资料
回复 使用道具 举报
谢谢分享!!!
回复 使用道具 举报
耶耶耶耶耶耶耶耶耶耶
回复 使用道具 举报
感谢分享!!!
回复 使用道具 举报
厉害!!!!!!!!!!!!!
回复 使用道具 举报
CAPPUCCINO6 来自手机 初级黑马 2018-5-23 17:05:44
12#
66666666666666
回复 使用道具 举报

谢谢哈谢谢哈
回复 使用道具 举报
支持支持!!!!
回复 使用道具 举报
回复 使用道具 举报
学习一下!!~
回复 使用道具 举报
学习一下~!
回复 使用道具 举报
学习一下哈
回复 使用道具 举报
需要学习新知识
回复 使用道具 举报
我爱播妞
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 加入黑马