出自UXGuide.net

使用 WPF 进行设计

Designing with Windows Presentation Foundation

目录 1 遵循 UX 规范 2 恰当地使用 Windows Presentation Foundation 2.1 什么是“酷”？ 2.2 目标用户 2.3 程序类型 2.3.1 生产型应用程序（Productivity Application） 2.3.2 消费型应用程序（Consumer Application） 2.3.3 游戏 2.3.4 展台 2.3.5 IT 专业人员工具 2.4 增强易用性 2.5 做出决定（Making decisions） 2.6 底线（The bottom line） 3 指导原则 (Guidelines) 3.1 主题化 (Theming) 3.2 Software branding 3.3 Custom controls 3.4 3-D 3.5 Animations 3.6 Dynamic behaviors 3.7 Direct manipulation 3.8 Hosting in browser

Windows Presentation Foundation（WPF）是一种用户界面开发环境，提供更高级的视觉控制，如综合了文档、媒体、二维或三维图形、动画、类似 Web 的特性等等的界面。关于一般概述，参见介绍 Windows Presentation Foundation。

如果正确使用，Windows Vista® 中的 WPF 能够帮助你创建令你的目标用户喜爱的迷人、高效的体验。如果使用不当，它可能会使你的程序令人厌烦且难以使用。下面的设计规范可以帮助你理解这其中的差别，更恰当地使用这项技术。

遵循 UX 规范

虽然 Windows Vista 用户体验设计规范（或称“UX 规范”）是专为 Windows Vista 而写的，但几乎所有的内容同样适用于使用了 WPF 的程序。当然，这没什么可惊讶的——这些设计规范的主要目的是为“所有”基于 Windows Vista 的应用程序确立一个高质量、统一的准绳，并不在于它们是如何实现的。

虽然 Windows Presentation Foundation 提供了创建各式各样用户体验的灵活性——从传统的 Microsoft® Windows® 到高度自定义的界面——你绝不会感到使用 WPF 会“强迫”你放弃 Windows 的外观和感觉。事实上，WPF 默认提供的即是传统 Windows 的外观和感觉，并包含了 Windows XP 的主题及 Aero 的高级版本。无论你的程序是什么样子，你的基于 WPF 的程序都能获益于像富应用程序模型、动态布局及数据绑定等这些强大的功能。

恰当地使用 Windows Presentation Foundation

WPF 使得完全改变你的程序外观以符合企业的品牌形象成为可能，或是使用自定义的交互模式以让你的程序拥有“独特”的感受。你甚至可以把一个下拉列表自定义得像一个滑块！但哪些对传统体验的改变才真的合适呢？

什么是“酷”？

WPF 提供了一系列激动人心的高级功能，随之而来的便是期望于创造更好的——或者说更“酷”的软件。可往往这些尝试都不在点子上。要理解其原因，让我们先来看看一个程序怎样是酷，怎样不是酷。

这样的程序是真正的“酷”：

• 具有适合其目标用户的功能。
• 美观舒适，精巧细致。
• 具有经过改进的可用性和流程，不会产生性能损失。
• 具有持续良好的印象——第 100 次使用时仍和第 1 次一样令人感到愉快。

这样的程序并不“酷”：

• 使用甚至滥用某种技术，仅仅因为能够使用它。
• 具有破坏可用性、流程或性能的功能。
• 总是暴露在外，将用户不必要的注意力花在程序自身上。
• 短暂的好印象。第一次可能让人觉得好玩，但乐趣很快就会消失。

就好像画家的调色板里并没有什么天生好的或差的颜色一样，WPF 也不存在本身好与不好的功能。但是，对于特定的程序及其目标用户来说，我们相信存在恰当的设计和不恰当的设计。真正酷的程序使用了某种技术是因为确实需要，而不是仅因为能够使用。

要达到前面所说的酷，“不要”从这些技术可以做什么开始考虑，而应该专注于你的目标用户真正需要什么。在添加一个“酷”的功能之前，先确保得到明确的用户使用场景（User Scenario）的支持。

目标用户

设计优秀的软件可以简单地看成是进行一系列决策，关于你需要呈现给用户哪些功能以及如何呈现。对于优秀的软件来说，这些决策应当基于该软件及其既定受众的目标而作出。一个好的决策必须基于目标用户的利益——绝不是你自己，或是因为该平台可以很容易做到。

