第九章 界面设计

第一节 界面优先

开始编程前，先进行界面设计

太多的应用始于程序优先的心态。这不是一个好主意。编程是软件创造过程中最重的部分，这意味修改的难度和代价也是最大的。应该从设计开始。

设计相对来说是比较轻的。一张纸上的草图是很容易修改的，也很廉价。HTML 设计的修改难度也是相对较低的。编程就不是这样的。设计优先能让你保持灵活。程序优先会限制你，并增加额外的成本。

设计优先的另一个原因是，界面就是你的产品。你所贩卖的是客户看见的东西。如果你只是在最后阶段才随意放上一套用户界面，差距会很明显。

从界面开始，我们能从一开始就知道应用看起来、用起来是什么样的。在整个开发过程中会不断地修改。这样有意义吗？是否容易使用？它是否解决了手头的问题？有些问题只有当你面对真实的屏幕时才能回答。设计优先能让你保持灵活，尽快获得这些问题的答案。

Blinksale始于一只橙色的钢笔

当我对现有的开票软件感到沮丧时，我开始勾勒一个我认为理想的开票解决方案。我拿出一只橙色的钢笔，因为这是那天晚上出现在我手边的唯一工具，我在几个小时的时间内完成了大约 75 %的 UI 草图。我拿给妻子看，她当时正在熨衣服，她笑着说，“真的，你应该做这个。”

之后的两个星期，我对设计进行改善，并完成了 HTML 静态页面模型，这个模型后来成为了 Blinksale 的第一版。除了这个钢笔画出来的草图，我们没有画任何的线框图，直接进入 HTML 设计也让我们对这个项目的真实保持兴奋，虽然有一段时间我们真的不知道如何继续。

HTML 模型一完成，我们就找到了我们的程序员 Scott ，将 Blinksale 的想法告诉他。因为 UI 界面的完成度已经很高了，这给我带来了很多好处。首先，这给了 Scott 一个直观的感受，这比仅仅是一个点子要好得多，他是真实的。其次，它帮助我们精确估计 Scott 将设计转化为应用的工作量。当你想以最少的开销启动一个项目时，最好能尽快估计预算要求。UI 设计成为我们对项目初始目标的基准点。最后，UI 设计作为一个指导框架，能够在开发不断前进的过程中提醒我们应用的核心目标。当我们想增加新功能时，我们不会简单地说，“当然，加上这个功能吧！”我们需要回到设计上，问问自己这个新的功能要放在哪，如果没有空间，就不会增加这个功能。

—— Josh Williams, Blinksale 创始人

第二节 焦点设计

从页面的核心开始，向外搭建

焦点设计专注于页面的本质（焦点），然后向外搭建。这意味着，在一开始，忽略细枝末节：导航标签，页脚，颜色，边栏，logo 等。你从焦点开始，优先设计最重要的内容。

一个页面绝对无法缺失的部分就是焦点。例如：如果你在设计一个博客页面，博文本身就是焦点。不是边栏上的分类，不是顶部的标题，也不是底部的评论表格，而是博客的文章本身。没有文章，这个页面就不是博客。

只有当焦点单元完成了，你才开始考虑第二优先级的元素，之后是其它的元素，依次类推。这就是焦点设计。

焦点设计避免了传统的 “搭好框架，填入内容”的模式。在传统模式中，页面先成型，之后加入导航、推广信息，最后，页面的核心功能只能随便找个空白部分放置。这是一个本末倒置的过程。

焦点设计把这个过程翻转过来，它让你在第一天就专注于核心问题。关键点优先，附加内容其次。结果是，用户获得了一个更友好，焦点更明确，可用性更强的界面。此外，设计师和开发者马上开始沟通，而不是等待设计师将页面的方方面面都设计好。

第三节 三种状态

为常规、空白、错误三种状态进行设计

每个页面，你都需要考虑三种可能的状态：

• 常规
  当一切正常工作，数据填满应用时的界面
• 空白
  在数据输入前，用户第一次使用的界面
• 错误
  错误发生时的界面

常规状态是最容易的。你在这个界面花费了最多的时间。但别忘了在另外两个状态也花点时间。

第四节 空白状态

为初体验设置一个期望

忽略空白状态是你能犯的最大的错误之一。空白状态是你的应用给人留下的第一印象，你永远不会有第二次机会。

问题在于，当你设计 UI 界面时，通常是填充了数据的 。设计师常常在模板中填入数据。每个表格、每个帖子，各个角落都有东西。这意味着界面工作良好。

然而，没有数据是应用的真实状态之一。当某人注册后，他们是从空白状态开始的。只有当用户填入数据，页面才开始成型：帖子，链接，评论等等。

不幸的是，用户会在空白状态判断一个应用是否有价值。在这个信息、设计、内容最少的阶段，用户会对整个应用的可用性进行判断。当你设计了一个失败的空白状态，用户不知道他们遗漏了什么，因为这里什么都没有。

但大多数的设计师和开发者却认为这个阶段是理所应当的。他们没有花费大量时间设计空白状态，因为当他们进行测试的时候，应用里充满了数据。他们甚至都看不到空白状态。当然，他们可以用新帐户登录几次，但大多数时间都是面对大量数据的状态。

