用户界面原则

本主题讨论如何在 Windows 应用程序中实现直观的用户界面和用户体验设计原则。

介绍

开发人员通常无法考虑最终用户的观点。 开发人员努力使应用程序正常工作— 客户只是希望应用程序能正常工作,并且他们对软件的看法围绕这一要求。 如果你开发零售软件或非技术人员将使用的一些内容,则尤其如此。 开发人员必须了解整个软件设计过程中最终用户的需求。

软件应用程序必须尽可能易于导航和使用。 随着软件的创建量,估计有 10 个软件应用程序中有 4 个具有真正出色的 UI,最终用户真正喜欢,并且会立即使用。

为公司创建了大量内部使用软件。 无论是在内部开发,还是在顾问的照顾下,通常几乎没有时间、精力或资金投入到创建更好的 UI 中。 在开发周期中,“设计师”角色很少见,尤其是在 Windows 应用程序世界中。

需要遵循一些基本规则,以便为应用程序提供外观更好、功能更好的 UI。 它不需要太多的时间或金钱投资,并可以增加良好的投资回报。

在进一步介绍之前,让我们至少在本文范围内区分用户界面和用户体验。 用户界面或 UI 是指应用程序的视觉对象和控件,而用户体验或 UX 包含 UI 和应用程序与 UI 相关的行为,以及用户从应用获取的“感觉”。 不仅仅是设计外观出色的 UI,而且要确保它也能正常工作。

在这里,我们将讨论可以轻松集成到应用程序设计阶段的 20 个 UX 设计要点。 结果会产生更丰富的应用程序,具有更好的直观功能,即“人类 UX”。 众所周知,Windows Vista 生成的应用程序需要有不同的外观和行为。 本主题将帮助你准备未来的应用程序,同时为当前用户提供未来体验。

以下部分讨论了正确 UI 设计的基础知识。

正确 UI 的基本原则

外观专业的 UX 取决于以下四个因素:

  • 间距和定位
  • 大小
  • 分组
  • 直观性

在 8.0 之前的 Microsoft Visual Studio 版本中,间距和大小并不理想。 4x4 或 8x8 网格并不总是有效。 随着 SnapLines 的包含,该过程已大大简化。 将标签与文本框对齐,甚至更糟的是,在早期版本的 Visual Studio 中,将多个标签与其相应的文本框对齐是非常困难的。 SnapLines 大大简化了此过程。

以下部分介绍专业 UX 设计的四个更重要的方面。

间距和定位

两个控件之间的间距非常重要。 以下屏幕截图演示了设计不佳的用户信息输入窗体 - 前两个文本框太近,它们下面的列表离得太远,表单上有很多未使用的空间。

screen shot of a poorly designed form.

在以下屏幕截图中,可以看到具有适当间距和适当大小的控件的更专业外观的对话。 这与上一个屏幕截图中的窗体相同,但已修改为使用 SnapLines 建议的间距。 建议始终将标签与文本框的文本基线或控件旁边的其他控件对齐,而不是控件的实际下边框。 当达到对齐方式时,SnapLines 会变为不同的颜色,通常只是底部边框上方的几个像素。

screen shot of a more well designed form.

虽然没有确切的间距规则,但 SnapLines 为适当的间距提供了非常有用的准则。 其他有助于保持适当间距的工具是“容器工具箱”组下的“布局”控件。 TableLayoutPanel 也非常有助于创建条目窗体样式对话框。

大小

相同的注意事项适用于大小。 将按钮从工具箱拖到窗体上时,它具有完美的高度和宽度。 建议的最大宽度(不考虑任何非常重要的原因)是将原始宽度加倍。

如果查看“开始”菜单上的“运行”窗口,或者任何 Windows 资源管理器对象的“属性”对话框,按钮大小“恰到好处”。 如果你有一个非常重要的功能,需要最终用户务必注意到,还有其他方法,而不是使用大按钮或华丽的非标准颜色(稍后更多)。

下图显示了三个按钮。 第一个按钮是最建议的大小,它是从工具箱拖动(或双击)时默认创建的大小。 有时,额外的文本要求你把按钮变大。 第二个按钮显示大但可接受的大小。 它不会给布局其他控件造成混乱。 但是,第三个按钮是完全不能接受的大小。 你可以看到它甚至会稍微扭曲 Windows 用于绘制主题控件的主题位图。 它还会使其他控件难以直观地围绕它对齐。

image of three buttons, increasing in size from left to right.

分组

