数据驱动的界面设计.pdfVIP

数据驱动的界面设计 仪表板“ ”、 大数据“ ”、 数据可视化“ ”、 数据分析“ ”——越来越多人和企业，开始运用他们的数据来做一 些有趣的事情。在我的职业生涯中，有幸参与一大批数据为重的界面设计，我要在此分享一些观点 ，讲讲如何造就这种特殊且有意义的产品。 很多人已经讨论过这个议题，我会围绕创作过程中最具影响力的部分。 用户不同，数据不同 任何时候设计一套复杂的系统，都不可避免要为很多用户和角色进行设计。总裁、经理和分析师是 几个常见角色，每个都有自己的工作流程和对数据的需求。 定义好角色，产生不同视角，这本身就是一种艺术。我就不在此详细解释了。如果你对此有兴趣， 请看 Cooper 的这篇有用的文章。 关于角色，重要的一点是 预先确定好 ，围绕它们来组织信息结构与线框图。 下面是我们去年做的一款健康报告应用的最终成品。这套系统有着不同的用户群，他们各自都需要 不同的数据管理。创建了关键角色后，我们每次评审会将它们放在旁边。 注意画板上的那些角色。我们的客户都接受这种方式。 在满屋子客户面前展示作品是件难事。无论是在解释线框图、流程图，还是就视觉设计进行讨论， 都很难让每个人跟上你的观点。 通过角色来组织作品，会防止你（和客户）在这些讨论中跑题。 制作页面模型 我多年所用的一个技巧，是制作页面模型。核心点很简单： 首先为用户呈现他们 需要 的，再将页面余下的信息根据用户故事或信息层级，进行结构化 处理。 制作页面模型的概念，正是写散文（和其他很多种沟通形式）的核心原则，我在 写过一本书之后就 对它了如指掌了。多年来，我花费大量时间在这本书《样式：清晰与优雅的基本要素》上。它除了 作为绝佳的写作参考之外，还清晰阐明这项观点： 如果一开始就使人分心，那么用户不仅难以分辨每个元素是什么，也难以集中精力于整个 流程。 这是进行用户体验设计时需要牢记的一项准则。下面是制作页面模型的两个常用方式。 给画板创建某种结构。问问自己 —— 通过这些信息要讲述怎样的故事？ 我在 behance 和 dribbble 上看到很多仪表板和数据画报项目，（视觉上）设计得很漂亮，但通常都使 人眼花缭乱、过目即忘。它们要么是各种图表组件以缺乏层级的瀑布流形式排列，要么视觉上过度 设计，并不适合这项数据。 左图展示的就是眼花缭乱的数据画报。右图例子则是装饰物分散注意力，注意不到数据。 在上面的图中（左图），这个数据面板用了控制台的方式来呈现信息 …… 相当有压迫感。为避免 如此，我们试着以 组织信息 的方式处理这类界面，让人们感觉像是在阅读杂志文章。 并不是说控制台式的界面就没有用武之地 …… 我个人愿意设计成那样。但多数情况下，没有必要时 刻看见所有信息。 最关键的一点 —— 避免创造出令人一知半解的图形 。为页面信息建立模型，首先给用户呈现关键 信息，然后才是支撑内容。 选择正确的图形 在美学方面，有很多（太多了）设计都在误用图表。 最糟的是 —— 这些 坏习惯“ ”似乎在成倍增加。随处可见本应是饼形图的面积图，还有本应该是柱状 图的曲线图。让我们一起来制止这些设计 …… 下面这些建议有助于你正确对待数据： 始于数据 未经处理的原始数据表格一点也没有吸引力。但它是最佳的起点。它帮你开始思考数据中有哪些变 量可用，这些变量数据如何关联。 原始数据的单调特性，会帮你思考系统中各种变量间的关联。 除了从空白数据行列入手，等待灵感忽然进入你意识。你还可以更积极一些，通过下面这些很棒的 资源，帮你揭示出有趣的关联： 在整个过程中，这部分并没有灵丹妙药 。别对深入研究数据心存恐惧，试着混合搭配不同变量，创 建基本图表。这需要时间，但它是值得的。我想到的一些绝妙点子，都来自这些原始数据文件的拼 拼凑凑。 处理离散数据和连续数据 我花了很长时间才意识到这点，有些图表比其他更能表达你的数据。在创作中很容易陷入这样的 境地，选择一种好看的图表，然后指望它能发挥作用。我经常这么做（我挺喜欢散点图），并为此 感到内疚。 有些图形比其他更好，这取决于你所处理的数据类型。选择合适图表的方法之一，是评估你手中的 数据。有两种主要数据： 离散数据 —— 数值可清晰计数。比如进球数或 Facebook 点