比对出行时长

每天，世界上有40亿人在城市中穿行，这个不断增长变化的群体占据了世界人口的一半还多。了解人们如何出行以及出行的演变对于改善我们的城市、环境和数十亿人的生活至关重要。我们创建了 Uber Movement，来帮助大家增进理解。

视频地址：https://youtu.be/bszvEIMVsIc （需翻墙）

目前，Uber已在全球700多个城市提供服务，所有出行数据不仅能帮助我们提高服务质量，也有可能帮助到城市规划师，以及那些渴望提高城市建设水平的人。Uber Movement允许用户以多种方式查看数据：用户可以查看某个日期某次出行的平均耗时，也可以查看某个区域不同日期范围内的平均耗时，或者可以对比同一个区域不同的两个行程的耗时。

图1：从华盛顿市中心出发到各地所需的出行时长

图1中的截图展现了从华盛顿市中心到达城市其他区域的平均耗时（在2016年3月16日铁路运输因维修而暂停服务）。截图a中显示了晚高峰的耗时情况，截图b显示了两周前铁路运输未中止的耗时情况，截图c则比对了两个时段下的数据，指示出铁路服务暂停对路面交通带来的严重影响。如图示，在上述情况下，晚高峰时段从1400 K St NE区到1500 Kearny St NE区的平均出行时间增加了67.8％。

对于需考虑在哪里新增公交线路的公共交通机构，以及那些判别什么时候主干道需要进行道路养护的城市机构，都能够通过这些数据了解到什么时候减少车道会对交通的影响最小，应向驾驶者提供哪些替代路线。

眼见为实

为了让这些数据有价值，必须让它们有使用价值。这就需要数据可视化的加持了。作为负责 Uber Movement 的产品设计师，我需要确保我们分享的数据是尽可能清晰易懂的。

我们遇到了一个有趣的问题：如何展示两个不同却又有关联的可视化元素。「时长热力图」展现了在一个特定的日期（例如，2016年1月11日星期一下午）下，从任一起始点到某个位置的耗时（以分钟为单位）；也可以是一个跨度长达几个月（例如，2016年3月至5月的工作日早晨）的平均耗时。这个热力图使用了相邻色，基于相同的颜色来调整色调由亮至暗（如下图1所示，浅蓝色至深蓝色）。

「比对热力图」能够让用户对比相同路线不同时段下的平均耗时。这里需要凸显信息的对比度，哪一个时段下的耗时更少，少多少？对于该热力图，我们使用了对比色（如图2）来表现数据由0至两极（快与慢）。如果差值为零，则表示两种情况下的耗时相同。我们企图通过两个对比的颜色尽可能的凸显差异。

我们的用户会在这两种热力图中连续反复切换，所以我们需要将这两种模式从视觉上明确区分出来。

图2：早期设计的5阶色（左侧单位为绝对耗时，右侧单位为相对耗时比）

在早期的设计中（如图2），5阶相邻色（由淡绿色至蓝色）被用来表现路程的绝对耗时，而5阶对比色（由绿至淡黄再到红色）则用来表现两种条件的对比。

初期尝试使用五个颜色梯度，但在可用性测试中发现地图的色彩辨识度低（见下图3）。主要有以下几个问题：

• 我们通过颜色表现由A点至B点的路程耗时，每一个目的地区域根据时间被赋予5阶范围中的一个颜色，并有20%的透明度，叠加在地图上。这样的设计呈现出由中心至外围的渐变效果，区块之间对比度较低，使它们看起来糊在一块，让色彩背后的数据以及地图上的标签都不那么易读。
• 结果就是，5阶色彩没有足够的对比度将中心至边缘的区块区分开来。
• 另外，5阶色彩不足以满足不同城市，不同时间段耗时的有效展示。

显而易见，可用性测试的参与者难以从地图判断出耗时，特别是当地图缩放聚焦在市中心时，也难以区分两种模式（耗时热力图/对比热力图），见图3。

图3：西雅图的出现时长

图3，以早期的设计效果（5阶相邻色）查看从西雅图市中心至其他区域的平均耗时，截图a 展现了西雅图所有区域的耗费时长，颜色让区块看起来“糊在一块儿”。截图b则展现了缩放聚焦至市中心区域时的效果，难以区分不同区域。

设计探索

通过多步的探索实验，我将这个复杂的设计难题拆解为几个不同的小挑战，并验证不同的方案，最终获得一个色彩系统达到易读性最理想的热图效果。

1.通过相邻色和对比色两个样本有效区分耗时热力图和对比热力图

由于同时应用相邻色与对比色，所用的配色就必须是“四色系”配色方案以明确区分。（译注：tetradic color 的翻译可能不合适，根据定义，其为一种大胆的配色方案，四种颜色对立均等地分布在色轮的四个方向上。）我使用了 Uber Movement 的品牌色（#2473BD）作为相邻色的基准色，然后使用 Paletton.com 列举了几组“四色系”配色方案，将四种颜色分配为两对互补组合。

图4：为实验准备的色阶方案

2.根据时长间隔等比或是梯度增加色组的色彩阶层数

早期设计从5阶色彩范围开始（如图2、3），两种模式的热图都产生了一种“糊在一块儿”的渐变效果。我们希望这个系统可以满足不同体量的城市，从市中心到外围区域的平均耗时跨度从30分钟到1.5小时不等。仅使用5种颜色来表现0至1.5小时，显然不足以让用户有效辩识地图上的时间跨度。

我实验性地将色彩范围的阶层从5增加到9，11，13。时间间隔分别以等比增加与梯度增加罗列（梯度增加以30分钟为总时长）。

表1：5、9、11、13色阶方案（左侧为等距增加，右侧为非等距增加）

之所以选择了梯度增加，是因为根据我们与城市规划者的沟通，了解到他们是基于「交通分析区（TAZ）」这种交通规划模型来进行分析的，它将每个区域以人口密度划分。城市区域的人口密度相比郊区会高很多。基于市区人口密度高，在市区对交通状况进行定义时，以每5分钟为间隔相比在郊区更有效。

颜色组通过 Chroma.js颜色助手计算生成。通过单颜色的变体给予一种连续性（见图5）。图中左侧（方案1）使用了单色系，右侧（方案2）则通过不同色调的颜色组合增加色组内的对比度。

图5：用于实验的2个色阶（左侧为淡色系，右侧为多色系）

3.尝试通过提升对比度去除掉区间的渐变效果

我将不同的颜色方案放到测试环境中去看看实际效果。为了去除渐变效果，在不受时间值和透明度影响的情况下，使用了彩色比例尺上的离散色值（见图6右侧的效果）。这样处在相同色彩尺度区间的区域看起来合并了，能够很好地辨别出区域之间耗时的异同。

图6：采用离散色值消除渐变色。（从左侧变为右侧）

早期的配色方案是基于「耗时」调整的色值，并且使用了20%的透明度，由此显示出一种「渐变效果」，导致邻近区域过于相近，用户难以根据颜色判断数值差异。新的配色方案则取消了以上两点，这使得相同时间的区域合并，清晰的色带使其更易读。

我还开发了个程序用来计算邻近色组的对比度（见下方表2），方案2配色中的9阶色彩范围表现出最佳的平均对比度，其次是11阶。考虑到平均路程耗费时长在不同城市会有较大的差异，方案2中的11阶色彩能提供最好的扩展性与可读性。与早期方案相比，新方案的对比度提高了30%。

从上面的图表可以看到，方案2配色有更高的对比度。其中，颜色阶次越少，对比度也越高。

4.在测试环境中对比颜色方案

基于以上的结果，我将方案1（单色系）排除了。我们将方案2放到测试环境中查看了两种间隔取色策略的效果。（译注：这里的两种策略指的是上面图表1呈现的两种取色方案。一种是例如每10分钟递进一个色阶，等分；另一种则是会变化，例如前30分钟每5分钟递进一个色阶，超过30分钟则每10分钟递进一个色阶。）

表2：邻近色组的对比度计算

下图7展示了波士顿城整体区域的热图效果，让我们再看看聚焦到市中心的效果如何。

图7：波士顿城整体区域的热图效果

图8更进一步地确认了「变化时间间隔取色」提供了更高的对比度。

图8：「变化时间间隔取色」后的效果

5.对配色色阶进行微调

在这一系列的实验之后，才明确了这个方案（方案2中的11阶色彩）属最佳效果。能够很好地满足视图中大跨度时间差的呈现。不论是城市的整体纵览或是聚焦在市中心区域，都能提供最佳的对比度。

我们的内部团队对实验进行了评审和测试，并最终敲定了色彩范围（见图表1），结果将在近期发布。

随着越来越多的用户在 Uber Movement 中探索他们的城市，我们也在不断的学习与迭代，让数据更有效地为大家所用。

因效用而美

数据可视化的最终目的还是信息沟通。当我们试图清晰地传达事实时，创作物的美学不是附属品，而是一种内在价值。美感不只是粉饰。当数据可视化被合理地创造时，它因效用而美。

我们以一种微小的方式，通过不断试错与探索，试图让人们以一种全新的视角看看这个世界。它是有效的，也即是美的。

文章来源：UXRen    作者：Dawei Huang

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

在B端产品中，数据主要通过表格的形式展现。本文是我从实际工作出发，结合项目和过去经验对于复杂业务类的表格设计的一次总结。

1、表格的介绍

1.1表格的定义

表格（Table），又称为表，是用来收集、整理、组织、分析数据的二维矩阵。它既是一种可视化交流模式，又是一种组织整理数据的手段。

1.2表格的构成元素

通常表格的组成元素以及相关元素会有多个部分，笔者根据自己设计表格的工作经验将表格概括为容器、筛选区、功能性按钮、表头、表体以及底栏等六个部分，其各个部分包含的相关元素如图所示。

容器：包含表格的所有内容。

筛选区：包括搜索和条件筛选。方便用户快速查询定位数据，一般位于表格上方。

功能性按钮：比如常见的[新增]按钮和各种批量操作按钮。

表头：说明数据的内容，可以包含筛选、排序等功能。

表体：包含行和列数据，按列可以分为多选列、数据列、操作列。（多选列=多选框；数据列=呈现业务展现需要的信息；操作列=针对单行数据的操作按钮，比如管理、编辑信息等。）

底栏：包含数据量、单页条目、总条目、分页等，底栏数据也可以放置在表格顶部。

1.3表格的样式

1）几种常见的风格样式

a.网格型：表格有均匀而明显的分割线，边框单元格比较明显。

b.水平线型：仅显示水平线可减少整个网格的视觉噪声。

c.斑马条纹型：隔行交替使用不同底色来区分数据。

d.自由形式：移除所有分割线，通过尽可能减少视觉噪声来创建极简外观。

2）关于样式的选取技巧

网格型：对于数据之间的关系紧密（列信息较多而没有足够空间用留白来分割信息）且有对比关系的。

水平线型：它能显著减轻表格在垂直方向的视觉重量，提升用户进行大量数据对比时的速度。因此对于所有数据集大小，此样式都是最常见的。

斑马条纹型：每行交替使用不同的颜色背景是帮助用户在阅读时保持其位置的另一种好方法。对于较大的数据集，建议使用此样式，在较大的数据集中，交替模式将很清晰，并且不会引起特定行突出显示的混乱。

自由形式：对于小型数据集，如果用户在阅读时不需要帮助就可以保持位置，则建议使用此样式。

信息内容的有效传达是表格设计的本质，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上。所以，边框的颜色应非常淡，不能妨碍快速浏览。

2、表格的设计技巧

表格是为可读性而生的，一个结构清晰的布局能大大提升用户对信息的接收速度和理解程度。因此，设计易读，易扫视，易比较，易操作的表格结构是表格设计的首要目标。

下面我将以公司财务中台的表格改版为例，逐步说明表格中每个结构的设计。

这是改版前后样式对比图：

2.1筛选区设计

筛选区可以看作表格的导航，由搜索和筛选这两部分组成。一般搜索和筛选会同时出现，但是两者一般很少同时使用来对数据进行定位。搜索更多的是对单一或者包含某个字段的的数据来进行定位；筛选则是用来查询一类数据。

根据MECE分析法，筛选区可以有以下的表现形式：

• 常用搜索少用筛选，若筛选项多，可以选择隐藏筛选项，筛选少可以展示出来；

