《About Face 4：交互设计精髓》精华解读③

本书的第三部分是“交互细节”，分别从桌面应用、移动应用、网页设计等方面深入讲解交互的细节设计。

---

①为桌面应用而设计

当代桌面应用的界面都起源于施乐公司的Alto，它是施乐旗下的PARC公司开发的一个实验性计算机系统。Alto是第一台具有图形界面的电脑，他们在这个系统中创造出了桌面UI的四大支柱：窗口(Window)、图标(Icon)、菜单(Menu)、鼠标(Pointer)，简称WIMP。

PARC对整个产业影响十分深远，乔布斯和比尔盖茨都曾经去参观了Alto。乔布斯意识到图形界面系统将要带来的革命性改变，于是从PARC挖走了许多人才，开发出了第一套系统叫做Lisa。这个系统虽然没有成功，但是在这个经验基础之上他成功推出了影响世界的Mac系统，后来微软也跟着推出了Windows，这两个图形界面系统统治了整个电脑时代。

这章讨论的就是各类现代桌面应用设计在细节方面要注意的问题，比如窗口的行为、结构、导航部件等等。

剖析桌面应用

前面的章节中讨论过软件的两种姿态，分别是独占式和暂时式。大多数应用采用的都是独占式，因此本章的重点也会放在独占式桌面应用上。

一、主窗口和辅窗口

窗口是桌面应用的上层（操作系统是底层），它是可移动、可放大缩小的、用于盛放内容和功能的容器。通常一个应用由一个主窗口以及一个或多个辅窗口构成。

主窗口包含了应用的内容，通常以文档的形式呈现。此外主窗口还可能包含其他常用的东西，经常会被分为多个窗格，包含各种各样的内容，通过窗格的形式我们可以在不同对象不同功能和控件集之间导航。

辅窗口是用来辅助、支持主窗口的，承载不频繁的属性和功能。通常包括对话框、浮动面板、工具面板等。

二、主窗口的结构

一般情况下主窗口会分为三类功能区：一是内容区或工作区；二是菜单栏；三是工具栏、窗格、面板等。

菜单和工具栏是一系列有关联的动作的集合，用户可以通过运用这些动作来指挥应用程序操作。菜单栏一般在应用的顶部，工具栏往往在菜单栏下方。

工具面板在一些较复杂的应用中比较常见，比如Photoshop左边的长条工具栏。

侧栏是通常出现在右侧，用于设置文档或对象的各种属性。

桌面系统中的窗口

图形界面系统中的基本要素之一就是窗口，窗口通常都是矩形的，一方面它的空间利用率高，另一方面也能提升工作效率，简化认知过程。

层叠窗口是桌面系统中常见的一种交互形式，在系统桌面的上方，各个应用的窗口可以堆叠起来，可以随时上下切换。

但如果同时运行的应用过多，层叠窗口的交互就会有明显的缺陷，用户在多个窗口间的切换将会变得很麻烦。苹果的操作系统通过让用户创建多个虚拟桌面的方式来缓解这一问题。

全屏窗口是多数复杂应用最适合的显示状态，首先它能充分利用屏幕的空间，其次能够彻底避免与其他应用互相干扰。多窗格布局是一些复杂应用值得尝试的解决方案，比如邮件类应用、笔记类应用目前都非常流行这个方式，他们通过几列可调节宽度的分栏来把功能清晰的分开展示。

窗口通常可以分为三种状态：最大化、最小化、多元化。最大化就是全屏状态，最小化就是缩小并隐藏至任务栏的状态，多元化通常是窗口的默认大小状态，既不是全屏也不是最小化，可以和其他应用窗口保持层叠状态。

决定在应用中使用哪种窗口，是定义设计框架时要重点考虑的事情，如果把一个应用理解成一个房子，主窗口就是房子的整体，而对话框和面板等就是辅窗口。一个房子不应该有无数的房间，一个应用也不应该有无数的对话框，更不应该把一些常用的任务放在对话框里，除非是一些使用频率较低的任务或功能。

菜单

菜单是大家都非常熟悉的一个功能，大多数情况下菜单会位于屏幕或窗口顶端的菜单栏中。用户通过点击菜单标题即可选择相应的命令，菜单还有一种变体是通过鼠标右键点击对象后弹出的一个菜单。

菜单有时候可以成为一种教学工具，新用户可以通过菜单来了解应用能够做什么，因此菜单中的描述清晰且完整就很重要，用户可以边用边学习，慢慢学会应用的操作。当用户慢慢成长为中级用户或者专家用户的时候，菜单项边上的快捷键提示就会派上用场，这些用户会慢慢开始学习用快捷键操作，以增加工作效率。