通常,应用程序包含许多控件。 只有正确、直观的分组,才能使所有这些控件更易于使用。 基于函数或分类的分组最好由选项卡控件完成。 例如,“帐户”、“报表”、“员工”和“项目”将成为典型业务应用程序中选项卡的完美候选项。 同级分组(参与相同最终结果的控件)最好由组控件完成。 不建议对此类分组使用带有边框的面板。 组控件可节省标签控件的额外权重,尤其是在子控件不言自明的情况下。

除非在一个大型组控件中的控件不超过 2 个或 3 个,否则不建议在组控件内部进行分组控件。

直观性

这是出色的用户体验最重要的方面。 直观的 UX 减少了解释需求。 用户就会知道控件的用途。

直观设计中的一个重要主题是颜色编码。 Windows XP 中提供了一个很好的示例,它为主题应用程序中的导航、注销关闭计算机对话框等功能提供了新的软方按钮。

这些控件的着色根据按下该按钮的结果的严重性确定。 导航是绿色的,就像交通信号灯一样。 “关闭”会导致工作丢失,其颜色为红色,就像警告标志一样。 “注销”或“休眠”等半关键按钮为黄色。 对用户的工作流程没有任何关键影响(如帮助)的中性按钮是一种柔和的蓝色。 创建外观 UI 时,应牢记这些颜色方面。

通过颜色识别内容的一个很好的示例是 Microsoft Office OneNote。 应用程序的选项卡可以设置为不同的颜色,同时仍然看起来像整个 Windows XP 样式设计的适当部分。

另一个重要方面是应用程序中的文本。 最近,一直在努力简化用于 Windows 软件中书面说明的语言。 稍后将讨论软件内文本的用法,但请注意以下小而重要的详细信息。

MSN Messenger 在其“选项”对话框中选中了一个复选框,标记为“共享网络摄像头功能”。开发人员和技术友好型用户知道这意味着什么,但新手用户可能认为你也可以让聊天另一端的用户使用你的网络摄像头。 在最新版本中,他们将其更改为“我的网络摄像头:允许其他人看到我有网络摄像头”。 这非常适合可能没有技术知识并习惯简单语言的目标受众。

虽然更简单的语言很容易理解,但也有一个额外的优势。 科学研究表明,当我们试图理解新事物时,我们的头脑更容易用更简单的语言工作。 通常,我们的大脑处理诸如“它”、“适用于”、“那”等常见词时非常迅速,毫不费力,更多的“带宽”可用于理解突出的单词,如上面的示例中的“网络摄像头”或“其他人”。

消息框的标题、GroupBox 描述文字和其他此类文本块使你只需几个字就能轻松将一组控件的功能传达给最终用户。

直观性也源于熟悉。 例如,“确定”和“取消”按钮的位置非常统一,并且在我们的心中很方便,如果对话框以相反的顺序(“取消”,然后“确定”;而不是“确定”,然后“取消”),只需要点击“取消”即可。 使用特定标准执行操作(例如,基于 Windows 的应用程序)一年多后,习惯就会形成。 遵循行业标准(无论这些标准是否未明确说明)使你的软件更易于使用。

在早期 Windows Vista 预览版之一中,任何窗口的最小化最大化关闭按钮都变得不同。 在以前版本的 Windows 中(尤其是在使用单个监视器时),你习惯于在屏幕右上角移动光标并单击。 这总是会导致窗口关闭。 现在,在此特定版本的 Windows Vista 中,“关闭”按钮和窗口最右侧边框之间大约有 8 像素的空间。 额外的空间确实使它看起来很酷(可能对于按钮显示的很酷的发光动效来说有必要),但令人恼火,因为它不允许用户轻松关闭打开的窗口。 调整你的大脑可能很难。 值得庆幸的是,在以下版本中,解决了此问题。 现在,窗口边框和关闭按钮之间仍有空间,但单击该空间也会导致窗口关闭。

直观设计的一个重要因素是它使用的“精神带宽”的数量,即我们的大脑理解某些东西可能需要的时间。 “带宽”使用率越低,用户体验越好。

这些都是有助于使用软件应用程序的“体验”的小事情。 以下示例提供有关使用实际提示和技巧改进应用程序的提示。

20 个改进功能用户体验的使用技巧

更好的用户体验目标是提供更简单、更轻松、功能良好的 UI。 这些提示将帮助你塑造 UI,以更高效。

使用标准

无论是在操作系统级别、品牌级别还是应用程序级别上,任何软件环境的既定标准都非常重要。 除了品牌,这些标准在用户心目中充当一种众所周知的架构。 当用户长时间使用软件应用程序时,由于越来越熟悉,他或她将自动提高工作效率。

