第18章  为桌面应用而设计

一、剖析桌面应用

软件姿态：独占式、暂时式（简短的、临时的、大部分时间都在后台运行的任务）

1）主窗口和辅窗口

窗口：桌面应用的上层，可移动、可放大缩小、用于盛放内容和功能的容器。

一个应用由一个主窗口，以及一个或多个辅窗口构成。

主窗口

通常以文档的形式显示，可以被创建编辑、共享。主窗口经常被分隔成多个窗格，一般为独占式姿态。

辅窗口

辅助支持主窗口，呈现不频繁的属性和功能（对话框）。若主窗口中窗格可以脱离主窗口独立操作（浮动面板、工具板），他们也可以当成辅窗口。

2）主窗口的结构

• 一个内容区/工作区
• 一个菜单栏
• 多个工具栏、窗格、工具板、（用于导航、选择或操作内容对象）

菜单和工具栏

一系列关联动作的集合。

内容窗格

窗格可拖拽，窗格间内容可交互。

索引窗格

第一种：选取索引窗格对象后，内容出现在内容窗格中（电子邮件）。

第二种：从索引窗格选取对象，拖放至内容窗格（元件）。

工具板

快速选择工具，每个工具都有独立操作动作。

侧栏

设置文档或对象属性，无需弹出对话框（提升效率，任务更加流畅），位置不定。

二、桌面系统中的窗口

1）层叠窗口

层叠窗口存在层次混乱问题，因此微软引入了任务栏。

2）平铺窗口

多个应用使用统一的小矩形均分屏幕，但是空间浪费惊人。主要用户移动了整洁的平铺窗口，则必定要重新整理堆叠窗口，并没有成为主流。

3）虚拟的桌面空间

层叠窗口不能解决多个运行应用之间的导航问题，因此虚拟桌面诞生了。

屏幕上会显示虚拟桌面的缩略图，这种管理对于高级用户非常有效，可以同时运行和管理很多软件。 

4）全屏应用

任务栏这样的工具只要从应用那里借用较少的像素，就可以提供可视化导航。

随着平板电脑和手机的普及，使用者需要长时间使用当前应用，更加偏爱全屏的使用体验。

5）多窗格应用

多窗格应用的好处在于，独立和相关的信息可以在单个独占屏幕上轻松显示，并将导航和窗口管理的附加工作减少到几乎为零。

在一个窗格中提供导航或构造元素，在相邻的另一个窗格中提供数据查看或数据构造的设计，是很有效的方式。

6）窗口状态

3种状态：最小化，最大化，多元化。

多元化是一种中间状态，此时它与另一些图标和处于多元化状态的窗口共享屏幕，可以层叠和平铺。（微软和苹果都设法避免直接提到这种状态）

独占式应用的正常状态是最大化，一些暂时性应用最适合显示为多元化状态。

7）窗口和文档：MDI & SDI

MDI 多文档界面

使用者需要在一个环境下处理多个有关联的信息视图。

由于窗口中的窗口的特点，可能会被滥用，如果MDI中某个文档需要最大化，文档之间的导航就成了问题。

可以用允许平铺或者选项卡的形式进行管理。

SDI 单文档界面

使用简单，操作效率高。

8）窗口的运用

从使用者的目标和心理模型的角度来考虑是否增加窗口，是很重要的。

最近新版的ps中，开始逐步将常用功能放入非模态的侧栏中。从用户的角度来看它是构成整个工作任务的一部分，则应该包含在主窗口中。

滥用辅窗口会导致导航问题，给用户带来不必要的负担，我们要尽量在应用程序中避免这种窗口污染。

当用户需要执行非日常功能时，应用程序必须提供特殊场所。

三、菜单

打开一个菜单后，用户通过一次单击或拖动释放做出一个选择，要么立即生效，要么会弹出一个对话框，之后菜单便收缩到原来的只有菜单标题的样子。

1）把菜单作为教学工具

用菜单提供一条学习的途径。

如格式库。对于新用户来说，在菜单项看到格式库三个字，比起图标所表示的含义要更直白，但新用户成为中级用户后就不一样了。

对应用软件只有些许了解的生疏用户而言，菜单的主要任务作为索引工具。

对于频繁使用的高级用户而言，菜单提供了一个固定的物理位置，或作为一种快速的提醒方式告诉他相应的快捷键是什么。

如果菜单的主要目的是执行命令，那么就应该精炼。如果其主要的目的是告诉我们它能做什么，如何访问它，以及快捷键是什么，那么久不应该精炼。