禁用的菜单项是一种重要的设计惯例，当菜单项与所处状态无关，或者与所选对象无关时，该菜单项就会采用文本变灰色等方式让用户知道其不可用。

有些应用的菜单项边上会配有图标，起到增强用户理解的作用，关键是要注意如果同一个功能也出现在应用的其他地方，那图标要保持一致。

快捷键是大家都熟悉的一个事物，在设计软件的时候应该注意两个问题：一是遵循通用的标准，比如Ctrl+S一般都代表保存，那就遵守它，不要随意改变它。二是要清楚的标明出来，让用户能够看到。

所谓级联菜单，一般指的就是二级菜单，级联菜单一般来说体验都不是很好，因为需要通过比较准确和小心的鼠标定位（点击）才能使用，应当尽量避免使用级联菜单。

工具栏、工具板、侧栏

就像之前书中所说的，工具栏通常出现在菜单栏的下方、或者主窗口的侧面，通过行或列的方式将功能通过按钮图标展示出来。

工具栏和菜单互为配合，满足新手用户和老手用户两个不同阶段的操作需求，菜单栏的优势是能够用文字说明每个功能，工具栏的优势是操作便捷。

工具栏里面往往会有一些纯粹的图标按钮，除了哪些保存、剪切等可能被一些用户所熟知以外，大部分用户都需要从头学习这些按钮的意义，因此这里的工具按钮往往是为中级用户而准备的。采用工具提示，意思就是说当鼠标悬停在按钮上方的时候，会出现小气泡，里面用文字来描述按钮的功能，这是一个非常有效的办法。

当一些工具在当前状态下无法使用，应该用明显的设计方式表达出来，不要让用户感到疑惑。

随着软件行业的发展，工具栏开始出现更多的变化。比如可以移动的工具栏，还有支持自定义功能的工具栏，用户可以自行选择摆放哪些工具。

而工具板是一种更加强大的交互工具，比如Photoshop中的工具面板，提供了绝大多数图形处理所常用的功能，而且它也明显和工具栏的用法有区别。

侧栏往往用来显示更多信息、更多设置，也是一个非常高效的做法。

点操作、选择、直接操作

一、鼠标

已经从业多年的设计师可能无法准确的意识到一个问题，很多用户使用键盘和鼠标的熟练程度远远不能和我们这些专业人士相比。因此移动鼠标点击对象这样一套连贯的动作，对于很多人来说并没有我们想象的那么容易完成，如果遇到一个复杂的页面，很可能会给很多用户造成困扰。

所以在设计浏览和选择任务的时候，应该要同时提供鼠标和键盘的支持，因为有时候在密密麻麻的界面上，用鼠标精准的选择一个对象，可能还如不用键盘来得方便。

鼠标发明出来的早期，对于按键数量存有争议，微软选择了两个按键一个滚轮，苹果选择了只有一个键。一开始苹果的单键设计被发现不够用，最后它采用了虚拟按键的形式提供了和微软模式的鼠标相同的功能。

鼠标左键用于所有主要的直接操作功能：启动控件、选择等。右键通常用于调出菜单来访问属性等附加功能。滚轮一般用于浏览窗口和文档。

按下元键（Ctrl、Alt、Command）同时使用鼠标，是一种更复杂的组合使用方式，通常情况下按下元键后，光标应该有所改变，方便用户理解。

鼠标常用的事件包括：指向、单击、指向单击组合、单击拖放、双击、释放等等。

二、光标

鼠标在桌面上的点击和选择是靠光标来完成的，光标通常不大，箭头的尖部一般代表热点。

三、选择

通过鼠标对某个对象进行单击就代表选择了这个对象，如果在对象以外的任意地方单击，会释放选择。通常在操作系统或者许多应用中，都支持多选功能，用户可以通过按住鼠标左键拖动框选多个对象，也可以采用按住系统支持的元键（比如Ctrl）分别单击对象进行多选。

四、拖放

拖放就是指单击一个对象并按住不放，并将它移动到另一个位置。它有几条重点原则：

1、拖放候选对象必须在视觉上面表明它们的接受能力。

2、拖动光标必须在视觉上表明源对象。

3、任何可滚动的拖放目标对象都必须支持自动滚屏。

4、所有拖动都要去颤动。

5、任何要求精确对齐的程序都必须提供精确滚动的游标工具。

五、控件操作

控件是现代图形用户界面的基础，所以设计出合理的鼠标交互非常重要，比如菜单早期有一种难用的鼠标交互是需要用户点击之后按住鼠标不放才能维持住菜单，这样就给无数人增加了使用难度，后面这种模式逐渐被放弃了。

---

②为移动设备和其他设备而设计