在讨论标准之前,让我们先讨论这些标准到底是什么。 标准包括对话框中控件布局中的所有内容,例如“确定”和“取消”按钮、用户界面的形状(如 Windows XP 对话框顶部的圆角、图标样式、任何其他图形的样式、应用程序的交互行为等)。

如果应用程序属于特定的利基,则遵循一组不同的标准可能更好。 例如,如果应用程序支持应用程序或 Office OneNote 2003 加载项,则遵循 Office 的 UI 和交互标准的样式是明智的,尤其是 OneNote 本身。 这包括使用 Office 样式的命令栏而不是标准工具栏,以及其他视觉对象和行为等内容。 如果应用程序将成为 Microsoft Visual Studio .NET 类别的一部分,则会有一组单独的标准。 事实上,对于此类加载项或支持应用程序,Microsoft 等公司确实发布了书面准则。 另请注意,有时图形和设计概念是受保护的知识产权。 始终检查适当的文档,以确保拥有创建此类设计的许可证。

标准的第三个示例是平板电脑环境。 这些标准跨越了操作系统准则与应用程序准则之间的边界。 平板电脑 SDK 文档包含“规划应用程序”主题中的一些非常有用的信息。 与 Office 2003 或 Visual Studio 指南相比,这些设计建议直接影响用户如何与应用程序交互,以及反过来的行为方式。 例如,如果应用程序中有停靠窗口,文档建议确保它可以检测屏幕方向何时发生更改,并且扩展窗口根据需要正确地在纵向或横向中重新组织自己。 即使未将应用程序设计为特定于平板电脑,也应遵循这些准则。

随着智能客户端的兴起,应用程序现在跨越了不同硬件(普通电脑、平板电脑、移动或超级移动设备、媒体中心电脑等)之间的边界。 每种情况都要求遵循不同的(或附加)标准集。

当应用程序共享操作系统级或应用程序级标准时,用户感觉更熟悉软件,这使得学习和使用更加轻松。 这一结果直接提高了工作效率。 用户希望能够尽快利用新软件提高工作效率。

注意重要按钮

有时,即使有四个或五个其他按钮在它周围,你也需要将用户定向到最重要的按钮。 如果试验大小、颜色或字体,会违反标准,不建议这样做。 相反,你可以使用几个简单的技巧来实现这一点。

第一个是将其他非关键按钮转换为 LinkLabel,如下图所示。 这样,用户就知道这些链接将执行任务,但他们的注意力将首先转到突出的按钮,而不会违反标准设计准则。

image of three buttons converted to linklabels.

第二种方法是将关键按钮放在第一行,无论是在左侧的水平布局(如下图所示),还是垂直布局的顶部。 请注意,如果应用程序是从右到左编写的任何语言,则这可能会根据目标用户的区域性而变化,如果应用程序是从右到左编写的任何语言,则最好将按钮放在最右侧。

image of three buttons where the critical button is leftmost in a horizontal layout.

建议的选项设置为默认接收焦点。 例如,在删除确认对话框中,应突出显示“”选项,因为这样可以防止用户意外删除某些内容。

使用图标简化识别

图标(尤其是 Windows XP 和 Office 2003 图标和工具栏位图)有助于加快 UI 的认知以及用户必须执行的任务。

例如,当你在消息框上看到最常看到的感叹号图标时,你会立即意识到与该图标旁边的控件关联的风险级别。 同样,当应用程序放置大量控件(无论排列方式如何)时,查找要查找的控件集可能令人生畏。

在 Windows XP Service Pack 2 中,已更新的选项卡将添加到名为“自动汇报”的系统属性控制面板小程序。 存在四个选项- 自动下载更新、下载更新,但允许用户决定何时安装更新、通知用户更新是否可用,但未开始下载,以及完全禁用自动更新。

新电脑用户可能不知道这些更新是什么,并且可能不知道最适合选择哪个选项。 因此,Microsoft 在最推荐的“安全”选项的旁边放置了一个绿色盾牌图标,上面有一个大复选标记,可能会对用户有害的选项旁边有一个大“x”的红色盾牌图标。 这在关键情况下非常有用,尤其是在用户没有时间阅读太多文本时。

在同一系统属性小程序中,每个选项卡具有多个 GroupBox,其中包含不同任务的控件。 相对图形放置在每个可以轻松表示控制组任务的组旁边。 这种类型的图形代码类似于物理文件或停车场中的颜色编码。 这也适用于在杂志文章中至少具有一些视觉对象的相同原则,它使读者保持兴趣。

选择正确的图标也很重要。 Microsoft 在 Visual Studio 2005 中提供了许多标准图形。 这将是最好的选择。 如果创建自己的图标,强烈建议按照上述“使用标准”部分中提及这些图形的操作系统级别或应用程序级标准进行操作。

