B端后台小综合

风格虐你

上海/UI设计师/4年前/6649浏览

版权

B端后台小综合

风格虐你

最近工作中遇到了后台设计，所以虐虐最近也一直在学习这方面的知识，总结了一些从开始到设计的一些知识，分享给大家。

文章篇幅过长不喜欢勿喷

在后台页面中，我们看到最多的就是一张张表单。有的设计师或者人对后台的第一印象就是：表格嘛，不就是excel嘛，有什么可难的”。但是真正从需求出发到设计的时候，你就会发现后端产品中，统计报表是非常重要的，怎么样去根据需求，作出最方便快捷的表单。还有在设计前专业手法的应用和设计中有什么小细节和注意事项呢？

本文大概就从这三方面入手来说，（不对的大佬请赐教呀）

考虑使用场景了解用户需求
栅格系统的一些知识及应用软件方法分享
结合实际例子来说后台设计中最重要的三方面

一、考虑使用场景了解用户需求

首先我们要了解一下这个系统在业务中的使用场景，仔细地去分析用户的需求。

Why——为什么要设计这个后台？（目的的出发点是什么）
What——表单有哪些内容?（表格内容有什么）
Who——报表给谁看？（表单的目标用户是谁）
When——查看表单的条件筛选？（查看报表的条件筛选条件）
Where——表单要注意哪儿？（表单要注意哪些方面）
How——应该怎么执行？（怎么设计这张报表）

结合我们上面说的6条，整理需求之后就可以开始考虑怎么实现。

但是在此之前我们还需要去了解一个名词那就是———栅格系统

UI设计师应该也明白，如果可以很好的使用栅格系统会让页面更有规律也方便开发沟通，省时省力。

但实际应用中，由于对栅格系统理解的不充分，很多设计师在应用栅格系统的实践中产生了各种问题，本来帮助设计的工具现在反而成了设计中需要解决的问题。最近结合我自己后台设计，也寻找了很多关于栅格化系统的资料和知识，发现了好的推文就从下面这几个方面给大家分享吧。

建立栅格系统的方法与规则
栅格系统的应用
注意事项
栅格化工具推荐（ps，skrtch，Sketch栅格系统插件）

二、栅格系统的一些知识及应用软件方法分享

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

确立栅格系统的原子单位（网格）

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

后台系统设计中，由于后台页面主要以 Web 形式呈现，而对于 web，用户已习惯通过鼠标滚轮或滚动条（scrollbar）来纵向浏览页面内容。因此，在不考虑内容优先级的情况下，Web 可以实现竖直方向的「无限」加载，即竖直方向可以无限延伸。

因此基于 Web 的后台页面，它的栅格系统在水平方向的栅格可以不体现出来，我们在执行设计时只要在竖直方向保持规律的变化就可以了。

标准的栅格系统简化为适用于 Web 后台的设计，如下图所示：

如上图，对于后台设计来讲，栅格系统是由栏目（Column）跟水槽（Gutter）交替分布形成的，栏目（Column）是接纳网页内容的容器，水槽（Gutter）用来调节相邻两个栏目间距，把控页面留白。由于栏目跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的第一步需要先定义好栅格的原子单位「网格」的大小。

根据本人的设计实践以及其它已有规范经验，目前后台栅格系统网格大小定义为8是最普适易用的。

具体原因有以下几点：

（1）可以被8整除

目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被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）前端开源组件库基于8的原子单位来设计

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

2. 建立基于原子单位的栅格系统

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

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

当我们做后台设计的时候首先需要确定在什么样的分辨率下做设计，也就是首先需要确定设计稿的尺寸，当设计稿尺寸确定后，便可建立基于该尺寸的栅格系统。假设页面内容区域宽度为 W，栏目个数为 A，水槽个数为 B，栏目（Column）宽度为 C，水槽（Gutter）宽度为 G，则 W=A*C+B*G。

栅格系统建立初期，由于我们并不确定之后会有什么样的内容呈现我们的页面上，所以为了让栅格更加灵活、普适，我们先假定单个栏目与水槽的宽度是相同的，即C=8n（n=1、2、3、4…）=G，然后以此将页面内容区域等分，形成初步的栅格，之后再按实际内容需要，按比例调整两者宽度或者按比例对两者进行组合，形成承载业务内容的盒子。

目前有两种比较主流的等分方式：12等分与24等分。

（1）12等分

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

（2）24等分

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

栅格系统的应用

页面布局与版式设计