要理解你的目标用户，应当列出他们的知识构成、目标及喜好。你应当理解他们使用你程序的动机、他们多久会使用一次以及他们的工作环境。而且，考虑创建用户的人物角色（Persona）——来自于真实数据的假想人物设计——用于代表一类真实用户。

程序类型

你要创建的程序的类型也是需要考虑的因素。这里列出了一些常见程序类型的特点：

生产型应用程序（Productivity Application）

• 目标用户：知识工作者。
• 目标：工作效率、降低成本。
• 使用频率：经常长时间使用，可能是一整天。
• 用户期望：熟悉、一致、可以立即投入使用。
• 恰当的 WPF 使用：帮助用户高效完成工作。
• 范例：Microsoft Office、特定的商用软件。

消费型应用程序（Consumer Application）

• 目标用户：消费者。
• 目标：对于用户来说，完成一组特定的任务；对于独立软件开发商（ISV）来说，热卖。
• 使用频率：偶尔使用（也许每周一次），每次使用的时间很短。
• 用户期望：具有令人愉快的体验并能很好地完成既定任务。
• 恰当的 WPF 使用：帮助用户完成任务；一些品牌宣传。
• 范例：多媒体相关应用、媒体播放器和工具、安全工具。

游戏

• 目标用户：消费者。
• 目标：娱乐。
• 使用频率：偶尔使用一段中等长度的时间。
• 用户期望：沉浸式体验。
• 恰当的 WPF 使用：自定义外观，可能还有自定义的交互。
• 范例：简单游戏、在线游戏。

展台

• 目标用户：路人。
• 目标：完成特定任务，获取信息。
• 使用频率：一次。
• 用户期望：立即完成任务，无须任何学习。
• 恰当的 WPF 使用：自定义外观、可能还有自定义的操作（触摸、拖放）、用于形象化解释的动画。
• 范例：机场信息亭、博物馆展台。

IT 专业人员工具

• 目标用户：为 IT 专业人员开发和使用。
• 目标：快速完成任务或收集信息。
• 使用频率：即需即用，通常只使用很短的时间。
• 用户期望：完成任务。
• 恰当的 WPF 使用：帮助 IT 专业人员快速开发并测试用户界面。

增强易用性

Some design ideas are good simply because they improve usability. Here are some common ways to improve usability with WPF: 某些设计思想很好就仅仅因为它增强产品易用性。以下是使用WPF的几条常用于改进易用性的方式：

• Model the real world. You can use custom visuals and interactions to make specific controls look and behave like their real-world counterparts. This technique is best used when users are familiar with the real-world object, and the real-world approach is the best, most efficient way to perform the task. For example, simple utilities like calculators just work better when they model their real-world counterparts.
• 模拟真实世界.你可以使用自定义外观和交互动作制作具体的控件，使它看起来更像真实世界的翻版。这种技术在用户非常熟悉真实世界的对象的情况下，经常使用，真实世界的方法是最好且最有效的执行任务方式。例如，模拟真实世界的简单实用的计算器运行很不错。
• Show instead of explain. You can use animations and transitions to show relationships, causes, and effects. This technique is best used to provide information that would otherwise require text to explain or might be missed by users. For example, a book for young children could animate page turns to show how the controls work. Normal page turns would be harder for a young child to understand.
• 直观呈现而无需解释.你可以使用动画和过度效果显示关系、原因和效果。在提供的信息需要文本解释或易被用户错失的情况下，此技术使用效果绝佳，
• Improve affordance. Affordance is a property of an object that suggests how the object is used (as opposed to using a label to explain it). You can use custom control visuals and animations to suggest how nonstandard controls are used.
• 增强功能可见性. 功能可见性 是对象的一种属性，指示对象是如何被使用（对照使用标签解释它）。你可以使用自定义控件外观和动画，指示非标准控件是如何被使用的.
• Use natural mapping. Natural mapping is a clear relationship between what the user wants to do and how to do it. You can use custom appearances and interactions to create natural mappings when the standard common controls won't do.
• 使用自然映射. 自然映射清楚表示用户想做什么和如何做的关系。在标准通用控件行不通时，你可以使用自定义外观和交互创建自然映射。
• Reduce knowledge. You can use custom interactions to limit the number of ways to perform an operation and the amount of knowledge required to perform a task.
• 减少知识量应用你可使用自定义交互动作来限制执行操作的步骤数量和执行任务所需的知识量。
• Improve feedback. You can use custom control visuals and animations to give feedback to show that something is being done correctly or incorrectly, or to show progress. For example, the Address bar in Windows Internet Explorer® shows the progress for loading the page in the background.
• 加强反馈. 你可使用自定义控件外观和动画反馈给用户事件正确执行或者不正确，或者显示操作进程。例如，windows IE浏览器中地址栏背景显示加载页面进度.
• Make objects easier to interact with. Fitts' law states that the effort required to click on a target is proportional to its distance and inversely proportional to its size. For example, you can use animations to make objects larger when the pointer is near and smaller when the pointer is far. Doing so makes the objects easier to click. It also allows you to use screen space more efficiently, by making objects normally smaller.
• 使对象易交互. 费茨定律表述道，点击对象事件是与距离成正比、与尺寸大小成反比.例如，你可以使用动画使得对象在指针靠近时变更大，远离时变更小。这样做使得对象更易点击。通过缩小原有对象，也使得屏幕空间得到更为有效的应用。
• Focus. You can use rich layout and custom visuals to emphasize screen elements that are crucial to the task, and to de-emphasize secondary elements.
• 关注重点. 你可使用丰富的布局和自定义外观突出关键任务的组件，弱化次要组件.

