Axure响应式进阶
Axure响应式进阶
随大屏幕分辨率普及,网页设计在交互阶段就必须考虑响应式方案,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(灰色左右间距)
完成后效果 http://6alxvx.axshare.com
虽然足矣表达设计师想要的响应式布局,但是没有实时的自适应效果,相信有追求的设计师绝对会心里不爽,那么我们继续开坑改造,于是Axure的乐趣来了~
【进阶篇】
准备工作
改造目标:
页面能根据拖拽窗口实时自适应
内容区能在达到1366视图中最大宽度后保持宽度,并保持居中位置
重新明确分段变形:
Base(1024×768)为最小界面,不再随窗口继续变小
1024-1366时,内容区宽度变大并在1366时达到最大值
1366+时,内容区宽度固定在最大值,内容区与标题栏footer信息保持对齐且在右侧保持居中(只增加左右padding)
尚能利用的废料:
上一demo中几个关键视图:Base(最小界面,不会因为拖拽改变大小)、1366(内容区最大宽度界面,分段变形转折点)
明确这些后,我们开始动手,首先可以删掉除了Base和1366的所有视图。然后把界面上的背景部分(Menu高度,右侧灰部长宽,标题和footer两根分割线长度)尽量拉大。虽然也可以用函数来写动态尺寸,但是本着RP思想,还是决定尽量节省工时偷懒一下为好。
增加1025视图(意思是1025-1366宽度范围),inhert from Base。
可实时变形的内容区域
考虑到1024向1366变形时,内容(白色)区宽度会逐渐变大,我们可以把内容区白色方块右键convert into dynamic panel(后面简称DP)命名为frame1025(叫1025是因为触发变形的宽度条件是1025px),然后在DPstate1中把白色方块拉到非常大,保证变形至1366宽和无限高(基本1500就够用)就好。
在页面底部OnWindowResize项上双击
打开条件编辑窗增加交互行为Set Size of Dynamic Panel如下图。为什么是宽度Window.width-221?这个尺寸因页面尺寸而异,很好算。于是内容(白色)区frame 1025就可以随鼠标拖拽窗口实时变形了。
保持页面底部的footer
1024-1366段footer文字不会改变x值,只会随页面高度变化固底,最简单的做法就是变成DP后右键选择Pin to Browser,并设置与底部距离。(这里我将分割线和footer文字群组后变为一个DP)于是1024-1366段改造完毕。
随页面宽度变化的居中位
在1366视图,我们的目标是让内容区域、标题、footer文字固宽并随页面变宽始终居中。同样,制作新内容区DP: frame 1366,在底部OnWindowResize增加交互行为如下图
注意Move 后的选项”to”和”by”的区别,move to是移动到绝对坐标,move by是每次触发条件的移动量。(如果选了move by,结果就会是每当窗口被拖拽,DP就移动一段距离直到跑出屏幕。)这里我们要选move to。
在1366+段,frame 1366仍会随窗口高度变大,同样在这里增加交互行为如下图,于是内容区改造完成!
能做到以上部分的话,那么继续改造1366+段的标题和footer其实已经易如反掌了,用的方法其实完全一样,不是变形就是移动而已。
Axure响应式进阶的更多相关文章
- 《Vue 进阶系列之响应式原理及实现》
https://www.bilibili.com/video/av51444410/?p=5 https://github.com/amandakelake/blog/issues/63 https: ...
- Vue 进阶系列(一)之响应式原理及实现
Vue 进阶系列(一)之响应式原理及实现:https://juejin.im/post/5bce6a26e51d4579e9711f1d Vue 进阶系列(二)之插件原理及实现:https://jue ...
- 用Axure RP7创建响应式原型教程
自从几年前响应式技术开始应用时,创建响应式原型就成为了很多人苦恼的事情.响应式设计用一种非常优雅的方式处理为多种设备类型使用HTML和CSS编码的应用,但是提供给UX专业人士的原型工具却没有具备同样品 ...
- 2015年最有价值的30个响应式WORDPRESS主题
http://www.chinaz.com/design/2015/0521/408204.shtml 必须承认,Wordpress依然是目前最流行.最易用的内容管理系统,合理地使用Wordpress ...
- 一个响应式框架——agera
Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...
- 响应式编程系列(一):什么是响应式编程?reactor入门
响应式编程 系列文章目录 (一)什么是响应式编程?reactor入门 (二)Flux入门学习:流的概念,特性和基本操作 (三)Flux深入学习:流的高级特性和进阶用法 (四)reactor-core响 ...
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- Bootstrap实战 - 响应式布局
一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
随机推荐
- Spring Security构建Rest服务-0702-短信验证码登录
先来看下 Spring Security密码登录大概流程,模拟这个流程,开发短信登录流程 1,密码登录请求发送给过滤器 UsernamePasswordAuthenticationFilter 2,过 ...
- 【jQuery源码】事件存储结构
a. jQuery事件原型——Dean Edwards的跨浏览器AddEvent()设计 源码解读 重新梳理一下数据结构,使用一个例子 <input type="text" ...
- 《LeetBook》leetcode题解(17):Letter Combinations of a Phone Number[M]
我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...
- Redis笔记(一):Redis安装教程
Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Redis是目前应用最广泛的内存数据存储技术,相比之前的Me ...
- libnetwork插件化网络功能
Docker把网络跟存储这两部分的功能实现都以插件化形式剥离出来,允许用户通过指令来选择不同的后端实现.这也是Docker希望构建围绕着容器的强大生态系统的一些积极的尝试.剥离出来的独立容器网络项目叫 ...
- Excel文件上传存储到数据库
- WPF绑定之索引器值变化通知
背景 在某些应用中,需要在界面上绑定到索引器,并在值发生变化时实时更新. 解决方案 只要将包含索引器的类实现INotifyPropertyChanged接口,并在索引值更改时引发PropertyCha ...
- git分支简介,理解HEAD,master
为了真正理解 Git 处理分支的方式,我们需要回顾一下 Git 是如何保存数据的. 或许你还记得 起步 的内容,Git 保存的不是文件的变化或者差异,而是一系列不同时刻的文件快照. 在进行提交操作时, ...
- MySQL千万级大表优化解决方案
MySQL千万级大表优化解决方案 非原创,纯属记录一下. 背景 无意间看到了这篇文章,作者写的很棒,于是乎,本人自私一把,把干货保存下来.:-) 问题概述 使用阿里云rds for MySQL数据库( ...
- Oracle ORA12514 监听程序当前无法识别连接描述符中请求的服务
在连接数据库的时候,有时会遇到一个“ORA12514:监听程序当前无法识别连接描述符中请求的服务”的错误,这个错误其实就是数据库动态注册(关于动态注册会在稍后讲解)不生效,导致监听器无法识别客户端连接 ...