（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的情况，原因是实际工作中，我们面临的情况是复杂的，这样处理可以让间距的设定适应一些特殊的场景，从而使其更灵活普适。

注意事项

水槽宽度的设定

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

水槽的宽度是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，所以就介绍给大家。（安装包在文末下载，Win&Mac，解压后跟常规装软件一样，正常安装就行）

但是这个插件由于很多数值都要自己算，实际上没有 Ps 自带的新建参考线面板的功能好用，算是一个工具的补充吧。

2. 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

栅格系统参数设计

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

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

（3）跨平台的web端栅格工具

GridGuide 最大优点是可以针对一种栅格系统生成4组不同水槽宽度的栅格化方案，能比较直观的比较不同水槽宽度下各个栅格系统的视觉感受。

使用方法：在右上角设置好页面宽度以及栏目数量，页面内就会自动生成可以下载为 png 图片的栅格。

还有一些大家常见的问题解答可查看http://www.woshipm.com/pd/1523754.html具体了解

三、结合实际例子来说后台设计中最重要的三方面

在后台系统中，最常见的数据展示方式就是列表，那如何设计一个后台系统的列表呢？

列表页通常是由「搜索」、「表格」和「操作项」三大基本块组成。

下面也会主要从这三方面来探讨啦~一起学习

搜索

搜索框一般是输入具体字段，点击搜索或回车后，直接定位到某个/某类数据。

搜索的规则有两种：精准搜索和模糊搜索

精准搜索是根据输入的条件，精准地搜索到某条完全匹配的数据；
模糊搜索则是指查询到所有包含输入条件的数据。

如电商后台系统中的搜索框、输入商品编号、查到某件商品；老师后台系统中的搜索框、输入学员姓名、查到某位学员等。

如下图是微信公众号的后台系统——用户管理模块，搜索框支持搜索用户昵称，以快速定位到某位用户。

试想没有定向搜索的功能的话，要找到一条数据，只能通过对每一条进行翻找，如果列表中有50条数据，一条条数据进行查看的话，要找到某条数据可能要花30秒的时间；而通过定向搜索只需要3秒时间。

当然在一些搜索条件多的页面中如果全部条件堆叠在屏幕上，会严重挤占列表的展示空间，使得首屏留给列表的空间所剩无几；用户在寻找具体搜索条件时，仿佛大海捞针，耗时费力。

那就可以去考虑满足以下条件来达到页面的一个可实用性

用户可以快速找到搜索条件——控制条件的数量；
能满足搜索细致程度上的要求——搜索条件要充足；
将展示区域更多留给表格——避免搜索区域占用太多屏幕空间。

那我们可以让用户来设置展示哪些选项，且通过账号记录设置结果这种方法来解决条件太多的问题。

每个用户都可以根据自己的需求和习惯决定展示哪些选项，但这个需要后端开发的支持啦~

顺带一提：如果后台系统的数据加载时间比较久（不管是数据量大还是开发方式导致），尽量避免采用输入/选择后即执行搜索的交互样式；这可能导致每次输入/选择后用户都需要被迫等待；如果选择N个搜索条件，等待时间要乘以N。

2.表格

（1）表格字段

表格是统计报表的核心模块，在选择字段的时候，应该充分考虑业务，理解查看报表的人的需求。

如果是信息记录的表格，例如：租客的信息列表。

首先需要考虑租客的信息，例如：租客姓名、联系方式、身份证件号码；
其次要考虑该租客的居住信息，例如：房源地址、管理中心、所属管家、入住时间、办理时间、居住状况。

这些字段就基本上涵盖了管家想了解一个租客的所有信息。

如果系统本身有实名认证的流程，那租客姓名后还需要增加实名认证的标志，以此来对租客进行区分。

如果是数据统计表格，例如：电量统计表，则需要确定在实际业务中电表的安装和计量。

电量统计表包括两部分：电表和读数。

和电表有关的字段有房间区域、电表名称，和读数有关的字段则稍微复杂一些。如果该报表是直接计算费用，则一个总电量就够了；如果该报表是需要记录不同时段的用电量，则需要有“尖”、“峰”、“平”、“谷”这几个字段。

当然这需要根据城市具体情况来选择，有的城市没有“尖”这个时段，例如厦门就只有“峰”、“平”、“谷”。

还有一个需要注意的点是数据的读取，需要确定好规则。像租客信息的字段大家都默认好了，前后台的名称定义是一致的，姓名就是姓名，不会说前端展示是姓名，后台录入数据的时候，姓名实际上是年龄。

