因而咱们需要全方面了解相关的布局结构理论。这有利于咱们在界说复杂结构的Web界面时得心应手，做到一致化、规范化、可拓宽及可快速迭代关于承载多个子产品的网站而言，单一的布局形式不能彻底适用。

　　一、布局结构在规划中的重要性

　　在涉及数字媒体的屏幕布局时，咱们需要将一些看似互不相干的元素调和、有序的安排在一起，这是很有挑战性的。

　　对规划师而言，熟练掌握知觉要素的格局塔理论、视觉要素的安排和结构及感觉要素的层级和秩序，并将这些方法论运用到布局规划的每一处，才干创建出该产品真正的布局根底。

　　布局结构能帮助咱们正确考虑产品的焦点，理性的传达有效信息而不是感性的创意视觉表达。

　　布局结构能保证优质产品及杰出的用户体会，方便用户对界面的辨认和使用习惯。

　　布局结构是产品的骨架和根底。在结构确定之后，规划师才可进行下一步的构建——一致的视觉元素，明晰的功用操作，详细流程的交互等等。

　　二、布局结构的规划准则

　　了解布局结构规划的重要性后，咱们再来认识一下布局结构的规划准则，分别为一致性、逻辑性、可扩展性、可猜测性：

　　一致性——确保产品布局在结构和视觉的一致性，为用户供给高度的舒适感

　　逻辑性——视觉中的各种分类构成具有逻辑思路，结构联系紧密且通畅

　　可扩展性——不管产品功用是简单仍是复杂，布局结构能够跟着产品需求的变化进行布局结构的延展和扩充

　　可猜测性——挑选可猜测和可辨认的布局，并连接到体会的每一个环境中且在适当的当地引导用户

　　三、Web端的根底模块和分层逻辑

　　咱们在进行布局结构规划前，先来熟悉一下Web端界面相关的根底模块和分层逻辑。

　　1. 根底模块

　　根据模块本身属性及功用界说，常见的模块有九类，分别为顶部导航模块、左侧导航模块、页眉模块、页脚模块、主内容模块、左内容模块、右内容模块、抽屉模块、弹窗模块。

　　2. 分层逻辑

　　根底层为常置的的功用底层，是供给稳定性和可猜测性、必不可少的层级，详细有顶部导航模块、左侧导航模块等。

　　内容层可分为常置展现层，详细有主内容模块、左右内容模块等。

　　叠层为动态呈现的功用顶层，始终叠加在根底层及内容层上方，是链接上下体会流程的模块，详细有抽屉模块、弹窗浮层模块。

　　四、常用的根底布局与扩展布局

　　本文主要梳理根底层、内容层相关模块所组合的布局结构。在查阅相关文章和书籍后，咱们总结出了Web端三种根底布局和五种扩展布局。

　　1. 上下布局

　　这种布局常用在Web端主页，上半部分为导航或页眉模块，下半部分为主内容模块。简洁明快，干扰信息少。跟着屏幕、设备的不同，内容模块可规划成固定宽度或横跨整个页面两种视觉布局。

　　IBM Design主页即采用上下布局，是非视觉系的顶部导航及大面积的主要内容模块展现图使得页面规划洁净清爽，有满意强的视觉表现力。IBM规划师同时采了用响应式规划，操控好屏幕分辨率断点，使该官网在恣意设备下阅读都能达到较佳的用户体会。

　　2.左右布局

　　左右布局常呈现在欧美国家的规划网站，视觉冲击力强。

　　Atlassian Design一致采用了左右布局，页面左边为大局侧边导航模块，其他 部分为主内容模块。从交互体会以及用色搭配等视觉层面分析，Atlassian全体 布局结构明晰有条理，用户依照从左至右的视觉次序阅读并可快速理解内容，精美绘制的插图更是让网站充满了吸引力。

　　3.“T”型布局

　　“T”型布局是Web端运用较广泛的布局方式之一，因布局作用酷似英文字母“T”而得名。长处是页面结构明晰，主次清楚;缺点是规矩板滞，假如不注意视觉元素的合理运用及色彩细节，很容易让人“看之无味”。

　　Ant Design是阿里蚂蚁金服规划团队打造的东西型网站，用来落地支付宝公司旗下产品的规划语言、代码东西等等。Ant Design正是采用了此布局，作为根底层，顶部大局导航承接了所有子库进口的功用，内容区域再划分成左侧边栏模块及主内容模块两部分，此结构布局既能满意人们的“F”型阅读习惯又能解决信息层级过多的问题。

　　4.“C”型布局1&2

　　“C”型布局是在“T”型布局上的扩展，增加的页脚模块可设置成根底内容区域或功用操作区。根据根底模块的不同可分为两种“C”型结构。

　　Audi.com是奥迪集团多年规划效果展现的Web端进口。在全体布局结构中，左侧栏导航模块被界说成根底层，页面右边被分为三块内容层模块，分别为页眉模块(也便是页面标题栏)、主内模块板及页脚模块。规划风格时尚大气，色彩、图形元素的调和搭配使得页面布局错落有致，在交互操作体会方面，让用户做到真正的“don’t make me think”。

　　5.“口”型布局

　　这是一个象形的说法。页面顶部为根底层的导航模块，中心为左、中、右三块内容层模块，底部再嵌套一个页脚。这种布局的长处是充分利用版面特性可承载较多的信息及功用，缺点是页面拥堵，不行灵敏。

　　Microsoft 作为业内老牌的互联网公司，其官方网站承载了产品应用、规划、开发等多类子项目，而内容的复杂性使得微软的规划师们在搭建此网站时考虑了“口”型布局。

　　6.归纳型布局1&2

　　归纳型布局是统称，是拥有更多内容模块的复杂布局。如何界说归纳性布局呢?大家能够根据网站本身的产品规划及功用差异挑选适宜的模块数量，并界说各个模块地点的方位及层次。如图所示，咱们界说的归纳性布局1仅仅比归纳性布局2多一个右内容面板。

　　以上是九种较常用的默许布局，经过根底模块以及分层逻辑能够相互组合、嵌套的方法，能够总结出更多的Web端布局结构并落地到项目中。