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的乐趣来了~
-
Dreamweaver输入的文本字体怎样加粗
Dreamweaver输入的文本字体怎么加粗?Dreamweaver中想要加粗输入的文本,该怎么加粗呢?这都是最基础的教程,很简单,需要的朋友可以参考下,下面就跟随小编一起来看看吧!Dreamweaver怎么给字体加粗,下面我们就来看看详细的.教程。1、打开我的软件2、文件新建一个3、新建...
-
关于javascript使用isNaN()函数判断变量是否为数字
javascript中判断变量是否为数字的方法,这里主要介绍javascript里的isNaN()函数。功能:isNaN()函数用于检查其参数是否是非数字值。语法:isNaN(x)x必需。要检测的值。返回值:如果x是特殊的`非数字值NaN(或者能被转换为这样的值),返回的值就是true。如果x是其他值,则返...
-
PHP开发工程师的主要职责
PHP开发工程师的主要职责1职责:1、负责公司后端的研发,保障系统的稳定性和质量2、与业务需求部门及项目经理沟通,理解需求,进行架构设计;3、搭建开发框架、负责核心代码的编写,解决技术难点;4、界定、分析和解决系统中存在的问题和缺陷;5、对系统进行持续改进,提升系...
-
WAP教程:WML 链接和图像
链接可以制作WML卡片来显示WML的锚功能,图像可以制作WML卡片来显示图像.链接可以制作WML卡片来显示WML的锚功能。标签总是要规定一个任务("go","prev",或"refresh")。任务定义了当用户选择此链接时要做的事情。在本例中,当用户选择"Nextpage",其任务是"前往":Next...