首页 » 工作经验 » 正文

微信小程序交互设计规范(三)

发表于: UI设计者 – 一个免费自学UI设计APP · 2017-2-5  · UI设计师投稿  ·  10,681 views  · 

weixinxiaochengxu-ixd

微信小程序交互设计规范(三)

结果反馈

除了在用户等待的过程中需予以及时反馈外,对操作的结果也需要予以明确反馈。根据实际情况看,可选择不同的结果反馈样式。对于页面局部的操作,可在操作区域予以直接反馈,对于页面级操作结果,可使用toast、弹窗或结果页面展示。

页面局部操作结果反馈

对于页面局部的操作,可在操作区域予以直接反馈,例如点击多选控件前后如下图。对于常用控件,微信设计中心已提供控件库及WeUI控件库,其中的控件都已设计有完整的操作反馈。

页面全局操作结果——toast

其中toast适用于轻量级的成功提示,1.5秒后自动消失,并不打断流程,对用户影响较小,适用于不需要强调成功专题的操作提醒。特别注意toast形式不适用于任何错误提醒。

页面全局操作结果——弹框

对于需要用户明确知晓的操作结果状态可通过弹框来提示,并可附带下一步操作指引。

页面全局操作结果——结果页

对于操作结果已经是当前流程的终结的情况,可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成,并可根据实际情况给出下一步操作的指引。

3. 异常可控,有路可退

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

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

异常状态——表单出错

表单报错,在表单顶部告知错误原因,并标识出错误字段提示用户修改。

三、便捷优雅

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

1. 减少输入

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

减少输入,巧用接口

例如下图中,在添加银行卡时,采用摄像头识别SDK接口来帮助用户输入。除此之外微信团队还对外开放例如地理位置接口等多种SDK接口(详见微信JS-SDK),充分利用这些接口将大大提高用户输入的效率和准确性,进而优化体验。

除了利用接口外,在不得不让用户进行手动输入时,应尽量让用户做选择而不是键盘输入。一方面,回忆易于记忆,让用户在有限的选项中做选择通常来说是容易于完全靠记忆输入;另一方面,仍然是考虑到手机键盘密集的单键输入极易造成输入错误。例如图中,在用户搜索时提供搜索历史快捷选项将帮助用户快速进行搜索,而减少或避免不必要的键盘输入。

2. 避免误操作

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

3. 利用接口提升性能

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

四、统一稳定

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

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

 

本文链接: http://www.shui-mai.com/2017/02/05/weixinxiaochengxujiaohushejiguifansan/
2 like+
«上一篇: :下一篇»

相关文章

2019最新UI适配设计规范iPhone XR、iPhone XS、iPhone XS Max

iPhone XR、iPhone XS、iPhone XS Max发布已经有一段时间了...

Sketch的Windows版替身-Lunacy打开和编辑Sketch文件

  Sketch 是一款 MacOS 下非常知名的 UI 界面设计软件...

全面屏手机时代拓宽了我们的设计思维

近期有同学问,全面屏手机来了就连VIVO APEX在国外炒的火热...

2018最新APP Android UI设计规范

2018最新APP Android UI设计规范   设计稿尺寸 从目前...

2018年移动端用户体验设计趋势

在移动应用领域,事物正飞速发展。要想在用户体验设计领域...

iOS 11系统iPhone X人机交互指南

iPhone X屏幕更大、分辨率更高、圆角以及屏幕边缘可显示的...