传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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

111.jpg

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

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

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

视觉规范
1. 字体规范

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

333.jpg

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

导航(iOS和Android)

444.jpg

字体颜色

555.jpg



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


         666.jpg    

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



         777.jpg

2. 列表视觉规范
888.jpg



 3. 表单输入视觉规范
999.jpg



4. 按钮使用原则

列表外按钮上文字标准

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

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

11.jpg

列表外按钮上文字标准

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

页面线性按钮上文字标准

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

12.jpg

5. 图标使用原则
13.jpg



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





分享至 : QQ空间
收藏

17 个回复

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

谢谢哈谢谢哈
回复 使用道具 举报
支持支持!!!!
回复 使用道具 举报
回复 使用道具 举报
学习一下!!~
回复 使用道具 举报
学习一下~!
回复 使用道具 举报
学习一下哈
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /5 下一条