出自UXGuide.net

手写笔

Pen

所有 Microsoft® Windows® 应用程序都应当可以使用手写笔来操作。这么做其实比你想像的要容易。

目录 1 Design concepts 1.1 Model for pen interaction 1.2 Control location 1.3 Pen interactions 1.3.1 System gestures 1.3.2 Flicks 1.3.3 Application gestures 1.3.4 Editing ink and text 2 Guidelines 2.1 Control usage 2.2 Control sizing, layout, and spacing 2.3 Interaction 2.4 Handedness 2.5 Forgiveness 3 Documentation

“手写笔输入（pen input）”是指 Windows 允许你使用手写笔直接与计算机进行交互的方式。手写笔可以用于定点，也可以用于笔势（gesture）、简单文本输入、及使用电子墨水（digital ink）捕捉自由的灵感。

用于输入的“手写笔（pen）”带有细小而光滑的笔尖，以支持精确指向、书写或用电子墨水绘图。手写笔可能还具备可选的“手写笔按钮（pen button）”（用于执行右键单击）和“橡皮擦（eraser）”（用于擦除电子墨水）。大多数手写笔都支持悬停。

典型的手写笔

当手写笔用于书写时，用户的笔划可以使用“手写识别”转化为文本。笔划也能够以书写时的原样保留，而识别则在后台完成以支持文本方式的搜索和复制。这种未经转换的笔划也称为电子“墨水”。

电子墨水输入示例

大多数 Windows 程序已经是“手写笔友好（pen-friendly）”的了，手写笔可以用来代替鼠标，手写笔可以很好地用于最重要的任务和交互，且程序能够响应笔势。当一个程序支持手写文本输入时，即可认为是“手写友好（handwriting-friendly）”的。当一个程序可以正确处理电子墨水，而无须将手写笔转换为文本或等价的鼠标运动时，即可认为是“电子墨水可用（int-enabled）”的。这使用户能够用自由的、高质量的电子墨水进行书写、绘画或是添加批注。收集电子墨水与收集鼠标事件不同，因为电子墨水需要更高的分辨率和采样率，而且还要加上压力和倾角的差别。关于创建手写友好和电子墨水可用的程序，请参考电子墨水集成（英文）和使用手写笔输入文本（英文）。

定位手写笔对光标的需要较少，因为笔尖可以反映其自身的位置。但是，为了辅助定位，Windows 提供了一个极小的“手写笔光标”以标示当前笔的位置。与它所代替的鼠标指针不同，手写笔光标只会在手写笔靠近屏幕的时候才会显示，当不活动状态持续数秒后它就会消失以避免遮挡信息。

大多数手写笔友好的程序都支持笔势（gesture）。“笔势”是指手写笔在屏幕上的快速移动，计算机会将其解释为命令而非鼠标移动、书写或绘图。其中最快速容易的笔势就是划动。“划动”是一个简单的笔势，用于执行导航或编辑命令。导航划动笔势包括向上拖动、向下拖动、向后翻而和向前翻页，编辑划动笔势包括复制、粘贴、撤销和删除。

除了忙碌指针以外，所有的鼠标指针都有一个单像素的“热点（hot spot）”，用于定义鼠标指针在屏幕上的确切位置。热点决定了操作会影响到哪个对象。对象也定义有“热区（hot zone）”，表示热点位于哪些位置时被认为是在该对象之上。通常，热区与对象的边界是一致的，但为了便于操作，热区也可能会更大一些。

因为手写笔可以比手指进行更精确地定点，所以如果你的用户界面可以很好地用于触摸的话，就也可以很好地用于手写笔。因此，本文主要关注的是为那些已经是为触摸设计的程序添加对手写笔的支持。

注：与鼠标、触摸和无障碍访问（辅助特性）相关的设计规范请参考各自相应的章节。

Design concepts

Using a pen for input has the following characteristics:

