Axure7响应式进阶(图文)

随大屏幕分辨率普及，网页设计在交互阶段就必须考虑响应式方案，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。