Designing Interface》是一本非常好的界面设计理论书。书中将「设计模式」作为设计界面的重要方法。但是这本书的中文版翻译的并不好，好像不是界面设计的从业人员翻译的。在这个系列里，我会简单地翻一下这本书，一章一章地进行，从自己最感兴趣的章节开始。文字不会全翻，但一定会抓重点。

信息的可视化，能够让人们直观地从视觉上获取内容和数据，帮助观察者快速地推演出结论。它的形式涵盖可以有：
· Map ：地图、位置图、对应图
· Flowcharts ：流程图
· Barplots ：条形图
· Diagrams ：示意图
· Table : 表格
· Tree Views ：树状图

有别于传统平面设计的是，交互中的信息图是可以允许用户主动去选择以何种方式来观察信息。任何一个静态的数据如果能够让人们与之互动，将会极大地降低其内容被人们理解的难度。
在交互式的信息图中，用户不再是个被动的观察者，而是一个参与者。设计交互式信息图需要首先了解两种用例，一方面，用户可能是在数据内容中找寻某个具体的信息点，这时我们需要提供如搜索、筛选这样的功能；另一方面，用户可能仅仅是想了解个大概，这时我们要能允许用户在全局和局部之间来回切换。

====接下来，介绍一下书中这一章所涉及的设计模式：====

模式1：略带细节的缩略图 / Overview plus detail

用一个缩略图来代表全局内容，并且在缩略图中用一个小框框来表示当前窗口所处的位置。

Photoshop中典型地使用了这一模式

百度指数也是同样运用了这个模式，他们在坐标图下面的时间轴上放置了一个缩略图，同事还可以让用户拖拽以调整观察的时间区间。

模式2：数据提示 / Datatips

当一个数据可视化的页面上存在大量数据并存，并且每个数据节点都包含一些细节信息时，我们可以考虑用「数据提示」来为用户提供更加具体的信息。具体体现在当用户鼠标经停在某个兴趣数据点上的时候，可以弹出一个小窗口来展示信息。我们的用户在浏览一些专业性的数据页面时，需要在整体和细节上来回切换，「数据提示」这一模式则很好地帮助了用户。

百度统计的管理者界面以及我使用的七牛云存储的管理界面都出现了这一模式的运用

模式3：数据高亮 / Data Spotlight

有些数据图表包含的信息量非常大，层层信息交叠在一起后，用户很难短时间内梳理数据间的关系，也很难聚焦在感兴趣的数据上深入观察。这时候，「数据高亮」这个模式就展示了它的作用。
当用户的鼠标经停在某一个感兴趣的数据点上面时，我们可以将这个点高亮，同时让其他数据变得隐晦一些，这样能够帮助用户更仔细地查看他想看到的。

这是一个叫做「旧金山犯罪地点」的网站，能够根据警方记录将整个旧金山的犯罪地点按照犯罪类型和时间予以显示，我猜想可能是为了给人们看到哪里更加容易出事吧。他们使用了这种模式，能够让你高亮地查看某一类具体的犯罪类型，从视觉上来说就很方便用户进行归类。

另一个例子是华盛顿邮报，他们的一个叫做「美国最高机密」的项目，也是用到了这个模式。这个半圆形的图表汇集了大量的信息，但是当鼠标停在某个具体部门上时，又能将其他的部门暂时遮盖一下，不至于让用户在浏览时太过眼花缭乱。

「数据提示」与「数据高亮」经常在一起使用，后者的特别在于还会同时遮住其他数据要素。
记得在使用这个模式的时候留给用户以及服务器一些响应时间，否则用户移动鼠标的瞬间就给出反馈会让体验很不好。

模式4：动态检索 / Dynamic Queries

用户有时候想从一大堆数据中去除掉无关的维度，想看看哪一组数据符合了他想要的标准，或是想了解几组特定数据间的直接对比，这时候他们不希望看到无关的数据干扰视线。这种用例，可以考虑「动态检索」这个模式。它能即时动态地筛选信息，让用户通过滑动条、复选框来进行数据选择。这个模式的好处显而易见，几乎所有的用户都会使用鼠标的点选或拖拽，本来属于数据库管理层面的增删改查等操作在UI层面变得非常简单。更重要的是，即时动态的反馈效果能够刺激用户一直保持查询的动作连贯，形成一种“心流”。

还是用之前提到的「旧金山犯罪地点」这个网站为例.它的左侧和下侧均提供了对数据查看的动态检索，用户每一次更改查询条件，都会即时地反馈在地图上

注意，在设计时不要忘记给用户一个「All」选项——时刻保持让用户能够回到所有数据中来。

模式5：数据提炼 / Data Brushing

当我们为用户提供了一组数据的不同显示方式时，比如同时给了坐标图和图表，则可以考虑为用户提供这种模式的交互。它允许用户在选择了数据中的某些兴趣点时，同时在各个图标上予以高亮显示。
这个模式的意义在于：有时候，在不同的语境下观察同一组数据，往往能够洞悉更多真相。

这个书里面的例子来自一个叫Weeplaces的网站，现在貌似打不开了。其大意就是在上方的地图和下方的时间轴中同时展示着某个人的签到信息。等于是一种时间和空间上的并联显示。

这个是百度地图的例子。点击左侧列表中的地点，会在右侧同时地显示位置，反过来也是一样。这种模式就是一种数据提炼DataBrushing（说实话我觉得翻成‘数据提炼’也不太达意，但实在不知道怎样可以更好滴表达）

模式6：局部放大 / Local Zooming

这个模式是为了给用户一种类似于“上帝视角”的方式，让用户可以从高到低地观察数据，既能纵观全局，又能对某一局部有所深入了解。
不同于普通的缩放，这个模式在放大观看数据的同时，还能保持对整体数据的观察。如果用在一个列表中，可以采用挤压其他数据项；如果用在地图中，可以采用放大镜的形式。

这个是书里面给出的例子，软件名字叫Inxight，反正我是没用过。图片是从谷歌上扒的。通过截图，我们可以看到它允许用户在整体数据中，局部地放大某一块数据来仔细查看。

这个是书里面的例子，网站名字叫「cartifact.com」，它们提供的地图服务中，可以用放大镜来显示某一区域的细节。

这个是笔者找到的例子，来自「彭博通讯社」的活动页面，这个活动是基于彭博的数据，给出一系列“数据之最”比如最有创新力的国家是哪里等等。我们可以看到，当你点击了具体的一个条目时，该条目被放大显示，同时其他条目都被挤压到上下方了。