• Natural and intuitive. Everyone knows how to point and tap with a pen.
• Expressive. Strokes of a pen are easy to control, making writing, drawing, sketching, painting, and annotating easier than doing so with a mouse.
• More personal. Just as a handwritten note or signature is more personal than a typed one, using a digitally handwritten note or signature is also more personal.
• Less intrusive. Using a pen is silent, and consequently much less distracting than typing and clicking with the mouse, especially in social situations such as meetings.
• Portable. A computer with a pen capability can be more compact because most tasks can be completed without a keyboard, mouse, or touchpad. It can be more flexible because it doesn't require a work surface. It enables new places and scenarios for using a computer.
• Direct and engaging. Using a pen makes you feel like you are directly interacting with the objects on the screen, whereas using a mouse or touchpad always requires you to coordinate hand movements with separate on-screen pointer movements—which feels indirect by comparison.

All Windows programs should have a good pen experience. Users should be able to perform your program's most important tasks efficiently using a pen. Some tasks, like typing or detailed pixel manipulation, aren't appropriate for a pen, but they should at least be possible.

Fortunately, if your program is already well designed and is touch-friendly, providing a good pen support is easy to do. For this purpose, a well-designed program:

• Has good mouse support. The interactive controls have clear, visible affordances, and have hover states for pointer feedback. Objects have standard behaviors for the standard mouse interactions (single and double left-click, right-click, drag, and hover). The pointer shape changes as appropriate to indicate the type of direct manipulation.
• Has good keyboard support. The program makes users efficient by providing standard shortcut key assignments, especially for navigation and editing commands that can also be generated through gestures.
• Has controls large enough for touch. The controls have a minimum size of 23x23 pixels (13x13 dialog units [DLUs]), and the most commonly used controls are at least 40x40 pixels (23x22 DLUs). To avoid unresponsive behavior, there should be no small gaps between targets—the UI elements should be spaced so that adjacent targets are either touching or have at least 5 pixels (3 DLUs) of space between them.
• Is accessible. Uses Microsoft Active Accessibility (MSAA) to provide programmatic access to the UI for assistive technologies. The program appropriately responds to theme and system metric changes, and works well and looks good in 120 dpi (dots per inch) support.
• Uses common controls. Most common controls are designed to support a good pen experience. If necessary, the program uses well-implemented custom controls that are designed to support easy targeting and interactive manipulation.
• Uses constrained controls. When designed for easy targeting, constrained controls like lists and sliders can be better than unconstrained controls like text boxes, because they reduce the need for text input.
• Provides appropriate default values. The program selects the safest (to prevent loss of data or system access) and most secure option by default. If safety and security aren't factors, selects the most likely or convenient option, thereby eliminating unnecessary interaction.
• Provides text auto completion. Provides a list of most likely or recently input values to make text input much easier.

Unfortunately, the converse is also true—if your program isn't well designed, its shortcomings are going to be especially obvious to users who use a pen.

Model for pen interaction

If you aren't experienced with using a pen, the best introduction is to learn by doing. Get a pen-enabled computer such as a Tablet PC, put the mouse and keyboard aside, and do the tasks that you normally do using just a pen. Be sure to try both ink-enabled programs, such as Windows Journal, and programs that aren't ink-enabled. If you have a Tablet PC, experiment with holding it in different positions, such as on your lap, lying flat on a table, or in your arms while you're standing. Try using it in portrait and landscape orientation, and holding the pen for writing and just for pointing, in your left hand as well as your right.

As you experiment with using a pen, you'll discover that:

