自适应架构 gartner

动态设计

• 什么叫自适应设计？
• 实现Axure的自适应设计
• 总结

什么叫自适应设计？

自适应设计其实指的就是自主适应浏览器的变化。很直白的解释就是，正常情况下的认知是你的电脑屏幕>平板屏幕>手机屏幕，随着物理显示屏的减小，则能显示的像素也随之变少，也就意味着如果同一套设计用在了三端上你的可见内容和用户体验将会很差。
因为显示牵扯到前端开发的设计，作为一个合格的产品经理你总不能发三套原型设计给前端自己去找其中的异同点吧，这样既浪费产品经理的设计时间，也降低了开发的效率；博主当初做全栈开发的时候，写这种自适应屏幕的代码，肯定不愿意去来回切换文件，因为大屏幕肯定使用的是固定宽度，而小屏幕多数使用的是流式页面布局（不理解的可以百度一下）。但是最终显示的内容肯定是相同的，只是各端展示的样式可能会有点差异。

实现Axure的自适应设计

2. 首先先明确我们要实现对哪些屏幕分辨率的覆盖。选出几个典型的分辨率建立自适应视图；
   随便建立一个页面，在样式里就有添加自适应视图的链接按钮。



4. 建立成功后，画板内会显示你所有视图的命名；



5. 其中想要点击哪个视图就可以单独建立元件绘制原型。右边的勾选按钮则是勾选后，无论你在哪个里面进行位置、尺寸、样式的更改都会影响所有视图。
   其中建立的时候有个继承关系。解释一下这边，比如你iphone继承了iPad的视图，你在iPad里面绘制原型会在iphone视图里进行显示。只有父会影响子，对子的修改并不会影响父（除非你勾选了影响所有视图）。
7. 在其中建立如下的原型框架；
   Landscape Tablet：



8. iPad：



9. phone：



11. 浏览器的结果展示；
    随着屏幕分辨率的变大，我们显示的框架也在变化。



12. 
    



13. 
    

总结

产品经理需要把更多的时间放在寻找问题的道路上，这句话是老生常谈。这样我们就需要提高效率，在自己提高效率的同时也需要帮开发提高效率，所以在解决问题的道路上必须达成一致，高效是第一个目标。这样才能做到结果导向。无论是在做产品还是开发或是其它的岗位，我们都需要总结。Axure只是一个辅助，作为产品人员这也是一个基本功，需要去摸索甚至是系统的学习和规整一下这些知识，这样才能做到孰能生巧。