• 搜索和筛选都常用，可以将搜索和筛选都展示出来；

• 常用筛选少用搜索，筛选和搜索同时展示；

• 筛选和搜索都不常用，展示搜索隐藏筛选。

1）搜索

在样式上，搜索可以分为简单搜索、标签搜索、高级搜索等三类。

• 简单搜索：由一个搜索框和一个按钮组成。可以输入一个或多个条件进行搜索。

• 标签搜索：在简单搜索的基础上加上标签，即先选标签，在输入搜索内容。

• 高级搜索：即点击更多展开其他搜索条件，减少了更多条件对用户的干扰，但降低了易发现性。

  
  

2）筛选

根据筛选的位置，可以分为标签筛选、表头筛选两类。

3）案例小讲堂

对于数据集较大的B端系统来说，往往筛选条件比较多，都将其展示出来会导致空间占比过大，影响了用户对表格信息的获取。下面以我公司的财务中台为例，讲讲如何优化筛选区，希望对大家有所启示。

3.2.3 版本中筛选区样式

筛选条件全部展开，目的是让用户对信息进行快速的查询、过滤，以快速准确完成目标任务。但业务复杂，数据集过多少，筛选条件也相应增加（空间占比大），看起来非常冗余，不利于快速定位目标。为了平衡扫描、查询、过滤、分析等这些操作，复杂业务的表格区筛选需要进行一定的优化处理，这样才能满足满足业务需求同时，又符合用户心智模型。

方案A  整齐划一

整合筛选项，采用表头筛选+标签筛选的样式，缩减筛选区的页面空间占比。

讨论结果：虽然这个方案使筛选区的空间占比缩小，整体页面也看似整洁不少。但表头筛选在复杂的业务系统中存在几个弊端：

a.数据集往往很庞大，表格不能展示所有字段，往往采用列固定的形式来呈现数据的完整性。以财务中台为例，高频筛选功能已被遮挡（如上图），筛选前需先对表格进行横向滚动，无端增加操作；

b.应无法展示全部字段，用户无法清晰的感知到筛选了哪些内容，增加认知学习成本；

c.表头中的属性并不是都可以进行筛选，用户不可感知哪些可以筛选，需要滑动表格检索。

方案B 强调主次关系

采用展开式的标签筛选样式，对不常用的筛选项做隐藏处理。但因业务场景的复杂度，高频筛选功能还是很多，没有解决本质的问题，如下图：

方案C 分状态展示（逐渐呈现）

在方案B的基础上进行了优化。提炼与流程相关的状态，按步骤显示，每一步只显示当前需要关注的内容，如图：

状态的提炼过程

1）整理每个单据的状态，理清关系

结合业务流程可以很明显的注意到，单据只有通过了审核才能收款，只有收款才能进行核销。状态是一种递进关系（审核 ➡️ 收款 ➡️ 核销）。

2）结合财务人员的工作流，提炼出单据的以下几种状态，之前存在到问题（表格中单行数据的操作不一致），也得到了完美的解决。如图：

2.2功能区按钮设计

1）按钮的表现形式

建议在复杂系统设计中使用圆角矩形的按钮样式。

理由如下：

a.人眼处理圆角更容易（认知负荷说）

Jürg Nänni（Visual Perception的作者）表示，视网膜中区处理正圆形的时候是最快速的，而处理边边角角的时候则比较费力，大脑处理的速度也较慢。于是，长得圆润的圆角矩形相较于一般矩形，对于使用者来说就容易接纳许多。

Barrow Neurological Institute （巴罗神经病学研究）的研究也显示，一个物体的显著度与边角的角度呈线性变化，锐角相较于钝角要显得更明显突出。换句话说，角度越尖锐，物体就看起来越明亮；而越明亮的物体就越难以直视。

如上图所示角度越尖锐，看起来越显眼，在视觉上也比较令人感到明亮，不适，大脑的认知符合也越高。

b.使相似的内容更容易被区别

举个例子，如下图所示，即便间距相同，B 排的圆角矩形辨识度还是明显比A 排的矩形高。

这是为什么呢？

首先，第一眼看过去的时候，A 排的矩形整体是连在一起的，中间找不到断点。而B 排矩形，因为有圆角的关系，所以断点很明显。

其次，两种矩形的视觉聚焦：A 排由于直角的关系，视觉聚焦向外推，整体的效果比较发散。这会使得第一眼看过去的时候，容易分不清楚哪一条边框属于哪一块矩形。反之B 排因为圆角收拢的关系，视觉聚焦向中心推，区块就比较容易区别开来。

综上所示，圆角矩形是非常有效率的容器，在复杂场景业务中（存在很多种功能型按钮），按钮采用圆角矩形样式最提效。

这里要注意，圆角不是越大越好

在相同面积中，按钮的可操作区域随着圆角的增大而递减，因此在同等尺寸下的按钮中，小圆角的按钮明显比大圆角的按钮更容易操作。

同时在实际业务中，按钮常常被当作原子与下拉框联动组成下拉菜单控件。如若使用半圆按钮则无疑增加了下拉框的设计难度并且匹配起来也会略显突兀。

2）批量操作按钮的位置思考

来看个举个例子（针对财务中台批量操作的优化方案）

现存问题

方案A  信息前置

批量操作按钮全部展开不做折叠处理，信息前置来降低认知成本，方便用户记忆。

讨论结果：对于复杂业务来说，会有很多批量操作功能，按钮很多，造成页面拥挤，进而影响用户操作体验；一个位置出现2个主按钮样式，不推荐。

方案B 沉浸式操作体验

对于一开始不可用的批量操作按钮进行隐藏，勾选激活状态，显示在筛选区。

讨论结果：方案B的阻断性强 — 无法兼顾批量操作和数据筛选功能，无法满足复杂系统的场景操作。

方案C 上内容下操作，前2个方案的优化 

不做隐藏，类灰布置于底部。勾选触发操作条件，未做勾选时，用户点击时给出引导操作提示

为什么选择方案C？理由如下：

首先，根据古腾堡原则，用户的在做表格操作的时候，视觉流是左做到右，从上到下，方案A和方案B的视觉落脚点在表格的上方，显然是不符合眼动规律的。

其次，批量操作的功能属于财务中台的核心功能点，隐藏不是第一选择，而是类置灰的特除处理（在按钮旁给提示信息）

2.3表头设计

表头在能够概括的情况下，尽量简练、准确，一般可根据上下文关系来进行减短简化，以达到节省表格头部空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。如果精简后的生僻字段难以自我解释，可以跟一个释义标识，鼠标悬停时出现该字段的详细解释，同时满足新手用户、普通用户以及专家用户的需求。

2.4表体设计

1)数据对齐方式

在数据的对齐方式上，有以下3个建议：

a.文本左对齐

b.数字右对齐

c.表头与信息内容对齐方式一致

文本左对齐，符合正常的心智模型（阅读习惯从左到右）；表头与内容对齐一致，则是为了简化和降低视觉噪音，以便更好的获取数据信息。数字右对齐，有利于数据间的对比。

要注意的一个细节，例如，当列数＝2的时候，由于列与列直接的间距过大，导致两者的关联性较弱，如图：

这时又该如何处理？

为了增强列与列之间的相关性，当鼠标hover在行的时候，产生高亮。这种方式可能不是最优的，但目前只能想到这种方法，如果读者有更好的想法欢迎留言。

2)数字的字体选择

建议选用：Helvetica Neue、Helvetica、Arial、sans-serif.

苹方在数字字符上，不同数字宽度不一致，导致千位分隔符不在一条线上。而Helvetica Neue数字等宽，千位分隔符有序的排列在一条线上。所以，选择Helvetica Neue作为数字字体的首选字体。数值上下对比的时候，相同位置的数字在同一条竖线上，更加容易对比。

3)对操作项进行“解耦”处理

在财务中台系统中，常常由于权限的不同或者单据状态不同这两种原因，使得每行的数据拥有不同的操作项，如下图所示：

存在的问题：

• 当信息过载，操作项这个list非常长的话，页面将会非常拥挤；

• 文字按钮因为视觉特征比较明显，造成了不必要的分散注意力；

• 误操作率相对较高，同样因为表格空间有限，当操作区非常靠近，很容易一不小心就点错了。

针对这个问题所出的解决方案，如下：

方案A 下拉框样式

讨论结果：下拉框中可能存在不同操作，同样避免不了误操作这个问题。

方案B 错位显示

讨论结果：首先，这样的设计浪费大量的屏幕空间；其次，浪费开发工作量！因为在列表中实现一系列权限判断和操作，在详情界面中往往还需要再开发一次相同的权限判断和操作；再次，不同单据可能存在操作顺序不一样，上下移动鼠标会存在不同操作，用户代价非常高。

方案C  以不变应万变

回归『一个界面一个用户任务』的原则，列表中的单行数据只保留[查看]或[管理]操作，所有其它的单独操作都去往该单据的详情界面完成。

讨论结果：从开发的角度上看，此方案界面高度解耦，功能迭代方便，节约开发工作量；从认知成本上看，列表界面操作高度一致性，利于养成用户习惯；从操作效率上看，在详情页用户会明显确认目标单据，几乎不会误操作； 同时此方案节约了大量屏幕空间，更有利于用户对信息的获取；

4)关于表格中套表格的解决方案

场景：在财务中台中，有这样一种用户，需要对表格内的数据进行对比并编辑。

来看看之前的页面：

这样处理的不足点：

• 1.在查看和编辑信息时，无效的信息太多。降低了获取信息的效率；

• 2.切换单条数据时，页面出现跳动，无法快速检索到相对应的信息；

对此，在3.3.2版本中，我们对其做了相应的优化。运用侧视图（快速视图）的方式来呈现信息。一旦选择一个单据，它就会从侧面弹出的。

这个方案，它可以保持上下文，易于使用，即使是在垂直滚动视图中显示大量字段的情况下也效果良好。同时信息呈现的地方是固定的，利于检索，查找。

5)行高的制定方法

开始之前首先明确一下开发是怎么实现行高的。

从上图可以看出，开发在实现设计稿时，通常是按照行高来写的。

因此，表格行高=文字行高+上下间距。其中，文字行高可以设定为字号的1.2~1.8倍，上下间距可以设定为字号的1~1.5倍。

行高影响每行信息的易读性。除了上述的做法外，还有以下2种做法，来保证各场景下获取信息的效率与易读性。

做法1：不同分辨率使用不同行高

设计两套不同的行高，在大分辨率下显示较高的行高，给数据间提供更多呼吸的空间；在小分辨率下显示较小的行高，使一屏内可以看到更多的行高。Gmail就是这样设计的，如下图所示：

做法2：自定义行高

自定义行高为兴奋需求，可以提高用户的用户体验。所以我们可以视表格的具体情况来设计设置行高的形式，可以放置在设置按钮里，也可以在外部按钮较少的情况下展示出来。

2.5底栏设计

最后是表格的底栏，底栏也是不可缺少的一部分，承载的作用主要是告诉用户数据条数以及当前位置。分页的设计是根据不同的场景进行选择最优的设计方案。在不需要定点跳转的场景，建议建议删除跳页，删除多于的功能，使页面简洁、清爽。

3、其他设计细节

3.1 空白单元格的处理

表格中经常会出现空数据或无数据的情况，留白处理会给用户造成一定的困惑和误解，是系统没有加载出来吗？明智的做法，是无数据时用「-」来填充显示，数据为零时与上下数据单位、小数点相同的0来显示。

3.2减少图形元素的使用

尽量减少视觉符号的使用，因为视觉符号可能会使你的用户界面复杂，产生难以理解的内容。去除不必要的视觉干扰，例如不必要的图标、无规律的色彩等。

3.3省略 （气泡展示位置）

当列表中数据过长时，我们需要根据屏幕宽度调整列表展示方式，超过列表默认宽度的内容可以省略，通常用...表示，鼠标移入后出现气泡展示全部内容。

位置：建议展示在上方，因为我们的阅读顺序是从上到下，鼠标向下移动时不会被上面的气泡遮挡住。气泡面积不宜过大，根据屏幕尺寸控制在一定比例，一版不超过内容区的四分之一，展示不下的内容可以在气泡中增加滚动条。

4、后记

感谢阅读！本文结合了实际项目经验对表格设计做了一次总结，在具体项目中，你可能需要根据产品特性和用户需求进行调整。如果你还有什么好的想法和建议，可以在评论里留言讨论。

