您当前的位置: 首页 > 知识百科 > 微信小程序设计规范简介

微信小程序设计规范简介

时间:2023-07-01 14:05 阅读数:87 人阅读 分类:知识百科

  微信小程序设计规范简介,微信小程序和所有手机app程序一样,都有统一的设计规范,甚至是限制和要求更多,如果不了解这些微信小程序设计规范,很容易导致小程序审核不通过。下面小编给大家介绍微信小程序设计规范简介。

  微信小程序设计规范简介

  第一、有好礼貌

  为了防止小程序用户在使用小程序服务时不被其他东西所干扰注意力,小程序在设计时应该注意减少无关的设计元素对用户目标干扰,礼貌地向用户展示程序所提供的服务,友好地引导用户进行操作。

  1. 重点突出

  任何小程序页面都需要明显的重点,以便于用户每进入一个新页面的时候都能快速地理解页面内容,在确定了重点的前提下,应尽量避免页面上出现其他干扰项影响用户的决策和操作。

  2. 流程明确

  为了让用户顺畅地使用页面,在用户进行某一个操作流程时,应避免出现用户目标流程之外的内容而打断用户。

  第二、清晰明确

  作为一个负责任的开发者,一旦用户进入我们的小程序页面,就有责任和义务清晰明确告知用户身在何处、又可以往何处去,确保用户在页面中游刃有余地穿梭而不迷失,这样才能为用户提供安全的愉悦的使用体验。

  1. 小程序导航明确,来去自如

  导航是确保用户在网页中浏览跳转时不迷路的最关键因素。导航需要告诉用户,我在哪,我可以去哪,如何回去等问题。首先在微信系统内的所有小程序的全部页面,均会自带微信提供的导航栏,统一统一解决我在哪,如何回去的问题。在微信层级导航保持体验一致,有益用户在微信内形成较为统一的体验和交互认知,无需在各小程序和微信切换中新增学**成本或使用**惯。

  2. 减少等待,反馈及时

  页面过长时间的等待会引起用户的不良情绪,使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此,当不可避免的出现了加载和等待的时候,需要予以及时的反馈以舒缓用户等待的不良情绪。

  3. 异常可控,有路可退

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

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

  三、便捷优雅

  从PC时代的物理键盘鼠标到移动端时代手指,虽然输入设备极大精简,但是手指操作的准确*却大大不如键盘鼠标精确。为了适应这个变化,需要开发者在设计过程中充分利用手机特*,让用户便捷优雅的操控界面。

  1. 减少输入

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

  2. 避免误操作

  一位内在手机上我们通过手指触摸屏幕来操控界面,手指的点击精确度远不如鼠标,因此在设计页面上需点击的控件时,需要充分考虑到其热区面积,避免由于可点击区域过小或过于密集而造成误操作。当简单的将原本在电脑屏幕上使用的界面不做任何适配直接移植到手机上时,往往就容易出现这样的问题。由于手机屏幕分辨率各不相同,因此最适宜点击像素尺寸也不完全一致,但换算成物理尺寸后大致是在7mm-9mm之间。在微信提供的标准控件库中,各种控件均已考虑到了页面点击效果以及不同屏幕的适配,因此再次推荐使用或模仿标准控件尺寸进行设计。

  3. 利用接口提升*能

  微信设计中心已推出了一套网页标准控件库,包括sketch设计控件库和WeUI重构代码库,这些控件都已充分考虑了移动端页面的特点,能够保证其在移动端页面上的可用*和操作*能;同时微信web开发团队也在不断完善和扩充微信JS-SDK接口,并提供微信公共库,利用这些资源不但能够为用户提供更加快捷的服务,而且对页面*能的提高有极大作用,无形之中提升了用户体验。

  四、统一稳定

  除了以上所提到的种种原则,建议接入微信的小程序还应该时刻注意不同页面间的统一*和延续*,在不同的页面尽量使用一致的控件和交互方式。

  统一的页面体验和有延续*的界面元素都将帮助用最少的学习成本达成使用目标,减轻页面跳动所造成的不适感。正因如此,小程序可根据需要使用微信提供的标准控件,以达到统一稳定的目的。

  五、视觉规范

  为方便设计师进行设计,微信提供一套可供Web设计和小程序使用的基础控件库;同时方便小程序开发者调用。

  微信小程序设计规范简介就到此为止了,这里只是简单的介绍了一些大体的内容,具体详情还请大家去小程序官方网站查询阅读,想了解更多小程序内容,欢迎关注微小乔。

相关推荐:

微信小程序运营规范内容有哪些?

微信小程序客服消息的规范有哪些?小程序客服规范有哪些?

微信小程序ui设计规范具体说明