Axure 原型 | 教你使用自适应视图构建界面

陈张良
14 评论 116542 浏览 202 收藏 6 分钟
B端产品经理要负责对目标行业和市场进行深入的分析和调研,了解客户的需求、痛点、期望和行为,找到产品的价值主张 🔗

在Axure中,我们可以使用自适应视图来调整界面的展示。例如PC浏览就显示PC样式,手机浏览就显示手机的样式,根据设备的不同分辨率来展示对应的界面。

先预览下这期有些啥:【点我预览】http://t9ymya.axshare.com/auto.html

GIF

如上演示中,界面适配了iphone5、iphone6 及 iphone6 plus。它需要使用axure中的自适应视图功能才能实现。

教程步骤

第1步:找到设置自适应视图的管理入口

在操作区域页面的任意【空白位置】单击鼠标,即可在右侧检视面板》属性中找到自适应管理入口。

2016-9-29 16-27-31

第2步:管理自适应视图

1、启用自适应视图,并新建小、中、大,三种自适应视图的尺寸

设置 【小:200*300】、【中:>=300*500】、【大>=400*600】并逐一继承上一个。

2016-9-29 16-37-44

设置完毕后,我们返回操作区域查看,界面发生了如下的变化:

界面多了你设置过的自适应视图的三个Tab,并多了根据设置产生的参考线。

2016-9-29 16-48-25

我们在界面【小】中放入一个文本框,并在各个Tab中填充到参考线的宽度,做一个Demo来验证自适应视图是如何运作的:

GIF

完成如上步骤后,我们在chrom浏览器中通过拉动屏幕调整分辨率观察自适应视图的运作:

GIF2

我们发现,随着窗口大小的变化,文本框A自动切换对应的大小。

至此,我们已经初步的学会自适应视图的基本原理和操作。下面我们再来看看自定义视图中的其它设置:

2、在基本视图【最左侧视图】里修改,会同步影响其它视图【因为其它视图继承基本视图】

GIF3

3、在其它视图里修改,会修改该视图+继承于它的视图中的内容【本例中400继承300】

GIF5

4、如果勾选影响到所有,则所有的视图都会同步被修改

GIF6

我们发现,只有新增添的属性是会同步变化的,如上的演示中,【小】视图的文本就没有加粗效果。

继承关系的设置:

2016-9-29 17-56-46

工作中的使用建议

日常工作中,几乎极少使用自适应视图。因为Axure功能非常强大,如果你是一个设计师或者要做一些精细的交互稿,它就可以满足你。而作为产品经理,更重要的是将逻辑和需求讲解明白,并且大部分都是明天要,所以是效率优先,自然不能带多少交互。

工具的掌握都是多学多用,多做demo例子。产品经理还是要以思维逻辑为优先,如何能快速的将需求理清,并整理为案,通过原型快速的将需求传达出来,才是重点。

当然熟练掌握Axure也是必备技能之一,待你工作效率已经超越别人2-5倍的时候,你就不会满足静态稿了。学无止境!

内容下载地址:

作者链接:http://pan.baidu.com/s/1pKSiUi3 密码:htcz

在线预览:http://t9ymya.axshare.com/auto.html

 

本文由 @陈张良 原创发布于人人都是产品经理 ,未经许可,禁止转载。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 可以 分享一下你做的效果作品吗?麻烦了楼主 😉 ,感谢

    来自福建 回复
  2. 可以 分享一下你做的效果作品吗?麻烦了楼主,感谢

    来自福建 回复
  3. 你好,楼主。百度云盘的链接可以分享一下吗

    来自福建 回复
  4. 自适应视图非常好用啊,要做公司的官网,正愁我是不是要画两份甚至多份原型图呢,这个功能还是听开发说的,就看到了axure也有自适应的功能,但是说实话挺好用的,这就在前提是开发准备用一串代码维护两个前端,将所有的东西都模块化,接下来看设计师的造化了

    来自浙江 回复
  5. 我设置后预览没有自适应的效果,请问是什么原因呢

    来自北京 回复
  6. 原来axure有这个功能啊,好强大!正急需,谢谢分享

    来自广东 回复
  7. 啥机构呢?

    来自北京 回复
  8. 收获颇丰

    回复
  9. 很赞!最近打算好好学Axure

    回复
  10. 看着不错哈哈

    来自北京 回复
专题
18739人已学习15篇文章
库存管理是管理商品和数量之间的关系。本专题的文章提供了库存管理设计指南。
专题
16624人已学习12篇文章
本专题的文章分享了产品经理需要知晓的API接口知识。
专题
15713人已学习10篇文章
再好的产品,没有优质的推广渠道加持和App投放增长的方法,也很难实现有效传播和增长。本专题的文章分享了App投放推广指南。
专题
15948人已学习11篇文章
采用IPD开发流程,在初期能把各种工作问题识别出来并扼杀在摇篮中。本专题的文章分享了什么是IPD开发流程?如何应用IPD开发流程?
专题
66660人已学习25篇文章
做好微信运营比做好APP运营还重要,因为用户把时间都给了微信。
专题
10175人已学习17篇文章
本专题的文章聚焦鸿蒙操作系统应用开发实践,通过典型案例解析开发流程与技巧。内容涉及ArkTS/JS语言特性、UI框架使用、设备协同等关键技术点,并包含性能优化与多设备适配等进阶知识,帮助开发者快速构建全场景智能应用。