APP数据如何更加优雅地展现出来？

如今的产品设计已然不是图形表达，而是如何做好数据表达。

本文内容所讨论的是关于在产品设计中设计师应该如何表现数据的展现形式。尽管数据展现并非是所有行业领域的设计重点，但在特定范围里，如：行业经济数据，体育博彩数据，棋牌竞技数据，交通里程数据，个人成就数据等等，其内容是整个产品中不可或缺的一部分。

该如何将各个维度的数据恰如其分的表达出来，会成为设计师的工作重点，这比单独的图形版式更加复杂。特别是在用户的体验感上，数字与图形相比，本身就具有一定的违和感。因此，设计师需要有更强大的设计构造能力，在数据中寻求美与优雅的体现。

未来的人是完全数据化的人

无论人文主义怎样反感将人的特性统一在数据当中，都不能阻止社会向数据化的方向发展。在过去，人们所关注的重点，往往是具体的事物和外在的表现力。

而现在人们所关注的重点则成为各个维度的精确数据，通过数据展现自己的社会优势将从金钱这一个方向衍生到生活中衣食住行的所有层面，所以人们会乐此不疲的查看谁获得了步行量第一的冠军，谁拥有了更多的购物积分，谁的保险累计金最高……尽管这其中很多内容是不具备购买力的虚拟产品，但数据带给人的荣誉感会因此变得真实可信，也变得似乎很容易就能彼此竞争和超越。

如果我们仔细观察这几年的产品功能发布，就会发现，产品的数据的表现已经往极度细化的方向发展，凡是能够满足一个用户自身具备优势的表现点，都会产生相应的与其他用户相比较的数据。所以如今的产品设计已然不是图形表达，而是如何做好数据表达。

数值表达与设计的矛盾

设计的本质是数值，这一点我在其他文章里陈述过，但我需要强调的是，设计是数值的外在呈现，但它决不是数值的直接表现。

举一个简单的例子：一个优雅的圆形，在程序的数值中是半径80PX，所以用户能够看到圆形的形态，但这并不代表需要把80PX这个数值直白的写在界面中。因为无论设计师如何排列这个“80PX”都没有圆形本身所具备的优雅，因为数字是冷冰冰的，并且只有10个不同的形态（0，1，2，3，4，5，6，7，8，9）。

这就能够解释为什么当大量的数值摆放在界面中时，界面只能够采取最简单的表格形式，这并非是设计师不想用更好的设计排版，而是数值本身的组合形态决定了它们的表现力不可能像图像那样充满多元化的个性。所以越是需要展现具体数值的界面往往就越丑，这就是数值表达与设计的矛盾。

我的客户时常把这种难题甩给我，问为什么界面看起来不漂亮，我的回答只有一个:“数值组合不是图形排版，信息传递的准确性才是数值组合的第一目标，而不是美观。”

“那我不管，我就要它好看！”

如何才能让数据展现在产品中呈现美的感觉，我几乎动用了我所有的美学能力和设计技巧。最终探索出了以下几个解决方法。

数据表现在界面中常见的几个问题

我先说下数据表现在界面中通常会出现的几个问题：

1.界面的拥挤杂乱

数据表格显得拥挤有多种原因，但总体原因往往是产品经理在策划中不懂取舍造成的，特别是在数据展现上求大求全，似乎要将用户的全部数据信息都陈列摆上才能显得产品的专业，这完全是一个误区。事实上从产品功能而言，用户的接受度往往是单项选择，同时在界面中具备好几个功能的数据表现，会让用户看不到数据的重点在哪里。

2.过于展现数据的精确度

在某些产品中，为了表现其专业度和优势，有的会将数值精确显示在小数点后两位，有的会将数据的位数增加在6-8位，这种做法并非完全不可行，特别是在棋牌竞技类数据中，用户的得分往往由多位数组成。然而面对移动平台硬件，这种多位数的展现形式很容易因为屏幕大小的改变而出现弊端，比如：数字摆放不下，出现表格破损。

3.数据表现的展现手法单一

关于数据中的动态表格呈现往往与程序员的水平有密切关系，这需要设计师根据动态表格的呈现提交确切的设计数值，包括颜色、各个数据的间隔规范等等。动态表格由于程序的控制，可以有很多元化的表现手法，比如：圆形、线形、块状形等等……这些都是数据与图形的结合方式，也是最能发挥设计师用途的表现形式。然而这部分表格的呈现通常比较单一化，一方面是设计师对表格的设计无法提交确切的数值规范，另一方面也在于程序对表格的开发能力有限，短平快的研发周期让多数产品只愿调用现有的效果模板，这样在表现上必然会受到局限。

