小程序官方设计文档将所有的设计规范分为四个部分，分别是：
1.友好礼貌
2.清晰明确
3.便捷优雅
4.视觉规范
以下我们将一一为大家解读官方设计文档：
1. 友好礼貌
微信官方希望小程序在设计时应该注意减少无关的设计元素对用户目标的干扰，礼貌地向用户展示程序提供的服务，友好地引导用户进行操作。（以下分别是官方的反例示意和纠正示意举例）
反例示意
操作没有主次，让用户无从选择。
官方反例示例
纠正示意
首先要避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。
官方纠正示例
2. 清晰明确
当你进入一个优秀的小程序界面时，你能清楚的知道自己下一步动作是什么，你该点击的是哪一个选项，用完走人。而不是一脸懵逼的问自己：我是谁？我从何而来？又该到哪里去？
微信官方已经为小程序提供了全局导航栏，包括导航区（返回按钮）、标题区和操作区三组。
开发者可选择小程序页面添加标签分页（Tab）导航。标签分页栏可固定在页面顶部或者底部，便于用户在不同的分页间做切换。标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。
底部标签和顶部 Tab 样式
下拉刷新样式和局部加载示例
微信小程序提供三个结果提示方式，提示效果从轻至强的分别为小弹窗提示（toast）、模态框提示（modal）和单独的成功结果页面。开发者需要根据实际情况，对不同程度的提示进行合理利用，以下分别是Toast、Modal 和成功页面：
3.便捷优雅
比如，当用户在进行输入时，可以通过联想、API 接口以及其他方式（例如扫描银行卡等），帮助用户快速准确地填充输入内容。
扫描银行卡快速填充内容
4.视觉规范
官方只要是归纳了6大设计规范，分别是文字规范、字体颜色、列表视觉规范、表单输入视觉规范、按钮使用原则、图标使用原则。
1）字体规范：
微信内字体的使用与所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 11(pt)
字体大小示例
2）字体颜色：
主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑；
字体颜色示例
3）列表视觉规范：
列表视觉规范示例
4）表单输入视觉规范：
表单输入视觉规范
5）按钮使用原则：
按钮使用原则示例
6）图标使用原则：
图标使用原则示例
对微信小程序设计文档的解读就到这里为止了。希望通过这份解读文档，能帮助开发者轻松开发出具有优良体验的小程序。
网友评论