UI设计师必看:详解最全面的组件化开发与设计指南

这就毫无章法可言了，像狗皮膏药一样想贴哪里贴哪里，还可以像下图里这样层叠着贴。总之，绝对定位的元素不会占据常规布局和浮动布局中的任何空间，而是直接挡住它背后的内容。不过既然可以层叠，就有谁在前谁在后的问题。这和设计工具里的图层是一样的，当然有办法可以控制。

一个页面是如何搭建出来的？

为了让大家看得更清楚，我做了一个动画演示，大家感受一下页面搭建的大致原理：动画演示—在线播放—优酷网

布局原理的宏观概念

现在要讲的是两个更宏观的概念：流式布局与弹性布局。我们前面有提到常规布局，那个概念与这两者不能相提并论。其实这两种布局都是基于前面提到的原理实现的，只是区别在于对待自适应问题上采取了不同的策略。

1. 流式布局；

看上图中的App store界面，在iPhone 7和7 plus上略有不同。虽然布局形式类似，但7上面只能看到一张banner，而7 plus则能看到左右两边banner露出来。而且App展示区域里，7上能看到3列多一点，7 plus则能看到4列多。屏幕大则视野更大，能显示更多内容，这是流式布局的思想。

2. 弹性布局；

弹性布局则是另一种思路。根据屏幕尺寸变化，让界面上所有元素等比例放大缩小。所以无论在什么尺寸的设备上，看到的画面都是一样的，信息容量相同。只是到了大屏幕上，会变得像老年手机那样硕大无比。

这两种自适应方式都有各自的用途，不能说哪种一定更好。但我们在设计时可以考虑一下这个问题，什么类型的设计适合哪种布局。

设计组件化

补完了基础知识，现在就可以讲组件化设计的具体方法了，设计师如何运用组件化思维？

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!