本官方小程序设计文档为大家解读微信小程序设计指南和小程序开发指南小程序开发设计,主要是界面设计和风格设计指南,同时也对小程序设计风格提出了一些建议。
从微信、公众号,到微信支付小程序开发设计,再到小程序,微信正逐步从“即时通讯工具”转变为“操作系统”。但特别的是,微信这个跨平台的操作系统,需要兼顾iOS和Android的UI标准。
如何保证小程序的开发兼顾两个平台的界面风格小程序开发设计,并与微信本身的体验保持统一?
阅读官方微信设计文档是最有效的方式,它提供了大量的用户界面示例。开发者只需要严格按照本设计文档来打造美观实用的 UI 和交互方式。
为了帮助大家更快的理解设计文档,特意准备了这份文档解读,不仅将设计文档的篇幅减半,还增加了小程序的UI设计与传统移动应用设计的接口和文章末尾的网页设计。差异比较。
现在,花一半的时间阅读这篇文章,你就会掌握设计文档的所有要点。
微信小程序设计基本规则
微信小程序设计文档将所有的设计范式分为四个部分,分别是:
友善、礼貌、清晰、清晰、方便、优雅、统一、稳定
此外,微信官方还提供了一些方便开发者使用的组件,这些组件可以直接在微信官方小程序IDE中使用。
设计文档还对这部分组件进行了详细的描述,包括每个组件的应用范围。同时还提供了Sketch和Photoshop的设计模板,方便UI设计师直接使用。
懒人素材库建议:没有太多设计经验的开发者尽量使用微信提供的组件样式,在快速开发的前提下保证小程序的用户体验。
1. 友好而有礼貌
微信官方希望小程序专注于解决用户当前的问题,做一个“管家”,而不是在用户处理问题时一直制造干扰的“推销员”。
首先,每个页面都应该关注一个关键功能,而不是与那个功能无关。
例如,搜索页面的功能应该是“搜索”,与搜索无关的功能或内容(如横幅广告和诱导搜索关键字推广等)应尽可能去除。
官方报错示例,在搜索页面添加无用信息
其次,页面的导航应该像用户期望的那样工作。
例如,当用户跳转到某个页面时,小程序不应该弹出无关的广告,因为该广告在进入该页面时不符合用户的预期。
官方报错示例,进入页面时弹出与功能无关的广告
小程序的设计应该以快速解决用户问题为目标,并为他们提供清晰和预期的分步导航。而这与张小龙在演讲中提到的“跑出去”的概念是一致的。
2. 清晰明确
用户操作小程序时,小程序要向用户清楚地表明当前状态,同时尽量减少用户的操作限制和等待时间。
微信官方为小程序提供了全局导航栏,包括导航区(返回键)、标题区和操作区三组。
如果开发者需要,可以使用小程序首页的页内导航,包括顶部Tab样式和底部Tab样式。每种款式至少需要两个标签,最多不超过五个标签,官方微信推荐不超过四个。
官方提供的底部标签和顶部标签样式
开发者可以定义导航栏和页内导航的样式颜色。在定义颜色时,开发者需要注意元素的识别,避免炫目、按钮和文字的可见度差。
小程序中的加载反馈细节也是整体体验的重要组成部分。微信提供了拉动刷新组件,只需要根据需要应用即可。
同时,页面内的加载提示建议使用本地加载反馈,而不是全局加载反馈。加载时间长时,懒人建站:建议提供进度条,减少用户等待的焦虑。
拉动刷新样式和部分加载示例
微信小程序提供三种结果提示方式。提示效果从轻到强:小弹窗提示(toast)、模态提示(modal)、单独的成功结果页面。开发者需要根据实际情况合理使用不同级别的提示。
操作反馈时使用toast,询问行为时使用modal,表单提交后使用page。
Toast、模态和成功页面
本设计文档特别强调异常的设计。在小程序中,异常情况需要明确告知用户出现问题 小程序定制 ,同时明确告知用户问题出在哪里以及如何解决。
文档规定了表单填错的提示样式。
表单错误提示示例
如果表单出现错误,小程序应在顶部弹出提示,并在错误项右侧提供错误图标,以便用户定位问题。
3. 方便优雅
微信官方希望小程序能够快速解决问题。
例如,在用户输入时,可以通过关联、API接口等方式(如扫描银行卡等)帮助用户快速准确地填写输入内容。
扫描银行卡快速填写内容
设计时应保证用户误操作的概率较低。
微信官方在文档中提到,可点击元素要足够大,让用户有清晰的点击反馈。给懒人建站的建议:文案和图标不要混淆用户,也是减少误用的重要方法之一。
4. 统一稳定
在设计文件中,关于统一和稳定的表述更倾向于“统一”。也就是说,小程序整体上应该为用户提供统一的功能,避免同一视觉元素中不同页面的不同风格。
这一原则有助于保证用户的认知稳定性。在设计的时候,设计师应该尽量避免一个小程序中多个元素的风格大相径庭的情况。这并不能保证小程序的视觉统一,也严重损害了用户的认知稳定性。
在开发过程中,可以在全局 WXSS 文件中指定相同组件的样式,以便在开发过程中快速重用和视觉统一。
微信小程序设计与PC页面设计差异比较
如果网页设计师或移动应用程序UI设计师转向开发小程序,则有必要了解小程序与以往设计领域的异同。
基于这份设计文档,我们解释了小程序的UI设计与传统的移动应用程序设计和网页设计的区别。
1. 如果你是网页设计师
对于网页设计师来说,小程序界面设计面临的最大挑战是,之前的桌面优先思维需要转变为移动优先,因为作为一个依赖手机运行的应用,微信小程序需要专注于移动使用。
移动端和桌面端的区别在于:因此,提醒网页设计师在设计小程序界面时要注意这些差异:2.如果你是移动端UI设计师
对于 UI 设计师来说,小程序带来了好消息和坏消息。
好消息:移动端 UI 中的大部分设计思维和范式都可以用在小程序设计中,设计师不需要为 iOS 和 Android 设计单独的界面,只需要逐案讨论差异即可。
坏消息:微信原生提供有限的控制。微信只提供了按钮、toast、提示图标、开关、复选框、复选框、滑块等多种控件。其他控件需要根据实际风格进行开发设计。
另外 小程序开发系统 ,微信小程序的风格与iOS HIG和Material Design这两种设计范式有很大不同。在设计时,需要多注意设计文档中的描述和示例,这样才能设计出标准的小程序界面。
微信小程序设计文档的解读到此结束。希望通过这份解读文档,可以帮助开发者轻松开发体验优秀的小程序。
原来的:
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网