微信小程序怎么设计图文步骤( 四 )


不要在同一个页面同时使用超过1个加载动画 。
结果反馈
除了在用户等待的过程中需予以及时反馈外 , 对操作的结果也需要予以明确反馈 。根据实际情况 , 可选择不同的结果反馈样式 。对于页面局部的操作 , 可在操作区域予以直接反馈 , 对于页面级操作结果 , 可使用弹出式提示(Toast)、模态对话框或结果页面展示 。
页面局部操作结果反馈
对于页面局部的操作 , 可在操作区域予以直接反馈 , 例如点击多选控件前后如下图 。对于常用控件 , 微信设计中心将提供控件库 , 其中的控件将提供完整操作反馈 。

微信小程序怎么设计图文步骤


微信
{#page_break title=''#}页面全局操作结果——弹出式提示(Toast)
弹出式提示(Toast)适用于轻量级的成功提示 , 1.5秒后自动消失 , 并不打断流程 , 对用户影响较小 , 适用于不需要强调成功状态的操作提醒 。特别注意该形式不适用于错误提醒 。
微信小程序怎么设计图文步骤


微信
页面全局操作结果——模态对话框
对于需要用户明确知晓的操作结果状态可通过模态对话框来提示 , 并可附带下一步操作指引 。
微信小程序怎么设计图文步骤


微信
页面全局操作结果—结果页
对于操作结果已经是当前流程的终结的情况 , 可使用操作结果页来反馈 。这种方式最为强烈和明确的告知用户操作已经完成 , 并可根据实际情况给出下一步操作的指引 。
微信小程序怎么设计图文步骤


微信
异常可控 , 有路可退
在设计任何的任务和流程时 , 异常状态和流程往往容易被忽略 , 而这些异常场景往往是用户最为沮丧和需要帮助的时候 , 因此需要格外注意异常状态的设计 , 在出现异常时予以用户必要的状态提示 , 并告知解决方案 , 使其有路可退 。
要杜绝异常状态下 , 用户莫名其妙又无处可去 , 卡在某一个页面的情况 。2.2中所提到的弹窗和结果页面都可作为异常状态的提醒方式 。除此之外 , 在表单页面中尤其是表单项较多的页面中 , 还应明确指出出错项目 , 以便用户修改 。
异常状态——表单出错
表单报错 , 在表单顶部告知错误原因 , 并标识出错误字段提示用户修改
微信小程序怎么设计图文步骤


微信
便捷优雅
从PC时代的物理键盘鼠标到移动端时代手指 , 虽然输入设备极大精简 , 但是手指操作的准确性却大大不如键盘鼠标精确 。为了适应这个变化 , 需要开发者在设计过程中充分利用手机特性 , 让用户便捷优雅的操控界面 。
减少输入
由于手机键盘区域小且密集 , 输入困难的同时还易引起输入错误 , 因此在设计小程序页面时因尽量减少用户输入 , 利用现有接口或其他一些易于操作的选择控件来改善用户输入的体验 。
减少输入 , 巧用接口
例如下图中 , 在添加银行卡时 , 采用摄像头识别接口来帮助用户输入 。除此之外微信团队还对外开放例如地理位置接口等多种微信小程序接口 , 充分利用这些接口将大大提高用户输入的效率和准确性 , 进而优化体验 。
微信小程序怎么设计图文步骤


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

推荐阅读