出自UXGuide.net

Text Controls

This section describes controls that either display text or accept text as input. The combination box, which includes a text input field, is not covered in this section; see “Combination Boxes” for information about combination boxes.

Static Text Fields

Use a static text field for informational text (text not intended to be modified by users) in a dialog or window. Static text fields have two states: active and dimmed.

When it provides an obvious user benefit, static text should be selectable. For example, a user should be able to copy an error message, a serial number, or an IP address to paste elsewhere. Figure 15-69 shows several examples of static text used to give information to users.

Figure 15-69 Static text fields provide information to users

Static text fields in various standard fonts are available in Interface Builder. You can use system font, small system font, or mini system font, depending on the layout of your window. To create a static text field using Application Kit programming interfaces, use the NSTextField class.

Text Input Fields

A text input field, also called an editable text field, is a rectangular area in which the user enters text or modifies existing text. The text input field can be active or disabled. It supports keyboard focus and password entry. For example, iTunes preferences allows the user to specify a library name for sharing, as shown in Figure 15-70.

Figure 15-70 A text input field allows the user to supply information

Be sure to use a combination box control when you want a text input field combined with a menu or list of choices; don’t try to create one by putting a text input field and a menu together. See “Combination Boxes” for more information about combination boxes.

Text Input Field Usage

Use a text input field when you need to get information from the user. When you receive user input, be sure to perform appropriate edit checks. For example, if the only legitimate value for a field is a string of digits, an application should issue an alert if the user types characters other than digits. In most cases, the appropriate time to check the data in the field is when the user clicks outside the field or presses the Return, Enter, or Tab key.

Text Input Field Contents and Labeling

A text input field contains user-supplied text in a system font that is appropriate for the size of the control. In addition, a text input field can contain a token field control, which displays the user input in the form of a draggable token (see “Token Fields” for more information on tokens).

It’s a good idea to display an introductory label with a text input field to help users understand what type of information they should enter. Generally, these labels should have title-style capitalization (see “Capitalization of Interface Element Labels and Text” for more information on this style).

Text Input Field Specifications

Control sizes: Text input fields are available in regular, small, and mini sizes. The height is fixed for each size, but you decide how long to make the control. In general, try to ensure that the length of the text input field comfortably accommodates the average length of the expected input. In addition, if you display multiple text input fields in a window, be sure they all have the same length. The height of each size of text input field is listed below (Figure 15-71 shows a regular-size text input field in different states):

• Regular size: 22 pixels high.
• Small: 19 pixels high.
• Mini: 15 pixels high.

Figure 15-71 A regular-size text input field in various states

Label spacing and fonts: The introductory label for a text input field should be in a font that is proportional to the size of the control. In addition, the space between the introductory label and the input field should be consistent. Use the following metrics when you use a text input field in your window layout:

• Regular size: Use system font for the introductory label. Leave 8 pixels between the end of the introductory label (the colon) and the left edge of the text input field.
• Small: Use small system font for the introductory label. Leave 6 pixels between the end of the introductory label (the colon) and the left edge of the text input field.
• Mini: Use mini system font for the introductory label. Leave 5 pixels between the end of the introductory label (the colon) and the left edge of the text input field.

For more information about highlighting selections in text fields, see “Keyboard Focus and Navigation” and “Selections in Text.”

Control spacing: If you want to use more than one text input field in a window, you need to leave enough space between them so users can easily see which input field belongs with each introductory label. If you need to position more than one text input field at the same height (that is, in a horizontal line), be sure to leave plenty of space between the end of one text field and the introductory label of the next. Typically, however, multiple text input fields are stacked vertically, as in a form users fill out. When you position text input fields in a vertical stack, be sure to leave the following amounts of space between them:

• Regular size: At least 10 pixels.
• Small: At least 8 pixels.
• Mini: At least 8 pixels.

Text Input Field Implementation

Text input fields are available in Interface Builder. To create one using Application Kit programming interfaces, use the NSTextField class.

Token Fields

A token field is a control that creates a token out of input text. The token field control supports behavior similar to that of the address field in the Mail application.

Figure 15-72 shows various states of the token field control (no contextual menu support is shown).

Figure 15-72 A token field control in use

Token Field Usage

Use a token field control in a text input field (see “Text Input Fields” for more information about text input fields). As the user types in the text input field, the token field control invokes text completion after a delay you specify. When the user types the comma character or presses Return, the preceding text input is transformed into a token.

A token is draggable and, if you add code to support a menu, displays a disclosure triangle that reveals a contextual menu when the user presses or clicks it. In this menu, you might offer more information about the token and ways to manipulate it. In Mail, for example, the token menu displays information about the token (the email address associated with the name) and items that allow the user to edit the token or add its associated information to Address Book, as shown in Figure 15-73.

