还在苦恼如何搭建Web端布局框架？来这里找方法吧，CDX魔方项目组成员用血和泪的经验告诉你答案。
前言
对于承载多个子产品的网站而言，单一的布局形式不能完全适用，因此我们需要全方面了解相关的布局框架理论。这有利于我们在定义复杂结构的Web界面时得心应手，做到统一化、规范化、可拓展及可快速迭代。
整篇文章分为两部分：
- 了解布局框架要素。
- 项目沉淀：滴滴魔方网站布局框架的构建与实现。
布局框架要素
1. 布局框架在设计中的重要性
在涉及数字媒体的屏幕布局时，我们需要将一些看似互不相干的元素和谐、有序的组织在一起，这是很有挑战性的。
对设计师而言，熟练掌握知觉要素的格式塔理论、视觉要素的组织和结构及感觉要素的层级和秩序，并将这些方法论运用到布局设计的每一处，才能创建出该产品真正的布局基础。
布局框架能帮助我们正确考虑产品的焦点，理性的传达有效信息而不是感性的创意视觉表达。
布局框架能保证优质产品及良好的用户体验，方便用户对界面的识别和使用习惯。
布局框架是产品的骨架和基础。在框架确定之后，设计师才可进行下一步的构建——统一的视觉元素，清晰的功能操作，具体流程的交互等等。
2. 布局框架的设计原则
了解布局框架设计的重要性后，我们再来认识一下布局框架的设计原则，分别为统一性、逻辑性、可扩展性、可预测性。
- 统一性——确保产品布局在结构和视觉的一致性，为用户提供高度的舒适感。
- 逻辑性——视觉中的各种分类构成具有逻辑思路，结构联系紧密且通畅。
- 可扩展性——无论产品功能是简单还是复杂，布局框架能够随着产品需求的变化进行布局结构的延展和扩充。
- 可预测性——选择可预测和可识别的布局，并连接到体验的每一个环境中且在适当的地方引导用户。
3. Web端的基础模块和分层逻辑
我们在进行布局框架设计前，先来熟悉一下Web端界面相关的基础模块和分层逻辑。
基础模块
根据模块自身属性及功能定义。常见的模块有九类，分别为顶部导航模块、左侧导航模块、页眉模块、页脚模块、主内容模块、左内容模块、右内容模块、抽屉模块、弹窗模块。
分层逻辑
基础层为常置的功能底层，是提供稳定性和可预测性必不可少的层级，具体有顶部导航模块、左侧导航模块等。
内容层可分为常置展示层，具体有主内容模块、左右内容模块等。
叠层为动态出现的功能顶层，始终叠加在基础层及内容层上方，是链接上下体验流程的模块，具体有抽屉模块、弹窗浮层模块。
4. 常用的基础布局与扩展布局
本文主要梳理基础层、内容层相关模块所组合的布局框架。在查阅相关文章和书籍后，我们总结出了Web端三种基础布局和五种扩展布局。
上下布局
这种布局常用在Web端首页，上半部分为导航或页眉模块，下半部分为主内容模块。简洁明快，干扰信息少。随着屏幕、设备的不同，内容模块可设计成固定宽度或横跨整个页面两种视觉布局。
IBM Design首页即采用上下布局，黑白视觉系的顶部导航及大面积的主要内容模块展示图使得页面设计干净清爽，有足够强的视觉表现力。IBM设计师同时采用了响应式设计，控制好屏幕分辨率断点，使该官网在任意设备下浏览都能达到最佳的用户体验。
左右布局
左右布局常出现在欧美国家的设计网站，视觉冲击力强。
Atlassian Design统一采用了左右布局，页面左边为全局侧边导航模块，其他部分为主内容模块。从交互体验以及用色搭配等视觉层面分析，Atlassian整体布局结构清晰有条理，用户按照从左至右的视觉顺序浏览并可快速理解内容，精美绘制的插图更是让网站充满了吸引力。
「T」型布局
「T」型布局是Web端运用最广泛的布局方式之一，因布局效果酷似英文字母「T」而得名。优点是页面结构清晰，主次分明。缺点是规矩呆板，如果不注意视觉元素的合理运用及色彩细节，很容易让人「看之无味」。
Ant Design是阿里蚂蚁金服设计团队打造的工具型网站，用来落地支付宝公司旗下产品的设计语言、代码工具等等。Ant Design正是采用了此布局，作为基础层，顶部全局导航承接了所有子库入口的功能，内容区域再划分成左侧边栏模块及主内容模块两部分，此框架布局既能满足人们的「F」型浏览习惯又能解决信息层级过多的问题。
「C」型布局1&2
「C」型布局是在「T」型布局上的扩展，增加的页脚模块可设置成基础内容区域或功能操作区。根据基础模块的不同，可分为两种「C」型结构。
Audi.com是奥迪集团多年设计成果展示的Web端入口。在整体布局框架中，左侧栏导航模块被定义成基础层，页面右边被分为三块内容层模块，分别为页眉模块（也就是页面标题栏）、主内容模块及页脚模块。设计风格时尚大气，色彩、图形元素的和谐搭配使得页面布局错落有致。在交互操作体验方面，让用户做到真正的「don’t make me think」。
「口」型布局
这是一个象形的说法。页面顶部为基础层的导航模块，中间为左、中、右三块内容层模块，底部再嵌套一个页脚。这种布局的优点是充分利用版面特性可承载最多的信息及功能，缺点是页面拥挤，不够灵活。
Microsoft 作为业内老牌的互联网公司，其官方网站承载了产品应用、设计、开发等多类子项目，而内容的复杂性使得微软的设计师们在搭建此网站时考虑了「口」型布局。
综合型布局1&2
综合型布局是统称，原理就是遵循分层逻辑并在九种基础模块中自由组合、嵌套，是在简单的布局基础上有更多模块叠加的复杂布局。其差异就是布局模块之间的数量及模块摆放的具体位置不同。我们定义的综合性布局1比综合性布局2多一个右内容面板。在此布局中，最重要的基础层通常为左侧栏导航模块。综合型布局1&2根据网站自身的产品规划及功能定义可删减右内容模块、页脚等内容层模块。
以上是九种最常用的默认布局，通过基础模块以及分层逻辑可以相互组合、嵌套的方法，可以总结出更多的Web端布局框架并落地到项目中。
魔方网站布局的构建与实现
1. 项目背景
魔方是CDX创意设计中心发起的设计工具化平台。项目初期规划的子产品涉及了设计侧及开发侧，包含了设计资源库、设计工具、设计板、组件代码等多维度不同类别的产品。作为最重要的多功能、多信息的载体，项目起步后，我们首先需要考虑的就是合理的布局框架，为将来高效、精准的表达和流畅的体验做好基础。
2. 项目分析与布局定义
魔方项目前期做了以下几个方向的分析与研究。
同类产品分析
在魔方还只是纸面信息框架的时候，我们分析了各大同类网站，梳理出相应布局框架的特性和优缺点，也就有了本文上半部分的理论成果。
魔方产品分析
刚孵化的产品都会经历从暗到明、从0到1的过程，魔方也不例外。最初产品形态并不清晰时，我们进行了多方面的自我分析。
- 第一步思考整个魔方的定位、产品模式、设计目标以及目标用户会如何理解魔方、使用魔方。
- 第二步定义每一个子产品的项目目标，并分析其中展示信息内