浅谈常见的网页设计布局方式
世界工厂网线上生态学院 世界工厂网线上生态学院：制造企业开展线上业务的加油站 浅谈常见的网页设计布局方式 在前端开发中页面布局总是最开始的工作，就像盖楼时，先搭框架，然后再填砖，前端也是一样的，先做好页 面的布局工作。 通过浏览不同的网站发现，页面的布局都是大同小异，总结下来大概就几种： 一、顶部大图 Banner+简单的栅格 无论屏幕多大，这种布局都能够为用户展示充足的内容，供用户浏览和探索。虽然这种布局随着屏幕、设备而 有所差异，有的设计师会倾向于设计成固定宽或者横跨整个页面的布局，但是总体的模式都大同小异。导航栏 顶部大图，图片上叠有文字标题 24 个分栏，承载不同类别的信息，有的会有图标主要的内容区域页脚这种布 局设计干净清爽，有足够强的视觉表现力，并且常常采用的响应式设计，断点也很好控制。顶部大面积的轮播 图或者 Banner 也有许多插件或者应用来帮你实现。 原理：这种布局中，每个元素都各司其职，并且整个流程是富有逻辑的，顶部大图足以营造氛围，给予用户特 定的体验，下面的次一级元素能够做的很好的支撑。 相关趋势：越来越多这类网页开始采用色彩丰富的插画式的图标，而扁平化的设计和这种布局页面有着天然的 契合。 二、弹性布局（伸缩布局） CSS3 引入了一种新的布局模式Flexbox 布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有 效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为 Flex。 Flexbox 布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对 位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 Flexbox 布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。 例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间 放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox 布局功能主要具有以下几点： 第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局； 第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大 小； 第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间； 第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； 第五，可以控制元素在页面上的布局方向； 世界工厂网线上生态学院 世界工厂网线上生态学院：制造企业开展线上业务的加油站 第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览 器渲染中不按照文档流先后顺序重排伸缩项目顺序。 三、经典的 F 式布局 研究表明，用户在浏览网页的时候，习惯于沿着 F 式的阅读轨迹来浏览信息，也就是说，用户喜欢从左到右阅 读，然后向下移动，再继续从左到右阅读。这种 F 式的阅读模式对应的网页布局就是 F 式布局，最关键的信息 靠左显示，从上到下尽量保持在一条线上。页头和导航·靠左的一栏相对较宽，展示主要的内容·靠右常为侧边栏， 展示相关链接等内容页脚原理：人的行为很容易受到习惯的影响，而研究也证实了人思考、行为确实是模式化 的。从左到右，自上而下，人们大多习惯了这种行为模式。 F 式的布局模式拥有良好的适用性，便于用户理解和交互。相关趋势：F 式布局中侧边玩法很多，有的设计师会 将导航与之结合，或者在页面顶部加上大图 Banner。 四、浮动布局 浮动布局关键词，float，可以设置 left 或者 right，他使元素脱离文档流进而达到布局的目的，也是目前一个比 较主流的布局方式，但是使用浮动的结束以后，别忘记清除浮动哦。 五、框架布局 这一种布局方式，基本不会出现在普通的网站上的。因为，这种布局方式大多是应用于论坛网站设计上的。所 以，我们在浏览常规的网站时，基本不会浏览到使用框架布局的网站的。通常只有在处理浏览器兼容问题以及 静态页面的部分动态功能嵌入时才会考虑使用框架布局的网站设计布局方式。 六、极简分层 极简化的设计一直都在流行，它的流行不是没有原因的。开放式的空间让用户感觉更加轻松，也使得其中展现 的内容更容易被聚焦。如果极简化的页面中加入不多的几个并列的内容层，可以让信息更有层次，也使得极简 的页面拥有了细节。这种设计并不复杂，但是让页面更加有趣了，它可以适配更多不同类型的项目了。这也解 释了为什么用户如此的喜爱类似 Apple 官网这样的设计。 原理：极简化的页面中加入简单的几个分层，让页面有了视觉焦点，尤其是当设计者想要引导用户关注到某个 关键的内容的时候，这种页面布局很很容易实现这一点。 网页用哪种布局方式，除了看当下的流行趋势，也要看网站的类型，不同类型的网站适合不同的布局方式，不 要忽略网站自身的实际情况。
