微信小程序开发图解案例教程微信小程序设计9大要点.pdf

微信小程序设计 9 大要点 设计微信小程序需要注意在一些细节上提升交互效果，营造清晰流畅的用户体验。本章 介绍一些微信小程序设计时的注意事项和经常遇到的问题。 1． 突出重点，减少干扰项 每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面 内容。在确定了重点的前提下 ，应尽量避免页面上出现其他与用户的决策和操作无关的干扰 因素。 反面示例如图 1 所示。 图 1 干扰项过多 正确示例如图 2 所示。 图2 减少干扰项 2 ． 主次动作区分明显 在一个界面上有多个按钮的时候 ，按钮设计有主次之分，并且区分明显，让用户看到后 就知道他能做什么、该怎么做。 反面示例如图 3 所示。 图3 按钮没有主次之分 正确示例如图 4 所示。 图4 按钮有主次之分 3 ． 流程明确，避免打断 当用户在进入某个页面进行某一个操作流程时，应避免出现用户目标流程之外的内容而 打断用户。 例如：用户想进入某个页面进行商品购买，突然弹出抽奖的模态窗口界面，等用户抽完 奖之后，可能就会忘记去买商品这件事，这对我们引导用户购买商品很不利，所有要尽量避 免打断用户的主要流程操作，如图 5 所示就是用抽奖打断用户操作的界面设计。 图5 抽奖打断用户操作 4 ． 局部加载反馈 局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页 面跳动小，是微信推荐的反馈方式，如图 6 所示。 图6 局部加载反 5 ． 模态窗口加载反馈 模态的加载样式会覆盖整个页面 ，由于无法明确告知具体加载的位置或内容将可能引起 用户的焦虑感，因此应谨慎使用该样式，除了在某些全局性操作下不要使用模态的加载，如 图 7 所示。 图7 模态窗口加载反 6 ． 弹出式操作结果 弹出式提示（Toast ）适用于轻量级的成功提示，它 1.5 秒后自动消失，并不打断流程， 对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。特别注意该形式不适用于 错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示，如图 8 所示。 图8 弹出式操作结果 7． 模态对话框操作结果 对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作 指引，如图 9 所示。 图9 模态对话框操作结果 8 ． 结果页 对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。这种方式最为 强烈和明确地告知用户操作已经完成，并可根据实际情况给出下一步操作的指引，如图 10 所示。 图 10 结果页 9 ． 表单填写友好提示 用户在填写表单时，输入格式或者内容不符合表单填写规则，需要给用户及时反馈表单 填写问题，可以在表单顶部告知错误原因，并标识出错误字段提示用户修改，如图 11 所示。 图 11 表单友好提示