「仪表板（Dashboard）」、「大数据」、「资料视觉化」、「分析」——有太多太多人和企业想拿数据来玩花样。而我很幸运地在自己的生涯中，从事过许多数据扮演吃重角色的介面设计工作。今天我想跟大家分享，到底该怎么做才能完成与众不同、有意义的产品。
许多人已经谈过这个议题，所以本文会尝试聚焦于我们流程中影响力最的的那些部份。
1. 不同的使用者，不同的数据
当你在设计一个复杂的系统时，无可避免地会需要针对多名使用者或是多种「人物志（persona）」去设计。执行长、经理人和分析师都是常见的、拥有自己工作流程和数据需求的人物志。
定义出好的人物志、产生好的洞察，本身就是一门艺术，这并非我要在本文细谈的东西。重要的是，请记得人物志是要能够区分的，而且要让你能够为绕这些人物志去组织资讯结构的任务和框架。
下面是一些我们去年曾用于一个医疗报告 app 的东西。这个系统里面不同的使用者会需要他们自己的数据工作流程，每当我们建立了一个关键的人物志，就会加入下一次 app 开发的审查会议。
在满桌的客户面前简报设计画面是一件很困难的任务。不管你是在解释框架、流程图还是辩论视觉上的设计，你很难让大家跟着你的脚步走。
把你设计好的画面按照人物志来组织，对你（还有客户）在讨论过程中会很有帮助。
2. 页面布局（shaping page）
过去几年我学到一项技巧，就是页面布局的概念。这东西的核心很简单：
先向使用者展示他们需要看见的东西，然后再根据 user story 和资讯层次结构去安排页面剩余的部分。
页面布局的概念是诸如撰写散文（和其他许多沟通形式）的核心原则，我在写了一本书之后对这个概念也有更深一层的认识。过去一年我花了不少时间在读这本书《Style: The Basics of Clarity and Grace（中译本书名为《英文写作的魅力》）》，它除了是一本关于写作很好的参考书，更是精彩地表现出页面布局的概念：
When you start with distractions, your audience has a hard time seeing not just what each element is about, but the focus of the entire passage.
当你的焦点开始分散，你的观众不仅很难看见每个元素是什么，也会看不清整个段落的焦点。
对于设计 UX 来说，这是一个很好用的原则。下方是两个我们常用来安排页面布局：
▲ 给你的仪表板一些结构吧。问问你自己，到底要告诉使用者什么样的信息。
许多我在 behance 和 dribbble 上看过的仪表板和资料视觉化项目设计，在视觉上都很美，但常常会在看完之后出现压倒性地，令人毫无印象的感觉。他们要不是： A）仿照 Pinterest 风格去安排无数个图像、线图，毫无层次；或是 B）在视觉上对数据做了不合适的过度设计。
▲ 左边的塞入太多东西，右边则是让人难以聚焦在资料上。
上方左侧的图采用中控台的设计去呈现资讯，那样的作法塞入太多东西了，让人受不了。为了避免这样的情况，我们会尝试用「策展」的方式去安排这些信息，让你在看这些数据像是在读一篇杂志文章。
更不用说我们通常没时间去弄一个任务控制中心般的界面。我个人蛮乐意去设计一些像那样的东西，但是大多数情况下，一次就要看到所有的东西是没有必要的。
你需要考虑的重点是：避免做出东拼西凑的琐碎视觉。好好安排页面上的资讯，让使用者容易在一开始就掌握住关键资讯，然后才是承接的相关内容。
3. 选择「正确」的可视化
有太多因为美学观点而选择错误设计的图表在你我周遭流窜着。
最糟糕的是，这些坏习惯似乎会有与日渐增的现象。我常常会看到该用圆饼图的却用分区图（area chart），该用直方图的却用折线图。让我们一起停止这样的现象吧，请尝试用以下的方法还你的数据一个公道：
从资料着手
虽说原始数据一点也不性感，然而，却是我们最好着手的地方。这可以协助你开始思考，数据里含有哪些变量，以及各种数据所代表的东西有何关联。
除了呆呆的盯着一排排数据，希望一些点子可以溜进你的脑海之外，你其实可以主动一点，以下几个资源是你可以利用的：
- Charted：由 Medium 团队开发的资讯视觉化自动工具。
- 用 Google Sheets、Illustrator 或 Sketch 设计出更棒的图表。
- Tableau：市面上最棒的工具之一，但非常昂贵。
这部分的流程没有万灵丹，但也别怕去碰那些数据，试着混合、搭配那些变量，从一些基本的图表着手。这很花时间，不过很值得你去做。我最棒的几个想法就是透过这样的方法就是从这些原始数据开始思考而得来的。
不连续资料 vs. 连续资料
我花了一些时间才领悟到这件事：有的图表类型就比另一种更能表达出你的数据。如果只是挑一种看起来不错的图表套上去，然后希望你的数据因此变得有用，那当然很简单，我以前就做过几次（我超爱自己做过的一张 scatter plot）。
请认清一件事：根据数据类型的不同，有些类型的视觉化就是会比其他的好。找出最佳的视觉化，方法之一就是先分辨你的数据属于哪一类。数据主要可以分为两类（编按：Well，数据分类方式不同，例如统计学上会将数据分成 interval data、nominal data 跟 ordinal data，本文以作者的为主）：
不连续资料：你可以计算个别的数值。例如：比赛的得分或是 Facebook 按赞数。
▲ 直方图很适合用来表现不连续资料
连续资料：在一个区间内的任何数值。例如一季的雨量或是一个人的身高、体重。
▲ 折线图很适合用来表现连续资料
这个部分有一个非常棒的参考数据：Dona Wong 写的《The Wall Street Journal: Guide to information Graphics》，真希望多年前我就能有这本书可看。这本书对于选择合适的图表类型、在表达资讯时什么该做/不该做，是极有价值的参考。
4. 基本款 vs. 客制的资料视觉化
最后，身为一名设计师，你必须不断地自问：「我该放弃那些有前例可循的路走向客制化吗？还是我该选择那些经过验证的图表去传递数据背后的讯息？」
我最近读到这篇 37Signals（编按：已改名为「Basecamp」）的部落格文章〈 Three charts are all I need〉。作者对于资料视觉化的「问题解决」特性是如何取代掉了视觉上的美感提出了强力的论点。我完全同意这篇文章的说法。然而，我想他的意见属于非常功利的角度，我相信客制的数据视觉化总是能强化数据的可用性，而且又能看起来相当独特、引人注目。（编按：光看该文第二点「Your job is to solve a problem, not make a picture」和第三点「Safe doesn’t mean boring」您就可以很快有个概念了。）
对我而言，图表的选择可分为「万用」与「最适用」两种。表格、折线和直方图对于很多种类型的数据来说都很好用，但他们是比较通用的。身为一个专业的设计师，我会希望自己的作品同时兼具实用性以及独特的美感。
举例来说，《纽约时报》的客制化互动图表充实了他们的文章内容。你可以在这边看到他们的作品。我们来看看一些无可挑剔的客制化视觉作品：
这个例子是将折线图稍微改造了一番，折线图代表的是大联盟平均每一队在一场比赛里的三振数，蓝色线图背后的灰点则是每一队的平均值。（编案：可选择不同队伍，比较单一球队的数值与联盟平均。）
▲ 各年份对于未来 30 年的殖利率预测变化 3D
图。（上面这张 3D 图表看起来相当惊人，但同时也能让读者明白数据间的关联性。（编案：可连回原连结操作一下，搭配图表的说明读起来相当清晰。）
上图是利用真实内容（自拍照）来做资料视觉化。
最后，是我们为 CNN 做的一个专案，我们利用 color-coding 秀出政党喜好，以及 3D 的可视化人口统计资讯。
作为一种经验法则，当数据和技术上有需要的时候，我们就会尝试做客制化的数据视觉，但我们总是有备案，以便万一客制化进行得不顺利，或是顾客偏好野心不是那么大的方案。
所以呢？
或许有人会问：为何要把资料都放到页面上？
答案：这样一来人们才能运用那些数据——做决定、调查、预测等等。重点是，使用者不会因为你的用色而感到惊叹，他们有自己的工作要做。
我的意见是，当你安排好页面的布局了，所有的东西都打磨得恰到好处。这时你要问自己：然后呢？审视每一个图形、每个小工具、图表、表格，去思索使用者会从中得到什么。往往你会得到一个结论：这不重要。这时就等于是竖起了红旗，你必须减去一些东西，或是重新思考。
我自己曾经遇过几次这样的状况。我做了一个很美观、很复杂的仪表板，上面有一堆趋势图、圆饼图和地图，上面有成千上万的数据点。结果客户问：「我只想知道产品到底行不行，我该怎么看？」或「我只需要知道三件事：X、Y 和 Z，我要怎么找到他们？」
唉，这时候你才会明白自己已经在草丛里迷失，而看不见整个局面。
所以我会利用一种技巧去应付这样的状况：尝试利用文字去沟通：「到底对方想知道什么？」
▲ 透过高阶（high-level）的、文字化的结论会比图表更有用。
上面的两张图表来自我们最近的项目。他们都只是简单地用文字告诉使用者他们需要知道的东西，而非透过图表或图像来解释。
我们的客户很认同这样的做法，特别是在处理高阶的资讯时。但正如同我前面提到的，永远有不同的人物志要考虑，所以请选择最合适的方案。
如同所有形式的设计，资讯视觉化讲究的也是平衡。
努力用独特方式去展示你的数据，但要避免过度设计，以及不必要、使人分心的东西。
为你的数据选择正确的图表，同时不要忘了按照层级去安排你的页面布局。
无论再怎么令人沮丧、令人感到烦琐，都要为了小细节而烦恼，而且别忘了问自己：「所以呢？」
