用户在操作系统时所看到的页面框架其实就是系统布局，它是一个产品最外层的框架结构，一般包含了顶部导航、侧边导航栏、面包屑、图文、卡片、内容等元素。

对于设计师而言，想要了解一个中台，首先要了解它的系统布局，系统布局是页面设计的基础，它与页面的关系，就如同建筑与地基的关系。日常完成需求时，UI界面反复的调试页面宽度与卡片比例会占用我们大量的时间。为了提高工作效率,并且把更多的时间放在业务、视觉创新等方面，我们就应该需要一套完整的布局规范。

    对整个公司产品体系而言，内部员工与普通用户使用的操作系统达到几十甚至上百个，单一的页面布局满足不了各个子项目的使用场景。所以我们从前期的布局框架设计调研到产品业务的特性，定义了中台界面的几大类型，并且在我们的设计规范中定义了几大类型系统布局方式，根据其布局方式定制好栅格，方便日后在各个业务场景中使用，从而能够保持一致性、并且可扩展，方便快速迭代和维护。

重点概览
 

一、了解布局
二、网格基础
三、定义布局模块
四、网页栅格

了解布局

1、布局方法论

1.1 视觉层次

    对于中台的UI设计师们而言，良好的理性思维相对比感性的视觉思维更加重要，因为在UI设计师设计页面时需要把很多互不相关的元素有秩序的组织在一起，正确引导用户操作与使用。亨利.亚当斯（Henry Adams）曾经说过：“混沌是自然法则，秩序是人类的梦想”。人们总是喜欢秩序，因为秩序可以让事情变得更容易理解。这同样适用于数字产品的用户界面，当UI元素被有序组合和结构化时，人们可以轻松的使用应用程序和网站，并对产品感到满意，所以设计页面时需要结合视觉层次理论。视觉层次理论是设计过程的核心方法之一。最初是建立在格式塔原理的基础上，它观察到了用户对相互关联元素的视觉感知，并展示了人们如何将视觉元素归为一类。那么什么是视觉层次呢？官方概括：视觉层次结构致力于一种用户能够理解的方式呈现产品的内容，以便用户可以理解每个元素的重要性级别。它可以组织页面内容，以便大脑可以根据物理差异例如：大小，颜色，对比度，样式等区分对象。

    苹果的设计一直以来都是引领着设计趋势，其设计被国内外用户所认可，所以就以苹果官网作为案例。其中，字重对比：苹果官网在字重上给人眼前一亮的感觉，它采用Medium+Bold的字重使得标题与详情内容产生强烈的大小对比，用户进入官网的第一眼便能了解核心内容。颜色对比：在颜色上使用黑色背景承托产品和内容，强烈的黑白对比增强了信息传播中的识别度和对比度。图文排版：在图片与文字排版中使用了文字层和图片层互相叠加的视觉效果，使得页面层次感更加的丰富。如下图：

1.2 格式塔理论

     往往用户打开页面进行阅读或者操作界面时视觉的第一感受是产品的整体效果，而并不会感知到一些较细节的元素。往宏观来讲当人们感知一个物体到由许多元素组成的复杂对象时，人们会采用有意识或无意识的方法将这些部分安排到整个组织的系统中，而不只是简单的元素级。它适用于不同级别的感知，但是视觉部分似乎是设计师设计界面时最能体现价值的部分，这其实就是格式塔理论，格式塔（Gestalt）这个术语来自德语单词Gestalt，中文翻译为“形状，形式”。

    格式塔心理学家库尔特·科夫卡（Kurt Koffka）的一句话可以捕捉到这一运动背后的基本思想：“整体不是元素基因的总和”。官网概括：“在心理现象中，人们对客观对象的感受源于整体关系而非具体元素，也就是说知觉不是感觉元素的总和，而是一个统一的整体，部分之和不等于整体，因此整体不能分割”。格式塔理论中元素之知见的原则分别为临近，相似，连续，封闭和连接。

    在我们的现实的生活中有很多自然规律中遵守了格式塔原则，比如说每到秋天，北方的严寒气候不再适合大雁生存，这时候大雁便会飞往较暖和的南方，当人们看到天空正在南飞的大雁队伍，它们组织链接得十分严密，并且群体在同一个方向移动，所以队伍的形状在我们的大脑中将它们视为一个群组的一部分，产生人字形或一字形的图形。

