Axure7响应式进阶

【基础篇】

Adaptive View的设置入口就在页面标尺0坐标上方，点它，在弹框里就可以添加设置各种分辨率的视图了（下图）

Base页：即初始页，比如PC端网页设计的话可以自己定义为1024×768之类的尺寸；这里请注意：

Condition字段：包括”is greater than or equals”和“is less than or equals”两个选项，与下方输入的长宽值组成触发响应的条件。

Inherit from字段：可选择变形源的页面，将在左侧通过层级展示关系。

制作各分辨率视图界面时，请务必根据inherit关系依次进行。这点请大家牢记！刚上手的同学可能会感觉疑惑：怎么后一视图的A元素删掉了前一视图的A元素还在，但是前一视图的A元素删掉了后面所有视图的A元素都没了？因为Base视图的元素将直接出现在后续分辨率视图中且事实为同一元素，这是为了提升设计师工作效率，base视图完成后，在第二视图只需简单拖拽就能完成，然后第三第四视图同理依次完成就好。

我偏好从小往大设置，对应的触发条件可以设置为例如图中的：“当页面尺寸大于等于1366(长) 768（高）时，从Base（1024×768）变形为1366×768视图”

做每个分辨率视图时，建议在显著位置写好分辨率值便于检验demo（如下图），动手试一下你可能就会问：“怎么分辨率文字在所有视图里都变成了1920×1080？”道理还是一样，因为如果你是从Base添加的，那后续所有视图的事实上为同一元素，而且这验证了文字内容不能随视图变化。所以怎么办？逐页删掉重新放文字元素上去就好。

假设要做一个网页，从1024变化至1366宽时内容（白色）区域宽度达到大值，之后分辨率继续变大时保持内容区宽度不变只改变左右padding（灰色左右间距）

完成后效果  http://6​alxvx.axshare.com

虽然足矣表达设计师想要的响应式布局，但是没有实时的自适应效果，相信有追求的设计师绝对会心里不爽，那么我们继续开坑改造，于是Axure的乐趣来了~

【进阶篇】

准备工作

改造目标：

• 页面能根据拖拽窗口实时自适应
• 内容区能在达到1366视图中大宽度后保持宽度，并保持居中位置

重新明确分段变形：

1. Base（1024×768）为最小界面，不再随窗口继续变小
2. 1024-1366时，内容区宽度变大并在1366时达到大值
3. 1366+时，内容区宽度固定在大值，内容区与标题栏footer信息保持对齐且在右侧保持居中（只增加左右padding）

尚能利用的废料：

上一demo中几个关键视图：Base（最小界面，不会因为拖拽改变大小）、1366（内容区大宽度界面，分段变形转折点）

明确这些后，我们开始动手，首先可以删掉除了Base和1366的所有视图。然后把界面上的背景部分（Menu高度，右侧灰部长宽，标题和footer两根分割线长度）尽量拉大。虽然也可以用函数来写动态尺寸，但是本着RP思想，还是决定尽量节省工时偷懒一下为好。

增加1025视图（意思是1025-1366宽度范围），inhert from Base。

可实时变形的内容区域

考虑到1024向1366变形时，内容（白色）区宽度会逐渐变大，我们可以把内容区白色方块右键convert into dynamic panel（后面简称DP）命名为frame1025（叫1025是因为触发变形的宽度条件是1025px），然后在DPstate1中把白色方块拉到非常大，保证变形至1366宽和无限高（基本1500就够用）就好。

在页面底部OnWindowResize项上双击

打开条件编辑窗增加交互行为Set Size of Dynamic Panel如下图。为什么是宽度Window.width-221？这个尺寸因页面尺寸而异，很好算。于是内容（白色）区frame 1025就可以随鼠标拖拽窗口实时变形了。

保持页面底部的footer

1024-1366段footer文字不会改变x值，只会随页面高度变化固底，最简单的做法就是变成DP后右键选择Pin to Browser，并设置与底部距离。（这里我将分割线和footer文字群组后变为一个DP）于是1024-1366段改造完毕。

随页面宽度变化的居中位

在1366视图，我们的目标是让内容区域、标题、footer文字固宽并随页面变宽始终居中。同样，制作新内容区DP: frame 1366，在底部OnWindowResize增加交互行为如下图

注意Move 后的选项”to”和”by”的区别，move to是移动到绝对坐标，move by是每次触发条件的移动量。（如果选了move by，结果就会是每当窗口被拖拽，DP就移动一段距离直到跑出屏幕。）这里我们要选move to。

在1366+段，frame 1366仍会随窗口高度变大，同样在这里增加交互行为如下图，于是内容区改造完成！

能做到以上部分的话，那么继续改造1366+段的标题和footer其实已经易如反掌了，用的方法其实完全一样，不是变形就是移动而已。