文章来源：站酷     作者：Hi_Nick 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

作为公民，我们在用我们擅长的设计去服务社会，在这个过程中形成自己的积淀。这是不可用金钱来衡量的价值。

作者：蓝蓝

  蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

苹果WWDC 2020在6月23日通过线上形式召开，本次开发者大会没有发布太多硬件产品。不过macOS的新版本macOS big Sur依旧引来了大波关注，坦诚的讲这次版本更新属实是很震惊，这可能是近10年苹果第二次颠覆性的改变，上次还是2013年的iOS 7开始全面扁平化，从而引发了设计圈「扁平拟物大战」。

从系统连续性上看AirPods可以在不同设备上无缝切换，不同设备直接可以复制粘贴等等，显而易见的一件事是，苹果启动了macOS的「 iOS化」，所以回归到设计上，这次的升级对设计语言上的影响概括来说有以下几个方面：

• 全局设计调整（iOS/iPad化）
• 拟物设计风格再次复苏了么？
• 降低视觉复杂性-布局结构的简化处理
• 重塑feedback设计
• 信息提取效率进一步优化

全局设计调整

逐步 iOS 化的 macOS

不知道大家有没有这种感觉：以前从诺基亚（或Android手机）切换到iPhone，动机是cool～，漂亮的外观让人第一面就爱上了，恨不得马上就拿起来把玩。现在给你个选择切换回Android手机，不管那款手机有多漂亮多美好看，心里第一句话很有可能是：「XXX手机很棒，但我已经离不开苹果的生态了哦！」（我就是这种德行，尝试了N次还是回来了哈哈哈哈哈。）

这大概就是苹果在系统打通的层面下的功夫，更加注重生态的维护，在不同的设备间寻找更多场景产生更多联系。从设计的层面来看，iOS化的macOS对iPhone用户更加友好，有相同的操作习惯，不必在mac和iOS上来回的切换。其实在Material Design推行的过程中就有相似的做法，Chrome的全面MD化，让整个设计语言贯穿在移动设备和个人电脑中。

1. 完全继承iOS基因的控制中心/通知中心和dock

全新的control center，可以看的出继承了iOS/iPad OS的语言，UI和交互几乎是没有任何变化，整合系统一致性的初衷是甚好，在当下这个情况，不得不说亮度和声音的调节我更依赖于物理键盘（或touchBar），不太清楚硬整合在一起的理由（难不成是过度解读了，也许人家就想继承继承）。

从苹果对产品的终局目标来看，也许会在硬件上取消物理控制按键或者更加优化 touchBar 去操控必要的属性（也有传闻说这是在为触控版本的 macOS 做准备）。

同样iOS化的通知中心（讲真，用户实际的桌面未必这么干净，真是担心本身在电脑侧使用频率就不是那么高的通知中心被混乱的文件夹淹没）

2. 进一步强调的沉浸式氛围

全局设计中最令我欣喜的是menu Bar的更进一步的优化！我在sketch里模拟了下效果（非严谨模拟哦），大概得出的结论是加高了背景模糊值，减少了本身的填充透明度，达到了现在的效果。

感官上来看的话是一个微小的改动，但从层级整合的角度这是苹果设计的一大提升，通过光影等自然世界的隐喻抽象设计来减少硬性层级划分，也符合Alan Dye（苹果用户界面设计副总裁）提出的「深度，阴影和半透明性用于创建层次结构」。

拟物设计风格再次复苏？

除了壁纸以外，图标是最引人瞩目的变化啦！iOS化的图标规格的约束不用多说了，还有就是「新拟态」的第一次亮相。新拟态出现一定意义上是对这个时代获取信息时枯燥感的厌烦与反抗，举个例子：就像当你日复一日的穿基本款T恤的时候一定向往印花T恤，不管你是多么的成熟有型哈哈哈哈哈。

△ 左图为新拟态，右图为MD

icon的设计植入了新的设计理念，更突出去表现现实环境下的真实状态，注重光影和厚度的变化，尤其是光影。细看每一个icon，严格遵循同一个光源（正顶光）去设计。

但话说回来，很难讲这套icon是否成功，有几个明显的弊端也暴露出来了：

1. 可用性与美感的平衡

新拟态更重注光感的细腻程度，但对信息的有效呈现打了一定的折扣，这块苹果权衡决策下放弃了些许的美感，增强了有效的信息传递。

△ 图片来源dribbble

2. 统一性

对一个生态来讲，最最理想的是每一个生活在内的成员要和谐的相处，新的拟态风格相比扁平时代的图标显然给第三方开发者增加了难度，这种难度极有可能对没有太多设计资源但又想好好开发应用的创业团队造成一定的打击（换句话说催生了设计外包的工作也不错哈哈哈哈哈）。

总的来说，优势和弊端同时存在吧，啥事都没有完美的不是么～下图是这次改版里我相对还比较喜欢的几组icon了。

降低视觉复杂性

布局结构的简化处理

从官方的HIG介绍中，sidebar被重点提到了。透过去看，其实是布局的底层逻辑发生了变化，10.15的时候上下两段左右分栏的方式会存在一定的误区：全局action控制当前试图的交互？？？

从层级关系上也可以勉勉强强讲得通，但实在是太牵强了，特别是前进后退按钮存在所有文件之上这个蜜汁布局居然维持了这么久。层级清晰的梳理后带来的一大优势就是视觉的复杂性被降低了，借助现在这种列表视图，很大程度上前进后退都用不到了。

另外要提及的是设计师可以思考的问题，下一代模糊效果-渐进模糊。这种模拟现实生活的真实模糊包括阴影/反光/相互透出，同时要考虑光源/角度/环境等等，不再单纯的只是黑色/透明度（有兴趣的话可以在sketch里模拟下或者留言讨论讨论～）。

重塑feedback设计

人脑是需要一个提示来识别物体，我们称之为反馈设计，这是人机交互中非常重要的一个环节，这也是为什么许多按钮仍带有阴影的原因。但是，这版本的macOS工具栏图标丢失了形状以消除视觉复杂性，所以重塑后的反馈会鼓励用户去操作。

对于设计师来讲，不要害怕不强调所有选项，并非每个按钮都需要具有形状。只要设计足够的反馈一样可以起到被点击的效果，例如当用户将鼠标悬停在其表面上时，可能会出现更多的色彩更有趣的动画，并尽可能消除视觉上的复杂性。

信息提取效率进一步优化

这次升级除了设计上的优化外，safari的变化也足够令人欣喜，可以快速通过 tab 知道当前网页的内容的功能真是令人欣喜（虽然我记得之前Yandex浏览器就是这么做的哈哈哈哈）。

可以预知时间地点的apple map：

悄悄的说，感觉苹果越来越像腾讯了，有些小微企业的创新功能一受用户喜欢不是买过来就是抄过来，有一种垄断的感觉，想想悲催的Alfred和workflow都是这种命运。

总结

macOS big Sur 的升级可以说是苹果对未来的进一步探索，站在设计师的角度，有几个值得学习的点：

• 具备完成的设计语言的概念植入执行当中，不管是对真实生活的隐喻（光影）还是高度抽炼（材料设计），要时刻具备宏观视角，不以一两个页面论英雄哈～
• UI/UX的本质是对信息的规划编排，一定要保证用户的提取效率。

• 预期与反馈是极重要的一环，包括我在内通常在做设计的时候只沉浸于界面当中，忽视了界面里的互动设计。

文章来源：优设    作者：Nana的设计锦囊

什么是B端产品？

B 端产品也叫 2B（to Business）产品，使用对象一般为企业客户或组织。B 端产品帮助企业或组织通过协同办公，解决某类管理问题，承担着为企业或组织提升效率、降低成本、控制风险从而提高企业收入，减少企业内部损耗的重要职责。B 端产品的工作是合理实现企业需求，提高产品核心竞争力，并提升市场价值。在国内互联网语境中，B 端产品的狭义解释也基本可以和面向企业的 「网页程序」 等同，用更接地气的称呼可以叫「管理平台」、「管理端」 。

B 端产品大致分为两类，一种是支撑前台产品的，一种是管理各种资源的，前者就是我们熟悉的后台产品，后者就是给各个企业服务，提高各个企业工作效率的 B 端产品。

1. 支撑前台产品的：

C 端产品线的后台产品，比如我们常用的淘宝、微信、饿了么、美团这种 C 端产品，他都需要有个后台进行各种前端信息的管理。

平台级工具产品，比如微信公众号、头条号等对用户和文章的数据实时统计，可编辑文章，回复消息等

2. 管理各种资源的:

• OA 办公系统（OA 系统是通过程序的形式使办公流程自动化的解决方案）
• CRM 系统 （CRM 是企业专门用来管理客户的工具）
• SaaS 系统（SAAS 通常它指第三方提供给企业的线上软件服务，它既可以包含前面几种服务类型，也可以是一些更细化的需求。）
• ERP 系统（ERP 是对企业所拥有、调动的资源进行统一管理的平台）
• WMS 系统（WMS 是仓库管理系统的缩写，通过入库业务、出库业务、仓库调拨、库存调拨和虚仓管理等功能，综合批次管理、物料对应、库存盘点、质检管理、虚仓管理和即时库存管理等功能综合运用的管理系统）
• TMS 系统（TMS 是运输管理系统能够对物流公司的所有车辆进行实时跟踪（结合 GPS 系统），保持信息流和物流的畅通。）
• 呼叫中心客服系统
• FMS 财务管理系统

B端和C端的区别

1. 从定义上：

• B 端：To B 就是 To business，面向企业或者特定用户群体的企业级别产品；
• C 端：To C 就是 To customer，产品面向普通大众消费者。

2. 从用户群体上：

• B 端：产品一般是多种角色，有决策者、管理者和执行者，B 端往往是基于公司层面多人对某一问题解决方案进行整体评估。
• C 端：用户群体较单一，或者是专注于某一领域群体，可根据性别，职业或行为偏好等关键属性进行分类。

3. 业务场景

• B 端：业务场景多、逻辑复杂，根据每个人角色需要有不同的解决方案
• C 端：业务场景较单一，或者专注于某个垂直的使用场景。

4. 用户的诉求：

• B 端：控制成本、提率，注重安全和稳定
• C 端：重视人性和用户体验

5. 盈利模式：

• B 端：有明确的盈利模式和用户群体。
• C 端：大部份 C 端产品都是使用免费，以此吸引用户使用，等积累到一定数量需要探索变现的路径，或者寻找其他变现的路径。

B端产品该如何设计？

了解了 B 端和 C 端的区别，B 端产品的实用性大于美观性，能切实解决问题、配置资源的 B 端产品才是一个好的 B 端产品。在设计上对于操作和展示内容无关的元素，越少越好。很多人刚开始接触 B 端，会热衷于以 C 端视觉标准进行设计，对于真实的使用体验来说显得过于冗余、炫技。那么在 B 端设计中该如何思考去设计呢？下面我以设计前、中、后的三个方向去阐述我在做 B 端设计中的一些思考：

1. 设计前：

需求分析

• 分析产品的背景是什么，要做什么，要给用户怎样的视觉感受？他的竞品状况是怎样的进行一些分析（一般 b 端的产品竞品是极少的），了解一些行业内的资料。
• 目标用户群有哪些？不同角色的用户有哪些具体的权限？（这里简要了解下大概的人群，没必要像 c 端产品那种那么明确）
• 设计的产品主要解决用户或者业务上的哪些具体痛点，复现分析下使用场景，在需求分析阶段，要对产品本身和行业本身有一些基本的认知。

使用场景、硬件情况

• 了解用户的使用场景，可以有助于我们复现分析用户是如何使用我们设计的界面的。
• 用户的硬件情况，了解主流用户的屏幕分辨率是多少，根据主流分辨率做设计稿。现在 PC 主流的分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。这里也不是必需，如果用户全部都是用小屏笔记本办公，在 1920 设计稿上做适配可能小屏幕上展示会出现滚动条，会比较拥挤。

梳理交互流程：拿到需求后切勿打开花瓣站酷一阵撸，一定要对需求进行梳理（有的公司有专门的交互设计来做）做 B 端产品最重要的是对业务的理解，在梳理过程中一定要跟产品随时沟通，产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？充分理解了业务再去做设计就会有事半功倍的效果。