Figure 15-73 A token field control can display a contextual menu

Token Field Specifications

Control sizes: Token field controls fit inside the standard sizes of text input fields. The heights of token field controls are fixed for each size, and their lengths are determined by the length of the token. The height of a token field control is a few pixels less than the height of the text input field that contains it:

• Regular size: 16 pixels high.
• Small: 14 pixels high.
• Mini: 11 pixels high.

Token Field Implementation

Token field controls are available in Interface Builder. To create one using Application Kit programming interfaces, use the NSTokenField class.

Search Fields

A search field is a text field with rounded ends in which the user enters new text or modifies existing text that identifies items to search for. For example, the Finder provides a search field in its toolbar, as shown in Figure 15-74. For information on ways to provide search functionality in your application, see “Spotlight” and “Scope Bars.”

Figure 15-74 A search field in a toolbar

Search Field Usage

Use a search field to allow users to search for terms within your application. A search field supports keyboard focus, so if searching is important in your application, provide the keyboard shortcut Command-Option-F, which allows users to navigate to a search field without using the mouse.

Depending on how you implement searching functionality in your application, you can specify a search field that begins searching as soon as the user starts typing, or that begins the search when the user presses Return or Enter.

Search Field Contents and Labeling

By default, a search field displays the magnifying icon at its left edge. A search field can also contain an icon the user clicks to stop the search or clear the field. It’s appropriate to use this icon if the user has to click a button or press a key to initiate the search, especially if the search might take more than a second or two. If you use this icon, consider displaying a progress indicator for lengthy searches. The magnifying glass and stop-search icons are supplied automatically.

A search field can include a menu, but you should not use it to display search history (recent searches) for privacy reasons. Although you can use the menu to allow users to choose different types of searches or define the context or scope of a search, consider providing a scope bar in your window instead (see “Scope Bars” for more information).

A search field does not need an introductory label because users recognize this control (and the magnifying glass icon) from elsewhere in Mac OS X. If you place a search field in a toolbar, however, you should supply the label “Search” to be displayed when users customize the toolbar to show icons and text or text only.

Search Field Specifications

Control sizes: Search fields are available in regular and small sizes. The height of a search field is fixed for its size, but you decide how long the control should be. The heights for each size of search field are listed below (Figure 15-75 shows a regular-size search field):

• Regular size: 22 pixels high.
• Small: 19 pixels high.

Figure 15-75 A regular-size search field

Search Field Implementation

Search field controls are available in Interface Builder. To create one using Application Kit programming interfaces, use the NSSearchField class.

Scrolling Lists

A scrolling list is a list that uses scroll bars to reveal its contents. Users can scroll through the list without selecting anything, click an item to select it, use Shift-click to select more than one contiguous item, or use Command-click for a discontinuous selection. Users can press the arrow keys to navigate through the list and can quickly select an item by typing the first few characters. You can see this behavior in a Finder window, when the Finder is in column-view mode. Each Finder-window column behaves as a scrolling list, as shown in Figure 15-81.

Scrolling List Usage

Use a scrolling list when you need to display an arbitrarily large number of items from which users can choose. Although scrolling lists aren’t directly editable, you can provide editing functionality that allows users to provide list items you feed into the list.

Don’t use a scrolling list to provide choices in a limited range. This is because a scrolling list might not display all items at once, which can make it difficult for users to grasp the scope of their choices. If you need to display a limited range of choices, a pop-up menu (described in “Pop-Up Menus”) might be a better choice.

Scrolling List Contents and Labeling

A scrolling list can get its contents from items you supply or from users. If an item is too long to fit in the list box, insert an ellipsis in the middle and preserve the beginning and end of the item. Users often add version numbers to the end of document names, so both the beginning and end should be visible.

The background of a scrolling list can be white or white striped with blue. If the list contains a large number of items that can look similar at a glance, it might be easier for users to view them on a striped background.

In most cases, it’s a good idea to provide an introductory label for a scrolling list so users understand the types of items that are available to them. Use the regular system font for this label. The list items should be in view font (12-point Lucida Grande Regular), by default.

Scrolling List Specifications

Control sizes: You determine the size of a scrolling list. As a rule of thumb, make sure that the list displays only the full height of lines of text (don’t cut text off horizontally), and make sure that the scrolling increment is one list element.

Scrolling List Implementation

Scrolling lists are available in Interface Builder. Start with a table view object and ensure that it is sized so that only the vertical scroller is displayed. Then, in the Attributes pane of the inspector, set the number of columns to 1 and deselect the Headers checkbox. To create a scrolling list using Application Kit programming interfaces, use the NSTableView class.