Axure7响应式进阶

jovixu

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

1

 

【基础篇】

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

2

 

这里请注意:

Base页:即初始页,比如PC端网页设计的话可以自己定义为1024x768之类的尺寸;

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

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

 

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

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

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

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

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

 

4

3

5

7

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

 

【进阶篇】

准备工作

改造目标:

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

重新明确分段变形:

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

尚能利用的废料:

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

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

8

增加1025视图(意思是1025-1366宽度范围),inhert from Base。

9

 

可实时变形的内容区域

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

10

11

在页面底部OnWindowResize项上双击

12

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

13-1

13-2

 

保持页面底部的footer

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

14

15

 

随页面宽度变化的居中位

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

16

17-1

17-2

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

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

18

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

最终效果展示:http://hqekcg.axshare.com

 

 

 

 

Tags: , , , , , ,

jovixu
jovixu
巧用工具洞察用户行为
上一遍
前端之Android入门(5):MVC模式(下)
下一遍
18,015
QQ空间 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. PBB says:

    -_-做到这个程度有点丧心病狂的感觉……

  2. HULIZ says:

    做到这个程度,完全是没事找抽型

  3. Neveevol says:

    求原文件看看。。。虽然这样做有点疯狂。。。但是学习还是必要的,以备不时之需

  4. daxiong says:

    。。。你确定这个在原型阶段是必要的么

  5. 苏塔 says:

    CSS几行代码就搞定的事情搞这么复杂,做交互的重心不应该是放在这里,响应式虽然在体验上可以解决多分辨率的困扰,但是做成这样也并没有直接解决问题,和前端配合的时候还是要把各种参数告诉前端,还不如多尺寸设计稿来的直接。SmashingMaginzine上又介绍这种做法,楼主是费心研究了

  6. Robin Bumble says:

    非常感谢作者的分享!小生跟着作者的思路我临摹了一下,并对其中的一部分做了个人的优化:窗口过小的时候中央画布消失并用一个提示拉大的剪头提示用户、可实时变形的内容区域支持更低的分辨率、低分辨率时 Footer 消失。我还顺便给 Menu 添加了 Hover 状态的高亮。链接在此,希望大神来喷,求进步!

    另外对于楼上有人说没有必要研究着一些东西,但是,小生在此作为一个交互新人认为,研究 Axure 的高级功能能够对其基础功能的熟识程度和综合运用能力有很大的提升。其次,了解一些类似编程的技术过程,能够更好的产生对程序员的「同理心」(我们看似很容易的效果,实现过程却又是艰难险阻),大家都不容易嘛。

    希望能够看到更多这样的「精神干货」!

  7. Robin Bumble says:

    额,忘记放链接了。链接在此:

    http://wp82u4.axshare.com/#p=home

    敬请指(kuáng)点(pēn)。

  8. 雕虫小技 says:

    什么是宽度Window.width-221?这个尺寸因页面尺寸而异,很好算。
    这个是怎么算出来的?求解

  9. 马笑 says:

    求一点AXURE资料,产品资料,谢谢