如果你来重新设计表格，你会如何设计？🙌 这篇文章将会介绍一个重新定义表格的全新产品，同时分享设计思路和解法，如果你也对协同工具设计感兴趣，想了解最新最酷的创新工具，来看看吧！

重新思考最优解

表格是大家工作中除文档之外最熟悉的工作软件了。据微软统计，有12亿人使用微软办公软件，每五个人就有一人使用Excel。
表格不仅可以用来做数据分析，还经常被用来做数据收集。

但也有些尴尬的时候。
比如电梯里打开钉钉群，看到群里在收集文化衫尺寸，于是手机端打开，非常艰难地找到自己那一个小格子填上尺寸，有时候一不小心点错了还把其他人的尺寸改了，或者同时打开的人太多，让表格一下子崩溃了。
如果你是组织者，也可能碰到大家写的标准不一的问题，比如有的人写大码，有的人写XXL，后续数据统计起来就很麻烦。

可以看到，基于表格的协同有时候并不是一件体验太好的事情。因为传统表格并不是为协同而生的，本质上，它是一个单用户的桌面工具。
同时，要在表格上完成一些高阶任务并不是一件容易的事（光公式就可以学好久），它的复杂性也劝退了很多用户，转而去使用专门的数据管理和分析工具。

image.png
这个诞生于1979年，影响了整个互联网的工具，已经以其强大的能力为我们服务了四十多年，是时候重新想象那个更符合现今互联网时代的表格工具了。

数据表的定义

多维的能力

解释数据表并不是一件容易的事情，最开始这个理念来自硅谷，被 Airtable 所发扬光大。如果要我来介绍数据表的特性，我第一个需要指出来的就是数据表多维的能力。

表格的能力可以被抽象为三个阶段，数据生产——数据沉淀——数据消费。
而传统表格，只能提供一个维度的服务，不管是信息录入，查找，处理，用户永远看到的都是那一张表格。
而数据表则能提供多维的能力。
在数据生产阶段，既可以用传统的表格视图录入信息，也可以使用分发表单链接的方式收集，亦可以导入一份传统表格；
而数据消费阶段，数据表能够提供无数的视图来展现原始的数据。比如填入一段时间，则可以被展示成一份甘特图，一个个任务可以被展示成看板，在卡片视图下，则犹如打开了一个在线相册…
除了视图能力，基于数据表，你还可以自己搭建出一堆应用来覆盖你生活的方方面面。
image.png
👀那，数据表是如何做到这些的呢？

背后的核心转变：从异构到同构

首先需要解释一下数据库。
数据库并不是非常复杂的概念，平常我们的工作已经在无意识地用 excel 表格搭建我们自己的小型数据库了。比如用 excel 做项目管理，客户关系管理，收集报名表等等。
比如我做项目管理时，我会画一个二维表格，逐列写上项目名称，项目进度，项目的 Deadline，文档地址等，这时候就完成了一个简单的项目数据库的搭建。
每一行为一条完整的数据，每一列代表组成这个数据的字段。一行行数据则组成了数据库。

而数据表的特别之处在于，在传统表格中，列只是一堆纵向的格子，而在数据表中，每一列都代表着不同的数据类型，这些格子被赋予了含义，可能是文本类型，可能是日期类型，可能是数字类型。
image.png
这有什么好处呢？
好处可太多了，最大最本质的好处是，让计算机理解了这堆“格子”。
原本的 Excel 可以理解为只是个自由度非常高的画满了格子的画布，你可以轻松地画好你的小格子，但对于计算机来说，这只是一堆格子，它并不能理解格子里面的数据，而一旦计算机理解之后，在交互性和可视性上都可以有极大的飞跃，简直是从农耕时代迈向了工业革命。
比如最基础的表格视图可以被转化成看板视图，在看板上还可以直接拖动卡片调整分组；还可以转化成卡片视图，比表格更方便查看，非常适合图片为主的资料管理。
image.png
而语雀的数据表刚刚起步，还无法做到大而全，因此我们选择了先从数据收集场景作为切入口，先让用户能快速地收集数据。
因此数据表的第一期将搭建数据表的基础框架：表格视图，同时以数据表的表单功能为抓手，增强数据表的收集能力。

Part.1 数据表

作为设计师，希望通过设计帮助数据表扬长避短。
数据表的长处在于比传统表格更利于查看的展示性和更加灵活的交互性。而相对来说的短板在于需要较高的上手成本和理解成本。

设计目标：搭建高扩展性的数据表基础框架的同时，降低用户的认知成本，同时发挥数据表高展示性优势。

认知：在设计中投射产品理念

在数据表中，很多概念悄然发生了变化，让用户理解这些变化有利于用户更快地上手使用。但又不希望过分干扰用户自然的探索过程。因此，在设计中做了很多隐喻式的尝试，融合在用户的操作过程中，让用户在潜移默化的过程中完成对产品理念的理解。