情绪版，定义风格：梳理完需求就可以定义设计风格了，在设计风格上尽量做到简洁，B 端产品实用性大于美观性，减少不必要的装饰元素给用户操作上带来干扰。这里可以运用情绪版去定义设计风格，大概的流程就是，根据产品业务背景定义设计关键词、根据关键词去找参考图片定义设计风格，产品的主题色也可以根据情绪版来去定义。

2. 设计中：

布局上根据导航可分为以下三种：

水平导航布局：类似于普通网页的布局样式导航，顺应了从上至下的正常浏览 顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。适用于导航较少，页面篇幅较长的产品。

垂直导航布局：可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。菜单栏还可以展开收起，适用于结构简单的产品。

混合导航布局：结合了水平导航和垂直导航的特点，层级可以扩展到二、三级菜单，且能够更加清晰地区分常用业务功能操作和辅助操作。适用于功能模块较多、较复杂的工具类型后台。

不同形态的布局，适配方式也不同。在做设计之前了解下适配的原理，避免在不同设备上出现视觉上的误差。水平导航布局，在适配方案中做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。如图：

垂直导航布局和混合型导航布局，在适配方案中常见的做法是将左边的导航栏固定，对右边的工作区域进行动态缩放。如图：

最后说一下布局上的栅格，栅格会使整体页面更加工整简洁，内容区域采用 24 栅格（并非固定数值，参照案例 24 栅格布局），就不一一叙述栅格的定义与运用了，大家可以参考下网上有好多关于栅格的文章，如图：

颜色

颜色上大致分为品牌色（可以结合业务属性）、功能色（比如红黄绿蓝灯成功、出错、失败、提醒、链接等。功能色的选取需要遵循用户对色彩的基本认知）、 中性色（如深灰中灰浅灰，文字部分应用居多，此外背景、边框、分割线、等场景中也非常常见） 其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

字体

在 B 端系统中优先使用系统默认的界面字体，常用中文字体有微软雅黑、苹方、思源黑体，英文字体有 Arial、Helvetica 系统不同展示的字体也不相同。

字体大小常见的有 12px、13px、14px、16px、20px、24px、30px 等。

规范

一份好的规范能够让设计和开发更加的工作，并且能够指引一些设计的细节，通过对大小、颜色、边距等、呼吸感等一些细节点的标注，可以让新加入的设计师快速上手设计。一个项目会有多个设计师的参与，规范化的设计语言，避免因设计控件混乱而影响设计输出。好的设计规范还能统一在产品中不同页面的相同板块的样式问题，为开发组件库奠定基础。

如何建立一份规范呢？大概总结以下几点：

• 首先是要梳理产品中不同板块所出现的场景进程收集（收集产品所有出现过的场景进行整理）
• 其次是把收集完的板块归纳分类（不同的样式、状态等可以分成不同的种类）
• 最后就可以定义规范了。

定义好设计规范能大大提高设计师的工作效率，在同一个项目中也能更好的把控项目的视觉规范，帮助设计师复用及设计延展。

组件

B 端产品的决策方是老板和管理层，在设计 B 端产品中往往也是大多数情况下会有接到比较紧急的需求的情况，所以在设计过程中就需要我们设计师更加去注重效率，提高产能。做东西时要有组件化思维，去总结分析页面模块中的一些共性，跟开发共同完成产品的组件库。

如果没有前端工程师，我们的设计组件库就是 PNG。所以，在开工前，一定要和那个技术不错的前端工程师聊聊做设计组件库的事情，其中最重要的是确定好：选择什么样的前端框架。

如果组件库服务的是 B 端或者中后台系统，那其实有很多可参考的开源组件框架：Ant Design、ElemetUI、Layui 等，注意不同的框架用到的前端技术不一样，兼容的浏览器版本也不一样，这要根据你们技术情况做选择。如果觉得开源框架的风格和你们的产品不统一，那就需要二次设计和开发封装。

下面是蚂蚁金服组件库，如图根据组件的功能特点做出了分类：通用、布局、导航、数据录入、数据展示、反馈、其他等。大家可以去官网查看，这里就不再一一做阐述了。

这个是饿了么的组件库：

推荐几个官方组件库：

• 饿了么官方组件库：https://element.eleme.cn/#/zh-CN/component/installation
• 蚂蚁金服官方组件库：https://ant.design/docs/spec/introduce-cn
• layui 官方组件库：https://www.layui.com/admin/std/dist/views/
• 阿里官方组件库：https://fusion.design/component/doc/102
• iviewui官方组件库：https://www.iviewui.com/components/menu

做之前大家一定要去多去查看这些大厂做的已成型的开源组件库，然后再结合工作业务特色做出自己公司特有的定制化组件库。有了组件库之后，再接到紧急需求，我们就可以做到事半功倍的效果。先去分析页面的构成，然后花费 80% 的时间去设计需求中 20% 的页面，剩下的通用型页面就可以直接用组件库堆出来了。

3. 设计后：

设计走查

在完成设计后，要整体对设计页面进行走查。从信息层级、文字、图标、图片等方面进行多次设计验证与测试。

高质量设计交付

设计稿命名一定要清晰规范，现在好多切图标注的插件，一键生成切图标注。现在就没有必要单独整理切图标注了，但是设计稿在交付前切图的命名一定要在设计稿里整理清楚，规范命名方便开发查阅。

推荐几款比较常用的切图标注的插件：

• 蓝湖：https://lanhuapp.com/mac
• pxcook像素大厨：https://www.fancynode.com.cn/pxcook
• Sketch Measure：https://oursketch.com/plugin/sketch-measure

设计追踪、校验

设计稿给到开发在设计过程中，要随时跟开发沟通。项目上线后要对线上效果进行实时 UI 校验，保证开发同学对设计稿的高度还原。还有就是对设计上线后的验证工作，用户使用和反馈是优化产品的重要途径，针对性地在一些主流的页面模块按钮进行一些数据的埋点，统计下用户的点击状况，实时对数据进行一些跟进，为下次页面改版优化，提供有力的数据支撑，提升产品的用户体验。

总结

不管 B 端还是 C 端，设计的价值在于通过视觉表现的方式去助力公司、助力产品实现用户的需求、帮助用户解决问题。B 端产品相对而言，场景、功能、业务流程、信息架构要比 C 端更复杂，面对的异常情况也比较多，所以 B 端在设计风格上尽量做到简洁，B 端产品实用性大于美观性，在每一个功能的设计都需要你去思考很多方面：用户易用、信息层级、未来扩展，你都要做出取舍，而对于每个模块都需要你思考、结合用户场景。所以想要做好 B 端设计，一定要去了解业务，了解用户需求。

文章来源：优设    作者：小六可视化设计

导航菜单对于用户的使用来说尤为重要，本文是我从实际工作出发，结合自身产品和过去经验对于导航进行的一次全面总结。

在任意一个 B 端后台系统中，导航菜单都是不可或缺的一部分，每个导航菜单都有其固定位置，通常这个位置是不可撼动的。所以说：导航菜单是 B 端产品层级重要的交互控件。

对于 B 端产品的用户而言，他们使用导航菜单的目的性很强。

到后台主要是对具体功能进行操作，导航菜单在功能的引导中发挥了巨大作用。因此，其主要的功能就是对 B 端产品进行分发、引导；帮助用户在复杂的后台页面中，寻找出自己真正想要的功能。

合理规划

1. 遵循7±2原则

导航菜单建议最多不要超过 9 个，最少不要低于 5 个。

原则解释：1956 年乔治米勒对短时记忆能力进行的定量研究，他发现人类头脑最好的状态能记忆含有 7（±2）项信息块，在记忆了 5-9 项信息后人类的头脑就开始出错。

在生活中我们经常会把一长串的数字分成 7 个左右的数组来记忆，这样会使难度降低很多，米勒称这种单位为「组块」。

是不是通过分组记忆以后，自己能记住的更多？这就是 7±2 原则的分组。

通过上面 7±2 原则描述我们明确到：在导航菜单当中，超过 9 个会给用户查找时带来困难，低于 5 个说明导航菜单的分发效率不够。

有人会说，在实际业务中，不会有那么理想，如果需要超过 9 个时，应该怎么办？

超过 9 个时，一定要对菜单进行分组，因为导航过多，用户寻找会十分迷茫，通过分组的方式，能够对菜单进行再次分类，提高查找效率。

举个例子：

比如在微盟、有赞、小鹅通的导航设计当中，微盟、小鹅通有很大不足，我们来一一拆解。

• 小鹅通：共有 14 个导航菜单， 且菜单之间形式不同，表现也会有所差异， 也因此对于用户而言使用起来会产生很强的疑惑感。
• 微盟：一共有 11 个一级菜单，不符合 7±2 原则，同时也能够感受到在视觉层面上，微盟的导航菜单没有分组，难以寻找和记忆。
• 有赞：虽然在导航的数量上也是有 9 个以上，但是它对菜单进行分组，有效提高了用户查找时的效率，因此在设计上更加合理。

2. 导航菜单不能隐藏超过两级

导航菜单隐藏超过两级时，代表着产品在用户的使用规划中，没有深入思考整个用户体验

导航菜单层级越多，用户体验就会越差，你会发现一些拥有三级导航的菜单，都会通过设计优化来实现隐藏导航的合并，从而减少用户操作负担。

比如有赞就是一个典型例子，在有赞零售的导航菜单中其实是有三个层级，但是通过交互层面的优化，将二、三级菜单直接展示出来，形成一个整体，提升了用户体验避免用户层层寻找。

同时在交互上，采用悬停+点击结合的形式，用户既可以通过悬停鼠标进行快捷操作。同时又可以通过点击，确定跳转查看该一级导航下的菜单，能够提高用户的操作效率。

3. 鼠标悬停还是鼠标点击

作为导航来说，其操作本身并不多，但是设计上，点击与悬停（hover）之间，还是存在很大差距。

这里想要说明这两个操作本身而言，并没有对与错，但是适用场景的不同，导致在设计属性上存在着较大差异。

鼠标悬停操作

鼠标在悬停时触发的操作时间太短暂，会给用户带来很强烈的挫败感，同时在悬停选择下一级菜单时，鼠标移动悬停也同样会造成这样的结果。因此在设计时，对鼠标悬停时的操作要格外留意。通常在悬停操作当中，只适用于只有一个菜单层级的菜单选项，这样用户在操作时更加方便。

鼠标点击操作

鼠标点击操作多发生于多级导航进行操作，同时鼠标点击的形式，会给用户正向的反馈，用户点击后明确知道菜单栏不会隐藏，因此在两个操作之间进行选择操作时一定要多加思考。

确定菜单广度和深度

导航菜单广度和深度的区别：

• 菜单广度，导航菜单中每一个层级包含的菜单项数目为广度。
• 菜单深度，导航菜单层级的数目为深度。

深广度平衡帮助用户进行快速选择，能够对整个产品架构有着第一眼的认识。

1. 当菜单广度过大时，怎么办？

当菜单广度过大，我们也能够通过设计的方法来优化导航菜单。

我举一个比较具有代表性的例子：腾讯云。

腾讯云目前拥有大概 100+ 个云产品，他们都分布在导航菜单上，因此在导航设计上，它采取一种新的模式：全部菜单导航、搜索菜单、自定义导航。

在全部菜单中，展示了腾讯云 100+ 个云产品项目，通过搜索进行筛选得到用户想要的菜单。同时在导航栏上，支持用户去自定义 5 个菜单选项，也因此用户将常用的菜单添加至此，更方便用户去寻找。这样在满足业务的前提下，通过一些个性的设计，使 100+个菜单也能够塞得进整个导航中。

2. 菜单深度过深时，怎么办？

当面临菜单深度过深时，通常需要从以下几个方面去考虑。

与产品经理沟通是否到位

这里主要是想通过与产品经理的沟通，了解到菜单的架构设计的原因，以及能否为你的设计进行一次重新的梳理，寻找一些值得优化的点。

建议在寻找产品经理之间，自己能够通过一些思维导图的软件将自己产品的菜单目录全部罗列出来，能够先多思考，为下面的沟通节约时间、提率。

用户体验地图的绘制

在一个 B 端产品中，用户的目的虽然复杂，但是研究用户每一步操作，还是会查找出一些规律，我们可以从这些规律中做些文章。

