网页设计 百分网手机站

Axure7交互设计响应式方案

时间:2020-08-05 13:44:53 网页设计 我要投稿

Axure7交互设计响应式方案

  您对Axure7设计响应式方案(交互设计)了解多少,下面我们一起来了解一下吧。就跟随百分网小编一起去了解下吧,想了解更多相关信息请持续关注我们应届毕业生考试网!

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(灰色左右间距)

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