• Small controls are difficult to use. The size of the controls greatly affects your ability to interact effectively. Controls that are 10x10 pixels work reasonably for a pen, but larger controls are even more comfortable to use. For example, spin controls (15x11 pixels) are too small to use with a pen easily.
• Handedness is a factor. Your hand sometimes covers things that you might want to see or interact with. For example, for right-handed users context menus are hard to use if they appear to the right of the click point, so it's better if they appear on the left. Windows Vista® allows users to indicate their handedness in the Tablet PC Settings control panel item.
• Task locality helps. While you can move the pointer across a 14-inch screen with a 3-inch mouse movement, using a pen requires you to move your hand the full 14 inches. Repeatedly moving between targets that are far apart can be tedious, so it's much better to keep task interactions within the range of a resting hand whenever possible. Context menus are convenient because they require no hand movement.
• Text input and selection are difficult. Lengthy text input is especially difficult using a pen, so auto-completion and acceptable default text values can really simplify tasks. Text selection can also be quite difficult.
• Small targets near the edge of the display can be very difficult to tap. Some display bezels protrude, and some touchscreen technologies are less sensitive at the edges, making controls near the edge harder to use. For example, the Minimize, Maximize/Restore, and Close buttons on the title bar can be harder to use when a window is maximized.

Control location

As previously noted, task locality helps because repeating cross-screen movements becomes tedious. To minimize hand movements, locate controls close to where they are most likely going to be used.

Incorrect:

In this example, the color palette is too far from where it is likely to be used. The color palette was moved to the top in Windows Vista.

Consider that the user's current location is the closest a target can be, making it trivial to acquire. Thus, context menus take full advantage of Fitts' Law, as do the mini-toolbars and smart tags used by Microsoft Office.

The current pointer location is always the easiest to acquire.

Also, remember that small targets near the display edge can be difficult to target, so avoid placing small controls near window edges. To ensure that controls are easy to use when a window is maximized, either make them at least 23x23 pixels (13x13 DLUs), or place them away from the window edge.

Pen interactions

System gestures

System gestures are defined and handled by Windows. As a result, all Windows programs have access to them. System gestures map directly to equivalent mouse, keyboard, and application command messages:

System gesture	Synthesized equivalent message
Hover (when supported)	Mouse hover
Tap (down and up)	Mouse left-click
Double tap (down and up twice)	Mouse double left-click
Hold (down, pause, up)	Mouse right-click
Drag (down, move, up)	Mouse left-drag
Hold-drag (down, pause, move, up)	Mouse right-drag
Select (down, move over selectable objects, up)	Mouse select

Flicks

Flicks are simple gestures that are roughly the equivalent of keyboard shortcuts. Navigational flicks include drag up, drag down, move back, and move forward. Editing flicks include copy, paste, undo, and delete. To use flicks, your program only needs to respond to the related keystrokes commands.

The eight flick gestures and their default assignments in Windows Vista.

The navigational flicks have natural mapping, so they are easy to learn and remember. The editing flicks are diagonals that require more precision and their mappings are not as natural (flick towards the Recycle Bin to delete, flick in the Back arrow direction to undo), so these aren't enabled by default. All flick actions can be customized using the Pen and Input Devices control panel item.

Flick	Synthesized equivalent message
Flick left	Back application command
Flick right	Forward application command
Flick up	Keyboard Scroll Down one screenful
Flick down	Keyboard Scroll Up one screenful
Flick up-left diagonal	Keyboard Delete
Flick down-left diagonal	Keyboard Undo
Flick up-right diagonal	Keyboard Copy
Flick down-right diagonal	Keyboard Paste

Application gestures

Applications can define and handle other gestures as well. The Microsoft Gesture Recognizer can recognize over 40 gestures. To use application gestures, your program must define the gestures it recognizes, and then handle the resulting events.

Editing ink and text

Editing ink and text are among the most challenging interactions when using a pen. Using constrained controls, appropriate default values, and auto-completion eliminates or reduces the need to input text. But if your program involves editing text or ink, you can make users more productive by automatically zooming input UI up to 150 percent by default when a pen is used.

For example, an e-mail program could display UI at normal size, but zoom the input UI to 150 percent to compose messages.

In this example, the input UI is zoomed to 150 percent.

If you do only two things...

1. Make your Windows programs have a good pen experience! Users should be able to perform your program's most important tasks efficiently using a pen (at least those tasks that don't involve a lot of typing or detailed pixel manipulation).
2. Consider adding support for writing, drawing, and adding comments directly using ink in the most relevant scenarios.

