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

相关推荐

  • 交互设计师的60日计划第十六天

    周五综合症:不想做事...今天把昨天的需求做完善,与产品经理讨论其中的一个问题,然后将细节标注清楚,但是产品最终还没有确认。除此之外,一直在帮要晋级的一个视觉同事想文案,最后得出结论,还是得多读书,书到…

    交互专题 2015-08-20
  • 如何在Sketch中快速创建调色板?

    今天我将会教你如何在Sketch中快色的创建调色板。这是个很棒的技巧,是年前我从Marc Edwards那里学到的。首先我们先创建三个正方形,它们是可以被三整除。在我们的例子中,我们将先创建一个240pt高和240pt宽的正方形。我们将重命名这些图层为红色、绿色和蓝色。让我们将红色图层的填充改为#FF6161,绿色图层为#4F953B和蓝色的图层为#0076FF。选中这3个图层,然后按“A”快捷键来选择画板工具。我们现在从右边的检查器上...

    2018-04-17
  • 感恩之家与河马教育签订人才需求战略合作协议

    2018年2月24日,河南感恩之家实业有限公司(以下简称感恩之家)与河南河马教育科技有限公司(以下简称河马教育)签订人才需求战略合作协议。感恩之家人力资源经理朱昌林与河马教育创始人陈滨感恩之家惠民工程是实体企业+互联网+实体店铺+分享经济的大惠民工程。在即将上线的电商平台部分,我们精心筛选了上百款来自全国各地的特色产品。在展示产品安全、原产、优质的同时,我们充分挖掘地域风土人情、历史人文,围绕产品特色讲述一个个中国物产的故事。这些都需要...

    2018-03-03
  • Focus Group 焦点小组访谈

      焦点小组访谈法源于精神病医生所用的群体疗法。目前的焦点小组一般由8-12人组成,在一名主持人的引导下对某一主题或观念进行深入讨论。焦点小组调研的目的:在于了解和理解人们心中的想法及其原因。调研的关…

    2015-12-28
  • 交互设计:超越人机交互(原书第4版)

    本书由交互设计界的三位顶尖学者联袂撰写,是该领域的经典著作,被全球各地的大学选作教材。新版本继承了本书一贯的跨学科特色,并与时俱进地更新了大量实例,涉及敏捷用户体验、社会媒体与情感交互、混合现实与脑机界面等。全书紧紧围绕设计与评估的迭代过程,不仅包含了传统的理论知识、实例解析、实践指导等内容,还通过“窘境”模块讨论了一系列启迪思考的开放问题。此外,本书网站www.id-book.com也为读者提供了丰富的资源,包括教学PPT以及大量的案...

    2018-03-09
  • 称职的用户体验设计师必须注意的九件事情

    “不论你即将开始的设计项目是怎样的,你都需要预先对你的目标用户有清晰的勾画。”“如果你所设计的系统需要解释才能让人明白,那么这个系统本身就是崩坏的。如果你的用户需要通过你提供的系繁复的说明才能玩转这个产品,那么这个设计明显是不合格的。”“我们喜欢将UX视作科学,然而现实世界中它更接近于艺术。过去15年的经验告诉我们,用户与整个系统的交互依然是难以预测的。用户依然会每天给我们惊喜。某个你觉得超级好用的东西,在某些人眼中依然是反人类的设计。”“在互联网时代之前,人们通过遥控器上真实的按钮来操控设备。在设计中充分借鉴和模拟之前的交互体验是很有必要的,因为人们习惯于这样的操作,这样他们会明白如何使用你的产品。”“让真实的用户尽早参与到测试中来,而不是等到产品已经开发结束并耗费了大量资源之后积重难返。”“用户并不想被选择所轰炸。”

    2017-05-28
  • 国服筹备进度公开 将重点打造用户体验和品牌社会影响力

    4月22日UP2018腾讯新文创生态大会(以下简称UP大会)当晚,腾讯于北京举办了一场《绝地求生》国服生态交流会。本次交流会邀请了来自各大硬件厂商和直播平台的代表与《人民日报》、《解放军报》、中央广播电视总台等十余家主流媒体的嘉宾参加。腾讯游戏副总裁黄凌冬、PUBG公司中国区总经理郑秀英、PUBG开发室室长李昌浩、PUBG公司创意总监Brendan Greene、腾讯互动娱乐合作市场部总经理朱峥嵘、腾讯互动娱乐PGame合作产品中心总经...

    2018-04-25
  • 2个方向4个维度,探索电商运营活动中的交互设计

    设计是为了达成一定的商业目标服务的,设计本身是我们的表达手段,在达成业务及用户目标的过程中需要一定的设计指导准则以达到优秀的使用体验。本文作者将针对电商运营活动的交互设计,讨论了交互设计师需要如何思考?

    2017-05-06
  • 译文 | 我在餐厅工作时学到的关于用户体验的心得

    本人在涉足设计专业之前学习过两年的酒店管理。在我实习的过程中,经历过许多与客户之间的沟通交流,这其中有积极的也有负面的。在我看来,酒店餐厅服务也是交互的一种形式,而且这其中涉及到很多体验设计的理论和方法,当我作为交互设计师工作多年以后,仍然觉得很受启发。当我看到篇文章的题目时,我就决定要把它翻译出来!下面进入译文。

    2017-05-30
  • 交互设计的前世今生:了解其产生与发展

    读史使人明智,这几乎可以说是真理。可以从历史中洞悉事物发展的本质。帮助我们更好的活在现在和将来。回顾交互设计的历史,了解交互设计的产生与发展,让自己在交互设计的道路上越走越好。

    2017-05-16