比如我们之前在一个医疗系统中，根据角色的不同，将医疗角色分为：前台、咨询师、医生、老板这四种角色，每个角色所关心的点都会有所不同。

老板最关心每个门店目前的情况数据，比如门店营业额、门店待客数、每个医生的治疗量以及治疗最少的医生。这些都代表着他不同场景下使用的习惯。

将这些情况分析以后，提炼出核心的需求点。

然后绘制完成他们的用户地图后，根据角色，明确每一个角色的日常操作有哪些，从而确定我们所有菜单所展示的位置以及整个菜单的层级关系。

菜单层级有区分

我将常见的导航区分进行总结，分为以下三种形式。

1. 颜色区分

颜色区分作为最直接最有效的一种形式，这种形式也是后台页面最初的状态，我通常会用颜色区分和移动端顶部状态栏的演变史做对比，就其功能而言他们都有很多相似的点。

微信在 2018 年 12 月份时，发布微信 7.0，将顶部导航由黑色转变为白色，引得大家争论不休，而经过时间不断洗礼，大家也逐渐接受了这个事情，渐渐忘去。

延伸阅读：

2019 年也有类似的事情发生，有几个产品的 WEB 端进行了一系列的大改，YouTube、Twitch、Twitter 都进行了重新设计，他们也不约而同的将块面去除，去掉多余的灰色，通过留白和空间将页面拉开。

这是否是下一个 WEB 端所要追寻的趋势，我还不得而知。

如果 WEB 端都有此改变，那么 B 端产品还会远吗？

说回 B 端设计，颜色上的区分和移动端类似，更多体现在导航层和内容层之间的区别，因为从本质上讲，这两个本身就属于不同的业务模块，通过颜色的区分，是最为直接，最简单的一种方式。

这种形式常见于很多复杂系统，例如：飞书。

左侧导航为深色，能够让用户获得更沉浸的体验，因为屏幕边缘都为深色，用户在使用时能够真正做到有区分。

2. 投影区分

在现如今的移动端产品，投影大行其道，弥散投影，高级投影随处可见，也逐渐影响更多 WEB 端的产品使用投影，增加自身产品 Z 轴空间。

Z 轴空间给导航带来了纵深感，同时也能够在功能层级上，通过分层设计，使页面层级关系明确，引导用户使用导航。

Material Design 设计的出现，正是 Z 轴空间的鼻祖，在我们的屏幕中开辟了第三个设计维度，在 Z 轴上展示增加了更多的交互形式。在几何体系中，Z 轴是 X 轴和 Y 轴之外垂直于屏幕的轴，我们通过引入 Z 轴在交互设计中呈现三维的物理空间感，使页面内容能够得到有效区分。

比如 Teambiton 在页面中运用投影，强化了页面层级的关系：

3. 分割线区分

分割线针对导航功能性不高，同时要满足很高设计感的产品。

分割线太深，页面十分割裂，分割线太浅，页面划分又不明确，因此需要设计师对分割线的把控十分合理。

分割线在 Dribbble 上见到过很多，通过简单的线条加上空间的分割，将导航区与内容区分开，形成很好的视觉感受。如果你是刚开始尝试做导航，不太建议尝试这种形式，因为对于页面空间的把控要十分苛刻。

导航可配置

B 端产品易操作性中，导航可配置操作算得上是一个重要的点。其中最主要是通过配置操作实现导航易用性的提升，而如何让菜单可配置，通常的做法有两种。

1. 我的菜单

如果你的产品是针对多数角色不同的用户进行设计，那么在导航设计时，可以考虑增加一个菜单选项：我的菜单，对于菜单进行标签处理。

设置一个我的菜单，将用户常用的菜单进行添加，能够满足每一位用户的菜单快速选择的需求，通过这样的自定义，用户在常用的菜单下，能够通过我的菜单进行快速跳转。

举个例子：在印象笔记当中，其快捷方式就是可以将用户想要的模块放置在此，可以快速跳转。

2. 角色配置

如果你的产品是为特定几类角色进行服务，那么在导航设计时，可以考虑根据用户角色的不同，给用户不同的导航展示。

通过角色的筛选，对复杂导航进行简化，同时管理员可以根据自身公司的业务不同，给用户配置出不同的角色权限予以满足用户的导航需求，这样在设计层面上能够减少很多不必要的麻烦。

四种常见导航菜单

1. 侧边导航

侧边导航是国内的 B 端产品当中最为常见的。

将菜单栏放置在左侧，页面布局上基本为左右结构，将导航菜单放置左侧固定。

因为侧边导航在国内产品中最为常见，因此把它优先提出来讲，国内厂商对于侧边栏导航尤为偏爱，在很多人心目中，感觉就只有侧边导航和其他导航两种导航形式，也就造成了在 B 端产品的发展也逐渐趋同。不过现阶段大家对于 B 端产品的重视，在设计上也开始多元化。话不多说，我们先来看看侧边导航的优点有哪些。

优点

• 扩展性较强：多级导航可以流畅展示，可以涵盖很多大而全的产品。
• 展示灵活：侧边导航可收折，收折过后用户的横向核心空间将会增大，页面展示效率也会大大提高。
• 快速定位：视觉起始线统一，用户可以根据首字进行查找，快速便捷。

缺点

• 不易阅读：侧边导航文字垂直排列，有悖于眼动的正常视觉方向。
• 阅读沉浸感低：侧边导航容易打断用户的正常阅读顺序，使阅读感降低。

线上产品：我们拿有赞零售进行举例，他就是一个典型例子。

菜单栏+功能菜单共有 15 个，然后通过导航的间隔将菜单进行分组，最多一个导航菜单共 9 个，满足 7±2 原则。

同时可以看到，有赞在使用三级导航时，通过右侧面积统一展示二、三级导航，方便了用户导航展示的同时，优化了用户的使用体验。

为什么国内B端产品大多数是侧边导航？

我在我的设计剪贴板中有回答过这一个问题，直接分享给大家。

2. 顶部导航

顶部导航在国外的产品当中，算是较为常见的。

将菜单栏放置在顶部，页面布局上基本为上下结构，将导航菜单放置上方固定。

顶部导航早期出现于各类门户网站，比如企业官网，各种咨询类的网站经常会采取这样的导航形式。说回 B 端产品中，顶部导航通常在 B 端产品中也是十分常见的，其中以国外产品最为集中，比如国外 CRM 三剑客：salesforces、hubspot、zoho 都是采取的顶部导航的形式。

优点

• 满足阅读习惯：导航为水平布局，阅读方式更贴近眼动的正常阅读顺序。
• 沉浸感强：顶部导航通常不会打断用户的阅读行为，对用户的干扰少。
• 设备影响小：导航顶部，整体页面稳定，页面对于用户显示器分辨率影响较小。

缺点

• 通用性差：同时受导航栏标题文字限制，对于每一个菜单的字数限制严格。
• 横向 Tab 数量少：承载不了太多菜单数量，超过 7 个后菜单排布会十分困难，横向空间利用率差。
• 扩展性差：水平导航最好不要超过二级菜单，超过二级菜单，用户使用成本高。

线上产品：

△ salesforce

销售 CRM 传奇人物，千亿美元估值，每年营收百亿美元，无疑是 B 端产品当中的一个标杆。

如果你是做 CRM，或者是 B 端产品，必看的一个竞品。

salesforce 采取的就是一个顶部导航，只是不同的是，salesforce 的顶部导航更多是将页头的功能进行合并叠加，虽然 salesforce 的交互方式不算优秀，但是因为其业务线不断庞大，这样才能支撑其整条业务线。就因为这样的问题，需要设计师在设计时，要考虑到整个系统的一个扩展性问题。做 B 端产品的交互设计有点类似后端同学写代码，我们现在设计的这个交互最少要满足未来一到两年公司的已规划好的产品的扩展问题。

△ hubspot

Hubspot 采取就是顶部菜单，二级菜单下拉展示，同时 Hubspot 是按照角色去划分顶部菜单，能够给用户减轻认知负担，更好的被用户所使用。同时在一些设计小细节上，比如顶部的主题色，既可以提升品牌感，同时在适当时可以作为进度进行一个展示，使用户能够更加深入地感知到其设计。

3. 混合导航

在 B 端产品中，感觉混合导航也是一个后起之秀。

它的页面布局为顶部和侧边，简单来讲，就是将顶部导航与侧边导航进行结合。通常将一级导航菜单放置顶部，通过一级菜单的点击后，展示侧边的二、三级菜单。在一些拥有复杂的逻辑关系，菜单之间关系分明的产品中，混合导航也越来越被大众所接受。在很多复杂的系统当中，混合导航真的是很不错的一个选择，我们来看看他的优缺点

优点

• 承载大型业务：在导航上，他能够展示 3 级甚至 4 级菜单，对于很多大型 B 端项目，混合导航算是更加合理的选择。
• 扩展性强：对以后有规划大量功能的产品，用混合导航，能使之后菜单扩展性更强。

缺点

• 占用面积大：要切换多个菜单，所以顶部和左侧会占用大量的空间。
• 菜单交互路径长：一、二级菜单间来回交互成本高，操作繁琐。

线上产品

云产品其实就是一个很好的例子，比如阿里云，他们因为自身产品线众多，对于导航的设计也是以复杂著称，多数情况下，面对这种复杂的导航时都会采取混合导航。他们能够通过混合导航，使用户对于导航每一个功能模块都有一个深刻的认识。

金蝶-星空定位就以 Paas 进行定制销售，分析过他的产品你就会了解到，他一共有 100+ 个菜单，同时算是金蝶的王牌产品，因此对于此类产品，应该着重去了解，也因此，对于每一个模块，都是通过大标题+小标题的形式进行设计，使用户在使用时能够明确知道自己想要什么。

现在各大复杂的产品都会采取混合导航，这样对于产品的架构以及各类菜单层级的分析也会起到很大的帮助。

4. 平台类导航的新趋势

平台类导航是我们团队内部自己的取名，给他的定义通常是拥有很多模块，比如 Teambition、明道云，拥有很多个模块，通过一个统一的平台进行内容的分发，比如移动端的钉钉、企业微信、纷享销客都采用同样的方式，但在 WEB 端当中，平台导航通常伴随着其他导航同时出现。

比如最近很火的明道云，就是使用了平台导航，他们将自己的产品分别陈列在页面的核心区域，通过对于工作台的设计，形成对页面的展示，同时形成一个平台类的导航，于此相对应的还有钉钉后台管理页面，以及企业微信后台管理页面，他们都是通过一个个平台类的模块对导航进行分发的。

文章来源：优设

左右布局响应策略动态演示。考虑到gif被压缩后效果不理想，所以做了一小段视频来帮助大家更好的理解响应策略。视频如果看着不清晰，选择清晰度为1080p蓝光观看即可

一、什么是响应式？

按照本人自己的理解，响应式就是通过合理的设计方案配合规范的技术实现策略，使同一个Web页面在各个终端（设备）不同分辨率屏幕上都能有最佳的用户体验。

这里说是用户体验而不是视觉效果是因为用户体验包含了性能、交互、效率等多方面内容，也就是说，对于一个线上的响应式页面，我们不仅要关注视觉上看到的，也要关注我们操作、使用时的感受，这些综合因素最终影响着用户使用后台系统时的效率与体验。而这里我提到的“合理的设计方案”就是本篇文章跟大家分享的重点：如何利用栅格系统完成后台页面的响应式设计。对于交互与性能方面内容，本篇文章不做介绍，因为两者涉及到我不太了解的技术相关知识。我提出这个观点主要希望大家在执行设计时，能有更全局的考虑，多跟交互与开发沟通，协力打造更好的用户体验

三、响应式的目的是什么?

后台系统做响应式设计的目的：提高屏幕利用率，最大化操作效率

1、提高屏幕利用率最简单的理解就是在大屏幕上显示更多内容，在小屏幕上通过数据筛选展示关键信息。一直以来大家普遍认为移动端碎片化严重，但实际上桌面端设备的分辨率也是有着不太均匀的分布，而随着新设备的更新，更多高分辨率屏幕不断加入，这种碎片化的趋势会更加明显，因而要想利用好每一块屏幕，让不同分辨率的用户都有好的体验，显然传统固定的布局是做不到了。

