Axure响应式进阶

2018年6月2日 luodonggan

随大屏幕分辨率普及，网页设计在交互阶段就必须考虑响应式方案，Axure7作为我偏爱的交互设计工具果然也没让大家失望的新增了Adaptive View功能，基于RP(Rapid Prototype)的思想可以以最小工作量制作出直观且基本上表达无误的响应式设计方案。当然如果大家对Axure的Dynamic Panel和函数了如指掌的话，绝对也可以制作出更逼真的Demo。

【基础篇】

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://6alxvx.axshare.com

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

【进阶篇】

准备工作

改造目标：

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

重新明确分段变形：

Base（1024×768）为最小界面，不再随窗口继续变小
1024-1366时，内容区宽度变大并在1366时达到最大值
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其实已经易如反掌了，用的方法其实完全一样，不是变形就是移动而已。