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

微信小程序开发图解案例教程

（附精讲视频）（第2版）;微信小程序设计■

微信小程序问答■

小结■;5.1.1突出重点，减少干扰项

每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。

在确定了重点的情况下，应尽量避免页面上出现其他与用户的决策和操作无关的干扰因素。

反面示例如图5.1所示。

正确示例如图5.2所示。;图5.1干扰项过多图5.2减少干扰项;

在一个界面上有多个按钮的时候，按钮设计要有主次之分，并且区分明显，让用户看到后就知道他能做什么、该怎么做。

反面示例如图5.3所示。

正确示例如图5.4所示。;图5.3按钮没有主次之分图5.4按钮有主次之分;

当用户在进入某个页面进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。

例如：用户想进入某个页面购买商品，突然弹出抽奖的模态窗口界面，等用户抽完奖之后，可能就会忘记去买商品这件事，这对我们引导用户购买商品很不利，所有要尽量避免打断用户的主要流程操作，如图5.5所示就是用抽奖打断用户操作的界面设计。;

局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式，如图5.6所示。;

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

弹出式提示（Toast）适用于轻量级的成功提示，它1.5秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。

特别注意该形式不适用于错误提示，因为错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示，如图5.8所示。;对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步操作指引，如图5.9所示。;

对于操作结果已经是当前流程的终结的情况，可使用操作结果页来反馈。

这种方式最为强烈和明确地告知用户操作已经完成，并可根据实际情况给出下一步操作的指引，如图5.10所示。;

用户在填写表单时，输入格式或者内容不符合表单填写规则，需要给用户及时反馈表单填写问题，可以在表单顶部告知错误原因，并标识出错误字段提示用户修改，如图5.11所示。;1．如何将元素固定在界面，不随着界面滚动？

界面底部有4个导航菜单：筛选、出发时间、旅行时间、显示价格。

把它们固定在界面底部，如图5.12所示。;2．怎么样获取用户在表单组件输入的内容？

能够获取用户输入的内容，需要使用组件的属性bindchange将用户的输入内容同步到AppService。

3．为什么脚本内不能使用window等对象？

页面的脚本逻辑是在JsCore中运行的，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。

;4．wx.navigateTo无法同时打开超过5个页面？

一个应用只能同时打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo函数。

5．如何修改窗口的背景色？

使用page标签选择器，可以修改顶层节点的样式。

6．如何跳转的时候带参数和跳转到的界面接收参数？;

本章主要介绍微信小程序在设计过程中遇到的问题以及如何提高用户的体验度，重点掌握以下内容：

（1）在设计过程中要突出重点，减少干扰项，给用户明确的主次操作，让用户操作流程更顺畅；

（2）用户在操作过程中要及时反馈，局部加载以及模态窗口加载都是对用户的操作反馈；

;（3）在用户操作后要给出其明确的操作结果，可以通过弹出式操作结果、模态对话框操作结果等告知用户；

（4）用户在填写表单时，要进行友好的提示和正确的引导，减少用户填写表单的时间以及出错的概率；

（5）理解微信小程序设计过程中遇到的一些问题以及解决方案。