Axure教程 | 自适应视图

简介

自适应视图是应用在移动端的设计，在设计App、小程序、网页等时非常好用，那到底啥是自适应视图呢？

直白点说：当你在做一个网站，它有PC端、移动端、Pad端时，我们通过自适应视图的功能，可以实现PC浏览就显示PC端的样式，手机浏览就显示手机端的样式。

使用自适应视图，可以做到：

• 可以快速生成多尺寸设计稿，调整方便，时时可预览。
• 可分享，效果堪比视觉并开发的版本，可以用来收集意见，降低开发的风险。
• 响应式，让我们的设计提案更加生动。

日常工作中，几乎极少使用自适应视图。因为Axure功能非常强大，如果你是一个设计师或者要做一些精细的交互稿，它就可以满足你。

而作为产品经理，更重要的是将逻辑和需求讲解明白，并且大部分都是明天要，所以是效率优先，自然不能带多少交互。产品经理还是要以思维逻辑为优先，如何能快速的将需求理清，并整理为案，通过原型快速的将需求传达出来，才是重点。

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

使用步骤

我这里使用的是Axure9版本，其他版本应该也差不多，这个功能应该是从7开始有的。

1、找到自适应视图

2、管理自适应视图

新建三个尺寸的视图，PC端、Pad端、手机端。其中PC端是基本视图，其他版本俊继承PC端。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZohlrDJQ-1625670551497)(http://qiniu.hughpro.com/20210707225611.png)]

创建完成之后，我们看下发生了什么变化：

• 可以看到左上角新增了三个tab标签，
• 每个标签都是根据我们设定的尺寸来显示白色工作区域，
• 影响所有视图的选项。

3、预览看效果

预览之后，可以看到，几个分辨率版本的内容在左上方都展示出来了，可以手动进行选择。使用不同设备访问的时候，也会自动展示对应尺寸的设计内容。

4、影响所有视图设置

针对「影响所有视图」选项，建议是取消勾选，不然在某一个视图里面做调整的时候，会导致其他视图的信息同样发生变化，会导致页面乱掉。

另外，有一个注意点：确保三个视图里面的使用的元件不是同一个，否则不管你是否取消勾选「影响所有视图」，都没有用哦，都会影响到你。

5、最终效果

总结

最近发现，有些操作性的东西，画的少了，就会有些遗忘，因为都做成元件、母版……不需要重新画了，所以，会逐渐整理成一个一个的小案例或者小知识点，记录下来，希望也能帮到有需要的小伙伴，加油！

有问题的小伙伴可以文章底部留言，或者私信我，也可以关注公众号「Hugh的白板」找到我，任何问题，只要我会的，知无不言言无不尽~加油！