在菜单中为相关命令提供暗示，也给了用户一个学习的途径，如菜单中对应的图标和快捷键放到旁边，可以起到暗示作用。在菜单中正确的放置这些暗示信息，用户在潜意识里会记住它们，它们不会强行闯入用户的意识，直到用户愿意学习为止。这时用户会发现它们就在手边，自己已经很熟悉了。

2）禁用的菜单项

当菜单项与所处状态无关，或者与所选对象无关时，该菜单项就变得不可用了。

禁用状态通常用加亮或者将其文本变灰来表示。

它让菜单更好的发挥其教学工具的作用，因为用户便会明白在在何种场合下试用何种命令。

3）复选标记菜单项

紧挨着菜单项的复选标记，通常被用来启用和禁止应用界面中的某个方面，或者调整数据对象的显示特征，它不仅提供了功能控制，还能显示出控制的状态。

该用法最好用在结构简单的菜单中，否则会让菜单显得臃肿，移动鼠标寻找相应的条目，会消耗大量的精力和时间。如果某些属性的启用和禁用是很频繁的，则最好把它们放到工具栏上；如果它们不常用，菜单占用的空间又很宝贵，那么我们最好把这些类似的属性放在对话框中。

复选标记菜单项，远远优于可以切换两种状态的滚翻式菜单项，因为后者始终显示的是没有选中的那个项目或状态。使用者无法分辨它是提供一个选择，还是在描述一种状态。如“显示工具栏”。

 4）菜单上的图标

文本描述菜单项旁边的视觉符号，使用户无需阅读文本就清楚其功能，也为执行相同任务的控件提供有效的视觉关联。

相同的命令使用相同的视觉符号。

微软的彩条（Ribbon）设计，将菜单和工具栏合二为一，建立视觉联系，让使用者更容易理解和使用界面。

Ribbon特点：

1、将工具栏的命令分为一个个选项卡。

2、与窗口标题栏融合在一起。

Ribbon优势：

1、所有功能有组织地集中存放，不再需要查找级联菜单、工具栏等等 ；

2、更好地在每个应用程序中组织命令；

3、提供足够显示更多命令的空间；

4、丰富的命令布局可以帮助用户更容易地找到重要的，常用的功能；

5、可以显示图示，对命令的效果进行预览，例如改变文本的格式等；

6、更加适合触摸屏操作。

 5）快捷键

一般显示在下拉菜单项右侧。Ribbon以tooltips的形式进行提示。

最好确定哪些是用户日常使用的功能。但是不同用户对日常的看法也有很大的差别。

根据使用频率对快捷键进行分类。如F2、F3分配给这组中最常用的功能，Alt+7分配给不是每天使用的功能。

用户开始不会注意到它们，但是最终会慢慢注意到的。永久的中间用户会为发现它们而高兴，这些良好的感觉会让用户产生成就感，感觉自己已经入门。

对于专家用户，允许用户在独占性应用中定制快捷键，更适合自己的习惯和工作风格。同时也要提供一个恢复默认值的控件，让用户撤销定制，恢复到出厂状态。

6）助记符

访问键。

我们要谨记。大部分经验丰富的用户非常依赖键盘，助记符不是可有可无的，而是必须要有的。

7）级联菜单&单层分组

当用户选择了下拉菜单中的一个标有右箭头的菜单项后，他会向右弹出一个二级菜单，与已经激活的一级菜单同时显示，这称为级联菜单，是非常难用的。用户难以定位级联菜单中的项目，要求鼠标精准的横向移动，但是它的好处是可以包含更大的命令集。

一级深度被称之为单层分组或扁平层级。对新手来说十分有用，可以极大的提升应用界面的可自学性和可被发现性。

对话框是一种简版的菜单，软件设计者可以将一组次级选项放在单个的交互容器中。

目前显示器分辨率变高，一个菜单可以显示更多的标题，每组菜单有足够的空间可以包含各种相关的功能，这样级联菜单就更没有存在的必要了。（？）

如果必须使用级联菜单，那么一定是在设计精巧的独占式应用中使用，并且把极不常用的功能放在里面。我们一定要确保鼠标移动的控件和阈值足够大，避免鼠标轻微越界造成次级菜单消失的问题。         

四、工具栏、工具板、侧栏

工具栏的发明，解决了模态下拉菜单的缺点：不易发现，执行命令操作繁琐。工具栏的功能是非模态的，它始终在屏幕显示，用户只需要点击就完成操作了。

典型的工具栏是具有按钮功能的图标集合。