2007年6月，苹果发布的iPhone开启了移动互联网时代，紧接着谷歌也随之推出了安卓系统。从那之后，整个互联网的重心开始转向移动设备，设计师需要重点关注的领域也变成了移动端设计。

剖析移动应用

桌面应用多数是独占姿态，而移动应用多数是暂时姿态的，因为用户与移动应用交互的特点通常是短暂、临时的任务。另外还有一个原因是因为移动设备的物理屏幕相比电脑来说较小，因此移动屏幕的信息密度，和电脑屏幕的对话框的信息密度差不多，因此更符合暂时姿态的特征。

目前最流行的移动设备有两类：手机和平板电脑，两者的区分基本上是通过大小和功能。

移动设备的应用几乎全部都采用全屏模式，因此没有桌面应用那样的窗口管理问题。堆叠和轮显是移动设备上最为常见的设计模式。

由于手机屏幕通常都是“窄高型”的，因为内容的与控件通常是垂直组织结构，顶部或者底部可能有导航栏，而内容以列表形式至上而下展现在中间。有许多应用都支持屏幕轮显，用户可以通过向左或者向右滑动屏幕，来浏览不同的页面，这也降低了单个页面的信息密度，让用户感觉更轻松。

平板电脑由于具有更大的屏幕，所以有了更特殊的体验方式，由于平板电脑支持垂直和水平两种显示模式，导致在垂直模式下可能更像手机的模式，而水平模式下会更接近电脑的模式。

比如平板电脑在水平显示模式中，适合分窗格模式，约等于电脑桌面应用的侧边栏，在使用的效率上比手机应用更高。由于屏幕更大，平板应用也能够支持较为复杂的弹出菜单，现在已经有许多用户拿平板电脑代替笔记本电脑了。

关于移动导航、内容、控制的习惯

一、浏览控件

绝大多数移动应用都是针对浏览需求的，用户在移动设备上投入大量的时间进行阅读、浏览、观看、查看各种内容，因此移动应用中用户浏览的模式很丰富。

1、列表，这是最常见的移动应用的内容组织形式，常见的形式表现为一行一行的项目、一段段的文本、一排排的控件、图片或视频等。

2、网格，它将图标、缩略图、功能图标等内容规则的排列起来，最典型的代表就是手机操作系统的桌面，各种应用的图标被非常有序的排列在桌面上。

3、内容轮显，用户可以通过水平滑动手势在不同的内容之间切换，这可以降低屏幕内信息的密度，但又可以让内容全部展示出来。

4、泳道，这是一种非常聪明的格子轮显方法，最典型的应用就是苹果的App Store，用户能够单独左右滑动浏览一行内容的隐藏部分，同时又可以随时上下滑动去看其他内容。

5、卡片，通常是一系列图文信息的组合，在移动设备上非常通用，通过一张张卡片式的外观来保证局部内容的完整性和有序性，降低内容之间的互相干扰。

二、导航和工具栏

移动应用的导航栏通常出现在屏幕的顶部或者底部，展现形式一般为图标加文字或者单独显示图标或文字，用户通过点击图标和文字就能在不同的页面（频道）中切换。

标签栏与导航栏非常类似，只是经常处于导航的下级，作为次一级的分类用于切换内容，在很多应用中不同的标签页面会支持左右滑动屏幕来轮显。

三、抽屉

抽屉指的是隐藏在屏幕两侧的导航列表，开关通常都在顶部导航栏的两侧，抽屉里的选项既可以起到导航的作用，也可以起到分类的作用。通常也会有一些次要的功能被集成在里面，方便用户找到。

四、搜索、排序、筛选

搜索是移动应用上一个使用频率较高的功能，因为多数用户没有养成良好的整理收纳习惯，他们也不想养成这个习惯。

因此搜索就成了许多用户找东西的一个核心功能，我们必须通过以下多种功能来提升搜索过程的体验：

1、语音搜索；

2、自动填充；

3、预加载；

4、搜索关键词建议；

5、搜索结果推荐。

五、欢迎和帮助页面

在前面章节讲桌面应用过程中，我们已经提到了为新手用户准备的导览和帮助，在移动应用上的原理基本一致，只是界面的尺寸不同而已。

多点触摸手势

手势是移动应用体验的核心，虽然这类手势的总数非常多，也有非常复杂的，但是通常来说我们只需要关注最常用的这些即可。

1、轻拍选择、激活或者开关，这个功能通常用在一些开关的设置上。

2、拖滚，水平或垂直都可以，通常用来改变项目或者列表的排序。

3、上下滑动，多数时候用来浏览各种信息和内容。

4、左右滑动，功能与上下滑动类似。

5、双指张合，用于放大或缩小内容。

其他设备