做出决定（Making decisions）

Now, let's put all these factors together. Should you use that transition effect idea you have for your program? Don't start by thinking about the fact that you can do it, or that it's really clever or easy to do. Those factors don't matter to your target users.

现在，让我们把所有这些因素放在一起。你是否应该将你有的过渡效果的想法在你的程序里使用？不要一开始就想着你可以做，或者做这件事情确实是明智的或者简单的。这些因素对你的目标用户没有关系。

Instead, consider the usability of the feature itself. Does the feature benefit from the transition, perhaps because it clarifies an object's source or destination? How quick is the transition? Would overall program performance be harmed?

相反地，考虑特征自身的可用性。该特征是否从渐变中获益，可能因为它阐明一个对象的源或目标？渐变有多快？是否整个程序的性能会受到损害？

Consider your target users. Do they perform the task only occasionally and do their time constraints make that transition annoying? And finally, are such transitions appropriate for your program type? Simple transitions that aid in usability are appropriate for nearly all programs, whereas complex animations that don't aid in usability are—at best—suitable for programs intended to entertain users, such as games.

考虑你的目标用户。是否他们只是偶尔执行这项任务，以及他们的时间限制要求使这样的渐变变得烦人？最终这样的渐变对你的程序类型是否合适？有助于可用性的简单渐变适用于几乎所有程序，对可用性没有帮助的复杂的动画最适合于为了娱乐用户的程序，例如游戏。

By asking yourself the right questions and giving thoughtful answers, you can use the power of the WPF appropriately to create a great user experience.

通过问你自己正确的问题并且给出深思熟虑过的答案，你可以用WPF的力量适当地创建一个强大的用户体验。

底线（The bottom line）

At Microsoft, the four tenets of design are that software should be useful, usable, desirable, and feasible. We believe that this is the right list, and that it's in the right order. Appropriately applied, Windows Presentation Foundation helps you better satisfy all four of these tenets.

在微软，设计的四个原则是，软件应该是：有用的，可用的，可取的，也是可行的。我们认为，这是正确的列表，并且顺序是对的。适当地应用，Windows Presentation Foundation帮助你更好地满足所有这四个原则。

指导原则 (Guidelines)

主题化 (Theming)

As a general rule, application theming is appropriate for programs where the overall experience is more important than productivity. Highly themed applications should be immersive, yet only used for short periods of time. This rule makes theming suitable for games and kiosk applications, but unsuitable for productivity applications.

作为一个通用的规则，当整体体验比生产效率更加重要的时候，应用程序主题化对程序来说是合适的。高度主题化的应用程序应该是沉浸式的，然而只是用于很短的一段时间。这条规则让主题化适合于游戏和报亭应用程序等，但不适合于生产型应用程序。

However, theming isn't an all-or-nothing deal. You can use customized control visuals for specific controls to give them a custom look. For branded consumer applications, you can use simple, subtle application theming to create a sense of brand.

然而，主题化不是一个全有或全无的事情。为了给用户一个自定义的外观，你可以给具体的控件使用自定义控件外观。 对属于品牌的消费者应用程序，你可以使用简单、精细的应用程序主题来建立品牌意识。

Do:
可以做的：