图标按钮上没有文字，只有鼠标移到其上方时，才会出现提示的文本，可以节省空间，可读性也非常好。

1）工具栏和菜单

工具栏和菜单在一起配合，满足了用户从新手变成老手过程中不同阶段的需求。针对新手阶段，菜单起到了教学作用，可以让新手用户很快的上手。对应用已经有了一定了解的永久的中间用户而言，工具栏提供了常用功能的快速访问。菜单的最大优点则是它包含了完备的功能和详细说明，甚至不常用的功能也能在其中北很好的组织起来。菜单配合工具栏，形成了完美的互补，满足了不同用户在不同阶段的不同需求。

不要把工具栏单做简易高速版的菜单而要把工具栏当作存放大多数用户最常用功能的容器。

2）工具栏 VS 模态对话框

工具栏虽然是非模态的，但是他比非模态对话框更好用。工具栏还具备非模态对话框不具备的两个有用之处：第一它们的外形与对话框不同；第二，用完之后不必取消它们，因为工具栏始终都是可见的。此外它们还非常节省空间，不会挡住正在操作的东西。

非模态对话框基本上是以悬浮窗口的形式出现的，用户可以按喜好把它们放置在屏幕上的任意位置，不过这样一来，管理窗口的任务量就增加了。好处是我们可以把最需要的工具放在随手可拿的位置上，这样干起活来会很方便。

停靠工具栏是一个两全其美的办法。用户可以将它从应用主窗口的边缘拖放至自己喜欢的位置，它会自动变成一个小窗口，多数情况下还会优化成一个更小的矩形。使用完成后，用户可以将它拖放回应用主窗口的任意边缘，它会恢复成工具栏的模样，水平或垂直的停靠在窗口边缘。

3）工具栏按钮

工具栏的出现带来了图标按钮，它是按钮和图标之间一次愉快的联姻。作为功能的视觉助记符，图标按钮是优秀的，但是新手用户可能难以理解图标的意义，因为它们不是为新手用户准备的。

由于工具栏主要用来为常用功能提供快速访问，因此必须让有经验的用户能够快速的识别它们。符号具有的图形表义的外在形象，比文本更适合担当这种角色。图标按钮还具备按钮的受范特性，以及能快速识别的图像，运用图标按钮我们把许多功能挤到一个很小的空间。

图标按钮中的图像并不需要告诉用户其用途，只需要容易辨识即可，用户通过其他方式会知道它的用途。最有效的方法之一便是将工具栏上用到的图标，也显示在其对应功能的菜单项的右侧，这样菜单固有的教学作用范围就扩展到了工具栏的控件上。

4）工具提示

图加文本的形式会消耗更多宝贵像素。有些设计师需要满足用户两种不同需求：在温和宽松的环境下学习；十分了解常用功能，但偶尔需要简短提示。此时Tooltips是弥合这两种用户需求鸿沟的有效方式。

鼠标放在某个功能上大约1秒左右的时间，它才会消失帮助信息。这个时间足够使用者点击并选取该功能。而不会触发提示。从而保证了鼠标经工具栏操作时，工具提示不会突然弹出来干扰到使用者。也意味着当使用者忘记某个不常用的功能时，只要花掉半秒钟的时间就可以知道。

所有的工具栏和图标控件都应该使用工具提示。

工具提示令中级用户可以更加容易的访问工具栏上的控件，其结果是工具栏成为独占式应用中调用命令的一种主要习惯用法。这样，菜单退化到了后台，成为新手用户学习的场所，也称为调用高级和偶尔使用功能的地方。这种以图标为主，菜单为辅的自然秩序，可以让独占式应用更加易用。

5）禁用工具栏控件

如果图标禁止按下，空间本身也应该变成灰色，将禁用状态明显地标示出来。

一些应用干脆让禁用的工具栏彻底消失，但这是不受欢迎的。用户记得工具栏所在的位置，如果某些图标消失了，受到一贯信任的工具栏变成易变而暂时性的，会让新手用户大惊失色，甚至比较有经验的用户也会迷惑不解。

6）工具栏的新用法

继图标按钮之后，第二个在工具栏上落户的是组合框，例如很多应用软件中的字体，样式，字号控件等。它们和下拉菜单提供一样的功能，并且还显示了当前的属性。

随着发展，工具栏开始反应应用中数据的状态。图标按钮不仅控制样式，还可以显示出样式选择的状态。

工具栏现在也包含了下拉菜单，比如图中显示的撤销菜单，以紧凑的方式提供了强大的功能。

7）可移动工具栏

