Axure制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

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

Axure制作响应式原型文件,响应式RP

 
 

【基础篇】

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

Axure制作响应式原型文件,响应式RP

 
 

这里请注意:

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制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

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

 
 

【进阶篇】

准备工作

改造目标:

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

重新明确分段变形:

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

尚能利用的废料:

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

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

Axure制作响应式原型文件,响应式RP

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

Axure制作响应式原型文件,响应式RP

 
 

可实时变形的内容区域

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

Axure制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

在页面底部OnWindowResize项上双击

Axure制作响应式原型文件,响应式RP

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

Axure制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

 
 

保持页面底部的footer

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

Axure制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

 
 

随页面宽度变化的居中位

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

Axure制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

Axure制作响应式原型文件,响应式RP

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

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

Axure制作响应式原型文件,响应式RP

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

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

关于:木卫艾欧
交互设计师必备书单
交互设计师导航

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/2208/

(0)
iouedioued
上一篇 2014-12-25 09:19
下一篇 2014-12-27 01:24

相关推荐

  • 如何输出一份合格的交互设计文档?

    做一件事之前一定要先想清楚做这件事的目的,为什么要做这件事,只有这样,才能万变不离其宗,不会变成为了做事而做事,这很可怕。拿交互设计文档来看,为什么要写交互设计文档,这是开始写之前要想清楚的。

    2017-05-15
  • 定义方向策略 – 有理有据做设计

    独立项目中,交互设计师的工作可以分成四个核心环节:定义方向策略、确定解决方案、有理有据的进行设计输出、上线效果跟踪。本期要和大家分享的是:方向策略。 方向策略阶段需要明确了解本次设计原因及产品目标,进…

    2016-12-08
  • 聊聊负反馈在交互设计中的应用

    在日常交互行为中,多多少少存在各种各样的反馈行为(feedback),没有反馈的系统是不存在的。有些反馈是积极的,告诉人们完成了什么,有些则是负面的,对人们可能采取的破坏性交互行为进行预警,告知人们如果这样做会有很严重的后果。反馈是人们确认系统在工作的重要依据,试想你明明提交了数据,界面或者系统却没有任何提示,你肯定会越来越疑惑烦躁,还可能连续提交造成系统崩溃。

    2017-05-29
  • 能够带来更好体验的“浅交互设计”,是对人机交互设计方式的全新思考

    原文地址:https://www.smashingmagazine.com/2016/03/getting-disconnected-shallow-interaction-design-deeper-human-experiences/本文由设计夹设计研究小组 成员杨梦龙翻译校对我们的一切都被连接起来了。我的手…

    2017-08-02
  • 好的设计:存在于无形当中

    东东导读:对于社交类产品来说,优秀的设计,应该是不争强好胜般凸显在用户面前的,而电商类和社交类产品很不一样,电商类的产品经理想的首先是GMV(成交金额),一切是为着GMV转的举例:用户刚购买了眼镜,那么给用户推荐眼镜盒,而不是推荐洗脚盆;用户刚订了周六上午的话剧,那么给用户推荐话剧院旁边的餐厅,而不是继续推荐其他的话剧;当用户刚购买了一张飞往巴黎的机票,那么给用户推荐机场的接送机,而不是一股脑的推荐旅游产品。举例:用户明天飞往曼谷,提前一天发短信提醒用户航班信息,告知用户曼谷明天的天气,若有紧急新闻事件也可一并告知(比如曼谷突然发生恐怖爆炸事件,只要跟用户切身相关的,请第一时间告知用户)。然后顺带可以推荐接送机服务。

    2017-06-03
  • APPLE WATCH 中文手册:通知--有关通知的一些要点

    如果您的 iOS 应用支持本地或远程通知,Apple Watch 也会同步显示这些通知。当某个应用的本地或远程通知抵达用户的 iPhone 后,iOS 将会自行判断显示该通知的设备(iPhone 还是 Apple Watch)。对于发送到 Apple Wa…

    2015-06-15
  • 原创译文 | 面向对象的用户体验设计

    2012年6月,我在CNN.com工作时,接到了为“选举之夜”进行用户体验设计的任务。接下来的5个月我为那1个晚上贡献了全部精力——但我的成功对选举的胜利方没啥影响。我所关注的是页面的可读性,数据的可视化,可变形的画布,以及在iPhone上怎么实现该死的鼠标悬停弹窗效果。在当时,CNN.com首次上线了响应式体验站点,同时,我也第一次面临响应式体验设计。

    2017-06-01
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • 如何有效的做产品迭代分析

    “ 做过这么多产品迭代分析,却依然找不到合适的方式表达。” 产品迭代分析对于交互设计师可以说是家常便饭了,隔壁的某某有了新功能,某某家的谁又更新了个大版本,都需要时时保持关注。但是,每当小珏吭哧吭哧的收…

    交互设计 2014-11-11
  • 特殊情况下的APP设计(6):交互走查表

    本文作者将用交互走查表的形式,对系列文章“特殊情况下的APP设计”进行一个总结。enjoy~

    2017-04-27