Windows 用户体验交互指南包含用于创建 Windows 样式图标的非常有用的指南。

使用标头简化识别

标头是解释单个句子(可以是一个图形)中整个对话的完美方法。 有时,标头甚至可以帮助你适应其中的导航和命令。 标头比普通说明标签更高效,因为它们是用户弹出对话框时看到的第一个东西。

Windows Installer 向导可能是最受欢迎的标头:最右侧的简单图标;描述对话框的标题标签(例如,选择安装文件夹);以及描述对话框用途的子标题(例如,选择将安装软件文件的文件夹)。

假设我们有一个具有帐户部分的典型业务应用程序。 遵循 Windows Vista 支持的设计范例,我们可以在页眉(或页脚,如果方案要求如此)中提供任务关键信息和相关命令。 我们的用户已为“大公司”打开了帐户文件,标头将如以下屏幕截图所示。

screen shot of a dialog box that contains a detailed footer.

以下屏幕截图显示了对话框中详细标头的示例。

screen shot of a dialog box that contains a detailed header.

同样,可以通过将这些命令移动到标头来避免添加 Windows XP 样式的任务窗格(尤其是在只有几个命令时,这会浪费大量垂直空间)。

设计标头时,应记住以下几点:

  • 请确保背景色与对话框背景色不同。 通常,标准 Windows 内部控件面部颜色上的白色标头将会达到此效果。 但是,如果你真的想确保没有特殊的主题或自定义颜色弄乱标题,请使用 Color.FromKnownColor 和颜色 ControlLightControlDark 绘制 LinearGradient
  • 如果可能,请将标头的高度保持在 150 像素之下。 通常,高度为 100 或 120 即可。 一般情况下,请确保整个窗体的高度小于 1/4。
  • 如果要为上面标头中显示的信息添加就地编辑,请将 LinkLabel 动态替换为文本框,并在编辑完成后再次交换它们。
  • 如果你有一个字体超过 10 磅的标题标签,请使用 Arial 或 Franklin Gothic Medium。 MS Sans Serif 看起来带有锯齿,太不专业了。 Franklin Gothic Medium 是 Windows XP 设计指南文档中的建议。 对于面向 Windows Vista 的应用程序,请使用系统默认字体的 Segoe UI 字体。

使用自定义消息框

标准 Windows 消息框中提供的选项非常有限。 当必须向用户提出一个无法用简单的是/否或确定/取消回答的问题时,情况会变得复杂起来。

由于存在大量非技术用户,Windows 应用程序现在变得越来越简单。 有时,为按钮提供更友好的文本,甚至还有一些其他控件(例如 LinkLabels),可能更容易轻松地完成手头的任务。

借助 Microsoft .NET Framework,可以轻松实现自定义对话。 只需在自定义对话框窗体上分配几个属性,或使用单行代码,窗体就可以像标准消息框一样工作。 在按钮单击事件中,将对话框的 DialogResult 属性设置为 DialogResult.OkDialogResult.Cancel。 使用父窗体中的 ShowDialog([OwnerForm]) 方法。 此方法返回 DialogResult 值。

可以使用所有 DialogResult 成员。 标准 MessageBox.Show 方法使用相同的选项。

或者,只需将对话框的 AcceptButton 属性设置为 btnOK,将 CancelButton 属性设置为 btnCancel。 这会自动将 EnterEsc 键映射到 btnOKbtnCancel 按钮各自的点击事件。

下面是一些用于设置自定义对话的提示:

  • 对于复杂的主题,请提供指向本地或联机帮助的链接,其中包含一个 LinkLabel,说明在适当的文本标签下“了解详细信息”。
  • 不使用“是”/“否”/按钮,而是使用明确声明单击按钮的结果的文本,例如“保存文件和退出”、“退出而不保存”和“不退出”。但是,请坚持标准“是”/“否”“确定”/“取消”,并尽可能使用此类标准按钮。 熟悉可提高工作效率。
  • 在左侧保留 50 像素的边距空间(或右侧,具体取决于目标区域性设置),并添加表示对话框方案的图标。 如果是信息对话框,则可以使用标准消息框使用的“i”图标;如果是安全对话框,则可以使用锁图标或键图标。 Visual Studio 2005 附带了一些出色的高质量图形。
  • 始终确保为这些按钮提供正确的键盘导航 — 用户为消息框使用键盘快捷方式(例如,O 代表“确定”、Y 代表“是”、C 代表“取消”等)。 如果你的自定义对话不使用它们,肯定会觉得它们很烦人。

包括备用命令