工具栏可以水平停靠，垂直停靠，或拖动成为一个悬浮工具板。

允许用户随意移动工具栏，可能会使工具栏互相遮挡。微软通过扩展图标按钮和下拉菜单，方便的解决了这个问题，它们只有当工具栏被遮挡时才会出现，并且可以通过下拉菜单访问隐藏的菜单项。

8）可定制工具栏

高级用户可以定制功能列表，他们可以随心所欲的配置工具栏。为工具栏提供这种级别的定制能力存在某种危险。因为鲁莽的用户可能会创建出一个无法识别、无法使用的工具栏。而且定制本身也是费时费力的。

9）情境（弹出）工具栏

与右键点击弹出的情境菜单类似，有些软件中，图标组和被选对象有关。“小工具栏”。

10）Ribbon控件

本质上它也是工具栏，只不过更大。本质上是一个带有标签的菜单和工具栏的混合体。

11）工具板

工具板和工具栏不同，他包含的是一系列互斥的功能。（一般垂直放置）

如AI中的停靠工具板，不仅与非模态对话框有着类似的优点，而且还没有对话框的缺点，即用户无需费力去打开、移动、关闭对话框。

12）侧栏、任务窗格、抽屉

为高效工作流而设计的各种非模态的习惯用法在不断演进，最后出现的一种是侧栏或任务窗格。它是位于应用窗口中的一个专用窗格，其用途是提供各种功能，取代了原来经常使用的、具有相同用途的对话框。原来大多数的模态化功能，现在都被强健的标签式任务窗格取代了。

不必把侧栏限定于屏幕的两侧，常放在文档窗格或工作区下方的专门的属性区域。它不仅可以让使用者修改被选对象，而且把用户的困惑和屏幕管理工作降至最低。侧栏可以包含固定控件，也可以包含依当前选择而变的情境控件。

Lightroom中侧栏取代了原来的几十个对话框，侧栏不需要使用者调整其在屏幕上的位置，使用者也无须对它们一个一个解锁或撤销（不过整个侧栏是可以隐藏的），这进一步降低了管理工作，在呈现功能方面超越了对话框，是显著的进步。

抽屉是任务窗格的一个变种。Adobe有一些类似的代替方案，单击某个就可以将所有的二级窗格和工具板全部隐藏起来，比较适合高级用户，他们用完工具后需要专心于创作内容，可迅速地将杂乱的工具临时清理干净。

五、点操作、选择、直接操作（有些不常用删减很多）

1）鼠标按键和控制

浏览和选择任务要同时提供鼠标和键盘的支持。

鼠标左键：选择和激活；

鼠标右键：鼠标右键也负担起了重要而又极其有用的角色：可直接访问属性，以及其他情境中针对对象和功能的相关动作。

元键：Ctrl、Alt、Command、Shift。可以用光标形状变化表明元键用法。

当鼠标光标移动到对象时，对象会显示这种特性—受范性。

指向、单击、右击、点击拖放、双击、合击、双拖。

双击：我们尽量少用或不用，特别是在单击可以胜任的时候。

在控件上鼠标按下意味着预备动作，鼠标释放意味着执行动作。这种机制允许用户从容地退出无意中发生的单击，这种习惯用法叫做顺从相应暗示。

2）触控板、轨迹球、手势传感器

离散选择和连续选择。

选择的视觉提示：反色、背景彩色、勾勒出边框、伪3D凹陷，控制柄、动画选取框。

选取框：蚂蚁线—不规则形状的选择。

3）拖放

第二种类型的拖放：使用者为了执行某项功能而把一个对象放在一个特定的区域或者另一个对象上。严格来讲，这并不是直接操作，而是提供了一种合情合理的直接方式来调用命令。

拖放候选对象必须在视觉上表明它们的接受能力。有一种较差的提供拖放接受能力的视觉表现方式，就是改变光标。光标的首要任务是要把被拖动对象表示出来。因此最好是将所有拖放候选对象的指示留给拖放对象本身。拖动时，光标必须在视觉上表明源对象。

当光标带着源对象的轮廓在屏幕上移动时，经过一个又一个的拖放候选对象，这些拖放候选对象必须在视觉上显示它们已经意识到自己正被当作可能的拖放对象。通过视觉改变，拖放候选对象提醒用户它能够正确处理拖放对象。

4）控件操作

模态工具：用户从工具板中选择一种工具，此时应用程序的显示区域完全处于这种工具的模态中，即应用程序只支持该工具的工作。通常应用程序会改变光标的外形，来表明当前激活的是什么工具。

Powered by Froala Editor