第5章 微信小程序设计及问答

5.3 小结
本章主要介绍微信小程序在设计过程中遇到的问题以及如何 提高用户的体验度，重点掌握以下内容： （1）在设计过程中要突出重点，减少干扰项，给用户明确的主次 操作，让用户操作流程更顺畅； （2）用户在操作过程中要及时反馈，局部加载以及模态窗口加载 都是对用户的操作反馈；
（3）在用户操作后要给出其明确的操作结果，可以通过弹出式操 作结果、模态对话框操作结果等告知用户； （4）用户在填写表单时，要进行友好的提示和正确的引导，减少 用户填写表单的时间以及出错的概率； （5）理解微信小程序设计过程中遇到的一些问题以及解决方案。
间、旅行时间、显示价格。 把它们固定在界面底部，如图5.12所示。
图5.12 固定在界面底部
2．怎么样获取用户在表单组件输入的内容？ 能够获取用户输入的内容，需要使用组件的属性BINDCHANGE将用户
的输入内容同步到APPSERVICE。 3．为什么脚本内不能使用WINDOW等对象？
页面的脚本逻辑是在JSCORE中运行的，JSCORE是一个没有窗口对象 的环境，所以不能在脚本中使用WINDOW，也无法在脚本中操作组件。
图5.4 按钮有主次之分
5.1.3 流程明确，避免打断
当用户在进入某个页面进行某一个操 作流程时，应避免出现用户目标流程之外 的内容而打断用户。
例如：用户想进入某个页面购买商品， 突然弹出抽奖的模态窗口界面，等用户抽 完奖之后，可能就会忘记去买商品这件事， 这对我们引导用户购买商品很不利，所有 要尽量避免打断用户的主要流程操作，如 图5.5所示就是用抽奖打断用户操作的界 面设计。
反面示例如图5.1所示。 正确示例如图5.2所示。
图5.1 干扰项过多
图5.2 减少干扰项
5.1.2 主次动作区分明显
在一个界面上有多个按钮的时候，按钮设计要有主次之分， 并且区分明显，让用户看到后就知道他能做什么、该怎么做。
反面示例如图5.3所示。 正确示例如图5.4所示。
图5.3 按钮没有主次之分
图5.8 弹出式操作结果
5.1.7 模态对话框操作结果
对于需要用户明确知晓的操作结果状态 可通过模态对话框来提示，并可附带下一步 操作指引，如图5.9所示。
图5.9 模态对话框操作结果
5.1.8 结果页
对于操作结果已经是当前流程的 终结的情况，可使用操作结果页来反 馈。
这种方式最为强烈和明确地告知 用户操作已经完成，并可根据实际情 况给出下一步操作的指引，如图5.10 所示。
图5.7 模态窗口加载反馈
5.1.6 弹出式操作结果
弹出式提示（TOAST）适用于轻量级的成 功提示，它1.5秒后自动消失，并不打断流程， 对用户影响较小，适用于不需要强调的操作提 醒，例如成功提示。
特别注意该形式不适用于错误提示，因为 错误提示需明确告知用户，因而不适合使用一 闪而过的弹出式提示，如图5.8所示。
图5.10 结果页
5.1.9 表单填写友好提示
用户在填写表单时，输入格式或者内容 不符合表单填写规则，需要给用户及时反馈 表单填写问题，可以在表单顶部告知错误原 因，并标识出错误字段提示用户修改，如图 5.11所示。
图5.11 表单友好提示
5.2 微信小程序问答
1．如何将元素固定在界面，不随着界面滚动？ 界面底部有4个导航菜单：筛选、出发时
微信小程序开发图解案例教程 （附精讲视频）（第2版）
刘刚 著
第5章 微信小程序设计及问答
微信小程序设计 ■ 微信小程序问答 ■ 小结 ■
5.1 微信小程序设计
5.1.1 突出重点，减少干扰项
每个页面都应有明确的重点，以便于用户每进入一个新页面 的时候都能快速地理解页面内容。
在确定了重点的情况下，应尽量避免页面上出现其他与用户 的决策和操作无关的干扰因素。
4．WX.NAVIGATETO无法同时打开超过5个页面？ 一个应用只能同时打开5个页面，当已经打开了5个页面之后，WX.
NAVIGATETO不能正常打开新页面。请避免多层级的交互方式，或者使 用WX.REDIRECTTO函数。 5．如何修改窗口的背景色？
使用PAGE标签选择器，可以修改顶层节点的样式。 6．如何跳转的时候带参数和跳转到的界面接收参数？
图5.5 抽奖打断用户操作
5.1.4 局部加载反馈
局部加载反馈Βιβλιοθήκη 只在触发加载的页面局部进行反馈，这样的反馈机 制更加有针对性，页面跳动小，是微信推荐的反馈方式，如图5.6所示。
图5.6 局部加载反馈
5.1.5 模态窗口加载反馈
模态的加载样式会覆盖整个页面， 由于无法明确告知具体加载的位置或 内容将可能引起用户的焦虑感，因此 应谨慎使用该样式，在某些全局性操 作下不要使用模态的加载，如图5.7 所示。