全国免费咨询热线:400-611-9921
 
Axure7响应式进阶

2015-11-11

1049

随大屏幕分辨率普及,网页设计在交互阶段就必须考虑响应式方案,Axure7作为我偏爱的交互设计工具果然也没让大家失望的新增了AdaptiveView功能,基于RP(RapidPrototype)的思想可以以最小工作量制作出直观且基本上表达...

1

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

2【基础篇】

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

3

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

4

53

7

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

【进阶篇】

准备工作

改造目标:

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

重新明确分段变形:

  1. Base(1024×768)为最小界面,不再随窗口继续变小
  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就够用)就好。

1011

在页面底部OnWindowResize项上双击

12

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

15

 

保持页面底部的footer

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

16211718192015

 

随页面宽度变化的居中位

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

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

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

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


关注我们:在查找公众号中搜索:zomsky1688,或者扫描下方二维码快速关注。
广州市纵天信息科技有限公司公众号
关键词:移动网站建设,高端网站建设,视觉设计
热门标签
营销型网站建设柏洪集团网站集团网站建设新元素网站教育网站德胜教育集团德国商会网站建设德国商会品牌网站建设福美控股赛立信网站建设智能家居网站运动网站建设贸易网站建设玩具网站建设化工网站建设日化网站建设家电网站建设音响网站建设物流网站建设旅游网站建设网站建酒店网站建母婴网站建设珠宝网站建设钟表网站建设培训网站建设教育网站建设建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设皮具网站建设五金网站建设仪器网站建设照明网站建设水电网站建设咨询网站建设法律网站建设家具网站建设家居网站建设服装网站建设服务网站建设食品网站建设金融网站建设餐饮网站建设环保网站建设政府网站建设科技网站建设地产网站建设医药网站建设数码网站建设营销型网站广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站定制网站广州网站建设中服装网站设计服装网站制作防火板网站大数据网站科技网站制作三盟科技物联网网站人工智能网站防火板网站制作家居网站制作枕头网站电器网站制作电器网站家具网站家居网站斯帝罗兰网站建设公司​手机网站建设响应式网站企业官方网站网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设费用网站建设广州企业网站建设企业建站官网建设公司网站制作拉链官网广州建站广州网站建设纵天科技
立即致电纵天品牌顾问:
400-611-9921
联系我们:

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com

电话咨询 在线咨询 QQ咨询 官方微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