比如：赤兔和微信运用所用的就是动态图形表格，在程序上属于比较简单的。

如何解决？

那么究竟要如何解决这些问题呢？总体的原则是灵活取舍，版式多变，分纳层级，动画表现。

灵活取舍

现在做产品最忌讳的就是高大全，如今的商业生态，产品都需要寄居在整个生态圈中才能生存，所以用户并不需要高大全的产品出现，他们需要的是能够解决特定问题的产品，所以数据的呈现也是如此，举一个简单的例子：微信运动。

微信运动的主要数据就只有一个，步行数。二级数据是用户排名，三级数据是点赞数。这三个数据的层级关系十分清晰。为了突出步行数，产品经理取舍了用户名的显示，微信运用的用户名只显示前四个字。这是非常符合用户体验和人性的做法，因为用户在这个界面功能里只有两个关注点：

谁得了第一名？自己是第几名？

至于其他人，用户并不关心，所以其他人的名字是否显示完全不是一件重要的事情。

产品数据的第一表现力是用户自己。凡是非自己的数据信息，从人性的角度而言，都可以做一定的取舍。因此当产品经理苦恼用户不能看到其他人的签名和历史数据该怎么办时？作为设计师，我会明确的告诉他，用户并不关心别人的签名和历史数据，他们只愿意看自己和第一名之间的差距。这意味着很多与排行榜相关的界面设计都可以做到数据展现的简化，以突出最重要的部分。

版式多变

在数据展现设计中，表格的展现方式需要做到灵活多变，这种灵活包括：数字、文字、数字与文字的排列关系；数字和文字在表格中的位置；数字与文字大小的关系；不同颜色带来的主次关系，可操作的表格交互；表格分栏的行数与列数；不同类型表格的穿插；表格的隐藏于显现等等……这其中还要尽可能增加数据间的视觉间隙，以避免用户对数据的繁琐感受。

比如：在这款竞技平台中，将用户数据采用竖版排列是非常聪明的做法，并且用颜色区分主次关系。

从设计的角度讲，用户对数字的敏感度与好感度3位数是最适合的，如果到达4位数，则好感度会逐步降低，超过6位数不仅界面设计感会大幅度下降，对用户而言，识别成本也会随之增加，如果大量的6位数以上的数据呈现出列表的形式，除非是特定的行业数据和专业人士的使用，对于一般属性的用户而言，几乎是没有太多耐心去阅读的。

分纳层级

然而在产品实际设计中，确实也会面临着数据无法简化处理的难题，特别是某些国际上已经通行的标准数据展现，比如棋牌竞技类的计分模式，整个产品不得不按照多位数的方式呈现，那么用户要如何才能知道自己的优势呢？除了特定首要的个人展示外，将用户分为各个层级也是很重要的。根据数据划分区域，根据区域划分层级，根据层级提供不同的版式设计，用颜色、徽章等图形将用户区分开，而不是仅仅看谁的数字更长，以此让用户了解他们彼此之间的重点信息。

动画表现

动画表现主要运用在动态图形表格上，一般用来表达用户自身的数据，这种动态展现能大大增加用户的好感度及自我成就的满足感。但动态图形表格对设计以及程序的要求要远大于普通的文字表格。

就目前而言，国内产品基本上是调用国外已有开发出的效果展现，所以在可操作性上往往不能和产品功能完全适应，基本上还是属于简单的效果利用，没有真正的让整个数据以动态图形表格的形式呈现。但是动态图形表格将是未来产品数据的展现突破口，因为传统的文字表格已经不能满足用户的需要，无论设计师如何排版，随着个人数据的细化，他们都需要更个性，更动态，更具有交互性的方式来体现自身在虚拟世界的数据价值。在这一点上，可以说，程序的开发与设计是一体两面，不可分割的。

比如：Clue作为一款女性生理周期的数据产品，其动态图形表格的数据整理还能带有用户的主观交互体验，就远比只能作为观摩的动态图形表格要好。有兴趣者自行查阅，以便了解文字表格，动态图形表格与带有交互的动态图形表格之间的差别。

作者：王沛/Ada Wong，自由人，独立设计师

文章作者系 @Ada Wong