Axure-RP-8交互原型设计案例教程第13章-自适应视图.pptx

1、第13章 自适应视图A x u r e R P 8 交 互 原 型设 计 案 例 教 程简单地说，自适应视图就是页面中的内容会自动随着浏览器窗口或者屏幕大小的改变而自动切换到对应的页面视图。一个比较典型的例子就是我们使用智能手机时，通过设置自动切换为横屏和竖屏显示时，网页中的内容会自动调整，如图13-1 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.1 13.1 自适应视图基础自适应视图基础13.1.1 什么是自适应视图图 13-1 手机的自适应视图Axure RP8 创建自适应视图有3 种方法。（1）执行【项目】【自适应视图】命令。（2）在页面的【

2、属性】子面板中单击【管理自适应视图】按钮，如图13-2 所示。（3）在页面的【属性】子面板中勾选“启用”选项，如图13-3 所示。此时，在页面视图左上角的位置也能找到【管理自适应视图】按钮，如图13-4 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.1 13.1 自适应视图基础自适应视图基础13.1.2 创建自适应视图图 13-2 手机的自适应视图Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.1 13.1 自适应视图基础自适应视图基础13.1.2 创建自适应视图图 13-3 勾选“启用”选项 图13-4 页面左上

3、角出现的【管理自适应视图】按钮使用上面3 种方法都可以打开【自适应视图】对话框，如图13-5 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.1 13.1 自适应视图基础自适应视图基础13.1.2 创建自适应视图图 13-5【自适应视图】对话框默认状态下，【自适应视图】对话框中只有一个基本视图。基本视图是指当浏览器的尺寸大小不满足任何其他自适应视图条件时显示的视图。单击对话框左上方的【添加视图】按钮即可创建新的视图。从“预设”下拉列表中可以选择预设的屏幕尺寸，在“名称”文本框中可以输入自定义视图的名称，根据屏幕的尺寸可以自定义视图的宽度和高度，尤其是宽

4、度参数，这是自适应视图的一个重要指标，设置条件“=”可以控制自适应视图在什么情况下自动切换相应的自适应视图。例如，当浏览器的宽度小于等于800 像素时，自动切换到对应的视图中，如图13-6 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.1 13.1 自适应视图基础自适应视图基础13.1.2 创建自适应视图Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.1 13.1 自适应视图基础自适应视图基础13.1.2 创建自适应视图图 13-6 自适应视图参数设置“继承于”参数可以控制新视图与哪个视图存在继承关系。例如，创建的

5、新视图继承于“基本”视图，则在基本视图中创建的对象在新视图中都会出现并且在基本视图中编辑元件时，新视图中的元件也会跟着变化；但默认状态下，修改新视图中的元件时，继承于的视图中的内容不会随之改变，如果要让继承于的视图内容随着新视图改变，则需要在页面视图左上角勾选【影响所有视图】选项，如图13-7 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.1 13.1 自适应视图基础自适应视图基础13.1.2 创建自适应视图图 13-7【影响所有视图】选项因为【自适应视图改变时】事件属于页面事件，不属于元件事件，所以要激活该事件，就必须取消页面中所有元件的选择状态，

6、在【属性】子面板中可以找到该事件，如图13-8 所示。与其他事件一样，也可以根据需要对【自适应视图改变时】事件添加任意用例和动作，例如，可以设置当自适应视图改变时，出现当前视图窗口的宽度和高度，下面举例说明。（1）在【自适应视图】对话框中创建两个自适应视图，一个是宽度大于等于1 024 像素时，一个是小于等于600 像素时，两个视图都继承于基本视图，参数设置如图13-9 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.2 13.2 自适应视图事件和动作自适应视图事件和动作13.2.1 自适应视图事件Axure RP 8 交互原型设计案例教程第第1313

7、章章自适应视图自适应视图13.2 13.2 自适应视图事件和动作自适应视图事件和动作13.2.1 自适应视图事件图 13-8【自适应视图改变时】事件 图13-9 新建自适应视图（2）在【属性】子面板中勾选“启用”选项，在基本视图中添加元件，如图13-10 所示。（3）单击“600”视图标签进入该视图编辑页面，由于该视图继承了基本视图，所以内容与基本视图完全相同，只是比基本视图增多了一条垂直参考线，该参考线正好是指向宽度为600 像素的位置，如图13-11 所示。根据参考线的位置，调整当前视图的元件，调整的基本原则是：内容不变，布局基本不变，颜色不变，但是元件的大小可以改变，调整后的效果如图13

8、-12 所示。（4）进入“1024”视图页面，使用同样的方法调整该视图中的元件，调整后的效果如图13-13 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.2 13.2 自适应视图事件和动作自适应视图事件和动作13.2.1 自适应视图事件Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.2 13.2 自适应视图事件和动作自适应视图事件和动作13.2.1 自适应视图事件图 13-10 基本视图布局 图13-11 默认“600”视图布局Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.2

9、13.2 自适应视图事件和动作自适应视图事件和动作13.2.1 自适应视图事件图 13-12 调整后的“600”视图布局 图 13-13 调整后的“1024”视图布局（5）将中间的矩形命名为“提示”，在【属性】子面板中双击【自适应视图改变时】事件，在打开的【用例编辑】对话框中添加【设置文本】动作，在【配置动作】栏中选择“提示”元件，单击右下角的【fx】按钮，在打开的【编辑文本】对话框中添加表示当前窗口宽度和高度的两个函数，如图13-14 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.2 13.2 自适应视图事件和动作自适应视图事件和动作13.2.1

10、自适应视图事件图 13-14 用例参数设置设置完成后，按【F5】键预览，使用鼠标改变浏览器窗口大小，当检测到窗口的宽度高于或者低于设定的条件时，程序会自动切换到相应的视图，并且中间的矩形元件也会显示当前窗口的尺寸，如图13-15 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.2 13.2 自适应视图事件和动作自适应视图事件和动作13.2.1 自适应视图事件图 13-15 预览【自适应视图改变时】效果在【用例编辑】对话框中可以找到【设置自适应视图】动作，如图13-16 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图

11、13.2 13.2 自适应视图事件和动作自适应视图事件和动作13.2.2 自适应视图动作图 13-16【设置自适应视图】动作（1）在【属性】子面板的更多事件列表中单击【鼠标双击时】事件，在弹出的【用例编辑】对话框中添加【设置自适应视图】动作，在【配置动作】栏中选择“1024”视图，如图13-17 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.2 13.2 自适应视图事件和动作自适应视图事件和动作13.2.2 自适应视图动作图 13-17【双击鼠标时】用例设置（2）将设置好的用例复制到【鼠标单击时】事件中，然后双击复制的用例，在打开的【用例编辑】对话框中将“1024”设置为“自动”，如图13-18 所示。Axure RP 8 交互原型设计案例教程第第1313章章自适应视图自适应视图13.2 13.2 自适应视图事件和动作自适应视图事件和动作13.2.2 自适应视图动作图 13-18【单击鼠标时】用例设置本章总结本章总结通过本章的学习，读者应理解并熟练掌握自适应视图的用途以及创建和编辑自适应视图的方法，另外，还要掌握自适应视图事件和动作的应用。THANKSA x u r e R P 8 交 互 原 型 设 计 案 例 教 程