微信小程序开发图解案例教程第5章微信小程序设计及问答课件.pptx

1、微信小程序开发图解案例教程微信小程序设计微信小程序设计 微信小程序问答微信小程序问答 小结小结 第第5 5章章 微信小程序设计及问答微信小程序设计及问答5.1.15.1.1突出重点，减少干扰项突出重点，减少干扰项 每个页面都应有明确的重点，以便于用户每进入一个新页面每个页面都应有明确的重点，以便于用户每进入一个新页面的时候都能快速地理解页面内容。的时候都能快速地理解页面内容。在确定了重点的情况下，应尽量避免页面上出现其他与用户在确定了重点的情况下，应尽量避免页面上出现其他与用户的决策和操作无关的干扰因素。的决策和操作无关的干扰因素。反面示例如图反面示例如图5.15.1所示。所示。正确示例如图正

2、确示例如图5.25.2所示。所示。5.15.1微信小程序设计微信小程序设计图图5.1干扰项过多干扰项过多图图5.2减少干扰项减少干扰项 在一个界面上有多个按钮的时候，按钮设计要有主次之分，在一个界面上有多个按钮的时候，按钮设计要有主次之分，并且区分明显，让用户看到后就知道他能做什么、该怎么做。并且区分明显，让用户看到后就知道他能做什么、该怎么做。反面示例如图反面示例如图5.35.3所示。所示。正确示例如图正确示例如图5.45.4所示。所示。5.1.25.1.2主次动作区分明显主次动作区分明显图图5.3按钮没有主次之分按钮没有主次之分图图5.4按钮有主次之分按钮有主次之分 当用户在进入某个页面进

3、行某一个操当用户在进入某个页面进行某一个操作流程时，应避免出现用户目标流程之外作流程时，应避免出现用户目标流程之外的内容而打断用户。的内容而打断用户。例如：用户想进入某个页面购买商品，例如：用户想进入某个页面购买商品，突然弹出抽奖的模态窗口界面，等用户抽突然弹出抽奖的模态窗口界面，等用户抽完奖之后，可能就会忘记去买商品这件事，完奖之后，可能就会忘记去买商品这件事，这对我们引导用户购买商品很不利，所有这对我们引导用户购买商品很不利，所有要尽量避免打断用户的主要流程操作，如要尽量避免打断用户的主要流程操作，如图图5.55.5所示就是用抽奖打断用户操作的界所示就是用抽奖打断用户操作的界面设计。面设计

4、。5.1.35.1.3流程明确，避免打断流程明确，避免打断图图5.5抽奖打断用户操作抽奖打断用户操作 局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机局部加载反馈即只在触发加载的页面局部进行反馈，这样的反馈机制更加有针对性，页面跳动小，是微信推荐的反馈方式，如图制更加有针对性，页面跳动小，是微信推荐的反馈方式，如图5.65.6所示。所示。5.1.45.1.4局部加载反馈局部加载反馈图图5.6局部加载反馈局部加载反馈 模态的加载样式会覆盖整个页面，模态的加载样式会覆盖整个页面，由于无法明确告知具体加载的位置或由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感，因此内容将可能引起

5、用户的焦虑感，因此应谨慎使用该样式，在某些全局性操应谨慎使用该样式，在某些全局性操作下不要使用模态的加载，如图作下不要使用模态的加载，如图5.75.7所示。所示。5.1.55.1.5模态窗口加载反馈模态窗口加载反馈图图5.7模态窗口加载反馈模态窗口加载反馈 弹出式提示（弹出式提示（TOASTTOAST）适用于轻量级的成）适用于轻量级的成功提示，它功提示，它1.51.5秒后自动消失，并不打断流程，秒后自动消失，并不打断流程，对用户影响较小，适用于不需要强调的操作提对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。醒，例如成功提示。特别注意该形式不适用于错误提示，因为特别注意该形式不适用于

6、错误提示，因为错误提示需明确告知用户，因而不适合使用一错误提示需明确告知用户，因而不适合使用一闪而过的弹出式提示，如图闪而过的弹出式提示，如图5.85.8所示。所示。5.1.65.1.6弹出式操作结果弹出式操作结果图图5.8弹出式操作结果弹出式操作结果 对于需要用户明确知晓的操作结果状态对于需要用户明确知晓的操作结果状态可通过模态对话框来提示，并可附带下一步可通过模态对话框来提示，并可附带下一步操作指引，如图操作指引，如图5.95.9所示。所示。5.1.75.1.7模态对话框操作结果模态对话框操作结果图图5.9模态对话框操作结果模态对话框操作结果 对于操作结果已经是当前流程的对于操作结果已经是

