哪些内容可以随便设计,哪些内容是要按照规范设计的。
导航栏
![](https://img.haomeiwen.com/i4055792/6905efedc5c35666.png)
除右上角的俩按钮,没有统一样式。
这俩按钮有深、浅两种颜色可选。
左上角返回上一级页面按钮。
小程序有原生控件库,底部标签可以使用原生的控件库。
顶部标签分页栏可以自定义颜色。
加载
![](https://img.haomeiwen.com/i4055792/9d9a10cbd35bfaaa.png)
↑ 启动页:除Logo其他元素不能更改
![](https://img.haomeiwen.com/i4055792/d604f5d071b62407.png)
↑ 页面下拉刷新加载:无需开发
![](https://img.haomeiwen.com/i4055792/5ff7e6ea6a9a472d.png)
↑ 页面内加载反馈:内容自定义
![](https://img.haomeiwen.com/i4055792/1aae8c08b3491c03.png)
↑ 推荐 / 局部加载反馈:内容自定义
![](https://img.haomeiwen.com/i4055792/167c277010d06e02.png)
↑ 全局加载反馈:标题转小菊花
Tips
- 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
- 载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
- 不要在同一个页面同时使用超过1个加载动画。
结果反馈
局部反馈、图标弹出、文字弹出、对话框、结果页都可以自己设计。
异常状态
自己设计
开放的接口
摄像头、位置
热区
按照控件库中元素大小设计。
sketch设计控件库
Photoshop设计控件库
视觉
字号
![](https://img.haomeiwen.com/i4055792/c582947a6daffbd7.png)
↑ 常用字号为20, 18, 17, 16,14 13, 11(pt)
颜色
![](https://img.haomeiwen.com/i4055792/4f26396b3b351d25.png)
↑ 需包含完成、主内容、次要内容、连接、出错五中内容的颜色。
![](https://img.haomeiwen.com/i4055792/4815986a00028e5a.png)
↑ 文字层级用不同的灰表示。
列表
![](https://img.haomeiwen.com/i4055792/b89fe1e725285d6a.png)
表单
![](https://img.haomeiwen.com/i4055792/c293bc64d1bbcfab.png)
按钮
![](https://img.haomeiwen.com/i4055792/8c45b58a9cc1fe8b.png)
↑ 高度 47pt
![](https://img.haomeiwen.com/i4055792/b91925c23402e9ab.png)
↑ 高度 35pt,最小宽度 180pt
![](https://img.haomeiwen.com/i4055792/9abcfeb800a841c7.png)
↑ 高度 35pt,最小宽度 60pt
![](https://img.haomeiwen.com/i4055792/64e712d9abbd09ea.png)
↑ 按钮按使用需要分为大、中、小三个层级。
图标
![](https://img.haomeiwen.com/i4055792/fecdd529349f9574.png)
↑ 50*50pt
![](https://img.haomeiwen.com/i4055792/36709eae0c6b3c23.png)
↑ 32*87pt,右边距 7pt,上边距 iOS 24pt、Android 30pt
网友评论