2、后台系统的应用特性，决定了响应式在后台设计中具有很高的实用价值。后台系统有两大主要功能：查看与操作。查看主要是各种数据，是系统自动生成的内容；操作是需人工干预、人工决策的任务，查看的数据为操作提供了依据，而操作支撑了公司或部门业务的正常运行。所以后台系统设计最基础的目标之一是如何通过良好的数据展示帮助用户提高操作、决策效率，而充足的展示空间显然是实现这一目标的基础，响应式设计通过为每个分辨率设定合理的版式布局，使数据在每块屏幕上都尽可能展示的最佳。优化后的数据展示，帮助用户更获取信息，从而提高了用户使用后台系统的效率与体验。

四、为何要利用栅格系统来进行响应式设计

响应式可以响应的前提有两点：1、页面布局具有规律性、2、元素宽高可用百分比代替固定数值，而这两点正是栅格系统本身就具有的典型特点，所以利用栅格系统进行响应式的设计是顺理成章的，也比较快捷，所以响应式与栅格化天生一对好搭档

栅格系统页面布局具有规律性、元素宽高可用百分比表示

五、利用栅格系统完成后台页面响应式设计的步骤

1、确立设计稿基准尺寸

设计稿基准尺寸是指我们从哪一个分辨率开始设计，也就是我们新建画板时画板的尺寸应该是多大。而这个尺寸确定的主要依据是我们后台系统所面向的主要用户的屏幕分辨率；我们分两大类情况来讨论这个问题。

（1）、如果我们的系统是给公司内部员工使用，由于公司批量采购设备的原因，公司内部员工的屏幕分辨率往往会比较统一，这种情况下我们需要拿到这个数据，然后以它作为基准尺寸开始设计。因为虽然响应式设计的目标是让页面在每个分辨率下都有最佳的体验，但实际开发中毕竟存在损坏，设计还原很难100%，因而大多数情况下还是基于基准尺寸的设计与开发，在用户端显示效果最佳、体验最好

。

（2）、如果我们的系统是平台级面向全网用户，或者虽然是公司内部使用，但是并不能统计到内部员工屏幕分辨率情况，就可以以1440*900作为基准尺寸开始设计。从统计数据来看，目前国内PC端用户屏幕分辨率排名前三的分别是1920*1080、1366*768、1400*900；1440的尺寸实际上是处于中间位置，如果以它为基准设计，最终向上向下响应适配后，相对误差最小，从而达成用户体验的最大公约数。

2、确定页面布局结构

页面的布局结构，是页面基本框架，后续的设计都是在这个大的框架下完成的，所以确定页面基准设计尺寸后，需要跟交互设计师或产品经理配合，根据实际业务情况讨论确定页面布局结构。一般来讲，后台系统有两种最典型的页面布局结构：左右布局与上下布局（这两种布局是最典型也是最基础的布局形式，其余布局，下期内容讲）

上下布局

上下布局的结构在传统网页中非常常见，而在后台系统中并不常用。这种布局的优点是符合用户认知，遵循用户从上而下浏览页面获取信息的习惯；贯穿全屏的导航栏设计也使页面显得正式稳重，除却导航栏之后相对较大的空间也为内容展示提供了比较充足的空间。缺点是顶部一级导航受页面宽度限制，数量会比较局限，同时导航层级较深时，交互效率也不够理想。所以该布局适合那些导航层级较少，内容展示充分的后台系统设计

左右布局

拥有侧边导航的左右布局页面结构，是在后台系统中更常见的页面布局形式。侧边导航栏可以固定也可以收起，相对比较灵活，同时文字横向排列的形式可以在竖向上展示更多内容，因此侧边导航比顶部导航能容纳更多一级内容，而层叠式的内容展示也使得一、二、三级导航内容关联更为顺畅，可扩展性也得到加强；由于侧边栏可以常驻在页面左侧，所以对于右侧内容的指示性也优于顶部导航，切换起来也更加方便。但同时，因为侧边栏的常驻，导致右侧内容区域空间被挤掉部分，所以相对上下布局的结构，左右布局的结构，内容区域空间会比较小；一般为了与页面其它区域做区分，导航部分会用更深的颜色、安排更多的图标和文字，这也导致了在视觉上左右布局的页面不够平衡，会有左边重右边轻的感觉。

3、对内容区域建立栅格系统

根据不同的布局类型，对页面内容区域建立栅格系统。对于一个利用栅格系统做响应式设计的页面来讲，主要有三大数值需要规范：Column、Gutter、Margin；对于Column、Gutter我们在上一期内容中已经有很详细的介绍，不再赘述，而Margin是页边距，主要确定了内容区域距离页面边缘的距离，它分布在内容区域的两侧，主要作用是通过留白把内容区域与周围环境隔离出来，从而突出内容区域的显示，此外还可通过Margin值来调整内容区域显示比例，使页面在视觉上有更好的呈现效果。所以一个用于响应式的栅格系统事实上由Columns、Gutters、Margins三部分组成。

上下布局结构与其对应的栅格系统

左右布局结构与其对应的栅格系统

4、根据实际业务内容确定盒子（Box）比例

上下布局结构的盒子

左右布局结构的盒子

5、确定响应策略

响应策略就是当视窗（Viewport）发生变化时，内容区域的元素如何去响应，具体到我们当前的栅格系统，就是Columns、Gutters、Margins以及由Columns跟Gutter组成的盒子（BOX）四者的值（主要是宽度）如何变化，以及在这种变化之下我们页面的布局如何调整。

为了方便直观的向开发工程师与团队里的其它小伙伴沟通，我们可以把这个响应策略制作成如下的表格，并在页面中标注说明相关元素的变化规律，供自己与开发参考。

由于带左侧导航的响应式规则相对复杂，所以我先以它为例跟大家交流下响应策略如何制定

左右布局响应策略表

如图，响应式是以视窗的最小宽度作为基本依据来制定每种宽度下Columns、Gutters、与Margins的响应策略，也就是说Viewport Min-width是做出响应的触发条件，视窗每达到一个最小宽度，就会触发该宽度下预设的页面布局方式，而每种布局都是在该宽度下的最佳布局，也是因此，响应式才会在各种复杂分辨率条件下都能给用户比较好的体验。

每个视窗宽度的最小值是触发响应的关键值，因此我们给这些用于触发的关键值起了个名字叫“Breakpoint”，每个Breakpoint触发一种响应策略，而每个策略持续（保持）的宽度范围就是图中绿色矩形的范围。以图中第二行矩形为例，该矩形代表的响应策略是：栏目数是8、水槽宽度16（SM）、页边距32、侧边栏收起且仅展示图标，当点击侧边栏展开图标时侧边栏以Push的方式展开,该策略触发的Breakpoint是768，保持范围是577~768。也就是当视窗宽度缩放至768时，栏目数量由上一级的12变为8，水槽宽度由24变为16，侧边导航由完全展开状态自动收起文字部分，仅保留图标，然后保持这些关键数值不变，直到视窗宽度达到另一个Breakpoint。需要特殊说明的是，第一行矩形中0~576（Min&Fixed）这个范围的视窗宽度是固定的，也就是在该套响应策略中，页面最小响应到576的页面宽度，当视窗到达这个宽度时，浏览器会限制视窗进一步缩小，因为当页面宽度比它还小时已经无法有效展示数据了，所以进一步的缩放是毫无意义的。

左右布局响应策略动态演示

考虑到gif被压缩后显示效果不理想，所以我做了一小段视频来帮助大家更好的理解上述响应策略在实际页面中如何发挥作用。视频如果看着不清晰，选择清晰度为1080p蓝光观看即可

左右布局响应策略标注

对于上下布局的后台系统我们根据内容区域（Container）宽度定义的不同方式，可以把它们分为两类：

1、内容区域定宽的后台系统（ Fixed-width Container ）

内容区域定宽是指内容区域在每一组视窗宽度区间内，都会设定一个最大值（Max-with），当内容区域宽度小于最大值时，区域内元素会响应视窗的变化；达到最大值后，内容区域不再响应视窗的变化，而是宽度保持该最大宽度值不变，此时我们通过增加页面两侧的margin值来响应视窗的变化。Flex Margin就是应对此情况的动态页边距。

 上下布局响应策略表（内容区域定宽（ Fixed-width Container ））

2、内容区域宽度流式 (fluid-width Container) 

内容区域宽度流式 (fluid-width Container) 的后台系统，它的内容区域 (Container) 距离页面两侧的页边距Margin是定值，因此视窗有多大内容区域就展示多大。

Q&A

1、后台系统必须做成响应式么？

并不是必须的，是否要做响应式主要是根据后台产品面向的用户来定的。如果是公司内部使用的系统，且员工配备的桌面设备都是有统一的分辨率，就可以不做响应式；如果是面向全网用户的后台产品（比如淘宝商家的后台管理系统，阿里云的控制台）或公司（部门）内部的桌面设备并没有统一的分辨率规格，那么就需要做成响应式。当然了，更实际的环境中是否做响应式还有技术实现、时间、人员成本等各方面因素的考虑，有时为了尽快的让业务运营起来，后台系统会做的比较“简陋”

2、为什么栅格系统没有适配到移动端的分享？

因为后台管理系统的使用场景主要是工作时间在桌面设备上使用，由于庞杂的数据内容在移动设备上展示困难、操作不便，因而很少有公司会把后台系统响应到移动端使用，所以我们今天说的后台响应式仅针对桌面设备屏幕。

3、对于iMac4k、5K这类超高分辨率的屏幕如何做响应式设计？

对于左右布局的后台系统，实际上它是全屏展示的，也就是屏幕有多大就展示多大，因而iMac的响应策略也是按照左右布局响应策略表里的策略来响应对于上下布局，内容区域定宽的后台系统，iMac的响应策略使用上下布局响应策略表里的策略来响应即可；

对于内容区域宽度流式的后台系统，iMac的响应策略可以参考左右布局的响应策略表来处理栏目、水槽的变化，页边距保持定值即可。

4、在以8为原子单位的栅格中，Margin需要按8n的规律变化么？

能以8n的规律变化是最好的，如果无法做到也可以使用其它数值。Margin是页边距，主要作用是通过留白的方式将页面内容区域与周围环境隔离区分出来，从而突出内容；一般我们会优先考虑内容区域匹配8n的变化规律，安排完内容区域后剩余的空间自然成为页边距（margin）

5、响应策略制定的时机是什么？如何去制定？文中示例的策略表我可以借鉴套用么？

响应策略表一般是在主要页面设计完成，要交付开发实现的时候来跟开发一起商定。这块需要注意两点：

1、如果开始设计时就已确定页面是要具备响应式的能力，那么最好开始设计时就去跟开发沟通，看他们现有技术是如何来做响应式的，因为他们很有可能是在用Bootstrap、Foundation这类组件库来做开发，而这些组件库一般都有自己现成的响应规则，这种情况下我们需要了解开发他们的规则，让自己的设计匹配已有的策略。当然了，如果他们的规则并不能很好满足我们的业务需要，一般也是可以在这些组件的基础上让开发去修改调整的。

2、响应策略表只是对响应方式的结果的呈现，而这个策略的制定事实上是从设计开始执行时就要去考虑的，从我个人经验来讲，我一般会挑两类页面来做响应策略的研究与适配，一个是控制台（Dashboard）页面，另一个是表单（Form）页面。优先规划这两个页面的设计，考虑他们在各个Viewport下如何布局如何展示如何缩放变化，并且跟开发沟通想法，听取意见，制定初步的响应计划，当这两个页面设计完成，就可以更大范围的执行设计。

3、文中示例的策略表是基于我自己项目经验总结而来，具有实际应用价值，可以借鉴。但我更想做的是通过那个表希望跟大家分享一种与开发交流、沟通的方法和技巧。实际工作中我们并非一定要做出那么一个经过精心设计细致考虑的表，我们可能会找张纸画一画给开发看就可以了，这块的重点是如何把我们设计师的想法更可视化更直观准确的传达给开发工程师。所以那张表是启发而非标准。

控制台（Dashboard）页面示例（素材图片作者：Coderthemes）

表单(Form)页面示例

关于栅格系统文章不少，但鲜有专门针对栅格系统在后台设计中相关应用的介绍。本文抛砖引玉，希望引起更多同行的交流与讨论

栅格系统的目的

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；栅格化提高了页面布局的一致性跟复用性；避免了设计师与开发者在细节上的反复沟通确认，从而提升了整个设计开发流程的效率、并能帮助开发者实现较为理想的设计还原。

