指南|B端设计指南06——表格（上）( 四 ) 表单|组件|指南|前端|设计|表格

在设计底层思路上截然不同，平台级产品思路与定制化产品思路存在很多截然不同的做法，我们今天简单聊聊大家遇到过多的表格工具栏设计，不做深挖～在表格工具栏的设计中，信息分区与页面透气是非常重要的两个设计核心。
信息分区：因为工具栏是由标题、筛选、搜索、视图、新建等操作组成，而功能间的区分是工具栏设计的一个关键。

文章插图
当一个工具栏中，需要将如此多的元素进行组合排列时，必然会有其排序的规则，这时我们就可以通过亲密性原则，对工具栏中的信息进行相应区分在设计的亲密性原则中，我们可以将功能相近的工具放在一起，比如：搜索与筛选都是数据过滤的操作，应该放在同一分区。
同样，工具栏也会存在一些功能点不太相近操作，我们就应该通过分区将其间隔开，比如在下图中，每个功能都将其用线条区分。
当然，在信息的去区分上，也有强弱两种不同的方式，一种是通过线条直接分割；另一种是将工具栏进行空间上的区分。因此可以通过信息区分去检查你的工具栏设计是否合理。
内容呼吸：在一个定制化项目中，设计师一定要让自己的页面具有呼吸感。在B端业务中，信息量本身就已经足够庞大，而页面的中的疏密关系就显得尤为重要。
通常列表都承载着繁杂、冗余的数据，是一个信息集中的密；工具栏作为与表格关联的上部分，呼吸感便成为表格的重要因素。通常在表头处要将空间尽量分散开，这样才能满足整体的疏密关系。
3. 表头设计经常看到一些十分冗杂的表头，甚至它丧失了表头的真正含义。在实际情况下，尽可能明确、简单的讲出表头的内容，以免造成表格的宣兵夺主。当然也会存在一些专业术语，这时候，给一个Tooltips再合适不过。

文章插图
4. 单元格设计在表格中，单元格的行高是一直都是一个难以控制的变量，因为行高会直接控制表格中的信息密度，而信息密度永远是一个无法量化的元素。而在我们设计过程中，需要采取盒子模型的方式，让你的设计更加落地。
知识点补充：盒子模型从前端开发而言，单元格是一个最为基础的盒子模型。而HTML中的所有元素都可以看作是一个盒子。而我们所设计的页面也正是由这个样的原理去还原出来。

文章插图
Margin(外边距)：清除边框外的区域，外边距是透明的。Border(边框)：围绕在内边距和内容外的边框。Padding(内边距)：清除内容周围的区域，内边距是透明的。Content(内容)：盒子的内容，显示文本和图像。
1）单元格内容
内容一般为文字、图标、头像等等，而对于数据中你想要格外突出的内容，这里称为关键数据标识别。从盒子模型的角度来看，它就是当中的Connect，但单元格内容中，一般会有一些处理技巧：
关键数据标识：用户在使用表格时，会经常去留意一些关键的数据。比如数据的状态、变化的多少…
如果在系统中，你能够很明确知道用户想要了解的数据时，便可在关键数据上进行标识。这样能够帮助用户快速定位到自己想要的信息，减少数据寻找所化的时间。
但如果你对关键数据标识出现误判，这条数据便是一条十分干扰的数据，因此在这里的设计，需要慎重考虑。

文章插图
比如在飞书的成员与部门中，对于账号状态就是一个关键数据的标识，一方面用户可以快速了解到已经激活的成员；另一方面对于未激活状态的进行突出展示，同时给予用户未激活后的再次发送提醒的操作，是对用户使用的优化提升。
但，如果将不重要的数据进行标识，例如手机号，那么这将会是一个令人痛苦的设计。
人员角色展示：人员角色展示在表格中十分常见，通常会是以用户名称+头像的形式展示。但在真实场景的表格中，头像需要给予默认的形式，比如钉钉、飞书就是以用户“姓”作为头像的默认值。
而在多个人员角色展示时，就需要考虑特殊情况，无论是极值省略展示与获取全量数据中，都需要我们进行设计上的处理。

文章插图
进度条进度条是属于关键数据的一种，它所涉及到的功能与图表表格类似，能够更直观展示数据的占比，方便用户对于多条数据间的值来判断。进度条常见于“容量、使用量”的数据中。