黑马程序员技术交流社区

标题: ＃UI进阶＃官方微信小程序设计宝典来咯～ [打印本页]
作者: 小染-柒柒    时间: 2016-10-14 15:04
标题: ＃UI进阶＃官方微信小程序设计宝典来咯～
微信小程序设计的基本原则是微信设计中心针对在微信类上线的小程序页面总结的设计指南及建议。以下设计原则都是基于对用户的尊重的基础上的，旨在微信生态类建立有号、高效、一致的用户体验的同时，最大程度顺应和支持各业务需求设计，实现用户与程序的共赢。
【文末有规范文档免费下载】


为方便设计师进行设计，微信提供一套可供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
                                                                  密码：
（密码回复可见）




精华推荐：
＃UI素材、源文件＃最新iPhone7展示模型
＃UI进阶＃如何在Axure中，用动态面板实现banner的轮播效果
＃UI全能进阶＃html＋css快速入门自学－151节课－一周Hold住最简单的IT语言（四）


作者: 上天保佑    时间: 2017-3-24 09:38
谢谢哈谢谢哈
作者: 123hl    时间: 2017-7-26 22:40
谢谢哈谢谢哈
作者: maochenyang    时间: 2017-8-1 16:12
感谢楼主分享
作者: akea47    时间: 2017-11-14 00:12
很有用的资料
作者: 人在IT    时间: 2017-12-8 14:29
谢谢楼主
作者: Ev你微笑时好美    时间: 2018-1-16 19:56
很有用的资料
作者: vicmiao    时间: 2018-3-8 15:21
谢谢分享！！！
作者: 草根达人    时间: 2018-3-8 16:50
耶耶耶耶耶耶耶耶耶耶
作者: dyibian    时间: 2018-4-2 14:32
感谢分享！！！
作者: ASD4141023    时间: 2018-4-24 17:25
厉害！！！！！！！！！！！！！
作者: CAPPUCCINO6    时间: 2018-5-23 17:05
66666666666666
作者: 无香1998    时间: 2018-6-6 21:21

谢谢哈谢谢哈
作者: fly8220136    时间: 2018-7-5 10:20
支持支持！！！！
作者: banyan    时间: 2018-8-13 17:47
学习学习
作者: 番茄炒鸡蛋    时间: 2018-8-13 21:38
学习一下！！~
作者: 番茄炒鸡蛋    时间: 2018-8-13 21:39
学习一下~！
作者: 陶乐乐    时间: 2018-8-14 11:22
学习一下哈
作者: Meiji    时间: 2020-2-5 00:51
需要学习新知识
作者: 恋清商    时间: 2020-4-16 17:12
我爱播妞



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2