OpenStep User Interface Guidelines
只搜寻这本书
以 PDF 格式下载本书

A Visual Guide to the User Interface

1

This chapter illustrates the different types of windows and controls supplied in the App Kit. Besides showing you what these interface objects look like, it includes some general remarks about the way each object is typically used. Extended discussions of object behavior and hints for creating custom objects are available in Chapters 3 through 7.
OpenStep Workspacepage 1-1
Types of Windowspage 1-3
Types of Controlspage 1-8

OpenStep Workspace

The following design principles were established before the OpenStep interface was designed:
  • The "look and feel" should be consistent across applications, so that interface objects can provide cues that guide users in their interactions with OpenStep. Objects should have consistent and reasonable responses to user actions.
  • The mouse should be the user's primary input device.
  • Colors should be used effectively--the OpenStep color scheme makes extensive use of black, white, and grays to outline the interface objects, but uses full color to accent and enhance them.
  • The overall appearance should be simple and easy to understand, with shading that gives a three-dimensional effect.
The basic interface objects, such as windows and menus, were designed to conform to these principles. The appearance and behavior of each object was carefully planned, so that they would work together as a whole.

图形

Figure 1-1

Figure 1-1 is a typical view of the OpenStep interface in use, with a number of interface objects working together in the user's workspace. Two applications (File Viewer and Edit) are represented by standard windows. Edit also has a menu and a panel open. Other applications are running, but they are only represented by their application icons and, in some cases, miniaturized windows known as miniwindows.
Although many applications can run at once, only one can be active. The active application is the one that accepts user input, such as typing and mouse clicks. Users can tell which application is active by looking at the menu displayed in the upper left of the screen; it is always the menu for the active application. In Figure 1-1, the active application is Edit.

Types of Windows

As shown in Figure 1-1, three type of windows are used to make application features available to your users: standard windows, panels, and menus. Two other kinds of windows, application icons and miniwindows, appear in the workspace, but these do not make any application features available.
The active application always has at least one standard window or panel open. When it has more than one open standard window or a combination of standard windows and panels, one window will be the key window, which accepts user typing. The key window is identified by its black title bar. In Figure 1-1, the key window is the Find panel. (The key window is covered in greater detail in "Application and Window Status" in Chapter 4.)

Standard Windows

The parts of a standard window are shown in Figure 1-2. Not every standard window needs every part. The File Viewer window, for example, has no close button, which prevents beginning users from accidentally closing a window they need to use their computers. You decide which parts to include in the standard windows you create.

图形

Figure 1-2

More information about the appearance of windows in general, and standard windows in particular, can be found in Chapter 4, "Windows in the OpenStep Interface."

Panels

Panels can look just like standard windows, but they have different roles in the interface. They let users perform secondary functions that support the work they are doing in standard windows. In text editors, for example, standard windows display the documents users are editing, and panels are opened when the application needs to obtain information for print, save, search, and other commands.

图形

Figure 1-3

The Font Panel in Figure 1-3 is an ordinary panel. When an ordinary panel is open, users can move from the panel to any other window (including panels) of the active application.
In some situations the application must get the user's undivided attention--when, for example, the user must confirm a possibly destructive command. Attention panels were designed for these situations. When an attention panel is open, the user cannot move to any other window in the application or issue any application commands. (It is possible to move to another application.) Because attention panels are different than ordinary panels, they look different, as shown in Figure 1-4.

图形

Figure 1-4

The App Kit supplies a number of commonly used panels (including the two illustrated in this section) complete with text and controls. You can use them without building them yourself. Using standard panels also helps your users, because they have less to learn in a new application. Chapter 5, "Panels," contains information about using standard panels and creating application-specific panels.

Menus

Menus give users access to all of an application's features. Users should be able to look at the menu commands in an OpenStep application and get a good idea of what it does. As shown in Figure 1-5, menu commands are grouped into a main menu and its submenus.

图形

Figure 1-5

