第Axure RP 8 交互原型设计案例教程13章
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Axure RP 8 交互原型 设计案例教程（微课版）
第1自适应视图
13.1 自适应视图基础
13.1.1 什么是自适应视图
简单地说，自适应视图就是页面中 的内容会自动随着浏览器窗口或者屏幕 大小的改变而自动切换到对应的页面视 图。一个比较典型的例子就是我们使用 智能手机时，通过设置自动切换为横屏 和竖屏显示时，网页中的内容会自动调 整，如图13-1 所示。
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
图 13-10 基本视图布局
图13-11 默认“600”视图布局
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
Axure RP 8 交互原型设计案例教程（微课版）
图 13-2 手机的自适应视图
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
图 13-3 勾选“启用”选项
图13-4 页面左上角出现的【管理自适应视图】按钮
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
图 13-12 调整后的“600”视图布局 图 13-13 调整后的“1024”视图布局
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
（5）将中间的矩形命名为“提示”，在【属性】子面板中双击【自适应视图改变时】事件，在 打开的【用例编辑】对话框中添加【设置文本】动作，在【配置动作】栏中选择“提示”元件，单 击右下角的【fx】按钮，在打开的【编辑文本】对话框中添加表示当前窗口宽度和高度的两个函数， 如图13-14 所示。
Axure RP 8 交互原型设计案例教程（微课版）
图 13-1 手机的自适应视图
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
Axure RP8 创建自适应视图有3 种方法。 （1）执行【项目】→【自适应视图】命令。 （2）在页面的【属性】子面板中单击【管理自适应视图】按钮，如图13-2 所示。 （3）在页面的【属性】子面板中勾选“启用”选项，如图13-3 所示。 此时，在页面视图左上角的位置也能找到【管理自适应视图】按钮，如图13-4 所示。
13.1 自适应视图基础
13.1.2 创建自适应视图 使用上面3 种方法都可以打开【自适应视图】对话框，如图13-5 所示。
图 13-5 【自适应视图】对话框
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
默认状态下，【自适应视图】对话框中只有一个基本视图。基本视图是指当浏览器的尺寸大 小不满足任何其他自适应视图条件时显示的视图。单击对话框左上方的【添加视图】按钮即可创 建新的视图。从“预设”下拉列表中可以选择预设的屏幕尺寸，在“名称”文本框中可以输入自 定义视图的名称，根据屏幕的尺寸可以自定义视图的宽度和高度，尤其是宽度参数，这是自适应 视图的一个重要指标，设置条件“<=”和“>=”可以控制自适应视图在什么情况下自动切换相 应的自适应视图。例如，当浏览器的宽度小于等于800 像素时，自动切换到对应的视图中，如图 13-6 所示。
图 13-8 【自适应视图改变时】事件
Axure RP 8 交互原型设计案例教程（微课版）
图13-9 新建自适应视图
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
（2）在【属性】子面板中勾选“启用”选项，在基本视图中添加元件，如图13-10 所示。 （3）单击“600”视图标签进入该视图编辑页面，由于该视图继承了基本视图，所以内容与基 本视图完全相同，只是比基本视图增多了一条垂直参考线，该参考线正好是指向宽度为600 像素的 位置，如图13-11 所示。 根据参考线的位置，调整当前视图的元件，调整的基本原则是：内容不变，布局基本不变，颜 色不变，但是元件的大小可以改变，调整后的效果如图13-12 所示。 （4）进入“1024”视图页面，使用同样的方法调整该视图中的元件，调整后的效果如图13-13 所示。
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
图 13-6 自适应视图参数设置
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
“继承于”参数可以控制新视图与哪个视 图存在继承关系。例如，创建的新视图继承于 “基本”视图，则在基本视图中创建的对象在 新视图中都会出现并且在基本视图中编辑元件 时，新视图中的元件也会跟着变化；但默认状 态下，修改新视图中的元件时，继承于的视图 中的内容不会随之改变，如果要让继承于的视 图内容随着新视图改变，则需要在页面视图左 上角勾选【影响所有视图】选项，如图13-7 所 示。
（1）在【自适应视图】对话框中创建两个自适应视图，一个是宽度大于等于1 024 像素时，一 个是小于等于600 像素时，两个视图都继承于基本视图，参数设置如图13-9 所示。
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
Axure RP 8 交互原型设计案例教程（微课版）
图 13-7 【影响所有视图】选项
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
因为【自适应视图改变时】事件属于页面事件，不属于元件事件，所以要激活该事件，就必须 取消页面中所有元件的选择状态，在【属性】子面板中可以找到该事件，如图13-8 所示。与其他事 件一样，也可以根据需要对【自适应视图改变时】事件添加任意用例和动作，例如，可以设置当自 适应视图改变时，出现当前视图窗口的宽度和高度，下面举例说明。
第1自适应视图
13.1 自适应视图基础
13.1.1 什么是自适应视图
简单地说，自适应视图就是页面中 的内容会自动随着浏览器窗口或者屏幕 大小的改变而自动切换到对应的页面视 图。一个比较典型的例子就是我们使用 智能手机时，通过设置自动切换为横屏 和竖屏显示时，网页中的内容会自动调 整，如图13-1 所示。
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
图 13-10 基本视图布局
图13-11 默认“600”视图布局
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
Axure RP 8 交互原型设计案例教程（微课版）
图 13-2 手机的自适应视图
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
图 13-3 勾选“启用”选项
图13-4 页面左上角出现的【管理自适应视图】按钮
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
图 13-12 调整后的“600”视图布局 图 13-13 调整后的“1024”视图布局
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
（5）将中间的矩形命名为“提示”，在【属性】子面板中双击【自适应视图改变时】事件，在 打开的【用例编辑】对话框中添加【设置文本】动作，在【配置动作】栏中选择“提示”元件，单 击右下角的【fx】按钮，在打开的【编辑文本】对话框中添加表示当前窗口宽度和高度的两个函数， 如图13-14 所示。
Axure RP 8 交互原型设计案例教程（微课版）
图 13-1 手机的自适应视图
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
Axure RP8 创建自适应视图有3 种方法。 （1）执行【项目】→【自适应视图】命令。 （2）在页面的【属性】子面板中单击【管理自适应视图】按钮，如图13-2 所示。 （3）在页面的【属性】子面板中勾选“启用”选项，如图13-3 所示。 此时，在页面视图左上角的位置也能找到【管理自适应视图】按钮，如图13-4 所示。
13.1 自适应视图基础
13.1.2 创建自适应视图 使用上面3 种方法都可以打开【自适应视图】对话框，如图13-5 所示。
图 13-5 【自适应视图】对话框
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
默认状态下，【自适应视图】对话框中只有一个基本视图。基本视图是指当浏览器的尺寸大 小不满足任何其他自适应视图条件时显示的视图。单击对话框左上方的【添加视图】按钮即可创 建新的视图。从“预设”下拉列表中可以选择预设的屏幕尺寸，在“名称”文本框中可以输入自 定义视图的名称，根据屏幕的尺寸可以自定义视图的宽度和高度，尤其是宽度参数，这是自适应 视图的一个重要指标，设置条件“<=”和“>=”可以控制自适应视图在什么情况下自动切换相 应的自适应视图。例如，当浏览器的宽度小于等于800 像素时，自动切换到对应的视图中，如图 13-6 所示。
图 13-8 【自适应视图改变时】事件
Axure RP 8 交互原型设计案例教程（微课版）
图13-9 新建自适应视图
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
（2）在【属性】子面板中勾选“启用”选项，在基本视图中添加元件，如图13-10 所示。 （3）单击“600”视图标签进入该视图编辑页面，由于该视图继承了基本视图，所以内容与基 本视图完全相同，只是比基本视图增多了一条垂直参考线，该参考线正好是指向宽度为600 像素的 位置，如图13-11 所示。 根据参考线的位置，调整当前视图的元件，调整的基本原则是：内容不变，布局基本不变，颜 色不变，但是元件的大小可以改变，调整后的效果如图13-12 所示。 （4）进入“1024”视图页面，使用同样的方法调整该视图中的元件，调整后的效果如图13-13 所示。
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
图 13-6 自适应视图参数设置
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.1 自适应视图基础
13.1.2 创建自适应视图
“继承于”参数可以控制新视图与哪个视 图存在继承关系。例如，创建的新视图继承于 “基本”视图，则在基本视图中创建的对象在 新视图中都会出现并且在基本视图中编辑元件 时，新视图中的元件也会跟着变化；但默认状 态下，修改新视图中的元件时，继承于的视图 中的内容不会随之改变，如果要让继承于的视 图内容随着新视图改变，则需要在页面视图左 上角勾选【影响所有视图】选项，如图13-7 所 示。
（1）在【自适应视图】对话框中创建两个自适应视图，一个是宽度大于等于1 024 像素时，一 个是小于等于600 像素时，两个视图都继承于基本视图，参数设置如图13-9 所示。
Axure RP 8 交互原型设计案例教程（微课版）
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
Axure RP 8 交互原型设计案例教程（微课版）
图 13-7 【影响所有视图】选项
第13章
自适应视图
13.2 自适应视图事件和动作
13.2.1 自适应视图事件
因为【自适应视图改变时】事件属于页面事件，不属于元件事件，所以要激活该事件，就必须 取消页面中所有元件的选择状态，在【属性】子面板中可以找到该事件，如图13-8 所示。与其他事 件一样，也可以根据需要对【自适应视图改变时】事件添加任意用例和动作，例如，可以设置当自 适应视图改变时，出现当前视图窗口的宽度和高度，下面举例说明。