出自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 Improving usability 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 专业人员快速开发并测试用户界面。

Improving usability

Some design ideas are good simply because they improve usability. Here are some common ways to improve usability with 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.
• 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.

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.

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.
• 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).