1.3 信息框架

     刚刚我们也介绍了视觉层级结构和格式塔理论，接下来简单介绍一下信息框架，它也是在系统布局中需要考虑的内容。信息框架是将信息内容进行组织分层，一个产品的信息框架取决于其特有的业务，他与业务强相关并且需要了解用户群体目标。根据业务和用户目标将内容组织搭建信息框架，形成系统布局的骨架，方便用户在浏览或操作页面时能够快速找到重点内容，提升用户使用效率。我们用今日头条Web端和飞书Web端两个线上产品作为案例分析吧，今日头条和飞书属于两种完全不同类型的产品，那么其信息架构也完全不同。

     今日头条属于门户类新闻客户端，主要是生产内容展现给用户，首先进入到产品映入眼帘的是无穷式的信息流，它不需要用户登录/注册作为身份门槛，而是直观的把内容展示给用户，推送用户感兴趣的内容，也不需要用户决策任何选择，用户只需沉浸式的阅读体验即可，目的是方便第一时间抓取用户、吸引用户达到留住用户的目的。当用户产生兴趣以后想要进入下一步操作如：点赞、评论时才会弹出登录/注册，一方面是获取用户的身份等信息，另一方面是间接性的把用户留下来。从产品业务属性来看，今日头条的布局把重要的内容放入中间，并且占有整个布局的一半大小，其次放在内容两侧；

    飞书属于工具协作类产品，用户第一次打开产品需要注册才能使用。与新闻阅读类产品不同的是工具类型产品用户目的比较明确，所以首页做成一个功能介绍页面，作用是引导用户了解产品核心功能从而转化成产品的用户。当然功能介绍页也是一个网站的门面，首页想要出彩，不仅需要在布局上做的合理还需要考虑网站的色彩、插图等元素的统一性。在设计网站时，首页的功能介绍页一定要充分突出自身产品特色，强调出自身产品的优势和亮点，如飞书首页主要是想突出其产品能够提高工作效率，所以直接把“在飞书，享高效”slogan这句话放在了首页的第一屏，辅助文案详细的介绍了产品的核心功能，直接抓住用户的痛点。用户完成注册以后，进入到功能页面，如右下图可以看出，其系统布局的模块分成三份，占面积最大的模块属于产品最核心的部分也就是聊天窗口，较重要部分是联系人部分，最小区域是功能Tab部分。

1.4 小结

    所以对于设计师而言，在设计页面时必须熟练掌握一些基本设计基础知识，并且将这些知识灵活运用到实际的工作当中。比如设计师在搭建系统布局时需要熟知页面视觉层次、格式塔理论、信息框架等知识才可创建合理的布局基础。当然布局框架只是整个产品的基础骨架，在骨架确定之后，设计师才可进行下一步的设计，如统一的视觉表达元素，清晰的功能操作，流畅的交互表达。

2、布局的设计原则

系统布局规范，需要通过统一的设计元素和间距规范去引导使用者们（使用规范的设计师）跨平台使用并且能够适配不同屏幕尺寸，目的是达到一致性，可适配、可控性原则。

一致性：对于界面来讲，界面中的元素和结构需要保持一致性，如：在使用布局时应当使用一致的网格，基准线和填充，在使用设计元素时配色、图标、文本等需保持一致。

可适配：布局是可自适应的，跟据用不在不同的设计环境下能够通过交互动效、界面样式有效作出极致适配反应。用户操作后需给出即时反应。

可控性：当用户看到界面时应直观有效传递内容，如界面中模块区域明确、内容组织明确、表意明确都能使得用户快速理解。界面需要简单直白，让用户快速识别，减少用户记忆负担。

3、适配方案

    在设计过程中，为了减少设计师们的日常沟通和理解成本，在设计内部我们统一了一套设计画板尺寸为1280。经过我们官方调研得出在中台系统中用户使用的电脑屏幕主流分辨率分别为：1440*900、1366*768、1920*1080、1280*800，而1280是主流分辨率中最小且最为保险的的一个尺寸，在设计页面时设计师如果能够在1280尺寸下，缩小宽度或拉升页面宽度都能保证没有遮挡或挤压问题，那么设计是合理的。在我们的规范中页面再小于1280时需要吊起系统的横向滚动条。在中台系统中考虑到用户效率问题很少做响应式，所以常规情况下设计师会限定界面的一个最小值。如果设计师把画板设置为1440或者1366时可能会存在其在画板中页面大小正好合适，但是页面上线以后缩小浏览器可能会发生遮挡或挤压的情况。所以我们建议设计师们使用1280宽度画板画图。

