浅谈WEB端布局框架的思考与设计(3)

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多一个右内容面板。在此布局中，最重要的基础层通常为左侧栏导航模块。综合型布局1&2根据网站自身的产品规划及功能定义可删减右内容模块、页脚等内容层模块。

以上是九种最常用的默认布局，通过基础模块以及分层逻辑可以相互组合、嵌套的方法，可以总结出更多的Web端布局框架并落地到项目中。

「魔方网站布局的构建与实现」

一、项目背景

魔方是CDX创意设计中心发起的设计工具化平台。项目初期规划的子产品涉及了设计侧及开发侧，包含了设计资源库、设计工具、设计板、组件代码等多维度不同类别的产品。作为最重要的多功能、多信息的载体，项目起步后，我们首先需要考虑的就是合理的布局框架，为将来高效、精准的表达和流畅的体验做好基础。