两个重要因素决定了需要备用输入法,即沮丧和懒惰。 对计算机用户来说,挫折感经常出现。 当你感到沮丧时,你希望你的任务能够快速完成。 额外的点击或额外的等待几秒钟真的会激怒承受压力的人 - 你知道那种情况是什么样的,我们都经历过。 懒惰经常会促使你仅使用键盘或鼠标完成任务,无论你目前使用哪种方式。 但是,除了这两个因素之外,具有备用输入法,用户可以轻松地完成任务。

例如,如果任一端都有一个包含两个按钮“添加”和“删除”的列表框,则应为具有类似于这些按钮的菜单命令的列表框添加上下文菜单。 这使用户有机会选择他或她认为最适合的方法。 如 Windows Vista 用户体验指南指出,新手用户使用上下文菜单很多,并期望它们出现在右键单击的任何位置。

同样,我们将视觉控件用于文本或数字输入。 例如,滑块用于指定整数,日历控件用于日期输入。 有时,只是键入输入会更舒适。 如果添加链接到滑块的数字上下控件,或者使用 DateTimePicker 而不是 Calendar 控件,则通常可能会对用户产生差异。

如何处理关键操作

执行关键且不可恢复的函数时,通常最好弹出消息框以确认操作。 我们来更进一步。 在以下屏幕截图中,可以看到类似的自定义消息框,但具有附加优势,计时器在进度栏的帮助下直观显示。

screen shot of a critical action dialog box.

可以使用几个特定于方案的变体。 如果要执行的操作非常关键(从重载核电站到永久删除文件),则计时器运行后的默认操作应取消。 对话框不应消失,而是会更改文本标签,以显示操作已被取消。 用户可以选择确认命令或取消。

始终确保执行关键操作的按钮已明确标记 — 始终使用准确描述操作的清晰文本。 如果操作是删除文件,请不要写入“从存储库中删除文件”,而是写入“从存储库中删除文件”。使用文件列表时,如果“删除”菜单命令从硬盘本身中删除所选文件(而不是仅从文件列表中删除),则应适当强调这一关键性质,并明确强调该操作将永久删除文件。

有人曾经说过,“你的和你最糟糕的工作一样好”。同样的事情适用于软件应用程序。 对应用的单个不良体验可能会给用户带来很大的负面印象。 为了确保这不会发生,可以做的一件事是确保如果应用程序崩溃,它会正常关闭。 如果可以添加数据恢复,或允许用户尝试保存该数据的副本,它可以是一个很大的加分项。 如果应用程序崩溃,应正确通知用户。 JIT 调试器或严重错误对话框不是好事。 尽管谈到如何处理崩溃超出了本文的范围,我建议使用一个简单的对话框,向用户道歉并告知他/她实际情况(可能还有有关如何从此崩溃中恢复的详细信息)对用户非常有用。

如果要更进一步,可以执行我最喜欢的图形设计应用程序的做法。 如果崩溃,它将显示一个恢复对话框,允许你保存正在处理的文件的单独副本,然后为你提供反馈对话框,你可以在其中输入有关崩溃的信息(当然可以是个性化的信息),并将其发送给创建者。

RadioButtons 或 ComboBoxes?

一眼看去,多选一的方法似乎并不难或很重要。 有时,情况可能如此,尤其是当方案是用于时间敏感型工作的应用程序时。

我们看一个现实生活中的示例。 Microsoft 最近发布了图形应用程序的预览版 Expression Graphics Designer(以前命名为“Acrylic”)。 我有大约 20 个图形对象,必须在此应用程序中单独分配特定属性。 这是一个沉闷的过程。 为此,我必须选择对象,单击用于打开设置窗口的按钮,并设置选项。 在这样的一个选项中,必须从 ComboBox 中选择两个选项,如以下屏幕截图所示。

screen shot of the fringe texture dialog for expression graphics designer.

如果必须下拉 ComboBox 列表并选择第二个项目(仅 2 个项目),可能会非常令人恼火。 我们通常不会意识到的是下拉列表显示所需的时间。 它可能会浪费很多时间,而且可能会令人沮丧。 这可以通过放入具有两个 RadioButton 的 GroupBox 轻松解决,尤其是在有如此多的空间可用时。 我在 CorelDRAW、Microsoft Access 等应用程序中遇到了类似的问题。

除了因为下拉动画浪费时间外,它还浪费了我们的“精神带宽”。有了两个“始终可见”的 RadioButtons,我们的头脑会潜意识地知道光标要单击的位置。 使用 ComboBox 时,只有在绘制列表后才会处理它。 虽然看起来很不重要,但它实际上非常重要。

有时最好使用 RadioButtons,尤其是在有 4 个选项或更少时。

