界面设计第九章

界面先行

开始编程之前先设计界面

很多应用人们在开始做的时候都抱着先编程的心态——那是个坏主意。编程是构建应用的过程中最笨重的部分，也就是说，它改动起来最复杂，成本也最高。做应用应该始于界面设计。

界面设计相对来说是比较轻量级的。一纸草图修改起来简单，成本也低。html页面的设计修改起来或是推翻也比较简单。修改程序就不是这么回事了。界面先行可以让你保持灵活；先行编程则会让你陷入花费额外开销的圈套。

界面设计先行的另一个原因是——界面就是你的产品。你向人们销售的产品正是他们能看到的。如果你最后才推出界面，就会出现缺口。

我们先从界面开始，所以从一开始我们就知道这个应用看上去如何，给人感觉怎样。在开发过程中，界面将会不断的改进。合理吗？易用吗？是不是解决了手里的问题？这些问题只有你和真实的界面打交道的时候才能回答。设计优先让你保持灵活而且让你能更早地回答那些问题。

开创Blinksale的橙色钢笔

当我意识到现有的帐单管理软件都无法让我满意的时候，我决心把我想要的帐单管理解决方案画出来。我拿出一支橙色钢笔，因为它是那晚上唯一好用的东西，然后我用了几小时画出了75％的用户界面。我把它拿给我妻子Rachel看，当时她正在烫衣服，我问她：“你觉得怎么样？”她微笑着回答：“你真该把它实实在在的做出来。”

接下来的两个星期里我重新斟酌了设计，并且做好了当时可能成为Blinksale第一版的大部分静态页面。除了那些用橙色钢笔画的草图，我们从来没有做过其它网格之类的东西。而且直接进入html页面的设计让我们一直为项目变得现实起来而感到激动，即使在当时我们并不知道我们正在陷入什么当中。

html页面一完成，我们就和开发员Scott一起商量关于Blinksale的想法。已经设计好的用户界面在好些层面都发挥了非常好的作用。首先，它让Scott能亲眼看到，使他为我们的目标感到激动。它远远不止是一个创意，它是真实的。其次，它帮助我们可以精确衡量Scott需要花多长时间和精力才能把设计变成能跑的应用。当你在对一个项目的孵化提供资金上的支持，越早能做出预算越好。界面设计成为了我们在项目初期的评估基准。最后，用户界面的设计就像一个向导，能在我们进一步开发的时候提醒我们这个应用程序的核心目标。当我们临时决定添加新功能的时候，我们不能简单地说：“好的，那就加吧！”我们必须回到设计上来，问自己新功能应该放在哪，如果没有它的位置，它就不该加。

—Josh Williams, Blinksale创始人

震中设计

始于页面的核心然后向外延展

震中设计就是关注于页面的本质——震中，然后再向外拓展。这意味着，一开始要忽略细枝末节的东西：导航条或者导航标签、页脚、用色、边栏、标识等，从震中着手，先设计页面中最重要的内容。

页面赖以生存的是其核心。举例来说，如果你正在设计显示博客文章的页面，那么核心就是博客文章本身。不是在边栏里的文章分类，不是顶部的页头，不是底部的评论提交表单，而是实际的博客文章单元。没有博客文章单元，这就不是一个博客文章页。

只有当这个单元完成之后你才能开始考虑页面中次重要的元素。次重要的元素完成之后，你再转战第三重要的元素，以此类推。这就是震中设计。

震中设计规避了传统中 “先搭建框架，再填充内容”的方式。在那种方式里，人们先建立好页面布局，然后把导航条包含进去，然后插入有关销售推广方面的东西，到最后才把核心功能——页面的实际意义所在用来填充剩下的空间。这是本末倒置的做法。

震中设计让你从一开始就关注于真正重要的部分。先做必需要的，再做其他的。结果是给用户一个更友好、重点清晰的界面。并且，这样可以让你马上和设计、开发人员展开对话而不是等到页面所有部分都各就各位之后。

考虑三种情况下的解决方案

常规、初始、错误三种情况下的设计

对于每一个界面，你需要考虑可能出现的三种情况：

常规
一切运行正常的话，人们看到的是一个充满内容的界面。
初始
人们第一次使用这个应用，在加入内容前的界面。
错误
有错误发生时，人们看到的界面。

常规的情况众人皆知，它将花去你最多的时间。但别忘了也要为初始和错误两种情况花些时间（接下来的文章作更详细地说明）。

初始界面

期待一个周到的初次运行体验

忽略初始界面的阶段是你会犯的最大错误之一。初始界面是应用留给人们的第一印象，永远不会有第二次这样的机会……这个么，你应该知道。

问题是，设计界面时，通常是事先用数据填充起来。设计者总是用临时数据填满页面模板，每一个列表、文章、输入框、边边角角里都填上内容。这时候界面看上去很棒。

然而，产品在初始状态下是没有内容的。当新人注册，他们将从初始界面开始。就像是一个博客，用户需要自己去充实它。而在用户输入文章内容、链接、评论、日期、边栏的信息或其它数据前，整体外观无法成形。

不幸的是，用户会在初始界面时决定产品是否值得一用——在这个内容和信息最少的阶段来判断产品的适用性。如果你设计的初始界面有缺陷，人们就不知道缺少些什么，因为他们感觉什么都没有。

然而大多数设计者和开发人员仍然认为这种状况理所当然。他们没有很多时间为初始界面做设计，因为当他们开发和使用产品的时候，里面填满了他们用来测试的数据。他们甚至没遭遇过初始界面。当然，他们可能也以新用户的身份登录过几次，不过他们主要的时间是沉浸在一个充满数据的产品里。

一个有用的初始界面应该包含些什么？

