微信小程序-设计指南

Posted 2020-08-19

基于微信小程序轻快的特点，官方拟定了小程序界面设计指南和建议，可作为小程序开发参考。

友好礼貌

　　-避免用户使用服务时被周围环境干扰，设计时应减少无关设计对用户的影响，礼貌的向用户提供服务，友好的引导用户进行操作。

　　重点突出

　　　　　  -每个页面都应该有明确的重点，方便用户进入页面时可以快速理解页面内容

　　　　 -明确重点，避免页面出现与用户决策和操作无关的干扰因素

　　流程明确

　　　　　　-为了用户体验，使其操作顺畅，应避免出现用户目标流程之外的内容而打断用户

清晰明确

　　　　-用户进入页面，我们就有责任和义务清晰明确的告知用户身处何处、又可以往何处去，增加用户体验，即面包屑导航

　　导航明确、来去自如

　　　　　　-导航是确保用户在网页中浏览跳转时不迷路的最关键因素，即明确导航

　　　　微信导航栏

　　　　　　-直接继承客户端，除导航栏颜色之外，开发者无需也不能对其中的内容分进行自定义，开发者只需规定小程序各个页面的跳转关系，让导航系统能够以合理的方式工作

　　　　　　-导航栏分为导航区域、标题区域以及操作区域

　　　　　　　　--导航区域控制页面进程

　　　　　　　　--导航烂分为深浅两种基本配色

　　减少等待、反馈及时

　　　　　　 -若页面加载时间过长会导致用户体验不好，应采用相应措施进行改良

　　　　　　　--启动加载页，微信已统一提供

　　　　　　　--页面下拉刷新加载，微信已统一提供

　　　　　　　　　　　　---页面下拉分为深浅两套方案，背景颜色可自定义，应注意下拉时出现的图标及文字标示的辨识度

　　　　　　　　　 ---确保信息的可见性和页面的可用性

　　　　　　　 --加载反馈注意事项

　　　　　　　　　　---若载入时间较长，应提供取消操作，并使用进度条显示载入的进度

　　　　　　　　　　---载入过程中，应保持动画效果，无动画效果的加载容易产生卡死错觉

　　　　　　　　　　---不要在同一个页面同时使用超过1个加载动画

　　异常可控、有路可退

　　　　　　-在设计任何的任务和流程时，异常状态和流程往往容易被忽略，而这些异常场景往往是用户最为沮丧和需要帮助的时候，因此需要格外注意异常状态的设计，在出现异常时予以用户必要的状态提示，并告知解决方案，使其有路可退。

　　　　 -要杜绝异常状态下，用户莫名其妙又无处可去，卡在某一个页面的情况。上文中所提到的弹窗和结果页面都可作为异常状态的提醒方式。除此之外，在表单页面中尤其是表单项较多的页面中，还应明确指出出错项目，以便用户修改。

便捷优雅

　　　　　-手指操作的准确性是远远不如键盘鼠标精确，为了适应移动端，需要开发者在设计的过程中充分利用手机特性，让用户便捷优雅的操控界面

　　减少输入

　　　　　　-由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计小程序页面时因尽量减少用户输入，利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验

　　避免误操作

　　　　　　 -手指的点击精确度远不如鼠标，因此在设计页面上需点击的控件时，需要充分考虑到其热区面积，避免由于可点击区域过小或过于密集而造成误操作

统一稳定　

　　-接入微信的小程序还应该时刻注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。

　　-统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感

视觉规范

　　参考地址:https://weui.io