永远不要扰乱用户!

除了把枪放在他们的头上以外,这是开发人员可以对用户做的最具破坏性的事情。 当(不必要或其他)应用程序在用户使用消息框或任务栏闪存处理另一个应用程序时扰乱用户时,将给用户带来负面印象。

当然,任务栏闪烁可能很有用,但只有在应用程序进程需要用户输入才能继续时,或者有一些关键内容要传达给用户时,应调用它。 如果用户在“自动隐藏”上保留任务栏,闪烁的任务栏按钮可能会妨碍用户访问状态栏或其他低定位控件,因为任务栏位于任务栏顶部,直到用户单击闪烁按钮,才会再次隐藏。

screen shot of a toast window.

“Toast”窗口(见图 10)因即时消息客户端(如 MSN Messenger)而闻名,这是一个很好的解决方案,用于通知用户某些内容,而不会惹恼或扰乱其工作流。 Bill Wagner 有一篇关于创建 Toast 窗口的优秀文章。 良好的策略(和礼仪)不会扰乱任何其他应用程序的 Toast。 此类窗口的干扰可能会令人恼火和徒劳无功。 一种解决方案是使用操作系统提供的 ToastSemaphore Mutex 以避免 Toast 冲突。

有时,可能需要通过 Toast 显示多个项。 不建议弹出 3 个或更多 toast。 相反,通过弹出/淡化一个 toast 接着另一个来循环显示会更好。 Microsoft Outlook 在通知用户传入电子邮件时会实现类似的解决方案。

提供进度状态

通常存在要求用户等待的任务。 当然,这是用户讨厌做的事情之一。 但更糟的是,当他们在等待时,不知道发生了什么。 有时,应用程序可能需要连接到 Web 服务或远程计算机,或者它正在处理大量的数据(无论原因是什么,用户都应该意识到或至少模糊地意识到正在后台发生的情况)。 根据情况,可以采用不同的方法执行此操作。

如果要连接到一些远离的对象(如 Web 服务或放置在网络或 Internet 服务器上的东西),建议显示简单的进度对话框(请参阅下图),或状态栏中托管的进度栏。 随附的标签应描述进程的当前状态。 例如,如果要连接到 Web 服务以处理某些数据,只需说“连接到 Web 服务...”或“请等待,正在处理..."如果此过程是同步的,建议禁用用户可以访问的所有控件,直到进程完成,或只是将进度显示为模式对话框。

screen shot of a progress bar dialog box.

如果使用的是进度栏且处理时间未知,或者没有最大值,则强烈建议将进度栏样式设置为“遮檐”模式。

另一种日益普遍的方法是显示进度的固定“toast”窗口。 Microsoft AntiSpyware 下载程序/更新程序或诺顿反病毒电子邮件扫描 Toast 是其中的良好示例。 当然,这只能用于异步进程。 否则,用户可能会感到不安。 此类窗口最适合用于后台处理,例如下载更新或执行计划任务,绝对不应设置为“始终处于顶部”。

使用向导简化复杂步骤

可以放心地假设,如果面对单个窗体上的大量控件,典型用户将非常困惑。 有时,当你拥有许多重要控件时,分组、大小或间距都无济于事。

对于此类场景,向导是最好的选择。 可以根据需要按任务或类别划分控件,并将其放置在单独的步骤中。 这可以帮助用户保持专注,而不是被任务所困扰。 可以使用“帮助”按钮提供特定于步骤或任务的帮助。 可以在 MSDN 库中找到向导创建指南。

向导也是帮助设置应用程序初始配置的好方法。 许多应用程序使用此类向导在设置完成后或首次使用时设置个性化配置。 如果用户在任何时间点取消,则此类初始向导也应是可选的,未指定的设置将转到默认值。 如果可以让向导带有图形(请参阅使用漂亮图形部分),它使配置任务变得容易得多。

正确获取文本的音调

在 Windows 用户体验交互指南中,已就“文本基调”提出了一个非常重要的点。 这是应用程序中文本带来的印象和感觉。 可以是从简单的工具提示到指令标签控件的任何内容。

之前,我们讨论了 MSN Messenger 中网络摄像头选项中的文本更改。 这称为正确的文本基调。 在应对非技术用户或新手用户时,需要了解不同的方面。

如果在自提取应用程序中的文本框上方编写“目标路径”,技术用户可以轻松知道要输入类似于“C:\Temp\MyPath”的内容。新手用户(考虑“妈妈”)还容易感到困惑,需要参考手册、呼叫技术支持,或者在更糟的情况下放弃。 一个很好的替代方法是指定希望用户执行的操作:“选择要放置这些文件的文件夹”。甚至可以将位于该文本框旁边的“浏览...”按钮重命名为“选择文件夹...”。