但实际应用中，由于对栅格系统理解的不充分，很多设计师在应用栅格系统的实践中产生了各种问题，本来帮助设计的工具现在反而成了设计中需要解决的问题。结合我自己后台设计的经验，本篇文章跟大家聊聊栅格系统在后台设计中如何应用。

建立栅格系统的方法与规则

1、第一步：确立栅格系统的原子单位（网格）

如图，一个比较完整的栅格系统是由许多规格一致的小网格组成，这些网格辅助我们更规范的排版、布局。

后台系统设计中，由于后台页面主要以Web形式呈现，而对于web，用户已习惯通过鼠标滚轮或滚动条（scrollbar）来纵向浏览页面内容，因此，在不考虑内容优先级的情况下，Web可以实现竖直方向的“无限”加载，即竖直方向可以无限延伸，因此基于Web的后台页面，它的栅格系统在水平方向的栅格可以不体现出来，我们在执行设计时只要在竖直方向保持规律的变化就可以了。标准的栅格系统简化为适用于Web后台的设计如下图所示

如上图，对于后台设计来讲，栅格系统是由栏目（Column）跟水槽（Gutter）交替分布形成的，栏目（Column）是接纳网页内容的容器，水槽（Gutter）用来调节相邻两个栏目间距，把控页面留白；由于栏目跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的第一步需要先定义好栅格的原子单位“网格”的大小。根据本人的设计实践以及其它已有规范经验，目前后台栅格系统网格大小定义为8是最普适易用的。具体原因有以下几点：

（1）目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除，使用8作为最小原子足够普适.

我们选取4、6、8、10、12为栅格的候选原子单位，然后用目前主流屏幕分辨率与其相除，判断各个分辨率在竖直（Y）与水平 (X)方向能否被候选原子整除，统计结果如图。

显然，对于目前市场桌面设备屏幕而言，4是整除率最高的一个原子，接下来依次是8、10、6、12。但4作为基本原子实在过于小了，太小的步进单位将导致我们决策成本的增加，因为我们将元素间间距增加4px或者减小4px视觉感受到的差异并不明显，这种情况下我们为了找到那个“合适、满意”的间距，就需要反复调试，这就造成了时间上的浪费，尤其对于没有经验的新人，这点会更为突出。但这种调整并不合适，原因是后台管理系统设计重点在于面向用户使用的效率与逻辑，其次才是视觉呈现，使用栅格系统的目的之一也是想减少设计师在“细节”上的纠结，希望设计师站在更全局的角度看待设计，合理安排时间，因此我们舍弃4。在剩下的6、8、10、12四个单位中，8的整除率最高（80%），以8像素作为一个步进单位的变化，我们视觉上也是能感受到较为明显的差异，因此选取整除率最高的8做为栅格系统的原子单位。

（2）以8为单位符合“偶数原则”。偶数原则可以在页面缩放中的避免类似于0.5、0.75、1.25等次像素的出现，从而使页面各类元素在大多数场景下都能有比较精致的细节表现

虽然对于后台设计而言，通常设计师是直接在目标尺寸下进行设计，并在此基础上标注、切图给开发实现，并不存在像移动端那样需要对各种尺寸、各种像素密度的设备进行适配的情况，但对于Web页面来讲，仍存在向上向下适配的可能，因而从页面的兼容性、可扩展性及可维护性层面来讲，我们设计师还是有必要考虑的更加长远，遵循“偶数原则”可以上避免各种潜在的问题。

（3）开发工程师使用的前端开源组件库比如Metronic、Antdesign等也是基于8的原子单位来设计，因此如果设计师也使用以8为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质的去还原我们设计师的稿件

2、第二步：建立基于原子单位的栅格系统

经过第一步讨论，我们现已确定后台设计的原子单位为8，而我们也知道栅格系统是由栏目（Column）跟水槽（Gutter）交替分布形成的，所以接下来我们要利用原子单位确定栏目跟水槽在具体的页面中如何分布以及它们各自的宽度。

通常，在一套后台设计系统中，水槽宽度会是几个比较固定的数值（因为后台系统的页面相对于其它类型的Web页面，表现的更加整齐、规律，所以留白的方式比较固定，加之后台往往有大量的数据、内容需要呈现，所以要尽可能提高页面利用率，可以留白的空间也比较有限）；而栏目宽度更加灵活，它可以根据页面水平方向尺寸的改变而增大或减小以响应页面的变化（遵循8n的变化规律，此处变化规律在下期文章《栅格化与响应式》里会详细介绍）。

当我们做后台设计的时候首先需要确定在什么样的分辨率下做设计，也就是首先需要确定设计稿的尺寸，当设计稿尺寸确定后，便可建立基于该尺寸的栅格系统。假设页面内容区域宽度为W，栏目个数为A，水槽个数为B，栏目（Column）宽度为C，水槽（Gutter）宽度为G，则W=A*C+B*G。栅格系统建立初期，由于我们并不确定之后会有什么样的内容呈现我们的页面上，所以为了让栅格更加灵活、普适，我们先假定单个栏目与水槽的宽度是相同的，即C=8n（n=1、2、3、4...）=G，然后以此将页面内容区域等分，形成初步的栅格，之后再按实际内容需要，按比例调整两者宽度或者按比例对两者进行组合，形成承载业务内容的盒子。目前有两种比较主流的等分方式：12等分与24等分。

12等分的栅格系统在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计；

24等分的栅格系统适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对12栅格系统，24栅格系统变化更加灵活，更适合内容比较多样复杂的场景。

栅格系统的应用

1、页面布局与版式设计

（1）、了解承载业务内容的盒子模型（Box Model）

建立好栅格系统后，就可以根据自己的实际业务，在栅格系统上安排内容了。页面上最终承载内容的其实是一个个“盒子（Box）”,这个盒子的高度由盒子要容纳的内容与页面版式设计决定，按8n规律变化；宽度则由栏目与水槽按比例组合得到。

在栅格系统上容纳业务内容的容器我们把它称之为盒子（Box），栅格系统上的盒子其实跟前端工程师写页面时用到的盒子是一致的。如图所示，当我们浏览任何一个网页时，右键>检查元素（审查元素），然后在style菜单下就可以看到这个盒子结构了。其中Padding就是主体内容（Element）距离盒子外侧的距离，我把它称之为内边距，（Element可以是一个按钮，一段文本、一张图片或者一个表格等；）而Margin就是相邻两个盒子间的距离，对应在后台栅格系统中其实就是水槽的大小。了解完栅格系统的盒子模型之后，下一步我们需要根据具体业务内容来确定盒子的宽度，也就是如何利用栅格系统做实际内容的布局与版式设计

（2）、根据业务内容分配页面比例，确定盒子宽度

以24栅格系统为例，一个24栅格系统可以根据业务需要被2等分、3等分、4等分、6等分、8等分、12等分，还可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不对称分割，具体采用哪种比例的组合需要我们根据自己业务需求来定，我们此处所说的比例实际上就是盒子的宽度。

上图展示了盒子在24栅格系统上的分布情况，图中只列举了部分比例，实际业务中，同一个页面上使用一到两组比例值的组合来布局是比较合适的（如下图），组合形式过多页面就会显得琐碎、杂乱，不利于阅读和使用。因为盒子的高度根据内容来定，故下图中没有体现高度这一维度的变化规律。

当我们完成上图规划后，需要做的便是根据实际内容往每个盒子里安排内容，做视觉与交互的落地了。

2、元素对齐与间距设定

栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局，而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。从用户体验角度来讲，这两者同等重要，从执行层面来讲，我们一般先做版式设计与布局，然后再填充内容、调整细节。

栅格系统辅助对齐的作用类似于各种设计软件中的参考线，它能让我们更直观的安排、调整内容的位置及对齐方式，可以使内容变得规律、有序，方便用户浏览阅读，帮助用户提高获取信息的效率。

栅格系统对于元素间间距设定的帮助是直观的，当我们定义了栅格原子单位为8时，这意味页面上各元素间距的变化也应遵循8n的规律，一致的变化规律让页面富有节奏感跟韵律感，在提高页面一致性的同时也减少了设计决策成本。我们知道，栅格系统中水槽与栏目的变化也遵循8n的变化规律，此处n为大于0的正整数，即n=1、2、3...；但是用于规范元素间距的8n，n可以是0.5、1.5这类包含二分之一8的情况，原因是实际工作中，我们面临的情况是复杂的，这样处理可以让间距的设定适应一些特殊的场景，从而使其更灵活普适。

注意事项

1、水槽宽度的设定

确定好内容模块比例后，我们会发现由于之前等分的缘故，此时水槽较宽，我们需要调整水槽宽度到一个合适的值。

水槽的宽度是8n,也就是水槽可以以8为基本单位去增加或减小。为了减少设计决策成本，我们会事先设定好一系列水槽宽度，并定义好每个宽度对应的使用场景，然后设计中根据每个场景使用对应数值就可以了。我定义了一组水槽的值是8、16、 24、32 、40，为了区分它们的使用场景我们依次为其命名为XS、SM、MD、LG、XL。根据实践经验，正常情况下，两个盒子间距（水槽）的值为24（MD）时，视觉上是最为舒适。

栅格化工具推荐（插件请在附件中下载）

Ps栅格系统工具

1、PS自带栅格系统设定：新建参考线版面（重点推荐）

Ps有个功能叫做“新建参考线版面”，打开这个面板后，在预设这里可以看到Ps已经预设了8列、12列、16列、24列的栅格系统，选择对应列数就可以看到页面上参考线的变化。预设中“装订线”的宽度即栅格系统中水槽的宽度。默认均为20px,我们可以根据之前讨论的8的倍数原则，将其手动更改为24；

如果预设的栅格系统无法满足我们工作需要，我们也可以自定义栅格系统，并能将栅格参数保存为预设，这样就可以重复利用自定义的栅格系统了；栅格系统还可以选择将其应用在当前画板或者所有画板，十分方便易用。由于是Ps自带的参考线，所以它可以通过快捷键灵活的控制显示或隐藏

2、利用Ps标注工具Assistor Ps 进行栅格系统的建立

Assistor Ps在之前主要是一款页面标注工具，但是随着蓝湖等自动标注工具的流行，这个小软件基本没人用了，但我发现它设置参考线的功能还是很强大的，可以媲美大名鼎鼎的guideguid（这款插件目前对Ps cc 2017及以上版本貌似已经不支持，软件本身安装也挺麻烦），所以就介绍给大家。（安装包在文末下载，Win&Mac，解压后跟常规装软件一样，正常安装就行）。但是这个插件由于很多数值都要自己算，实际上没有Ps自带的新建参考线面板的功能好用。算是一个工具的补充吧

Sketch栅格系统工具

1、Sketch自带栅格系统设定：Layout Settings

Sketch端利用sketch自带的栅格工具Layout Settings即可完成栅格系统的设置，由于sketch的栅格工具是自带的，与Ps类似，它也可以通过快捷键快速显示或隐藏，点击左下角“Make Default”还可以将自定义的栅格系统设置为默认的栅格系统，方便以后重复调用，但sketch貌似只能储存一组栅格系统的数值，而Ps可以储存多组。

2、Sketch栅格系统插件：BootstrapGrid-maste

BootstrapGrid是一个专门用于建立栅格系统的插件（插件在文末附件中下载），插件可以对栅格系统的基本数据做个性化的设定，可以对多个形状同时建立栅格系统，还可以通过快捷键快速调用。具体用法：先选中要建立栅格的画板或者画板里的形状（可以多选），然后：插件>Bootstrap Grid（Plugins -> Bootstrap Grid）

栅格系统参数设计

单个形状（画板）建立栅格系统动图演示

多个形状（画板）建立栅格系统动图演示

跨平台的web端栅格工具 http://grid.guide/

GridGuide 最大优点是可以针对一种栅格系统生成4组不同水槽宽度的栅格化方案，能比较直观的比较不同水槽宽度下各个栅格系统的视觉感受。使用方法：在右上角设置好页面宽度以及栏目数量，页面内就会自动生成可以下载为png图片的栅格。