从一个单元格到一条数据
数据表操作的对象由孤立的单元格变成一行行数据。因此在鼠标指针在hover到某一单元格时，整行数据将为变暗，暗示这一单元格和其他列形成了一个整体。同时在设计上，纵向分割线会浅于横向分割线。这些细微的设计点，都是希望让用户逐渐理解，在数据表中不再是填写一个单元格了，而是会对一行数据产生影响。
image.png
从独立表单到彼此互联
而数据表的表单功能和其他问卷产品的特殊之处在于，表单和数据表之间存在互相转换的关系，数据表中的“列”等于表单中的“问题”。因此为了让用户理解这一点，在创建表单时，按钮上的文案特地使用“生成新表单”，暗示表单是由当前的数据生成的。在表单制作页，常规页面的左侧为新建问题类型，在数据表中调整为“所有列”，都是在强调表单和数据表的一一对应关系。
image.png

展示：更利于查看的表格视图

行高
传统表格的信息密度极高，常常同事甩来一张表格，一打开就是一大堆数据砸到屏幕上。
而影响信息密度的关键点就在于行高值上。
我之前做过调研，市面上绝大多数表格产品行高都在24px上下（Excel的表格行高甚至只有16px）。为什么传统表格对信息密度极度敏感呢？
这很大程度基于传统表格的操作所限制。在传统表格中，“选择数据范围”是非常常用的操作，用户要基于这个操作做各种分析处理。因此对每屏显示的数据密度有很高的要求。（就是下图这个操作）
image.png
而在数据表中，由于数据存储方式的变化让计算机读懂了表格，用户再也不需要这个操作了，从而可以设计出更利于查看和协作的表格视图。

那多大的行高合适呢？
可以参考文字排版的思路，将单元格拆分成文字行高和上下间距两部分。在 AntDesign 中，基准字号14px的行高为22px，而表格的上下间距则留了常用的间距值12px，再增加上下两条1px的分割线。因此以14px的基准字号为例，表格行高=22px + 12px + 2px =36px。
image.png
下图是调整后的具体效果。
image.png
除此之外，此次做数据表的表格视图时，也把表格的字体做了升级，对表格设计规则做了梳理。
字体
数字字体一定要使用等宽字体
因为表格里经常需要上下进行比较，而非等宽字体的不同数字宽度不一致，让不同位置的数字无法在一条线上，尤其是有千位分隔符时，会让数字比对的效率大大降低。而 Helvetica Neue 数字等宽（且是很多系统的本地字体），在数值上下对比的时候，相同位置的数字在同一条竖线上，更加容易对比。
image.png
对齐
对齐对于表格的可读性，头脑中进行计算的容易程度以及不同行之间的比较中起着重要作用。
有3条简单的规则。

  • 右对齐数字列
  • 左对齐文本列
  • 列名称与列内容对齐

为什么数字要右对齐呢？因为对于使用者来说，关心数字数值的大小比关心它的位置更需要，所以将数值型的数字向右对齐，能让使用者方便的比对数值。
image.png

Part.2 表单

制作：所见即所得（WYSIWYG）设计模式

所见即所得：WYSIWYG = What You See Is What You Get

所见即所得最早是由菲利普·威尔逊所提出的一种电脑文本编辑器方面的技术，即用户在编辑文档时看到的样子和最终得到的成品样子是一样的，比如常用的Word就是一种“所见即所得”的软件，你在编辑文档时看到的样式和文档打印出来的样式是一致的。

所见即所得它能及时的将最终结果反馈给用户，让用户提前进行决策，提高使用效率，从而增加了用户的状态认知感。例如语雀的之前的 Markdown 编辑器，由于结合了 Markdown 语法的快速高效和所见即所得的能力，获得很多 Markdown 用户的喜爱。

在表单设计中，也将这一模式沿袭下来了。
当用户鼠标Hover到问题附近时，会出现灰色热区，暗示用户可点击，点击后即可进入编辑态，失焦时自动保存。
image.png
为了加强阅读态和编辑态的对应关系，在两者转换之间做了动画过渡，编辑对象均不离开视线而是向下缓缓移动到对应的位置。并且为了避免和用户填写输入框混淆，问题编辑不使用输入框样式而选择了更接近阅读态的灰底蓝条样输入框。
image.png
在可用性测试中，表单制作部分也获得了较高的得分，大部分被测同学表示表单制作还是非常简单易上手。（🤦‍♀️然而由于入口太深，新建失败率很高）
image.png

填写：通过暗示以提高填写效率

文本框的长度会给输入信息的用户心理暗示，他们会根据文本框的长度来判断需要输入内容的长度。因此根据不同的输入类型，给不同的表单项设置了合适的文本框长度。
image.png
image.png

总结

设计这样一个充满想象力的产品是一件让人非常幸福的事情💓。
但是面临的挑战和困难也很多，这不光是设计一个表格产品，背后更是无数的数据视图和应用能力。而且用户面对这个产品是全然陌生的，由于它较高的学习门槛，用户对它的接受程度可能会远低于那些已被大众熟悉的产品模式。
看完上述这些心路历程，如果你对它产生兴趣，👏欢迎来试试。
本次分享是数据表设计的第一篇：收集篇，视图篇也将会在不久到来，欢迎找 SUKI 交流～