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」，它们提供的地图服务中，可以用放大镜来显示某一区域的细节。

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

移动设计不仅仅是设计APP、或是移动网站，也不是设计途径或工具的使用方法，而是一种设计思维。移动设计需要你深入地理解移动，理解它的用户环境和使用场景。
原文地址：www.smashingmagazine.com/2015/04/10/thinking-like-ap-app-designer

移动应用设计有很多需要做的，不仅仅是吸引眼球。你需要深入理解设备，与设计web一点也不一样。

笔者从传统印刷进入设计行当，后来才了解交互设计和用户体验。

莫种程度上，我发现设计就像一个重复性的循环：找到一种万无一失的设计模式，用在每个项目上都能快速推进，但是反过来却发现设计的结果好像千篇一律。就好像最初代的iOS和安卓发布时候给人的感觉。

后来我找到了设计中的新领域：移动应用设计。

最近发布的Appwatch，一方面由于打开了一种设计的新可能性而让人兴奋，另一方面，对从未有过的交互以及用例确实让人有点恐惧。

市场不是没有过这种设备，但是新的技术必须有新的设计来配套。

当然，第一次这种大跃进发生在20年前，互联网。在那之前我们设计师还只是关注印刷产品。互联网让我们必须继续学习如何与媒介发生互动。用户不再只是个观察者。

转变是很艰难的，这也是为什么当时大多数的网站看上去像是按钮上的标志——设计师们还没有理解新媒介的特点。

今天发生在APP上的事情也是同样。很多应用看上去就像是把mini-sites搬到了手机里。然后，被比例、字体、点击事件、手势一类的东西给彻底搞垮。他们没有意识到是谁在用app，在什么地方以及用什么设备。

当设计移动时，跳脱web结构非常有必要。我们必须以一种不一样的心智来对待移动设计。

怎样才能成为移动设计师？

·改变工作方法
必须牢记：在你还在倒弄那些花哨的设计时，类似的app可能已经有几百款了。你根本没时间去在几周、几个月的时间里雕琢。

这就来了“精益用研”，一种快速小幅度的方法：持续不断地迭代设计和开发。记住：用户用过之前，什么都说了不算！

因此，app设计不能从PS或AI开始，应该从线框原型开始。这样，一旦变动来临，很快就可以修正。

从视觉开始设计是设计师的惯常。我们几乎已经习惯了。

最近一段时间，当我提出来设计师甚至不要从电脑开始工作而是从纸上画画开始时，很多人都感到吃惊。这样做的好处是防止我们一上来就思考什么文件尺寸、颜色字体等等，这些东西其实都在阻碍我们创意的发挥。

“移动优先”，或者说从最小的屏幕开始，是一个很好的策略。从小屏幕到大屏幕的思考更为容易。

刚开始这么做的时候，我是不习惯的。我建议你去试试看，你会发现你的优先级变了，你会突然之间明白对于移动设计来说什么才是最重要、不可或缺的。

你可以设想你是在旅行，只有一个最小号的手提箱，那么你会带些什么？肯定是最有用的东西！这不是跟智能手机上的移动设计一样吗。

从另一半身上学习

好的应用是设计师、程序员共同努力的结果。你需要变得更有效率。可以通过并行工作的模式来缩减迭代成本。
要去学会使用那些能很快地把你的设计演示出来的设计工具。
我刚到巴塞罗那，参与了一家小型初创科技公司。在那我发现我被一群程序员环绕着，都等着我交东西。
业余，我学习着使用Xcode以及编程语言，这些让我能够制作更加复杂的设计提案。
告诉你个窍门:尽量跟团队里的人使用同样的术语，这样大家会感觉用同样的语言在交流。

去使用不同的操作系统

作为设计师，千万别把自己固在iOS里。

每一种操作系统的交互模式都不一样。设计师必须快速地转换才能正确地同化设计。比方说：Tab的位置、怎样显示菜单、何时何种方式来显示一二级功能等等，在iPhone和Android上都不一样。

Instagram似乎没有好好做安卓设计，只是把IPhone的方案照搬了过来：Android上面Tabs应该在上面）

奋力做原型

敏捷开发的方法需要在实施前就能清楚理解产品的功能和长相。原型则能够帮助我们评估产品的可用性。理想状态下，我们应该快速地做出原型。

还记得Palm Pilot？它最早的原型中有一个就是用木头做的，然后把界面打印在纸上。雇员们则每天把它放在口袋里，好像它是一台真的设备一样。
原型除了能测试大小、重量、使用舒适度，更重要的是看一看你在脑子里想加的功能是不是真的必须，如果是，那就弄！

根据你的工作流程、你想要达到的目标、你最后期望的结果来选择最合适的工具。举个栗子，当我只有一些纸上的线框稿时，我会用POP这款应用。它只需找两个照片，就能快速地加上手势和过场。
但是当一个概念更加深入了以后，我觉得用一些更加具体化的设计软件更方便，比如Sketch,然后用Marvel、Flinto、InVision
这类工具做更有细节的原型。
另一方面你要了解，安卓目前正在它的Material Design中越来越多地引入“微交互（ micro-interaction ）”，在原型中设计出微交互是许多当下设计师的责任。

不要相信你的眼睛

从前给Web做设计时，你事可以看着你的设计最终一步步走向实现的。但对于APP，你需要在移动设备上测试它的功能和界面，这对于你选择合适的对比和大小是十分重要的。
IOS和安卓都有相应的工具来帮助设计师在不同分辨率的屏幕上检测效果。对于Ios，最有名的是LiveView。我常用的是Skala，它带一个桌面版，这样你可以在Mac上使用。你还可以试试Sketch Mirror，如果你用Sketch的话。
在我的工作习惯中，我总是在手机上预览一下设计效果，然后才开始下一步。我在一段时间里只设计一个操作系统上的界面，并且始终把手机保持离自己很近。当第一个线框稿好了以后，我就能够在手机上确定图形、字体以及点击区域的大小、比例、颜色是否合适。如果你不在第一时间去了解这些，后面改起来是非常麻烦的事情。
还有，如果你在给不同的屏幕尺寸做设计，那么需记住像素不再是最好的度量方式，因为它在不同的OS上有不同的表现。iOS上的points和安卓上的DIP就是这么回事。

以谦卑之心做设计

不要觉得你在创造什么终极解决方案之类的。APP永远不会完结，它需要不断地进化。正因如此，我们不能以绝对主观的立场来应对界面设计。真相只有从可用性测试里用户遇到的问题破译出来。