小程序设计规范

客户第一是恒生核心价值观,那么以人为本则是Light小程序的设计哲学,将认知心理学和行为学等多学科的方法导入到设计之中,处处体现人文关怀,彰显本产品的暖科技本色。

统一稳定 配置灵活

Light小程序建议,开发者在开发过程中,需时刻注意不同页面的统一性和延续性,在不同的页面尽量使用一致的控件和交互方式。这种统一的页面体验和有延续性的界面元素都将帮助用户用最少的学习成本达成使用目标,减轻页面跳转可能会带来的不适感,因此,小程序将提供一套完整的标准控件,以达到统一稳定的目的。

标准统一的顶部导航栏

开发者在小程序菜单中,根据实际的产品需要,考虑用户的可读性情况下,选择Light提供的深浅两套标准的顶部导航栏配色方案,用以适应的小程序页面风格,减少开发者开发该类通用性功能模块的时间,同时确保小程序的统一性(这部分由本小程序提供,无需开发者自行开发)。

在调用该模块时,开发者需注意容器底色和状态栏中文字色的对比度,首要考虑色差显著的配色方案,默认容器底色为白色,状态栏为黑色,容器色可配置,而状态栏色非黑即白两种颜色,酌情为容器底色配色。
如下图中的使用都属于错误示范(即容器底色与状态栏中文字色较为接近)会严重影响用户的视觉体验。

页面底部导航标签栏

当主页面无法满足产品的主要功能时,我们增加了页面底部导航标签栏功能,用户可操作这些标签栏对于更多同级内容进行浏览,而该导航标签栏不随着页面切换而滑动。

底部导航标签栏固定在页面底部使用,并支持2~5个一级页面的快速切换,通常我们优先建议一级页面的数量为3-5个,需要开发者准备标签栏(由名称和图标组成),需区分当前选中效果和非选中效果(这部分为本小程序提供,无需开发者自行开发)。

单个标签栏的组成是相应的图标加上选项名称。我们建议用户在定义选项命名时优先考虑字数的一致性,如都是两个字:首页,消息,订单,我的等;同时,图标的使用方面,建议开发者使用同样类型(线性,面性)的图标。

交互友好 操作简单

框架从表单,基础组件,操作反馈,导航相关,搜索相关,层级规范等各个方面进行页面搭建的设计规范说明,保证用户在搭建过程中有章可循。在以人为本的设计哲学理念指导下,流程的流畅明确,系统性的交互友好,操作的简单是一直在努力追求的方向。

操作流程流畅明确

在小程序的使用过程中,我们建议以操作流程流畅为基石,主张用户一次聚焦做一件事,应尽量避免出现干扰用户的内容,良好的沉浸式体验是增强用户粘性的法宝。

导航明确 来去自如

当用户在任何位置时,产品中明确的导航标记,可以明白身在何处又即将前往何处,明确用户在各页面中来去自如而不迷路,为用户提供安全而愉悦的使用体验。


本案例为用户从小程序首页开始浏览小程序各级页面的经典用户路径示意图(蓝色为前进路径,绿色虚线为逐级返回路径,灰色虚线可直接关闭小程序)

信息展示重点突出

我们建议在信息展示中,时刻谨记区分信息展示的层次性,突出重点,弱化次要信息,做到有的放矢。

页面展示功能操作部分,恰如其分地引导用户顺利完成操作,切记尽可能少地给予太多选择。

及时反馈 体验完整

使用小程序的过程中,我们有责任和义务让用户得到及时的反馈,确保用户心理的确定感和完整的流程体验感。

加载反馈 明确及时

页面加载的过程中较长的等待时间会引起用户不良情绪,我们已经在技术上实现了尽量减少用户等待时间,但即便如此,依然不可避免出现加载和等待的时间,因此我们建议及时呈现加载反馈结果且明确。

数据加载过程中,如较长的等待时间,我们建议开发者及时地给予全局的加载反馈或酌情给予局部的加载反馈。

全局页面加载

用户可使用Light小程序提供的标准刷新加载的功能和样式,无需开发者自行开发。当然,也可以使用自定义的全局页面加载样式,请注意都需尽可能简洁并有简单的动画告知用户加载过程。

例如:在本小程序加载过程中,当等待超过1秒后,页面会出现全局加载小动画,以减少用户等待焦虑(这部分为本小程序提供,无需开发者自行开发)。

局部页面加载

局部加载反馈是在触发加载的页面局部进行反馈,这样的反馈更加具有针对性,且页面跳动较小,是我们较为推荐的反馈方式。例如:

模态加载

模态的加载样式将覆盖整个页面的,由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感,因此应谨慎使用。除了在某些全局性操作下不要使用模态的加载。

操作结果反馈

当用户完成操作的任务后,及时地给予操作结果反馈有易于增强用户的内心确定感,提升用户体验的。我们建议同一时间只给予一个操作反馈,并且根据实际的操作场景和反馈需要的强弱程度给出不同的样式。

独立结果页

在任务流程的最后环节,且结果反馈比较重要时,可使用全屏结果页,增强用户确定的信心。这里需区分场景,如结果为成功与失败,成功后需引导用户下一步的主操作,如失败请告知用户失败原因,并引导用户可如何补救。

模态对话框

作为模态组件,会打断用户路径并分散用户的注意,请谨慎使用。

消息提示框

不打断用户流程,会自动消失,适用于轻量级的提示,可酌情使用。