提供你希望用户执行的操作的明确说明也会减少对帮助文件的需求,或者至少减少帮助文件中包含的详细信息。

Windows 用户体验交互指南中的一个很好的建议适用于任何软件。 它指出编写器应保持文本是谈话式的。 准则将此定义为“避免你不会当面对别人说的话”。

编写文本的一些提示:

  • 避免用三个人称谈论用户。 说“你”而不是“用户”。
  • 尽可能谨慎地使用“我的名称:”或“我的邮件地址:”,而不是“名称:”或“E-Mail:”
  • 提供多个选项时,请从用户的角度编写文本。 例如,如果在例如“在此网络上选择[用户名]的权限”的标签下有两个 RadioButton(如“允许”和“禁止”),将 RadioButton 文本替换为“我想允许[用户名]”和“我想禁止[用户名]。”
  • 仅当文本用于链接时,才使用下划线文本。 如果带下划线的文本不是链接,则会使用户感到困惑。
  • 用粗体标签提醒注意重要信息,但请谨慎使用。 过多的粗体文本会令人困惑,减少窗体的整体影响。
  • 为检查框编写文本时,请确保很容易知道选择它以及未选中或清除时会发生什么情况。 建议的选项是直接将文本写成选定检查框的结果。 例如,编写“给我发送来自合作伙伴的有用信息”,而不是“不要给我发送来自合作伙伴的有用信息”。虽然我可以想象许多营销人员会争论这个特定的例子,但我相信你知道我的意思。
  • 如果你有一个类似于按钮的控件(通常是具有命令按钮外观的 RadioButton)来控制“已启用/禁用”,请确保正确标记它。 如果进程已启用,请编写“已启用”而不是“启用”或“禁用”。 如果编写“已启用”,则会显示当前状态。 如果单击该按钮(已启用),而该按钮显示“启用”,则可能令人困惑和产生问题。 “启用”可能会提示用户单击它,认为该过程未处于活动状态。

有时 ListView 更好

我们通常坚持用 DataGrid 或 ListBox 甚至 ComboBox 进行选择任务,但使用 Windows XP 和更高版本的 Windows 时,使用 ListView 可以提供更大的选项。

ListView 控件的细点:

  • 使用图标和位图加快项的识别速度。
  • 使用“详细信息”或“磁贴”视图显示其他信息。
  • 使用 Visual Studio 2005,甚至可以有其他分类的组。 组跨所有视图,并且很灵活。 组还可用于平展层次结构视图(如 TreeView),其中子节点数多于父节点。 其中一个很好的示例是 Windows XP 中的“网络连接”对话框,使用“在组中显示”查看,视图设置为“详细信息”。
  • 若要自定义 ListView 控件,请通过设置 OwnerDraw 属性并使用 DrawItemDrawSubItem 事件手动绘制控件。
  • 支持快速就地编辑 ListView 项。
  • 轻松支持手动重新排序。
  • 允许用户选择最熟悉的视图(大图标、小图标、列表等)。

使用痕迹导航控件和边栏简化导航

“子导航”是复杂 UI 的关键。 有时无法避开具有复杂的 UI。 在这种情况下,最好让用户尽可能轻松地体验。 包含链接标签的边栏或基于层次结构的导航的 TreeView 表明当前对话框任务的同级级别导航。 这样,用户就可以在知道他或她的位置时,在流程的步骤之间轻松跳跃。

如果使用 TreeViews 或其他类似复杂的导航来获取基于层次结构的导航,则用户的良好实用工具将是痕迹导航控件。 虽然 Visual Studio 不附带内置控件,但请参阅创建痕迹导航控件,了解有关自己创建控件的信息。 使用痕迹导航控件可以轻松查找相对于层次结构的当前位置。

如果窗体有痕迹导航,可以轻松合并到标头中。 请参阅有关标头的之前部分。

使用漂亮的图形

每个人都喜欢使用很酷的图形的应用程序,至少大部分人是这样。 虽然具有漂亮的图形的 UI 并不是适合所有应用程序的逻辑选择,但它确实有助于给人留下很好的印象,并且可以很愉快地使用。 当然,图形不应妨碍工作效率,但如果正确使用,则可以提高生产效率!

不必有很多图形,也不一定需要大量的工作才能产生图形。 专业设计的初始屏幕或标头(就像我们之前谈论的一样)会产生这种效果。 如果预算允许,则可以为工具栏、向导等使用设计良好的图形。 它们使你的应用看起来很漂亮,而且更专业。 这是一个微妙的效果,但专业外观会传达信心和稳定性。 如果你是创建零售应用程序的相对较小的公司,这是需要考虑的一个关键方面。

