Visual Studio 用户体验基础知识

最佳实践

1.在 Visual Studio 环境中保持一致。

  • 遵循 shell 中的现有 交互模式

  • 设计与 shell 的视觉语言和 工艺要求一致的功能。

  • 当共享命令和控件存在时,请使用它们。

  • 了解 Visual Studio 层次结构及其如何建立上下文并驱动 UI。

2.将环境服务用于字体和颜色。

  • UI 应遵循当前 环境字体 设置,除非它在“选项”对话框中的“字体和颜色”页中公开自定义。

  • UI 元素必须使用 VSColor 服务,使用共享环境令牌或特定于功能的令牌。

3.使所有图像都与新的 VS 样式保持一致。

  • 遵循 Visual Studio 针对图标、字形和其他图形的设计原则。

  • 不要在图形元素中放置文本。

4.从以用户为中心的角度进行设计。

  • 在任务流中的各个功能之前创建任务流。

  • 熟悉你的用户,并在规范中明确该知识。

  • 查看 UI 时,请评估完整的体验以及详细信息。

  • 设计 UI 以便无论区域设置或语言如何,它都保持功能且具有吸引力。

屏幕分辨率

最小分辨率

  • Visual Studio 2015 的最低分辨率为 1280x720。 这意味着,可以采用此分辨率使用 Visual Studio,尽管它可能不是最佳用户体验。 不能保证所有方面在分辨率低于 1280x720 时可用。

  • Visual Studio 的目标分辨率为 1366x768。 这是我们承诺 良好的 用户体验的最低分辨率。

  • 初始对话高度应 小于 700 像素,因此它适合 96 dpi 的 IDE 帧的最小分辨率。

高密度显示器

Visual Studio 中的 UI 在 Windows 支持的所有 DPI 缩放因子中必须正常工作:150%、200% 和 250%。

若干反模式

Visual Studio 包含许多遵循准则和最佳做法的 UI 示例。 为了保持一致,开发人员通常借用产品 UI 设计模式,这些模式与它们正在构建的模式类似。 虽然这是一个很好的方法,有助于我们在用户交互和视觉设计方面保持一致性,但我们有时会提供一些细节,这些细节不符合我们的准则,因为计划约束或缺陷优先顺序。 在这些情况下,我们不希望团队复制其中一种“反模式”,因为它们在 Visual Studio 环境中激增不良或不一致的 UI。

默认处于错误状态的必填字段/设置

功能团队目标

  • 警告用户他们已添加必须配置的元素。

  • 吸引用户注意需要输入的区域。

反模式解决方案

用户启动操作后,在完成任务之前,立即将关键停止图标放在需要配置的区域旁边。

示例:清单设计器声明

将声明添加到列表中会立即将其置于错误状态,直到用户设置所需属性为止。

在这种情况下,还有其他问题,因为用于警报的图标包含“×”图标,因此不能在它旁边使用通用删除图标。 因此,UI 使用“删除”按钮,这是一个更笨拙的控件。

Placing UI in an error state by default is a Visual Studio anti-pattern.
默认情况下,将 UI 置于错误状态是 Visual Studio 反模式。

备选方法

解决此问题的更好解决方案是:

  • 允许用户添加声明而不显示警告,然后立即移动以设置项的属性。

  • 当焦点从项目移动时添加警告图标(金三角形),例如向列表添加另一个声明或尝试更改设计器中的选项卡。

  • 如果用户在设置任何声明的属性之前尝试更改选项卡,请弹出一个对话框,说明应用程序在解决警告之前不会生成(或任何影响)。 如果用户关闭对话框并更改选项卡,则会将图标(适当地或警告)添加到“声明”选项卡。

多次单击以消除 UI

功能团队目标

请勿允许用户在不首先看到说明文本的情况下关闭 UI。

反模式

将视频链接插入 VS UI 中的不同位置的团队根据 UX 指定的“×”关闭按钮和工具提示解释的常见模式决定,而是实现了下拉列表和“不再显示”链接。

在消除 UI 之前强制用户阅读解释性文本是 Visual Studio 中的反模式。 正确设计后,视频链接应显示工具提示,其中包含有关悬停的其他信息,单击“×”应消除消息,而无需进一步交互。

Explanatory text anti-pattern - incorrect
视频链接模式不正确

用户不必使用简单的关闭按钮(一键),而是强制使用两次单击来直接消除视频链接显示的每个位置的 UI。

这种情况的正确设计是遵循 Internet Explorer、办公室 和 Visual Studio 常见的模式:悬停时,用户可以看到工具提示说明,一键隐藏 UI。

Explanatory text anti-pattern - correct
正确的视频链接模式

对设置使用命令栏

图 A 表示此反模式:将设置放在应用于命令的命令按钮下面。 在此草图中,除了“开始调试”之外,还有命令(如“在浏览器中查看”、“无调试”和“单步执行”)将遵循所选设置。

Figure A: Command bar anti-pattern
图 A:命令栏反模式

稍微好一些,但仍不可取的是,将此类型的设置放在工具栏中,如图 B 所示。虽然拆分按钮占用的空间较少,因此对下拉列表有所改进,但两种设计仍在使用工具栏来提升真正不是命令的内容。

Figure B: Better, but still a command bar anti-pattern
图 B:更好,但仍是命令栏反模式

在图 C 中显示的正确方法中,该设置绑定到一系列命令。 没有设置全局设置,我们只是在四个命令之间切换。 这是工具栏中的命令可以接受的唯一情况。

Figure C: Correct use of Visual Studio command bar pattern
图 C:正确使用 Visual Studio 命令栏模式

控制反模式

某些反模式只是控件或控件组的用法或呈现不正确。

应仅对超链接使用下划线文本。

错误
Underlined text that is not a hyperlink is a Visual Studio anti-pattern.
不是超链接的带下划线的文本是 Visual Studio 反模式。

规范
Styled correctly, non-hyperlink text appears unadorned in the environment font.
正确设置样式,非超链接文本在环境字体中未显示。

单击检查框会导致弹出对话框

单击“发布 Windows Azure 应用程序”向导中的“为所有角色启用远程桌面”检查框会立即弹出一个弹出对话框(Visual Studio 反模式)。 此外,检查框字段在被选中后不会填充检查框,另一个交互反模式。

Bringing up a dialog after clicking a check box is a Visual Studio anti-pattern.
单击检查框后显示对话框是 Visual Studio 反模式。

以下示例包含两个反模式:

  1. 将鼠标悬停在鼠标悬停时打开红色的前景意味着未使用字体服务中正确的共享颜色。

  2. “了解详细信息”不是指向概念主题的链接的适当文本。 用户的目标是不了解详细信息,就是了解他们选择的后果。

    Ignoring the color service and using
    忽略颜色服务并使用“了解详细信息”进行超链接是 Visual Studio 反模式。

更好的解决方案: 通过单击链接提出用户要询问的问题。 例如:

  • Windows Azure 服务的工作原理是什么?

  • 何时需要 Windows Azure 移动服务项目?

超链接应是自我描述性的。 使用“单击此处”或类似变体是一种反模式。

错误: “单击此处了解有关如何创建新项目的说明。

好:“如何实现创建新项目?”