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

微信小程序设计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 表单友好提示