利用它作为添加新手指南和热门推荐的机会。
给出一个填满内容的页面截图，这样能让人们有所期待。
讲解如何上手，页面最终会像什么样子等。
回答第一次来的访客会问到的关键问题：这是什么页面？我在干什么？页面有内容的时候是什么样子？
做好预期准备，帮助减少挫折感、恐惧感和大的迷惑。

第一印象太关键了。如果没有设计出周到的初始界面，会为你的产品或服务留下反面的（错误的）印象。

没有第二次机会……

我觉得苹果OS x操作系统的界面中另一个深受Steven Jobs影响的是安装和初次运行的体验。我想Jobs一定深深理解到第一印象的重要性……也许Jobs在考虑初次运行的体验时会想，它可能是一个用户对电脑上千次用户体验中的一次，但是它将是最重要的千分之一，因为它是一千次中的第一次，人们对它寄予了期望并形成初步印象。

—John Gruber, 撰稿人和开发人员 (摘自 Interview with John Gruber)

做好防御

出错时的设计

我们得承认：在线上的程序总有出错的情况。无论应用设计得多么用心，无论做了多少测试，用户仍然会遇到问题。那么如何处理这些不可避免的故障呢？做好保护性设计。

保护性设计就像是在小心驾驶。和司机在行车时必须留意道路是否打滑、鲁莽的司机以及其它危险情况一样，网站建设者们必须不断寻找会造成访问者困惑和不满的故障点。好的保护性设计能决定用户体验的好坏。

关于保护性设计的内容我们可以单独写成一本书。实际上，我们已经写了。这本叫《网站的保护性设计》的书对于想学习如何改进出错界面和其他故障点的人来说是非常好的资源。

记住：你的应用可能90％的时间都运行良好。但是如果在用户需要帮助时置之不理，他们是不会忘记这一点的。

应用环境胜过一致性

这里有意义的那里不一定有意义

动作是使用按钮还是用链接来实现？这取决于那个动作。一个日历视图是应该使用列表方式还是表格方式实现？这取决于它要用在哪里并且要显示多长的时间。全局的导航链接是否需要出现在每个页面上？是否每个地方都需要一个全局的搜索条？是否在每一页上需要一个完全相同的页脚？答案是“这取决于应用环境” 。

这就是应用环境比一致性重要的原因。如果你的设计在那种状况下有意义，不一致也没有什么大不了的。只给人们重要的。给他们所需要的，并且去掉其不需要的。比保持一致性更好的是保持正确。

聪明的不一致

一致性不是必不可少的。很多年来，学习用户界面和用户交互的学生都这样被教导，界面中的一致性是界面设计中的核心守则之一。也许这在软件中成立，但是在Web上，这不对。 Web上真正重要的是，在每个独立页面，用户是否能够快速、简单地前进到流程中的下一个步骤。

在 “好的创新” （Creative Good）, 我们把这叫做“聪明的不一致” ：确保流程的每个页面都给用户提供他在流程中的那个位置所真正需要的东西。只因为了和网站的其它部分保持一致，加入多余的导航因素，是很愚蠢的。

—Mark Hurst, Creative Good 以及 Goovite.com 的创办人
(摘自：页面范式)

文案也是界面设计

每个字母都重要

文案也是界面设计，伟大的界面是写出来的。如果你认真考虑每个像素，每个图标，每个字体，那么你要相信每个文字都是至关重要的。当你写界面时，要常常要设身处地的为阅读你的界面的人着想。他们需要了解什么？你怎样才能简洁明了地阐述？

你标注一个按钮的名字是提交还是保存或者更新还是新建或创建？这就是文案。你是写3句话还是5句？是用一般的举例说明，还是详细阐述？如何标注新内容？是 ‘新增的’ 还是 ‘更新的’ 抑或是 ‘最新更新’ 还是 ‘修改的’ ？是使用：‘新消息： 5’ 还是 ‘5个新消息’？是 ‘5个’ 还是 ‘五个’ ，是‘5个消息’还是‘5个帖子’？所有这些都很重要。

你也需要和你的读者讲同样的语言。只因为你写的是一个Web应用，这并不意味着你可以使用技术行话。想想你的客户，想想这些按钮和词语对其意味何如。不要使用缩写或者大多数人不懂的词语。不要使用内部隐语。不要听起来象一个工程师和另一个工程师的谈话。保持简短和亲切。说你要说的，别说废话。

好的书写就是好的设计。界面用词和设计要相辅相成，这很少有例外。图标要有名字，表单项要有示例，按钮要有标签，流程要有一步一步的指示，退款政策也要有一个清楚的说明。这一切都是界面设计。

统一界面

合并管理功能到公共界面

管理界面—就是那些用来管理选项，人员等的屏幕界面。—看起来很低劣。这是因为大多数时间都花在了对公共界面的设计上。

为了避免这种低劣管理界面的并发症，不要分开去开发系统管理界面。而要把管理功能（例如，编辑，增加，删除）嵌入到应用界面开发中。

如果你必须维护2套分开的界面（如：一个一般用户用，另一个管理员用），这2个都会很难受。实际情况就像同一个税你交了2次。你强迫自己重复并且这还意味着事情变麻烦的机会大大增加。

拒绝分离的界面

应用软件就是全部。所有可以被改变的，增加的或者调整的，都应该直接通过应用的管理区域完成。这使得我们能精确感知我们客户的需要，从而通过解决他们的问题和疑问来帮助他们。我们的客户也不必担心，必须登入分开的界面来完成不同的工作。一分钟前，他们也许在处理和客户的约会，随后一分钟他们也许要添加新雇员。他们不会为了在不同的应用间跳来跳去而烦恼，通过一个统一的界面，他们能够很快的适应这个应用软件。

—Edward Knittel, KennelSource销售和市场部总监

界面设计第九章

界面先行