QAQ(常见问题解答）

（1）当栅格系统中奇数不可避免的出现时，如何处理?

理想状态下，我们应该调整内容区域的大小，使其尽可能成为可以被8整除的尺寸，但实际应用中，有时会出现无法整除的情况。基于对盒子模型的理解，此时我们保持padding、margin的值不变，改变盒子的大小去适应奇数的页面（元素）即可,因为一致性跟效率才是栅格化要达成的首要目的，偶尔有一些不“完美”的尺寸是完全允许的，因为用户在实际使用页面时，并不能看到我们使用的栅格系统，也很难注意到那几像素的变化，他们能感受到的是页面整体呈现出来的节奏与韵律感，以及持续、一致的视觉语言带给他们的严谨、可靠的心里感受。

（2）栅格系统必须以8作为原子单位？使用其它数值是否可以

首先需要指出的是使用其它数值当然也可以，栅格系统只是手段，提升设计效率、减少沟通成本、提高页面一致性才是最终目的，所以如果你所在团队有其它栅格化习惯，且一直以来效果良好，那么继续使用它也是没问题的。但是对于设计新人来讲，如果能理解前人的经验，并能较好的运用，对于他们来讲，是会少一些弯路，更好的完成设计工作。

（3）栅格系统建立初期是否必须使栏目宽度与水槽宽相等，并等分内容区域？

建立栅格系统时并不是必须使栏目宽度与水槽宽相等，并等分内容区域。本篇文章介绍栅格系统时采用这种处理方式是为了让大家更好的理解栅格系统建立的原理与过程，事实上，栏目的宽度在实际应用中往往大于水槽宽度，我们通常会先计划好水槽的宽度、内容区域总宽度与栏目的数量，这时候栏目的宽度通过计算可得到，对于响应式页面，栏目的宽度可以是百分比而不是具体的数值（关于响应式的内容下期文章跟大家分享）。

转自UI中国-BYMD

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里B端后台产品UI设计的工作小结，总结一些常见问题、解决方法以及自己的经验。

写在前面

作为一个新时代全能打杂，日常工作包括移动端、PC端的UI设计以及各类平面视觉设计，其中自然少不了令人“秃”然的B端后台产品设计。

毕业两年来一直都做着B端产品的UI设计工作，参与过的后台产品设计面对的主要客户有公司内部、各大企业以及政府机构。工作和学习的过程中走过不少弯路，也在不同的项目中不断反思和总结。把自己的一些想法和经验分享出来，总结自己工作中遇到的问题和解决的方法，记录自己思考和理解的过程，也希望对即将或正在从事B端后台产品设计的你有一点点启发或帮助。

希望在日后的工作和学习中，通过实践来不断完善自己对B端后台产品的理解。

目录

一、明修栈道C和暗度陈仓B

二、后台产品设计思路

三、后台产品设计规范

四、经验观点及设计资源

正文

一、明修栈道C和暗度陈仓B

1.1初识B端产品和C端产品

按照C端产品和B端产品的专业术语来解释的话，C端Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。

在我们日常生活中，在手机上使用的大多是C端产品，单一的C端产品通常是为了实现单一的需求，比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。

而面向B端的产品，我个人称之为“暗度陈仓”，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即C端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。

虽说我们日常使用的更多是C端产品，但是B端产品对我们的影响也是时时刻刻都存在着的。C端产品在明，逐渐改变着现代人的生活方式，B端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。

——“ToB还是ToC？这是个问题......”

——“不管ToB还是ToC，最后都还是ToP（people）。”

1.2B端和C端产品的区别

在我看来，C端产品以消费互联网为主，B端产品以产业互联网为主，C端更感性，而B端更理性。

从使用者的角度来说——

C端产品关键词包括免费使用、迅速上手、体验为王、你能让我做什么；

B端产品的关键词则是付费购买、上手缓慢、效率第一、你能为我做什么。

从开发的角度来说——

C端周期短，B端周期长；

C端用户多，B端用户少；

C端逻辑简单，B端逻辑复杂；

C端竞品较多，B端竞品较少；

C端主战场是移动端，B端则是PC端；

C端是用户体验驱动，B端是解决问题驱动；

C端产品的使用决策权在用户手中，而B端产品的使用决策权则在客户手中（B端客户不一定是用户）；

C端产品除了产品的体验以外，也要让产品更美观，让活动更有趣，让用户更舒服，产品经理有很强的同理心，B端产品的实用性大于美观性，能切实解决问题、配置资源的B端产品才是一个好的B端产品，产品经理要具有更强的逻辑思维能力。

1.3后台产品常见分类

后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在B端产品的范围之内的，常见的类型包括：

• C端产品的后台产品线——如淘宝商家版，饿了么商家版，对订单和用户进行管理，支持C端产品的业务进展；

• 平台级工具产品——如微信公众平台，对文章和读者的数据统计和管理；各大互联网公司的开放平台，如微博开放平台等；

• 企业级服务产品——虚拟主机系统（VMware），云主机管理系统（深信服、xensystem、腾讯云）以及各种云SaaS；

• 企业的业务处理平台——对内有考勤、报销等OA办公系统，对外有CRM客户管理系统，ERP资源及供应链管理系统。

二、后台产品设计思路

2.1初识后台产品设计

说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多。

后台产品不同于普通用户所使用的APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的app，再给他几个其他的音乐APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。

对于后台产品来说，首先，所见之少，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业、甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有“保密协议”的使命感，所谓“隔行如隔山”，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。

这大概就是后台产品相关资源较少、设计难度较大的一些原因。

2.2后台UI设计工作流程

后台UI设计的工作，大体分为三个部分：需求分析——设计执行——数据分析。

• 在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。 做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。

• 在设计执行阶段，参照PM给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做UI视觉方面的设计，而这时后端同步构思需求的实现方案。UI设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。

• 数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。

2.3制定设计规范的作用

为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。

• 对产品——在项目完成第一版较为稳定的版本时，着手制定设计标准，统一公司视觉设计规范及某些特定交互设计规范。同一个项目会有多个设计师的参与，规范化的设计语言，避免因设计控件混乱而影响设计输出；

• 对自己——组件化同类元素，提高工作效率，建立公司产品的组件库，以便不同项目的复用及设计延展；在同一个项目中也能更好的把控该项目的视觉规范，提率；

• 对团队——设计规范的制定，规范了设计团队的输出，同时方便了与开发团队的交接和协作。通过设计规范的制定，前端实现也能拥有一套可供复用和扩展的组件库，助力上下游交接及团队协作；

• 对客户——制定设计规范的同时需要考虑设计延展性，为不同客户的定制化需求提供更的输出。同时在进行产品迭代时，设计规范的组件化调整也大大提高了工作效率。

三、后台产品设计规范

*以下内容仅供参考和交流，图片内容不代表真实尺寸，请结合特定产品灵活使用。

3.1页面布局

1. 统一尺寸——据统计，目前PC端用户屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900，以1440来设计的话，向上适配或者向下适配误差会比较小。 适配方案——面向多个客户，后台产品设计功能型页面的尺寸统一为1440*900，按照栅格系统原则向上或向下适配；展示型页面以1440*900为主，同时设计出极端情况（宽度为1280以及宽度为1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。

2. 页面框架——页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

3. 栅格布局——栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用24列栅格体系实现，以满足2，3，4，5，6分比布局等多种情况。固定宽度Column，将间隔Gutter进行动态缩放。需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。谷歌规定模块和结构之间要以8px为基准，布局间相对间距可采用8px以及8的倍数，但一些小组件(按钮、间隔、输入框 )可以以4为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。

4. 尺寸设定——一般在整体区域左上角放置产品LOGO及产品名称，大部分系统顶部栏高度48+8n，侧边栏宽度200+8n。我常用的是顶部栏高度56px，侧边栏宽度200px，侧边栏收缩状态宽度56px，右侧的侧浮窗宽度400px。

5. 相对间隔——定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。

3.2标准色

1. 颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。

2. 品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。

3. 辅助色用于提示其他场景，比如成功、失败、警告、无效等。

4. 中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。

5. 其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

   

3.3标准字

1. 后台系统常用的字体：windows系统，中文Microsoft YaHei，英文Arial；Mac字体，中文PingFang SC，英文Helvetica；除此之外可以选择的字体还有segoe UI、思源黑体、Hiragino Sans GB等。

2. 后台系统中常用字体大小为12px、13px、14px、16px、18px、20px、24px、30px。

3. 行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。

3.4图标

1. 图标是UI设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。

2. 除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较方便的方法是在iconfont提供的图标模板上用AI绘制，画板1024*1024，提供圆形、正方形、矩形形状(文末提供下载)。图标尺寸按照8的倍数进行延展，绘制完成后生成svg格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。

3. 分享一个我个人常用的AI使用小习惯，因为ctrl+q、ctrl+w作为退出和关闭我用的不多，而且有时候手抖会在保存时候不小心点成了关闭，所以我无情地把ctrl+q、ctrl+w变成了拓展和拓展外观的快捷键......感受还不错。

3.5按钮

1. 按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。

2. 按钮的交互状态包括默认、悬停、点击和不可用。

3. 按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照8的倍数设定。如高度分别设定为24、32、40px。

4. 规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。

5. 填充按钮之间间距最小为10px。

3.6导航

1. 导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

2. 各类导航中的字体大小可进行统一设定。

3. 顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。

4. 侧栏菜单为垂直导航菜单，可以内嵌子菜单。

5. 下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。

6. 步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。

7. 分页的高度设定为24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。

8. 面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。

9. 徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。

   
   

3.7表单

1. 表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。

2. 字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合PC端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。

3. 输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。

4. 输入框的尺寸可按照8的倍数进行设定，比如24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为20px，有错误提示时候竖向增加10px或横向显示在输入框右侧（预留出位置）。

5. 表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体14px，文字和左右两边边框的边距10px。

6. 选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。

7. 搜索框和选择框的高度为30px或按照8的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮4px，内部文字14px。

8. 单选多选框尺寸16*16px，多个选项横向排列间距16px，纵向排列间距8px。

9. 开关按钮外框40*20px，内部圆形16*16px。

3.8表格

1. 表格在后台产品UI设计中站的比重非常大，用来展示数据、统一管理、作为详情入口，是最清晰、的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。

2. 表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。 
   表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

3. 行高——表格行高可设置为表格内字体高度的2~3倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用36、40、48、60等。

4. 行数——表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是20或50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多余每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。

5. 列宽——列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以“...”展示，鼠标悬停出现完整内容（比如详情、描述）。

6. 列数——表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

7. 对齐方式——表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似IP地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加“复制”图标，方便用户调用。

8. 详情入口——表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。

3.9反馈

1. 包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。

2. 弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。

3. 弹框——弹框出现时，主题内容增加一层遮罩#000，透明度50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。

4. 侧滑框——又称抽屉，出现在右侧，固定宽度400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。

5. 骨架屏——为某些特定数据提供数据加载等待时的占位图形组合。

6. 全局提示——建议停留时间3s，可根据文字字数调整停留时间，文字内容限制在30以内。

7. 警告提示——用不同颜色和样式展示需要关注的信息。

8. 通知提醒——消息通知和告警信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留3s后自动关闭。

3.10缺省状态

1. 绘制不同类型的情感画插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。

2. 页面需要一个默认的底色，错误文字使用14px，与情感化插画间距20px，与按钮间距30px；

3.11数据可视化

1. 数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。

2. 功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做的更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。

3. 考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。

四、经验观点及设计资源

4.1设计前端一家亲

• Ant Design的设计组件，实现框架React、Angular——https://ant.design/docs/spec/layout-cn

• Element的设计组件，实现框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox

• iView的设计组件，实现框架Vue——https://www.iviewui.com/docs/guide/theme

• 飞冰的设计组件，实现框架React——https://alibaba.github.io/ice/

• Layui的设计组件——https://www.layui.com/demo/grid.html

• G2可视化图形组件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

• Echarts可视化图形组件——https://echarts.baidu.com/

• d3.js可视化图形组件——https://github.com/d3/d3/wiki/Gallery

• 在线栅格化计算工具——http://grid.guide/#/1000/24/34/8/0

4.2不丑也要多读书

• 《B端产品经理必修课》

• 《交互设计精髓》

• 《U一点料·Ⅱ》

• 《简约至上:交互式设计四策略》

写在最后

不管是做C端产品还是B端产品，都是为了实现用户的需求、帮用户解决问题。

刚接触后台产品的UI设计师工作时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入antdesign和element等开源的设计组件，会使得设计师以及设计师的好朋友前端小哥哥事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。

在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。