但是电表相关的字段就可能会出现这样的问题，由于各地业务不一样，区域、位置、名称这几个名词的差异性、独特性不够，有的时候用户默认的规则不一样，导致读取数据后，展示数据时，容易误导用户。所以在PRD中，需要定义好名词的规则。

例如下图：就需要对应好前端展示和后台的名词。

（2）筛选项

筛选项分为单级筛选、级联筛选、日期/时间选择器等。

单级筛选：即只有一层筛选项，如筛选学科，筛选项包括：语文、数学、英语，均为同一层级的筛选项；
级联筛选：筛选项层级较多时使用，如筛选学科的知识点，那么筛选项就有两层：第一层级为学科，第二层级为学科对应的知识点；
日期/时间选择器：即筛选一段日期/时间，解决用户查找一段日期/时间内数据的需求；

如下图，分别是三种筛选类型的示例：

了解了三种类型的筛选形式之后，我们还需要知道，每个筛选项的筛选方式又会分为：单选、多选。

单选：给定固定几个筛选条件，用户一次只能选择一个筛选条件；单选条件下，筛选结果符合该筛选条件，即可被筛选出来。

多选：用户可以选中多个筛选条件，用户选中多个筛选项后的筛选逻辑也需要根据实际场景进行设计，如：用户选中多个筛选项后，筛选结果是包含所选选项，还是说必须命中所选全部选项才可被筛选出来，需要提前进行设计和思考。

综合来讲，通过定向搜索，以及筛选项，来满足用户快速且定向地查询某个/某类数据的需求。

（3）筛选条件

筛选条件是用户能够精准查找自己想要的信息的重要手段，筛选条件一般是跟着表格字段来确定的。换句话说，筛选条件的维度是表格里的某些重要字段，但并不意味着将表格所有的字段，都做成筛选条件就是最全面的筛选。

在这个过程中，需要仔细思考那些筛选条件对用户是有用的，哪些筛选条件并没有多大意义。

举个例子：租客信息的表格，则常用的筛选条件就会有小区地址、姓名、电话、入住日期、居住状况，这大致就是管家们能够锁定自己想要找的租客的指标了。

这些指标有一些共性：通用、好记、独特。

通用的意思就是大部分筛选都这么筛，找租客就得有姓名和住址；好记就是这些维度都不难记，小区名词、租客姓名，这些都能短期记住。像身份证号码这种就不适合作为筛选条件，除非是数据量非常大、重名率非常高的情况下，只有身份证号才能实现精准搜索，但这种可能就是国家或地区层面的搜索。

而数据统计的报表的筛选条件，毫无疑问，时间段的选择是最重要的。普遍的做法就是让自己自定义选择，但也有些产品做得很好，将用户常用的指标提炼出来，例如：“今天”、“昨天”、“最近3天”、“最近7天”、“本月”、“本季度”等用户常关注的指标作为选项。这样的话，省去了用户对照日历选时间的麻烦，能够快速地进行操作。

当然除了时间选择，还会有一些其他得筛选条件。例如：电量统计表，则还需要要小区、房间、电表名词等筛选条件。

3.操作

操作我们大致分成两类来分析：

批量操作，例如添加/导入、设置/分配、删除、导出等。
针对单条内容的操作，例如编辑、删除、查看等。

（1）批量操作

批量操作相对复杂度高，出错的概率也更大，以下几条内容是我们设计摸索过程中总结出来的防错策略：

不建议支持跨页选择跨页选择首先会增加开发难度及测试复杂度，用户操作也容易出错；比如，在选择过程中，已选择数据的状态可能在外部发生了变化，不再符合批量操作的条件，从而导致任务处理失败。
设置处理数目上限如果数据量太大，系统负担过重，也会增加超时等任务失败的频率。
协助计算在用户选择过程中动态计算合计值并实时反馈，防止用户提交后才发现无法通过系统的校验条件；例如用户在批量还清多笔账单时，可以在选择页面就提醒用户所选金额超出账户余额限制，而不是在提交后才给用户报错。
异步反馈有些操作数据量大，处理耗时较长，例如导出全量内容等，可采用异步的反馈方式，以避免耽误用户处理其他任务；依据场景，异步反馈还可采用多种通道保证信息传达给客户，例如系统内提示+短信+邮箱提示等。

（2）单条操作

列表的信息展示，我们会尝试取舍和隐藏；但关于操作，在很多场景下，尽量全部展示，避免用户需额外点击才能将操作项唤出。

原因有二：

（1）降低学习成本、提升操作效率。