• Use the standard Windows theme for productivity applications.
• 在生产型应用程序中，使用标准的Windows主题。
• Consider using subtle, brand-related application theming for consumer applications.
• 在消费者应用程序中，考虑使用精细的、品牌相关的应用程序主题。
• Games and kiosk applications may use heavy application theming to achieve an immersive experience.
• 游戏和凉亭应用程序可以使用重度的应用程序主题来达到一个沉浸式的体验效果。
• Theme selectively, subtly, and with restraint. Deciding to use a theme doesn't mean that you have to theme everything or make everything appear radically different.
• 有选择性地、精细地，以及约束性地主题化应用程序。当决定使用主题的时候，并不意味着你必须把每样事物都主题化，或者使每样事物表现得根本不一样。
• If your program models real-world objects, consider using custom visuals to make controls look and behave like those real-world objects, but only if that real-world approach offers the best, most efficient way to perform tasks. (This is a very high bar.)
• 如果你的程序模拟现实世界的对象，考虑使用自定义的外观使得控件无论是看起来还是表现的行为都像现实世界的对象，不过这种情况只适用于现实世界中，执行这些任务的方法是最优的、最有效的。(这是一个非常高的门槛)
• Consider using theming to emphasize screen elements that are crucial to the task, and de-emphasize elements that are secondary.
• 考虑使用主题化去强调那些对于任务来说是非常关键的页面元素，同时弱化那些次要的元素。
• Have professional graphic artists create your themes. Successful themes require an understanding of color, focus, contrast, texture, and use of dimension.
• 让专业的视觉设计师创建你的主题。成功的主题需要理解颜色、重心、对比、纹理，以及使用规格。

Don't:
不要做的:

• Don't theme window non-client areas unless the application is an immersive experience, run at full screen with no other programs.
• 不要主题化非客户端的窗口区域，除非应用程序是一个沉浸式的体验，独占整个屏幕地运行，没有其他的程序。
• When in doubt, don't theme.
• 当你在犹豫要不要使用主题的时候，不要使用主题。

Software branding

In a competitive marketplace, companies brand their products to help differentiate them from the competition. However, having your programs look and act weird doesn't make for a strong brand identity. Rather, your goal should be to create a program with character—a product that stands out while fitting in.

Ultimately, users are most impressed by high quality programs that serve their purpose well. They are unlikely to be impressed by branding that is distracting, or harms usability or performance.

Do:

• Choose good product names and logos, which are the foundation of your brand. Theming isn't.
• Consider having a link to your product's Web site from its About box and Help file. A product Web site is a far more effective way to sell your brand and support your product than branding within the product itself.
• If you must brand, consider low-impact branding:
  • Small, subtle company or product logos, placed out of workflow.
  • Small, subtle theme color changes that suggest your company or product colors.

Don't:

• Don't use branding that is distracting or harms usability or performance.
• Don't use custom controls for branding. Rather, use custom controls when necessary to create a special immersive experience or when special functionality is needed.
• Don't use animated splash screens for branding. In fact, don't use any splash screens for programs that load quickly.
• Don't use animated logos.
• Don't plaster company or product logos on every UI surface.
  • Limit product and company logos to at most two different surfaces, such as the main window or home page and the About box.
  • Limit product and company logos to at most twice on any single surface.
  • Limit product and company names to at most three times on any surface.

For more guidelines and examples, see Branding.

Custom controls

The Windows common controls are familiar, consistent, flexible, and accessible. They require no learning from experienced Windows users and they are the right choice in almost all situations.

That said, common controls work best for the usage patterns they were designed for. For example, before the slider control became standard, scroll bars were sometimes used instead. But scroll bars are intended for scrolling documents, not choosing from a continuous range of values. Before the standard slider control, it was a good idea to use a custom control for this interaction.

Do:

• Use custom controls for unusual behaviors that aren't supported by the common controls.
• Ensure custom controls support system metrics and colors and respect all user changes to these settings.
• Ensure custom controls conform to the Windows accessibility guidelines.

Don't:

• Don't assign nonstandard behaviors to the common controls. Use standard behaviors if you can, and custom controls only if you must.
• Don't underestimate the work required to use custom controls correctly.

3-D

Do:

• Use 3-D graphics to help users visualize, examine, and interact with three-dimensional objects, charts, and graphics.
• Make sure there are clear user scenarios that support the need for 3-D graphics features.

Don't:

• Don't use 3-D graphics just because you can.

Animations

There are five basic types of animations:

