微信小程序 UI布局常用技巧整理总结(3)

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

微信小程序设计指南 微信小程序ui设计规范汇总16

  局部加载反馈

  即只在触发加载的页面局部进行反馈,这样的反馈机制更加有针对性,页面改动小,是微信推荐的反馈方式。例如:

微信小程序设计指南 微信小程序ui设计规范汇总17

  加载反馈注意事项

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

  载入过程中,应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉。

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

结果反馈

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

  页面局部操作结果反馈

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

微信小程序设计指南 微信小程序ui设计规范汇总18

  页面全局操作结果——弹出式提示(Toast)

  弹出式提示(Toast)适用于轻量级的成功提示,1.5秒后自动消失,并不打断流程,对用户影响较小,适用于不需要强调成功状态的操作提醒。特别注意该形式不适用于错误提醒。

微信小程序设计指南 微信小程序ui设计规范汇总19

  页面全局操作结果——模态对话框

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

微信小程序设计指南 微信小程序ui设计规范汇总20

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

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

微信小程序设计指南 微信小程序ui设计规范汇总21

  异常可控,有路可退

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

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

  异常状态——表单出错

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

微信小程序设计指南 微信小程序ui设计规范汇总22

  便捷优雅

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

  减少输入

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

  减少输入,巧用接口

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwfpjy.html