网站首页 > 技术文章 正文
一、“Adaptive Views”(自适应视图)的作用
在Axure中(7和9的版本)我们更方便地创建自适应原型。我们可以通过这个功能——“Adaptive Views”(自适应视图)来实现这一点。
通过“Adaptive Views”(自适应视图),我们可以为某一屏生成不同的尺寸,并且针对不同的节点进行优化。节点是根据浏览器窗口的像素宽度和/或高度确定的。
二、如何规划自适应视图
如果我们的网站或应用有相关的尺寸统计,我们可以参考尺寸统计来设置节点。
当我们添加一个自适应视图时,可以根据宽度/高度来设置新的视图,也可以从软件提供的五个预设参数中选择。
五个预设参数如下:
Large display(大屏显示器)(1200×任意高度或以上)
Landscape tablet(平板电脑横屏)(1024×任意高度或以下)
Portrait tablet(平板电脑竖屏)(768×任意高度或以下)
Landscape phone(手机横屏)(480×任意高度或以下)
Portrait phone(手机竖屏)(320×任意高度或以下)
自适应视图继承父视图或基本视图中的属性。我们通常在基本视图(或默认视图)中完成主要的设计,再为每一个子视图添加额外的细节。
提示:在子视图中进行的修改不影响父视图。个人设计师或者团队在自适应视图设计过程中有两种主要的工作思路可供参考:
移动端优先:以最小尺寸为基本视图
每一个子视图以前一个视图为基础,逐渐放大
从大屏到小屏以最大尺寸为基本视图
每一个子视图以前一个视图为基础,逐渐缩小
三、如何管理自适应视图
我们可以参考以下步骤来管理自适应视图。
1.勾选检查窗口-属性标签下的“Adaptive-Enabled”复选框,在编辑窗口右上角会显示出自适应视图管理按钮。
提示:使用Axure 7的用户不需要做这一步,直接从步骤2开始操作。
2.单击工作区左上角“ManageAdaptive Views”(管理自适应视图)按钮,打开“Adaptive Views”对话框。
提示:
我们也可以从主菜单中打开“Adaptive Views”(自适应视图)对话框,其路径为“Project”(项目)—“AdaptiveViews”(自适应视图)。
3.单击绿色+按钮添加一个新的视图。
4.在“Presets”(预设)下拉菜单中,选择自己所需的尺寸设置内容。完成第一个尺寸的设置
5.再单击绿色+按钮继续添加新的视图。在“Presets”(预设)下拉菜单中,选设置第二个尺寸。
添加完所有需要的视图后,单击“OK”(确定)按钮关闭“Adaptive Views”(自适应视图)对话框。
提示:尺寸除了应用自带的尺寸之外,还可以进行自定义设置,输入自己实际所需的尺寸即可。
6.在所需的不同尺寸设置好之后,工作区的显示是这样子的。
此时我们可以看到自适应视图工具栏中多出了三个标签页,分别对应着我们设置的“Base”(基本)、“1024”和“768”三个不同视图。
提示:
通常情况下,工作区的顶端并不会显示基本视图或子视图的标签页。自适应视图的相关标签页仅在视图被创建之后才会显示。
标签页有蓝色、橙色、灰色和绿色四种颜色分别代表不同状态。在上述例子中,“基本”标签是蓝色的,表示这个视图当前是打开可编辑的状态。“1024”和“768”是橙色的,表示它们是子视图,如果当前选中视图的样式进行了更改,它们会受影响。
如标签页为灰色,表示它们不会被选中视图样式的更改所影响(例如,如果选中的是一个子视图,它的标签页将是橙色的,而相关父视图的标签页将为灰色)。如打开“768”视图之后,“1024”视图的标签页就是灰色的。
“Affect AllViews”(影响所有视图)选项被勾选,则标签页将变为绿色,这意味着所有的改动将影响所有的视图。
“Adaptive Views”(自适应视图)是在7和8的版本中帮助我们制作不同尺寸页面的原型的。在Axure 9 之中取消了这一功能。如果你还在使用7或8的版本的话,这个功能可以了解一下。
猜你喜欢
- 2025-07-09 大G也来玩炫光---罗技G502炫光自适应游戏鼠标体验谈
- 2025-07-09 谁说F35不能超音速巡航?发动机增推10%,未来将换装六代机动力
- 2025-07-09 推力达200千牛!美国变循环航发又有重大进展!中美差距又拉大?
- 2025-07-09 美媒评出最优自动驾驶系统 第一名不是特斯拉
- 2025-07-09 科技部:构建农田土壤变化自适应感知、农机行为控制、智慧农场大脑等规模化作业典型场景
- 2025-07-09 CCD自适应悬挂如何避开水坑,2022款林肯冒险家2.0T两驱尊享版
- 2025-07-09 自适应变循环发动机:下一代战机的“心脏”
- 2025-07-09 雷神BBN技术公司展示“自适应跨域杀伤网”软件成果
- 2025-07-09 美国推出MAX-8任务自适应充电站(塞瑞替尼美国fda孤儿药适应症)
- 2025-07-09 美空军:现有战机无法改装变循环自适应发动机
- 最近发表
-
- Qt编程进阶(63):Qt Quick高级控件的使用
- Qt编程进阶(47):QML鼠标事件处理(qt编程难不难)
- 使用Xamarin和Visual Studio开发Android可穿戴设备应用
- Qt使用教程:创建Qt Quick应用程序(三)
- QML性能优化 | 常见界面元素优化(qml布局自适应大小)
- Qt使用教程:创建移动应用程序(二)
- Qt Quick 多媒体开发播放音乐和视频
- Qt使用教程:创建Qt Quick UI表单(三)
- 如何将 Qt 3D 渲染与 Qt Quick 2D 元素结合创建太阳系行星元素?
- QML控件:TextInput, TextField, TextEdit, TextArea用法及自定义
- 标签列表
-
- axure 注册码 (25)
- exploit db (21)
- mutex_lock (30)
- oracleclient (27)
- nfs (25)
- springbatch (28)
- oracle数据库备份 (25)
- dir (26)
- connectionstring属性尚未初始化 (23)
- output (32)
- panel滚动条 (28)
- centos 5 4 (23)
- sql学习 (33)
- c 数组 (33)
- pascal语言教程 (23)
- ppt 教程 (35)
- java7 (24)
- 自适应网站制作 (32)
- server服务自动停止 (25)
- 超链接去掉下划线 (34)
- 什么是堆栈 (22)
- map entry (25)
- ubuntu装qq (25)
- outputstreamwriter (26)
- fill_parent (22)