Users can always choose menu commands with the mouse. In some cases a keyboard alternative --combination of keys that can be used instead of a mouse click--may benefit them. To choose a command from the keyboard, users hold down the Command key and type the character shown in the menu command. For example, to quit an application, the user can either click on the Quit menu command or hold down the Command key and press "q." "Implementing Keyboard Alternatives" in Chapter 3, covers keyboard alternatives in more detail.
The appearance of the main menu and a number of frequently used submenus (File, Edit, Info, for example) have been standardized. These menus should have generally the same commands, in the same order, in any application Chapter 6, "Menus," describes the standard menus and commands, and gives guidelines on creating application-specific menus and commands.

Miniwindows

When a user clicks on a window's miniaturize button (the left button in its title bar), the window shrinks down to become a miniwindow, as shown in Figure 1-6. To get the full-size window again, the user double-clicks on the miniwindow.

图形

Figure 1-6

Application Icons

Running applications are represented on the screen by icons. Users can start applications by simply double-clicking on the right icon.
Application icons can be freestanding or docked. Docked icons line up along the right edge of the screen. They stay in the dock even when the applications they represent are not running, making it easy for users to locate the icons, double-click them, and start up the applications. Freestanding icons appear in the workspace after users start applications from the File Viewer, and they disappear when users quit those applications. Users can customize their environment by dragging application icons into and out of the application dock.

图形

Figure 1-7

The dock varies the appearance of docked icons to indicate application status. Three small dots (similar to an ellipsis) in the lower left corner of a docked icon indicate the application is not running. The dots disappear when the application is started up. During start-up, the icon is highlighted. These changes are illustrated in Figure 1-7.

Types of Controls

Controls are interface objects that appear on windows and let users give information to an application or start its next action. Controls usually appear on panels or menus, although they can appear on standard windows. Figure 1-8 shows some of the controls supplied in the App Kit. (Menu commands are actually controls, but they are covered separately, in "Menus" earlier in this chapter.)

图形

Figure 1-8

The following sections contain some general observations about using each type of control supplied in the App Kit and show some of the variations in appearance that are possible. Chapter 7, "Controls," covers the behavior of App Kit controls in detail and discusses creating your own control types.

Buttons

Buttons are most often used to start an action or set a state. Buttons that initiate actions tend to be simple in appearance, such as those in Figure 1-9.

图形

Figure 1-9

Among the buttons that initiate actions are those that open pull-down lists. See Figure 1-10. A pull-down list combines a button and a menu-like list. The button opens the list, and the user chooses an item to initiate an action. For example:

图形

Figure 1-10

Buttons that set a state tend to be more complex in appearance. Some typical state buttons are shown in Figure 1-11.

图形

Figure 1-11

Pop-up lists, like pull-down lists, combine a button and a list. The button opens the list and users can choose an item to set its state. Unlike a pull-down list button, the title on a pop-up list button will change to display the current state (such as "Centimeters" in Figure 1-12).

图形

Text Fields

Text fields let users enter textual data by typing on the keyboard. The application can work with the data as soon as the user presses Return or clicks on an action button associated with the text field. Whenever possible, the tab key should let users move to the next text field. Figure 1-13 shows three text fields.

图形

Figure 1-13

Sliders

Sliders set values somewhere between minimum and maximum values you determine when you create the slider. Users can change the value by dragging the slider's knob. Refer to Figure 1-14.

图形

Figure 1-14

Color Wells

Color wells, shown in Figure 1-15, let users set the colors of interface objects or lines they are using in drawings. Applications often display a set of color wells on a dialog, with predefined colors, from which the user can choose. Frequently one color is chosen for the outline of a graphical object and another for its fill. Users can change the colors available from color wells by dragging in a color from another well, or by clicking on the well's border, which opens the color selection panel.

图形

Scrollers

Scrollers let users move documents in the display area by dragging the knob or pressing the arrow buttons. (Alt-clicking on the arrow buttons scrolls by a screenfull.) Figure 1-16 shows a typical scrolling display area, with vertical and horizontal scrollers.

图形

Figure 1-16

Browsers and Selection Lists

Browsers are used to show lists of items when there are hierarchical relationships between the items. The names of folders and files are typical of the information displayed in browsers. Users can move up and down a hierarchy represented in a browser by clicking on items that include the arrow symbol

Internal bitmap(12x12)

. Selection lists resemble browsers, but show only one level of items.
In both browsers and selection lists, users can select items by clicking on them. Figure 1-17 shows a typical browser and a selection list.

图形

Figure 1-17