4、框架

    首先先分析一下页面框架，我们将页面的用户操作行为进行层级区分。我们至下而上将元素进行层级分层，目的是把用户界面模块化。界面可分成背景区域、内容层、全局控制层、内容弹层，每一层都具备独特性，将界面中所有的信息层级提取分类并且按结构属性分层，目的是能够使得页面视觉和交互逻辑符合用户的习惯认知。之前我们有提到过视觉层次、格式塔理论和信息框架，设计师在创建这一步的时候可以用来指导搭建一套合理的页面信息层级，一个内容模块都属于一个容器，容器可以承载各种内容元素。

背景层：背景层样式固定，在界面中永远置于界面底部，并且一般会给予背景层中性色，作用是方便突出内容层和全局控制层。

内容层：视图结构中最核心和复杂的一层，他与业务强相关，内容层的容器承载了业务场景的用户需要获取的核心信息以及辅助核心任务的操作。容器承载了内容，从Material Design中的Elevation（海拔）概念中可以了解到，它属于第二层级内容，基本布局结构有平行结构或者父子结构。如下图卡片属于容器，卡片中承载了数据图表等内容，整个卡片+内容就属于内容层。

全局控制层：全局控制层我们定义他在内容层之上，属于页面第三层级内容，一般在业务场景中对整个网站的控制以及导航功能如：Header menu、Sidebar menu组件，如下图中Header menu浮在内容层之上。

内容弹层：当前任务或者内容相关的临时出现层，优先级高于内容层，一般承载当前需要临时处理的任务或者需要进行内容补充说明等功能。如：Modal（Dialog各个平台叫法不一致）、Tooltip、Popover、Notification等组件 。其中Modal是以滑出或者弹出的形式展现给用户。Modal它包括两种类型，一种是模态内容层不可操控，被蒙版遮罩禁用，比如在业务中需要较为聚焦的分支流程操作时使用。另一种是非模态，吊起弹出层后不印象内容层操作。当然，Tooltip、Popover、Notification都属于非模态，反馈较轻，不干扰用户使用界面。如下图的页面中的内容弹层使用了Popover，在次页面它的功能就是加以补充说明。

5、定义布局模块

界面框架内系统布局是页面所有模块的组合方式，我们定义一个页面框架中基础模块和内容模块的数量最好不超过3个。经过调研和归纳总结出3大布局类型，分别是上下布局、左右布局、T字型布局。

上下布局

    上下布局布局是Web端运用最广泛的布局方式之一，页面内容区以feed流形式展现，一般用在Web端官网首页。设计师普遍做法是对两边留白区域为内容区并进行最小值的定义一般定义值为1200较多（具体宽度要设计师如何设置栅格，后面会讲到如何设置栅格），当留白区域到达极小超过极限值之后需要对中间的内容区域进行动态缩放或遮挡，此逻辑需设计师根据业务所需而定。也有少部分设计师会设计成全屏布局，内容随浏览器宽度自适应。

左右布局

    设计师在设计重内容，轻导航类型网站是常用左右布局作为基础框架进行页面设计。此布局把系统页面分为两大模块，其中设计师常见的做法是将左侧设置成导航栏模块并且固定，常常用来控制全局内容。而右侧区域设置成工作区域或内容区，内容区可进行动态缩放。

T字型布局

    T字型布局常用在Web端的中台系统中，因为中台系统业务结构复杂、层级多，而T字型布局能够解决复杂结构的问题。使用此结构能够把页面结构清晰化，主次更加分明。设计师常常的做法是将顶部作为一级导航栏方便控制全局，二左边设计成是二级导航并且固定导航栏固定，右边的内区域可进行动态缩放(一般会把其设计成栅格动态区域)，内容随浏览器宽度自适应。

小节

    以上为Web最常见的三大布局，但是需要大家在实际的工作中灵活运用。设计师在日常工作中可能会遇到更为特殊的业务场景，设计师可以通过整理基础模块然后分析其业务的信息框架，将模块进行相互组合、嵌套归纳可以总结出更多的Web端布局框架并落地到业务中。