7、当前流程的终结的情况，可使用操作结果页来反终结的情况，可使用操作结果页来反馈。馈。这种方式最为强烈和明确地告知这种方式最为强烈和明确地告知用户操作已经完成，并可根据实际情用户操作已经完成，并可根据实际情况给出下一步操作的指引，如图况给出下一步操作的指引，如图5.105.10所示。所示。5.1.85.1.8结果页结果页图图5.10结果页结果页 用户在填写表单时，输入格式或者内容用户在填写表单时，输入格式或者内容不符合表单填写规则，需要给用户及时反馈不符合表单填写规则，需要给用户及时反馈表单填写问题，可以在表单顶部告知错误原表单填写问题，可以在表单顶部告知错误原因，并标识出错误字段提示用户修改，如

8、图因，并标识出错误字段提示用户修改，如图5.115.11所示。所示。5.1.95.1.9表单填写友好提示表单填写友好提示图图5.11表单友好提示表单友好提示1 1如何将元素固定在界面，不随着界面滚动？如何将元素固定在界面，不随着界面滚动？界面底部有界面底部有4 4个导航菜单：筛选、出发时个导航菜单：筛选、出发时间、旅行时间、显示价格。间、旅行时间、显示价格。把它们固定在界面底部，如图把它们固定在界面底部，如图5.125.12所示。所示。5.25.2微信小程序问答微信小程序问答图图5.12固定在界面底部固定在界面底部2 2怎么样获取用户在表单组件输入的内容？怎么样获取用户在表单组件输入的内容？能

9、够获取用户输入的内容，需要使用组件的属性能够获取用户输入的内容，需要使用组件的属性BINDCHANGEBINDCHANGE将用户将用户的输入内容同步到的输入内容同步到APPSERVICEAPPSERVICE。3 3为什么脚本内不能使用为什么脚本内不能使用WINDOWWINDOW等对象？等对象？页面的脚本逻辑是在页面的脚本逻辑是在JSCOREJSCORE中运行的，中运行的，JSCOREJSCORE是一个没有窗口对象是一个没有窗口对象的环境，所以不能在脚本中使用的环境，所以不能在脚本中使用WINDOWWINDOW，也无法在脚本中操作组件。，也无法在脚本中操作组件。4 4WX.NAVIGATETOW

10、X.NAVIGATETO无法同时打开超过无法同时打开超过5 5个页面？个页面？一个应用只能同时打开一个应用只能同时打开5 5个页面，当已经打开了个页面，当已经打开了5 5个页面之后，个页面之后，WXWX.NAVIGATETONAVIGATETO不能正常打开新页面。请避免多层级的交互方式，或者使不能正常打开新页面。请避免多层级的交互方式，或者使用用WX.REDIRECTTOWX.REDIRECTTO函数。函数。5 5如何修改窗口的背景色？如何修改窗口的背景色？使用使用PAGEPAGE标签选择器，可以修改顶层节点的样式。标签选择器，可以修改顶层节点的样式。6 6如何跳转的时候带参数和跳转到的界面接

11、收参数？如何跳转的时候带参数和跳转到的界面接收参数？本章主要介绍微信小程序在设计过程中遇到的问题以及如何本章主要介绍微信小程序在设计过程中遇到的问题以及如何提高用户的体验度，重点掌握以下内容：提高用户的体验度，重点掌握以下内容：（1 1）在设计过程中要突出重点，减少干扰项，给用户明确的主）在设计过程中要突出重点，减少干扰项，给用户明确的主次操作，让用户操作流程更顺畅；次操作，让用户操作流程更顺畅；（2 2）用户在操作过程中要及时反馈，局部加载以及模态窗口加）用户在操作过程中要及时反馈，局部加载以及模态窗口加载都是对用户的操作反馈；载都是对用户的操作反馈；5.35.3小结小结（3 3）在用户操作后要给出其明确的操作结果，可以通过弹出式）在用户操作后要给出其明确的操作结果，可以通过弹出式操作结果、模态对话框操作结果等告知用户；操作结果、模态对话框操作结果等告知用户；（4 4）用户在填写表单时，要进行友好的提示和正确的引导，减）用户在填写表单时，要进行友好的提示和正确的引导，减少用户填写表单的时间以及出错的概率；少用户填写表单的时间以及出错的概率；（5 5）理解微信小程序设计过程中遇到的一些问题以及解决方案。）理解微信小程序设计过程中遇到的一些问题以及解决方案。