Guidelines

Control usage

• Prefer using common controls. Most common controls are designed to support a good pen experience.
• Prefer constrained controls. Use constrained controls like lists and sliders whenever possible, instead of unconstrained controls like text boxes, to reduce the need for text input.
• Provide appropriate default values. Select the safest (to prevent loss of data or system access) and most secure option by default. If safety and security aren't factors, select the most likely or convenient option, thereby eliminating unnecessary interaction.
• Provide text auto-completion. Provide a list of most likely or recently input values to make text input much easier.
• For important tasks that use multiple selection, if a standard multiple-selection list is normally used, provide an option to use a check box list instead.
• Respect system metrics. Use system metrics for all sizes—don't hardwire sizes. If necessary, users can change the system metrics or dpi to accommodate their needs. However, treat this as a last resort because users shouldn't normally have to adjust system settings to make UI usable.

In this example, the system metric for menu height was changed.

Control sizing, layout, and spacing

• For common controls, use the recommended control sizes. These are large enough for a good pen experience, except for spin controls (which aren't usable with a pen but are redundant).
• Choose a layout that places controls close to where they are most likely going to be used. Keep task interactions within a small area whenever possible. Avoid long distance hand movements, especially for common tasks and for drags.
• Use the recommended spacing. The recommended spacing is pen-friendly.
• Interactive controls should either be touching or preferably have at least 5 pixels (3 DLUs) of space between them. Doing so prevents confusion when users tap outside the intended target.
• Consider adding more than the recommended vertical spacing within groups of controls, such as command links, check boxes, and radio buttons, as well as between the groups. Doing so makes them easier to differentiate.

Interaction

• For programs designed to accept handwriting, enable default inking. Default inking allows users to input ink by just starting to write, without having to tap, give a command, or do anything special. Doing so enables the most natural experience with a pen. For programs not designed to accept handwriting, handle pen input in text boxes as selection.
• Allow users to zoom the content UI if your program has tasks that require editing text. Consider automatically zooming to 150 percent when a pen is used.
• Because gestures are memorized, assign them meanings that are consistent across programs. Don't give different meanings to gestures with fixed semantics. Use an appropriate program-specific gesture instead.

Handedness

• If a window is contextual, always display it near the object that it was launched from. Place it out of the way so that the source object isn't covered by the window.
  • If displayed using the mouse, when possible place the contextual window offset down and to the right.

Show contextual windows near the object that it was launched from.

• • If displayed using a pen, when possible place the contextual window so as not to be covered by the user's hand. For right-handed users, display to the left; otherwise display to the right.

When using a pen, also show contextual windows so that they aren't covered by the user's hand.

• Developers: You can distinguish between mouse events and pen events using the GetMessageExtraInfo API. You can determine the user's handedness using the SystemParametersInfo API with SPI_GETMENUDROPALIGNMENT.

Forgiveness

• Provide an undo command. Ideally, you should provide undo for all commands, but your program may have some commands whose effect cannot be undone.
• Provide good hover feedback. Clearly indicate when the pen is over a clickable target. Such feedback is a great way to prevent accidental manipulation.
• Whenever practical, provide good feedback on pen down, but don't take actions until a move or pen up. Doing so allows users to correct mistakes before they make them.
• Whenever practical, allow users to correct mistakes easily. If an action takes effect on pen up, allow users to correct mistakes by sliding while the pen is still down.

Documentation

When referring to pen input:

• Refer to a pen-shaped stylus input device as a pen. On first mention, use tablet pen.
• Refer to the button on the side of a pen as the pen button, not the barrel button.
• Refer generically to the keyboard, mouse, trackball, pen, or finger as an input device.
• Use tap (and double-tap) instead of click when documenting procedures specific to using a pen. Tap means to press the screen and then lift before a hold time. It may or may not be used to generate a mouse click. For interactions that don't involve the pen, continue to use click.