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

相关推荐

  • UE网APP现已发布:UE小组,致力于自学UE。

    UE小组是为:ue自学者提供一个自学UE的渠道和平台,希望能帮助到大家 UE小组的官网:UE小组 豌豆荚、360市场也可直接搜索“UE小组” 进行下载 现在支持安卓版本,稍晚些支持IOS,请广大苹果用户持续关注。 IOS和安卓…

    2015-05-27
  • 秒懂MIUI 6是如何一步步扁平化的

    MIUI被很多人看作是小米的最大优势,历经4年时间更新演变,从MIUI的变化我们可以看到主流图标的设计趋势正在从质感到扁平,从灰暗到明亮,观一点而知天下,让我们一起来体会下这些年,我们身边图标的变化。 四年,M…

    2014-10-21
  • 让用户“看见”,是一种心机行为哦

    让用户“看见”的手段很多,但没有一种是永远成立的。找到和用户习惯或目标匹配的场景和交互行为,才能获得最好且最有效的体验。

    2017-04-29
  • 关于交互设计师的工作内容,这篇讲得最全面!

    交互设计师的工作,并不仅仅是输出设计方案,我们需要参与前期的需求讨论、后期开发、测试验收等等产品设计与实现的多个环节。本篇将介绍我目前参与交互设计的工作流程以及各个阶段的工作职责。

    2017-05-18
  • 交互设计的专业性——用户体验认知与落地

    作者:司马西(简书作者)原文地址:http://www.jianshu.com/p/ee34d566766cIXDC获授权转载前言从事设计与交互设计工作已6年有余,一直以来、无论圈内圈外都会谈到交互设计是什么?具体做什么?交互的价值是什么?…

  • 交互设计师应该如何设计作品集

    作品集是反映设计师设计水平最直观最有说服力的材料,而作为一个交互设计师,应该如何设计自己的作品集来证明自己的专业水准?知乎、Quora、 ux.stackexchange.com等论坛都有相关的讨论,本文总结这些观点并针对自…

    2016-09-13
  • 老子花了1761,你就给我这用户体验?!

    关注公众号回复关键词回复“模考”获得还原机考环境的口语模考回复“TPO”获得TPO模考软件回复“机经”获得托福历年真题回复“作文批改”获得趴趴助教亲自批改作文更多福利礼包领取请添加微信:papalovetoeflSpeaking-Direction来自趴趴托福00:0004:06托福虐我千百遍,我待托福入初恋托福,作为一个从早上八点半到中午十二点半多的长时间持久战,在考试过程中,同学们总会到一些奇奇怪怪的事情,有一些奇奇怪怪的经历比如说...

    2018-03-01
  • 不止是划条线!移动端UI中常见的视觉分隔设计技巧

    即使是元素与元素之间的分隔方式,都能随随便便用一整篇文章来进行探讨。

    2017-05-18
  • 关于增强移动端交互设计的7条小建议

    本文转译自TubikStudio,内容有删减如果你要问某个产品的移动端交互设计好不好?很简单,如果用户能够很轻松愉快的使用以至于没有感受到它的存在,这就表示这款产品的设计是专业的、成功的。另一方面,如果整套交互中存在不合理的地方,用户一定会注意到他们,并且引发吐槽。移动应用的设计,需要清晰易用,可以随时随地进行有效使用。设计师的认识是创建一个直观的界面,指导用户们,帮助他们顺利操作使用。1、降低学习成本每个产品经理或者交互设计师,都想创...

    2018-02-17
  • 当交互设计遇到用户体验

    【交互设计原则】 *符合用户使用需求 *基于用户的心理模型设计 *一致性 *及时有效的反馈和解释 *形式追随功能 *单一任务、渐次呈现 1.符合用户使用需求 设计一个产品,最基础的原则就是要符合用户的使用需求。确定…

    2015-09-20