• Illustration animations communicate information visually instead of verbally.
• Effect animations create interactions to model their real-world counterparts.
• Relationship animations show relationships between objects (where objects come from, went to).
• Transition animations show major UI state changes.
• Feedback animations show that something is being done correctly or incorrectly, or show processing progress.

The human eye is sensitive to motion, especially peripheral motion. If you use animation to draw attention to something, make sure that attention is well deserved and worthy of interrupting the user's train of thought.

Animations don't have to demand attention to be successful. In fact, many successful animations are so natural that users aren't even aware of them.

Do:

Illustration animations

• Use illustration animations that have a single interpretation. They have little value if confusing.
• Show one thing at a time to avoid overwhelming users.
• Play at the optimal speed—not so fast they are difficult to understand, but not so slow they are tedious to watch.
• Gradually increase the speed of repeated animations. Viewers will already be familiar with the animation, so increasing speed slowly will feel right.
• Use timing to emphasize importance, such as slowing down for important parts.

Effect animations

• Use effect animations for objects that the user is currently interacting with. Such animations aren't distracting because the user is already focused on the object.
• Minimize use of effect animations that show status. Make sure:
  • They have real value by providing additional information users can actually use. Examples include transient status changes and emergencies.
  • They are subtle.
  • They are short in duration and therefore not running most of the time.
  • They can be turned off.
• Keep effect animations low-key so they don't draw too much attention to themselves. Avoid movement or use small movements, but prefer fades and changes in overlays.

Relationship animations

• Must start or end with the selected object. Don't show relationships between objects the user isn't currently interacting with.
• Must complete within a half-second or less.

Transition animations

• Use to show relationships between states. Animating state changes makes them easier to understand and appear smoother.
• Make sure transitions have natural mappings. For example, an opening window transition should be upward and expand; a closing window transition should be downward and contract.
• Must complete within a half-second or less.

Feedback animations

• Must have clearly identifiable completion and failure states.
• Must stop showing progress when the underlying process isn't making progress.

Don't:

• Don't use animations that affect performance noticeably. Consider performance over slow network connections or when many objects are involved.
• Don't draw attention to things that aren't worthy of attention.

Dynamic behaviors

With WPF, you can use progressive disclosure to show or hide additional information. Progressive disclosure promotes simplicity by focusing on the essential, yet revealing additional detail as needed.

Progressive disclosure controls are usually displayed without direct labels that describe their behavior, so users must be able to do the following based solely on the control's appearance:

• Recognize that the control provides progressive disclosure.
• Determine if the current state is expanded or collapsed.
• Determine if additional information, options, or commands are needed to perform the task.
• Determine how to restore the original state, if desired.

While users can determine the above by trial and error, try to make such experimentation unnecessary.

Do:

• Make sure the progressive disclosure mechanism is visible at all times.
• Use the appropriate glyph. Use double or single chevrons for surfaces that slide open to show the remaining items in hidden content.
• Point the glyph in the right direction. Chevrons point in the direction where the action will occur.

Don't:

• Don't depend upon mouse hover effects to reveal progressive disclosure.

Direct manipulation

With WPF, you can use direct manipulation to let users interact directly with objects using their mouse, instead of indirectly with the keyboard, dialog boxes, or menus.

Direct manipulation is a natural way to perform many tasks. It is easy to learn, and convenient to use. But there are many challenges, the most important being to prevent accidental manipulation of important data.

Do:

• Make direct manipulation visible by:
  • Changing the pointer to a hand on mouseover.
  • Showing drag handles on object selection.
  • Showing movement when an object is dragged, then show appropriate drop targets. Also, clearly show when an object is successfully dropped or when the drop is cancelled.
  • Showing an in-place text box on double selection for renaming.
  • Showing most useful properties with tooltips.
• Prevent accidental manipulation by:
  • Locking by default objects that are crucial or likely to be manipulated accidentally. Provide a way to unlock in the object's shortcut menu.
  • Providing an obvious way to undo accidental manipulations.
• Make direct manipulation accessible by always providing alternatives.

Don't:

• Don't overuse direct manipulation by providing it where there is very little value. Overuse can lead to a UI so fragile that users are reluctant to interact with it.

Hosting in browser

You have the option of hosting your WPF-based program in a browser.

Do:

• Host your program in the browser to navigate from a Web page to your program.

Don't:

• Don't host your program in the browser when:
  • It is used to edit rich content (for example, a word processor).
  • It requires multiple windows.
  • It is a background task that would be broken or interrupted if users were to navigate away (for example, a media player).