始终重视使用专业设计的图形。 免版税图形易于获取且实惠。 你也可以聘请设计师。 但是,如果图形不是你的强项,请不要自己尝试。 如果无法获取或使用专业设计的图形,最好根本不使用图形。

对于小型图形,始终可以使用 Visual Studio 2005 附带的图标和位图。 (不建议使用以前版本附带的图形!)

尽可能提供可调整大小的窗体

可调整大小的窗口有点类似于与分辨率无关的窗口。 无论使用 96DPI 还是 300DPI 屏幕,与分辨率无关的窗口看起来都相同。 无论应用程序的 UI 是否与分辨率无关,如果其大小可调整,则效果会更好。 当然,这不适用于很多场景,但这是一个良好的常规用途规则。

如果你的窗口处理任何排序的列表(尤其是 ListViews),这会更加重要。 调整大小可让用户同时查看更多数据。

例如,我们有一个应用程序,用户必须从大型集合中选择图像。 打开的对话框允许你选择缩略图视图,但对话框大小固定,缩略图列表一次仅显示 4 个缩略图。 如果集合有一百张图像,滚动和查找(重复任务)可能相当令人厌烦,降低效率。 如果对话框可调整大小,用户可以使其变得相当大,或者至少像屏幕允许的一样大,并且能够快速完成任务。 如果列表具有水平滚动(如详细的 ListView 或 DataGrid),则更令人厌烦! 在此类情况下,可调整大小的窗口非常有用。

使用边栏/任务窗格提供更多功能

和我们之前谈论的标头一样,边栏和任务窗格是一种提供额外功能和实用工具命令的精彩方法。 例如,Office Word 2003 中的任务窗格非常方便、可访问且不可侵入。 它们还可以在连接到联机资源时异步运行,为用户提供多任务选项。

创建任务窗格或边栏与创建停靠面板一样简单,可以选择将光滑图形放在顶部以充当标题栏。 甚至可以为此使用彩色标签控件。 任务窗格的机会很多!

如果你有其他功能,并且想要不侵入性地向用户提供它,则任务窗格最合适。 还可以使任务窗格“自动隐藏”或折叠,如 Visual Studio 工具窗口。

提供通知选项

之前,我们了解了如何创建自定义消息框。 如果应用程序中的消息框经常向用户显示,那么最好添加一个复选框,用户可以选择禁用该对话,以便将来不显示该对话框。 这种选项尤其适用于更明显的消息。

一个熟悉的示例是 Visual Studio“查找”对话框。 搜索或替换文本时,Visual Studio 会显示一个消息框,说明结果。 但你也可以选择禁用该消息框。 如果每次搜索时必须点击“输入”或单击“确定”,这确实会很恼火。

Visual Studio 执行的另一件很酷的事情是,即使对话框已禁用,它仍会在状态栏中显示该操作的结果。

提供工具提示!

有时工具提示可以节省大量时间。 按钮、复选框和其他控件可能不明确,用户可能不确定该怎么做。 工具提示提供仅用一行显示中上下文相关的帮助的最佳形式。 用户无需在帮助文件中搜索任何内容或打开另一个窗口,就能快速决定要执行的操作。

人们通常在其应用程序中跳过此操作。 注意向所有不明确控件或向所有控件(如果可能)添加工具提示。 不要重复随附标签或该控件自己的文本,而是提供有关该控件的其他信息。 文本应仅用几个词来解释控件的功能。

不要忘记小事

小事情会惹恼你,但忽略它们可能会影响你给用户留下的印象。 我曾经使用过软件行业中一位重要人士制作的应用程序,其窗体的 BorderStyle 设置为“可调整大小”,但窗体右侧的控件没有锚定。 因此,由行业重量级人物创建的应用程序带有非专业的感觉。

这类“小事”是整体印象的核心。 应用程序的 UI 和 UX 是用户判断应用程序的因素,至少是首要因素。 如果他们在 UI 中看到明显的 bug,他们可能会认为应用程序功能不太强大和有效。

结论

我们只接触了一小部分人类用户体验。 随着用户体验变得更加简单、有效、有趣和用户友好,创建这种用户体验的任务变得更加复杂。 但是,通过一些远见和良好的规划,你可以创造出色的用户体验。

创建完美的用户体验的最佳方式是,无论是使用特殊测试组还是自行执行针对 UI 的可用性测试。 在发布应用程序之前测试用户体验花费的时间越多越好。 稍后会节省很多麻烦。