前言
随着互联网行业的聚变式发展，业务模式从“信息透出” 到 “在线交易” 的过程中，网站 UI 构建也经历了“体验一致性”、“设计效率”、“UI系统构建/应用效率”、“多端适配” 等诸多问题。对此，构建一套设计系统（Design System）是解决用户体验规模化问题的关键。设计系统又包含页面框架布局、字体、按钮、表单等部分。首先，我们先来说一说系统的布局。
用户在操作系统时所看到的页面框架其实就是系统布局，它是一个产品最外层的框架结构，一般包含了顶部导航、侧边导航栏、面包屑、图文、卡片、内容等元素。系统布局是页面设计的基础，布局框架是整个产品的基础骨架，在骨架确定之后，才可进行下一步的设计，如统一的视觉表达元素，清晰的功能操作，流畅的交互表达。
布局的原则
系统布局规范，需要通过统一的设计元素和间距规范去引导合作设计师，跨平台使用并且能够适配不同屏幕尺寸，目的是达到一致性，可适配、可控性原则。
一致性：对于界面来讲，界面中视觉、结构、行为需要保持一致性。视觉统一：颜色、风格
可适配：布局是可自适应的，跟据用不在不同的设计环境下能够通过交互动效、界面样式有效作出极致适配反应。用户操作后需给出即时反应。
可控性：当用户看到界面时应直观有效传递内容，如界面中模块区域明确、内容组织明确、表意明确都能使得用户快速理解。界面需要简单直白，让用户快速识别，减少用户记忆负担。
适配方案
经过调研得出在中台系统中用户使用的电脑屏幕主流分辨率分别为：1440*900、1366*768、1920*1080、1280*800，而1280是主流分辨率中最小且最为保险的的一个尺寸，在设计页面时设计师如果能够在1280尺寸下，缩小宽度或拉升页面宽度都能保证没有遮挡或挤压问题，那么设计是合理的。在我们的规范中页面在小于1280时需要吊起系统的横向滚动条。在中台系统中考虑到用户效率问题很少做响应式，所以常规情况下设计师会限定界面的一个最小值。如果设计师把画板设置为1440或者1366时可能会存在其在画板中页面大小正好合适，但是页面上线以后缩小浏览器可能会发生遮挡或挤压的情况。所以我们建议设计师们使用1280宽度画板画图。
页面框架
首先先分析一下页面框架，我们将页面的用户操作行为进行层级区分。我们至下而上将元素进行层级分层，目的是把用户界面模块化。界面可分成背景区域、内容层、全局控制层、内容弹层，每一层都具备独特性，将界面中所有的信息层级提取分类并且按结构属性分层，目的是能够使得页面视觉和交互逻辑符合用户的习惯认知。之前我们有提到过视觉层次、格式塔理论和信息框架，设计师在创建这一步的时候可以用来指导搭建一套合理的页面信息层级，一个内容模块都属于一个容器，容器可以承载各种内容元素。
背景层
背景层样式固定，在界面中永远置于界面底部，并且一般会给予背景层中性色，作用是方便突出内容层和全局控制层。
内容层
视图结构中最核心和复杂的一层，它与业务强相关，内容层的容器承载了业务场景的用户需要获取的核心信息以及辅助核心任务的操作。容器承载了内容，从Material Design中的Elevation（海拔）概念中可以了解到，它属于第二层级内容，基本布局结构有平行结构或者父子结构。如下图卡片属于容器，卡片中承载了数据图表等内容，整个卡片+内容就属于内容层。
全局控制层
全局控制层我们定义他在内容层之上，属于页面第三层级内容，一般在业务场景中对整个网站的控制以及导航功能如：Header menu、Sidebar menu组件，如下图中Header menu浮在内容层之上。
内容弹层
当前任务或者内容相关的临时出现层，是界面设计中常见的交互方式，优先级高于内容层，一般承载当前需要临时处理的任务或者需要进行内容补充说明等功能。如：Modal（Dialog各个平台叫法不一致）、Tooltip提示条、Popover气泡弹窗框、Notification通知等组件 。其中Modal是以滑出或者弹出的形式展现给用户。Modal它包括两种类型，一种是模态内容层不可操控，会打断用户的操作行为，被蒙版遮罩禁用，比如在业务中需要较为聚焦的分支流程操作时使用，用于向用户传递信息或获取用户的反馈。另一种是非模态，吊起弹出层后不印象内容层操作。当然，Tooltip、Popover、Notification都属于非模态，反馈较轻，不干扰用户使用界面。如下图的页面中的内容弹层使用了Popover，在次页面它的功能就是加以补充说明。
布局方法
对于设计师而言，在设计页面时必须熟练掌握一些基本设计基础知识，并且将这些知识灵活运用到实际的工作当中。比如设计师在搭建系统布局时需要熟知页面布局、格式塔理论、视觉层次等知识才可创建合理的布局基础。当然布局框架只是整个产品的基础骨架，在骨架确定之后，设计师才可进行下一步的设计，如统一的视觉表达元素，清晰的功能操作，流畅的交互表达。
定义布局模块
一个产品的信息框架取决于其特有的业务，它与业务强相关并且需要了解用户群体目标。根据业务和用户目标将内容组织搭建信息框架，形成系统布局的骨架，方便用户在浏览或操作页面时能够快速找到重点内容，提升用户使用效率。界面框架内系统布局是页面所有模块的组合方式，我们定义一个页面框架中基础模块和内容模块的数量最好不超过3个。经过调研和归纳总结出3大布局类型，分别是上下布局、左右布局、T字型布局。
上下布局
上下布局布局是Web端运用最广泛的布局方式之一，页面内容区以feed流形式展现，一般用在Web端官网首页。设计师普遍做法是对两边留白区域为内容区并进行最小值的定义一般定义值为1200较多（具体宽度要设计师如何设置栅格，后面会讲到如何设置栅格），当留白区域到达极小超过极限值之后需要对中间的内容区域进行动态缩放或遮挡，此逻辑需设计师根据业务所需而定。也有少部分设计师会设计成全屏布局，内容随浏览器宽度自适应。
其优点是页面结构清晰简单，强突出内容区，但缺点是布局的规矩呆板，变化少。设计师如果不注意合理的视觉元素和色彩细节变化，用户很容易感觉到乏味,此布局适用于层级较为简单页面。
左右布局
设计师在设计重内容，轻导航类型网站是常用左右布局作为基础框架进行页面设计。此布局把系统页面分为两大模块，其中设计师常见的做法是将左侧设置成导航栏模块并且固定，常常用来控制全局内容。而右侧区域设置成工作区域或内容区，内容区可进行动态缩放。
T字型布局
T字型布局常用在Web端的中台系统中，因为中台系统业务结构复杂、层级多，而T字型布局能够解决复杂结构的问题。使用此结构能够把页面结构清晰化，主次更加分明。设计师常常的做法是将顶部作为一级导航栏方便控制全局，二左边设计成是二级导航并且固定导航栏固定，右边的内区域可进行动态缩放(一般会把其设计成栅格动态区域)，内容随浏览器宽度自适应。
格式塔理论
格式塔心理学诞生于1912年。由德国心理学家Max Wertheimer提出，其在德文对应的单词Gestalt，意为完形、整体。
概括来说就是：在心理现象中，人们对客观对象的感受源于整体关系而非具体元素，也就是说知觉不是感觉元素的总和，而是一个统一的整体，部分之和不等于整体，因此整体不能分割。
在我们的现实的生活中有很多设计都遵守了格式塔原则，比如生活中一些logo设计，联合利华的logo：该品牌商标经过精心设计，将25个错综复杂且有丰富的内涵的图标都融合在一起，视觉上形成一个整体的 “U”。还有IBM的logo，我们的大脑通过眼睛审视时，结合了每个相邻的水平线组成的字母，他们彼此堆叠在一起，而不是8条水平线散布着的均匀的间隙。
同样的原理也适用于数字产品。格式塔理论有助于我们以有效的方式组织UI元素，从而使内容易于理解并且令人愉悦。视觉元素的呈现对用户体验有很大影响。如果对组件进行了合理的组织，用户则可以轻松导航并与产品进行交互，并享受过程。
格式塔原理主要包括以下几条原理：
-接近性
-相似性
-连续性
-封闭性
-对称性
接近性
物体之间的相对距离会影响我们感知它们的关系。相互靠近的物体被认为比相互距离较远的物体更有关联性。
相似性
有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式，并且将它们与特定含义或者功能联系在一起。
那么相似性的视觉元素可以由哪几部分构成呢？比如颜色，形状，大小，方向，以及纹理等视觉元素，组成相近的样式。
UI 设计规范中的控件组合成的组件，大部分都会使用到相似性原则，统一视觉样式，来表达统一的功能性。
连续性
我们的视觉倾向于感知连续的形式，而不是离散的碎片。并且能感知到整个物体的倾向。
连续性通过构图来帮助我们感知事物的形状和运动方向。界面中的设计元素，会引导眼镜在平面中的移动，提高界面的可阅读性。创建顺序并且指导用户浏览不同的内容分组。
封闭性
人们在观察一个物体的时候，视觉系统倾向于把不完整的局部当作一个整体来感知。将不连续的，敞开的图形自动补充，从而感知到它为完整的物体，而不是分散的碎片。
对称性
对称的原则指出，当我们感知物体时，我们倾向于将他们视为围绕这个物体形成的对称形状。大多数物体可以被分为两个或者两个以上对称的部分。当我们看到两个对称的未连接元素时，我们无意识地将它们整合成一个连贯的对象（或感知）。对象越相似，它们就越倾向于分组。
视觉层次
当UI元素被有序组合和结构化时，人们可以轻松的将元素应用在应用程序和网站，所以设计页面时需要结合视觉层次理论。视觉层次理论是设计过程的核心方法之一。最初是建立在格式塔原理的基础上，它观察到了用户对相互关联元素的视觉感知，并展示了人们如何将视觉元素归为一类。那么什么是视觉层次呢？它说起来并不难理解，但是在实际的运用当中，却是千变万化。
视觉层次结构致力于一种用户能够理解的方式呈现产品的内容，以便用户可以理解每个元素的重要性级别。它可以组织页面内容，以便大脑可以根据物理差异例如：大小，颜色，对比度，样式等区分对象。
网页或移动设计中，视觉层次一般分为三层：主层、副层和三层。其中主层一般是指头条标题等核心信息，也是要让用户第一眼就注意到的信息。副层可以是小标题等信息，展示出主要内容与提纲。最后的三层一般由正文或其他额外信息构成，展示全部的内容，可以用较小的字号。
一个模块中的层次感
「模块」指的是什么呢？就是组成网页的一个个内容模块，可以是一张卡片里面的内容，也可以是一个信息列表等等，总而言之是一个信息组。当我们拿到需求的时候，应该理解每个信息组里面的每条信息的价值，并且给他们分一个类。
比如有时候，PM 同学跑过来说：「我想加个大按钮」，「不想让用户注意到删除功能，但是一定要有」 ，或者「这次就想试一试，展示了这条信息点击率会不会涨」 ，又或是「这条信息展不展示都行，你设计的时候自己看吧……」 需求都懂，那么该如何分类呢？
根据四象限法则，给每个信息组中的信息按「重要——不重要」「必要——不必要」来分个类。
重要却不必要的信息，一般是从产品或流程本身来讲不是一定要有的信息，但是因为某种原因想要突显给用户，比如在信用卡的产品列表中加入每张卡的推荐理由，或者在餐厅列表中展示某某名人去过这家店……这些信息在列表中不是必须有的，但是对于引导用户判断又十分的重要，所以我们可以次一级的来展示，要让用户可以注意到，但也不能抢了风头。
哪种信息是必要但不重要的呢？比如一个活动弹窗的关闭按钮，一个订单的删除功能，一条免责声明等等，我们不希望用户注意到他们，但是这些功能又不得不存在，那么就要弱化展示这些信息。
不必要又不重要的信息，一般情况是要去掉的，除非在设计中信息太少了空荡荡的，为了排版美观才会把这种边缘信息留下占位。
接下来，当我们整理好信息层级之后，要靠什么手段来展示这些层级呢？答案是加大对比。
大小 + 重量 + 颜色 = 对比
**-大小 **对比的第一步就是大小的对比，在大家的认知中，大的东西比小的东西更显眼、更重要。
-重量 有时候由于空间的限制，字号不能再大了？字号大了也没拉开层次？试试增加字重量。
-颜色 颜色对于用户的感知有着巨大的影响。所以在进行视觉层次构建的时候，不同的颜色可以轻松构成层次结构，强烈的颜色比如红色、橙色都很容易引人注意。白色和浅灰通常可以用来作为大面积的背景色，和其他的颜色构成对比。在设计的时候可以运用主色和辅助色来拉开视觉层次。
-对比 大小、重量、颜色的运用，归根结底就是制造对比，这也是创建层次结构依靠的核心。一个元素和另外一个元素构成对比，才能有层次的展示他们之间重要程度上的差异，让用户更加容易获取到信息。
模块与模块之间的层次
说到模块与模块之间的层次，就又要提到格式塔理论中的相近性。模块与模块之间的相对距离会影响我们感知它们的关系。相互靠近的模块被认为比相互距离较远的模块更有关联性。
网格与栅格系统的应用
栅格就是规则的网格阵列来指导和规范网页中的版面布局以及信息分布，栅格系统最小的单元是网格。定义一个最小的单元格，栅格系统依照最小的单元格布局。日常设计工作中，栅格主要应用在界面设计中。而网格则主要应用在画册、海报等平面设计中。
关于网格
(1)网格线(Grid Line)
网格线又称布局分割线，它是构成网格结构的分界线。一般在布局中它们是由行网格线和列网格线组成。如下图是模拟网格做了一个示意，其中橘黄色两根线分别是行网格线和列网格线。
(2)网格轨道(Grid Track)
两个相邻网格线之间的空间。你可以把它们想像成网格的行或列。如下图橘黄色的行网格线和列网格线之间的空间既是网格轨道。
(3)网格单元格(Grid Cell)
两个相邻的行网格线和两个相邻的列网格线之间的空间属于网格单元格。这是网格系统的一个“单元”。如下图橘黄色的行网格线和列网格线交叉处即是网格单元格。
(4)网格区域(Grid Area)
由单个或多个网格单元格组成，它是可以用来摆放页面元素。如下图所示，橘黄色的行网格线和列网格线交叉处即是网格区域。
(5)网格设置
在设计界面时可以通过网格定制能够使界面更加有序、整齐、规范，网格的主要用途之一是保持设计元素对齐和排序。通过建立一个网格系统，设计师可以为自己创建一个结构来适配不同的屏幕宽度。
在我制定的规范中一般会把网格的基数设置为4，它不仅符合偶数的思路同时也能够匹配多数主流的显示设备，如中台系统的用户主流分辨率用1440x900、1366x768、1280x800。我们可以通过设置网格规范帮助设计师快速搭建页面，使用有律可循的布局空间的设计给到开发减少沟通成本。下图所示设计布局网格由三个元素组成：1.列宽，2.间距，3.边距。
在Sketch中设置网格，在菜单栏中找【视图】-【画布】-【网格设置】-弹出浮层可设置网格大小，网格设置的基数设置成4，之后在设计界面时可按照网格基础的倍数作为组件的大小和页面元素间距分割，如下图：
我们放大页面局部大家可以看到，把网格基数设置成4，每个网格单元格为4*4大小。同理，如果把网格基数设置成8以后，每个网格单元格大小为8*8大小。
关于栅格
删格基础知识
网页栅格也是大家口中常常提及的栅格系统。其实网页栅格系统是从平面栅格系统中发展而来，它延续了平面设计的方法与风格，在网页中使用栅格能够使得网页信息展现更加清晰明了、美观易读。
首先网页栅格系统基本由是栅格总宽度即页面总宽度（W）、一个栅格的宽度即列宽（a）、栅格与栅格之间的间隙即水槽（i）、一个单元的宽度（A）、外边距即最外侧的栏与屏幕之间的安全距离（M）组成。
列宽
列是栅格的基本单位，通常说的12栅格就是12个列。24栅格就是24个列。一个栅格的宽度（a），我们称之为列宽，一个列宽包涵了N个网格单元格（Grid Cell）我们也可以把它看成一个网格区域(Grid Area)，列宽非固定值，这样可以使内容自由适配任何屏幕尺寸。在栅格中列宽由屏幕尺寸决定。
水槽
栅格与栅格之间的间隙（i），我们称之为水槽，一个水槽宽度大于等于1个网格单元（Grid Cell）。在栅格中水槽为一个定值，宽度可以是N个网格单元，如网格单元格设置成4，那么水槽可以是4、8、12、16…N*4
栅格单元
1个列宽+1个水槽宽度即一个单元的宽度，一个栅格总宽是由N个栅格单元组成，次宽度不固定，由屏幕尺寸决定。
此外也有去掉边距的布局，把N个列和N-1个槽作为栅格的宽度的。
栅格总宽
列宽+水槽再成以N即是一个栅格的总宽，公式为：W=(A*n)-i。
栅格设置
常见的栅格分为12列栅格系统和24列栅格系统。其中12列栅格系统在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息分组较少、业务结构较简，单个盒子内信息体积较大的中后台页面设计。24等分的栅格系统适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对12栅格系统，24栅格系统变化更加灵活，更适合内容比较多样复杂的场景。但栅格有时候也不是划分的越细越好，24栅格精细，但有时候也显得琐碎，如下图分别是12栅格系统（左）和24栅格系统（右）。
小结
不论哪种Web界面布局方式，其都是为信息展示服务的。无论是导航引导还是内容引导，无论是一栏还是多栏，无论是T型结构还是左右结构最终的落脚点，都是帮助用户尽快地看到最希望看到的内容。设计是为业务服务的，而不是设计本身。
