微信小程序要设计哪些内容?

哪些内容可以随便设计,哪些内容是要按照规范设计的。

导航栏

除右上角的俩按钮,没有统一样式。
这俩按钮有深、浅两种颜色可选。
左上角返回上一级页面按钮。

小程序有原生控件库,底部标签可以使用原生的控件库。
顶部标签分页栏可以自定义颜色。

加载

↑ 启动页:除Logo其他元素不能更改

↑ 页面下拉刷新加载:无需开发

↑ 页面内加载反馈:内容自定义

↑ 推荐 / 局部加载反馈:内容自定义

↑ 全局加载反馈:标题转小菊花

Tips

  • 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。
  • 载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。
  • 不要在同一个页面同时使用超过1个加载动画。

结果反馈

局部反馈、图标弹出、文字弹出、对话框、结果页都可以自己设计。

异常状态

自己设计

开放的接口

摄像头、位置

热区

按照控件库中元素大小设计。
sketch设计控件库
Photoshop设计控件库


视觉

字号

↑ 常用字号为20, 18, 17, 16,14 13, 11(pt)

颜色


↑ 需包含完成、主内容、次要内容、连接、出错五中内容的颜色。


↑ 文字层级用不同的灰表示。

列表

表单

按钮

↑ 高度 47pt

↑ 高度 35pt,最小宽度 180pt

↑ 高度 35pt,最小宽度 60pt

↑ 按钮按使用需要分为大、中、小三个层级。

图标

↑ 50*50pt


↑ 32*87pt,右边距 7pt,上边距 iOS 24pt、Android 30pt

原文《微信小程序设计指南》

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,009评论 3 119
  • 版本回退原则上,代码推送之前要保证本地的代码可运行,不要将不可运行或者有问题的代码推送到服务器上,如果由于误操作,...
    超_iOS阅读 1,028评论 0 0
  • 反思:今天写写让自己生气的一件事,让我学会了,不要没事当老好人,别人把你的好当做理所应当,已经仿佛变成恶人一般。我...
    远逝之风yuki阅读 188评论 0 0
  • 2017-02-18星期六“育心丽谦时间管理100天挑战营” 第34天 A、今日行动清单 1、【早起汇报 】: 4...
    嘉雁38677阅读 167评论 2 1
  • 这个世界有一些人,对每件事情都很认真,例如学生时代总是那个好学的孩子,谈恋爱时全心全意,工作时总是那个加班加点的人...
    怡宝儿_阅读 761评论 1 0