简介
自适应视图是应用在移动端的设计,在设计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的白板」找到我,任何问题,只要我会的,知无不言言无不尽~加油!