Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks
On This Page

About Controls and Views

Controls are graphic objects that cause instant actions or visible results when users manipulate them. Views are UI elements that display content to users. The AppKit framework defines the controls and views you can use in your app, such as push buttons, radio buttons, text fields, table views, tab views, and popovers. Here you can see some of the controls and views (among other objects) that Interface Builder makes available in the Object library.

image: ../Art/controls_intro_2x.png

Use AppKit Controls and Views Correctly

All AppKit controls and views have a standard appearance that’s appropriate for most uses. For some AppKit controls, you can also specify an alternate appearance for use in a window-frame area or in a vibrant context, such as in a sidebar area or in a Notification Center widget. To learn more, see Some Controls Can Be Used in the Window Frame and NSVisualEffectView Class Reference.

Avoid mixing control sizes in the same view. Many controls are available in three sizes: regular, small, and mini. In most cases, use regular-size controls in your windows. When space is at a premium, such as in a panel or within a pane, you can use small or (less often) mini controls. In general, it’s best to avoid mixing different sizes of controls in the same window.

In general, avoid resizing controls vertically. Many controls can be resized horizontally, but most controls are fixed vertically for each available size. If you vertically resize some controls, you might trigger unexpected results, such as a change in control style.

Use the system font and the proper text size within a control. For example, a regular-size control generally uses the regular system font for text that appears within it, such as “OK” in a button or a menu item name in a pop-up menu. When you create your UI in Interface Builder, you automatically get the proper font and size for each standard control you use.

Use the proper spacing between controls. When controls are spaced evenly in a window, the window is more attractive and easier for users to use. The layout guides in Interface Builder show you the recommended spacing between controls and between UI elements and window edges. Using Auto Layout helps you maintain your layout when the window resizes or UI elements change size (for example, as a result of localization).

Some Controls Can Be Used in the Window Frame

A small subset of controls have a display style that makes them suitable for use in the window-frame areas (that is, in the toolbar or a bottom bar); these controls are listed in Table 35-1.

Table 35-1Control and style combinations designed for use in window-frame areas

Control (API name)

Style

Example

Round textured button (NSButton)

NSTexturedRoundedBezelStyle

image: ../Art/window_frame_round_textured_2x.png

Textured rounded segmented control (NSSegmentedControl)

NSSegmentStyleTexturedRounded

image: ../Art/window_frame_segmented1_2x.png

Textured rounded segmented control (NSSegmentedControl)

NSSegmentStyleSeparated

image: ../Art/window_frame_segmented2.pdf

Round textured pop-up menu (NSPopUpButton with PopUp attribute *)

NSTexturedRoundedBezelStyle

image: ../Art/window_frame_popup_2x.png

Round textured pop-down menu (NSPopUpButton with PopDown attribute)

NSTexturedRoundedBezelStyle

image: ../Art/window_frame_pop_down_2x.png

Search bar (NSSearchField)

Not applicable (the correct style is used automatically)

image: ../Art/window_frame_search_2x.png

*Note that you can use the NSTexturedRoundedBezelStyle style of pop-up menu to place an Action menu in a toolbar. For more information about Action menus, see Action Menu.

You can see examples of most of these types of window-frame controls in the Mail toolbar.

image: ../Art/window_frame_control_examples_2x.png

In a system that includes a Force Touch trackpad, buttons and segmented controls in a toolbar may respond to a force click by spring loading an action, such as opening a related detail view or inspector, or accelerating an operation, such as fast forward or rewind.

Don’t use the window frame–specific control styles in the window body. The control and style combinations listed Table 35-1 are specially designed to look good on the window-frame, whether it’s translucent or opaque. These control styles don't look good in the window body. In particular, these control styles can use inactive and other appearances that don't harmonize with standard control styles.

Don’t use window-body controls or styles in the window frame. All system-provided controls and styles other than those listed in Table 35-1 are designed to look good in the window body and its content regions, and should not be used in the window frame. (If you want to create a freestanding, full-color toolbar icon button, use NSToolbarItem; for additional guidelines on designing toolbars, see Toolbars.)

If your window includes a bottom bar (which is not typical), you can use window-frame controls in the bottom bar.