随着智能硬件的快速发展，在电脑、手机和平板之外出现了许多智能产品，比如汽车、电视、服务机器人等。由于各个设备的场景和，就给设计师提出了更多的要求。

在位这类设备进行体验设计时，需要注意以下原则：

1、不要把你正在设计的产品当作计算机。这类设备各自都有不同的用途和场景，不管它屏幕有多大，都不可简单的套用在计算机上所适用的设计原则。

2、让使用情境来驱动设计。多数智能设备的使用情境与电脑差异很大，在设计过程中一定要充分考虑到实际使用过程中的各种典型的环境因素。

3、要根据显示器的分辨率来考虑导航。

4、尽可能的简化输入。多数设备的输入条件都比电脑要简陋，在这种情况下让用户输入大量内容是一种折磨。

---

③设计细节：控件和对话框

本章要讨论的是一些通用的GUI交互控件，它们适用于各种不同的平台，只是视觉上有些区别。

控件

根据用户目标来划分，控件可以分为四种基本类型：

1、命令控件：用于启动功能；

2、选择控件：用于选择选项或数据；

3、输入控件：用于输入数据；

4、显示控件：用于控制应用如何及在哪里显示自己和数据。

一、命令控件

1、按钮：最典型的命令控件，也是几乎所有设计师都熟悉的，通常以矩形显示，设计风格经历了多次变化，目前最流行的是扁平型。

2、图标按钮：也非常常见，通常出现在各种应用和软件的工具栏上。

3、超链接：这个起源于Web，目前依然是网页上的主流控件，但其特殊性在于各种对象都可以被设置为超链接，比如图片、文字等。

二、选择控件

选择控件分为两种，一种是选择后直接触发动作，另一种是不会触发动作，需要点击按钮等命令控件才会生效。

1、复选框：适用于桌面应用、网页、移动应用，对用户来说也非常容易理解。

2、开关按钮：比如在文本编辑软件里的加粗、斜体、下划线等选项就是开关按钮。

3、开关：比如大家熟悉的手机上的闹钟打开和关闭按钮，其实和前面说的开关按钮非常类似。

4、单选按钮：和复选框非常相似，大家也比较容易理解。

三、列表控件

列表控件提供了一组文本选项供用户选择，每个文本都代表了一个命令、对象或者属性。列表控件无处不在，到了移动端上面还出现了一些变体，比如iOS里的滚桶控件，就是选择日期或时间的时候，用户可以分别滚动选择。

四、输入控件

输入控件允许用户在应用中输入新的信息或者设置一个值，最常见的就是文本输入框，比如用户在登录账号的过程中需要输入用户名和密码等信息。另外还有一些不是通过键盘输入的控件，比如通过滑块来选择字号大小。

五、显示控件

显示控件用于显示和管理屏幕上信息的视觉展现，最典型的例子包括滚动条、屏幕分割线等。但是到了移动端之后，显示控件有了较大的变化，比如电脑上的滚动条在手机上就完全变了一种形式，不会再持续显示在屏幕上了。

对话框

对话框通常是模态的，不管是桌面应用或移动应用都是如此，它以对话的形式让使用者做出操作。随着用户体验思维的普及，烦人的模态对话框越来越少，取而代之的是非模态的对话框。大部分情况下，直接打断用户操作的模态对话框都是毫无必要的。

对话框通常要传递的信息分为五类：

1、属性：向用户呈现或让用户改变所选对象的属性或设置，通常要在对话框中提供修改当前选择的功能；

2、功能：最为常见，通常从菜单打开，一般只控制单一功能，也会允许用户设置部分细节；

3、进度：一般是由系统本身启动的，向用户展示一项命令的进展。好的进度对话框应该清晰的展示出进展状况是否正常、还需多少时间、还有多少事项、用户如何取消或者继续等信息；

4、通知：向用户报告重要的信息，通常来自于用户之前的某一个操作，比如成功、失败等；

5、公告：和进度对话框一样，也是由系统启动，更多的用来提醒一些异常或特殊情况。

消除错误、警告和确认

在用户界面的世界里，错误对话框可能是最让人讨厌的交互方式，也是被滥用的一种。通常情况下它不但无法提供任何帮助，反而对用户进行训斥，打击用户的信心。因此，尽一切办法彻底消灭错误对话框是设计师应该充分考虑的。

警告和确认有时候也是如此，通常对用户没有帮助或者只会让用户厌烦。用户根本不需要有人来告诉他自己犯了错、或者有多蠢，更不需要有人来问他“你确认你辛辛苦苦写好的文档要保存吗？”，同样的道理，尽可能地消灭警告和确认对话框也是设计师的责任。

---

交互设计精髓的整本书解读完毕，感谢阅读！