你应该在空白状态做什么呢？

• 可以在这个页面加入简易教程和帮助
• 添加一个用例截图，展示应用充满数据时的状态，让用户有所期待
• 解释界面如何使用
• 回答一些初次使用可能遇到的问题：这个页面是做什么的？我现在能做什么？页面填满之后是什么样的？
• 设置期望，降低挫败感和混乱感

第一印象是至关重要的。如果无法设计出一个合理的空白状态，你就会给应用或服务带来负面印象。

你永远没有第二次机会

Mac OS X 的 UI 设计受到了乔布斯极大的影响，一个明显的证据就是它的设置和初次运行体验。我认为乔布斯很敏锐地认识到了第一印象的重要性。我认为乔布斯会看着初次运行的界面，思考这样一个事实，虽然这只占用户总体使用时间的千分之一，但却是最重要的千分之一，因为这是第一个千分之一，它设定了用户的期待和初体验。

—— John Gruber, 作家和网页开发者 (from 采访 John Gruber)

第五节 具备防御性

事情出错时，要有应对设计

我们得承认：在线的事物总会出错。无论在设计的时候多么小心，无论做了多少测试，客户还是会遇到问题。你如何应对这些不可避免的故障呢？采取防御性设计。

防御性设计就像防御性驾驶。驾驶员需要时刻留意湿滑的路面，鲁莽的驾驶员和其它危险的场景。产品的开发者也要不停地寻找可能引发访问混乱的故障点。

关于防御性设计的话题，我们可以写满另一本书。事实上，我们已经这么做了，标题是“网页的防御性设计”，对于那些想学习如何改进错误界面和其它危机点的人，这是个不错的资源。

记住：你的 app 可能在 90% 的时间里工作良好。但你如果在用户需要的时候放弃来他们，他们决不会忘记的。

第六节 由一致性产生的语境

在此处有意义的事，在别处就不一定了

一个点击行为是由按钮还是链接来实现？这取决于行为。一个日历视图应该是列表式的还是网格式的？这取决于它的展示地点和显示周期。全局导航链接是否应该出现在每个页面？你是否在每个页面都需要一个全局搜索栏？是否需要在每个页面设置完全相同的页脚？答案是：“看情况。”

这就是为什么上下文语境比一致性更重要。如果能让设计更有意义，不一致也是可以接受的。在用户需要的时候呈现相应的内容，摒弃无用的部分。正确比一致性更重要。

聪明的不一致性

一致性不是必须的。很多年来，学习 UI 和 UX 的学生一直被教导，在界面设计中保持一致性是最重要的准则之一或许在软件设计中是这样，但网页不是这样的。网页设计中重要的事情是，在每个页面都能确保用户快速而简单地进入下一步。

我们称之为聪明的不一致性：确保过程中的每一步都准确提供用户需要的内容。仅仅为了保持一致而添加多余的导航元素是愚蠢的。

—— Mark Hurst, Creative Good 创始人 / Goovite.com 创建者 (from 页面范式)

第七节 文案也是界面设计的一部分

每个词汇都很重要

文案也是界面设计。伟大的界面是写出来的。如果你认为每个像素、每个图标、每个字体都是重要的，那么你也应该相信每一个文字也是重要的。当你在写文案的时候，永远要站在读者的角度。他们需要知道什么？你如何简洁明了地解释。

你给一个按钮增加什么样的标签？提交、保存、更新、新建、创建？如何选择？这就是文案。你用了三个句子还是五个？你用常见的案例来解释还是用细节来解释？你是否给内容加上新的/更新/最近更新/修改这样的标签？这些都很重要。

你必须和听众操同一种语言。你在写一个网页应用并不意味着你可以摆脱技术术语。想想这些按钮和词汇对你的用户意味着什么。不要使用大多数人都看不懂的简写。不要使用内部行话。不要像是工程师之间的对话。保持简洁明了，不说废话。

好文章就是好设计。好文字与好设计不匹配的情况是罕见的。有名字的图标，有示例的表格，有标签的按钮，过程中一步一步的提示，对退款政策清晰的解释。这些都是界面设计。

第八节 一个界面

将管理功能合并入公共界面

管理界面——用来管理选项、人员等——有一种说废话的倾向。那是因为开发的大部分时间都用于公共界面了。

为了避免糟糕的管理界面，不要为管理功能创建单独的界面。将这些功能并入常规的应用界面。

如果你需要同时维护两个界面（一个对普通用户，一个对管理员），两个都不会好用。实际上，你需要为相同的事情支付两次费用。你不得不重复工作，这会增加犯错的概率。你需要操心的界面越少，结果就越好。

避免分离的界面

应用就是一切。任何可以改变、添加、调整的功能都可以整合进应用的管理区域。这可以让我们精确体验用户的感受，帮助解决他们遇见的问题。我们的用户无需担心为不同的任务登录不同的界面。这一分钟，他们可能要解决与客户的约见，下一分钟他们可能要增加一个新员工。他们不应该为不同应用间的跳转而烦恼，提供一个统一的界面，使他们更快地适应这个应用。

—— Edward Knittel, KennelSource 营销总监