macOS 11 Human Interface Guidelines

What’s New in macOS

macOS 11 introduces many user interface changes that update the appearance of apps and make them more approachable to people transitioning from iPad apps. macOS 11 also adds support for familiar iOS features — such as SF Symbols and text styles — that enhance the user experience and can streamline the app design process.

When you build your app for macos 11, you’ll find that most of the updates are automatic when you use system-defined elements with SwiftUI or Auto Layout; if your app is highly customized, you may have additional work to do. As you think about updating your app for macos 11, review the following changes to help you plan your approach.

Icons and Images

macos 11 refreshes icon design throughout the system, bringing a uniform shape to app icons and a refined appearance to document icons. In addition, macos 11 introduces multipurpose feature icons that can represent items or functions in sidebars and tables.

The adoption of SF Symbols imparts a strong visual consistency to glyphs and icons throughout the system, and gives you an easy way to create images and icons that look at home everywhere. macos 11 automatically maps AppKit shared images — such as Action, Unlocked, and Share — to specific symbols. In some cases, a symbol might not have the same size or alignment as the AppKit image it replaces, so it's a good idea to check your layout.

Name SF symbol AppKit image (macOS 10.15 and earlier)
Action
Unlocked
Share

App Icons

In macos 11, the design language for app icons promotes consistency with all platforms while retaining the lifelike rendering style typical of macOS icons. App icons combine a rounded-rectangle shape, a front-facing perspective, and a consistent drop shadow to provide a unified visual experience.

Although the design language strongly encourages visual consistency, it doesn’t preclude judicious expressiveness. For example, the Preview, Xcode, and TextEdit icons continue to combine depictions of the physical objects that best convey the app’s core purpose, while incorporating the new shape, perspective, and shadow.

Document Icons

To compose a document icon, the system combines your app icon with the familiar folded-corner icon shape. If your app opens or creates a large number of document types, you can also supply a custom center image or background appearance to help people distinguish them.

Feature Icons

A feature icon can represent an item (or category of items), a technology, or a type of information in a table view or in the content sidebar of a preferences window. A feature icon typically uses the macos 11 rounded rectangle shape to contain a simple, unambiguous glyph, but it can also use custom shapes and colors. For help designing a feature icon, download the production template included in the Apple Design Resources for macOS.

App Accent Colors

In macos 11, you can specify an accent color to customize the appearance of your app’s buttons, selection highlighting, and sidebar glyphs. The system applies your accent color when the current value in General > Accent color preferences is multicolor .

If people set the Accent color preferences to a value other than multicolor, the system applies their chosen color to the relevant items throughout your app, replacing your accent color. The exception is a sidebar glyph that uses a fixed color you specify. Because a fixed-color sidebar glyph uses a specific color to provide meaning, the system doesn’t override its color when people change the value of Accent color preferences. To learn more, see.

The iCloud glyph remains teal, even when the other glyphs use orange.

Windows and Views

Throughout macos 11, windows adopt visual touches that recall iOS interfaces. For example, windows integrate the sidebar, toolbar, and content areas, use an increased corner radius, and display lightweight controls.

Toolbars and Title Bars

By default, toolbars are taller, window titles can display inline with controls, and toolbar items no longer include a bezel. The increased height and bezel-free controls combine to give macos 11 toolbars a streamlined appearance.

To match the default toolbar’s increased height, toolbar items automatically use the large control size. The exception is an integrated toolbar-title bar area — such as the one in a Safari window — which continues to use the regular control size. To accommodate the new default size, you’ll probably need to adjust the layout of your toolbar.

Finder toolbar controls in macOS 11

Finder toolbar controls in macOS 10.15

IMPORTANTContinuing to use theminSize andmaxSize APIs to set the size of a toolbar item can clip the control, because the current values don’t account for the larger default size. Use constraints if you need to specify minimum or maximum sizes for a toolbar control.

When horizontal space is limited, the toolbar can display the Search button in place of the search bar. When people click the Search button, the bar expands; when they click elsewhere in the window, the search bar collapses and the toolbar displays the button again.

In a preferences window, the toolbar can use SF Symbols to harmonize with the appearance of the main window, but the title position remains above the toolbar buttons. When needed for clarity, individual toolbar buttons can include color. To indicate the active preference pane, the window applies a system-provided selection appearance to the selected toolbar button.

If your window includes multiple panes, you can align different subsets of toolbar items with each pane, so that as people resize the window, each set of items remains above its associated view.

Sidebars

In macos 11, a sidebar (technically known as a source list ) extends to the full height of the window. Within the sidebar, default item spacing, row height, and glyph size all increase, and the selected-item highlight uses a rounded-corner appearance.

A sidebar’s row height, text, and glyph size depend on its overall size, which can be small, medium, or large. You can set the size programmatically, but users can also change it by selecting a different sidebar icon size in General preferences. The table below shows the differences in default sidebar metrics between macos 11 and previous versions of macOS.

Sidebar size Sidebar component macOS 11 (default) macOS 10.15 and earlier (default)
Small Row height 24pt 22pt
SF symbol scale Medium *
Glyph size 16pt × 16pt
Text size (style) 11pt (Subhead) 11pt
Medium Row height 28pt 24pt
SF symbol scale Medium
Glyph size 20pt × 20pt 18pt × 18pt
Text size (style) 13pt (Body) 13pt
Large Row height 32pt 32pt
SF symbol scale Medium
Glyph size 24pt × 24pt 24pt × 24pt
Text size (style) 15pt (Titl5) 13pt
All Horizontal spacing between cells 17pt 3pt
Vertical spacing between cells 0pt 2pt

*In some cases, a small sidebar may use small-scale SF Symbols by default.

Using SF Symbols is the easiest way to create sidebar glyphs that use the new metrics. Alternatively, you can use PDF template images to create sidebar glyphs; if you must use bitmap images, be sure to create them in small, medium, and large sizes, at both @1x and @2x resolutions.

By default, sidebar glyphs use the current accent color (to learn more, see). If you need to clarify the meaning of an individual sidebar glyph, you can give it a fixed color that persists regardless of the user’s Accent color preferences. Don’t use the ability to specify a fixed color to stylize your app as a whole. In macOS, people expect to see their chosen accent color throughout all the apps they use.

Table Views

In macos 11, table views are larger overall, using taller rows, a larger font size, and more space between items to increase visual separation within and around table content. macos 11 introduces three table-view styles to define different appearances that work well in specific window areas: inset, full-width, and automatic. For developer guidance, seeNSTableView.style.

The inset style adds insets to the expanded spaciousness of macos 11 tables. Because the inset style increases the visual space around the content, it works well in tables that fill the area between other views — such as sidebars and toolbars — and echoes the changes in sidebar appearance.

The classic, full-width table style remains available, but automatically includes the required content padding at the beginning and end of each row. The full-width style works best for tables that already have a visual margin around them, such as a table embedded in a preferences pane.

The automatic style means the system uses the table view’s position in the view hierarchy to help determine its appearance.

To create more spacious tables, macos 11 uses several new table-view metrics. In the diagrams that follow, you can see how the layout of a table row differs between macos 11 and macOS 10.15 and earlier.

The following table lists the values for the table-row layout areas shown above.

Table-view metric macOS 11 macOS 10.15 and earlier
Recommended row height 24pt 17pt
Minimum row height for text-only rows 18pt 17pt
Inset at leading and trailing row edges 10pt (inset style); 0pt (other styles)
Padding at leading and trailing row edges 6pt
Intercell spacing (17,0) (3,2)
Text size (style) 13pt (Body) 11pt

In addition to the values listed in the table above, inset-style tables in macos 11 also include a 10pt vertical inset before the first row and after the last row.

As you adjust the layout of your table content to follow the new metrics:

  • Make sure your icons or glyphs can fit into a 16pt × 16pt area when you use the recommended 24pt row height
  • Consider adding 6 points of space between items within a row to ensure a spacious table appearance

If you don’t update your app, the appearance of your tables doesn’t change when your app runs in macos 11. The exception is a table that implements a sidebar. If you identify the table style as a source list , the system automatically applies the new sidebar appearance. For guidance, see; for developer guidance, see NSTableView.style.sourceList .

TipIn macos 11, a table's width continues to equal the width of its rows, but the new padding and insets prevent columns and cells from covering the entire row. The system also uses the specified style to determine the space to add to row background features, like selection appearance or alternating row colors. If you need to provide content that completely covers a row — such as a custom background appearance — add it to the row instead of the cells.

Sheets

Sheets no longer unfurl from the bottom edge of the parent window’s toolbar. In macos 11, a sheet is a rounded rectangle view that floats on top of the dimmed parent window.

Alerts

Alerts are cardlike rectangles that use the same corner radius as all windows in macos 11. Within an alert, most content is center aligned.

You can also use red text to emphasize a destructive action in an alert.

Menus

macos 11 introduces visual changes to menus and menu content. If you use standard menus and menu items, you get the following default appearances automatically:

  • Menu item titles use the same 13-point font size as sidebars and window content areas.
  • Menu separator lines are 1 point thick and inset from the sides.
  • The selection highlight for a menu item is a rounded rectangle that’s inset from the edges of the menu.

Controls

Refreshed AppKit controls — such as checkboxes, pop-up buttons, push buttons, and segmented controls — emphasize simplicity and boldness, harmonizing with iOS controls while maintaining familiar appearances. When you use standard AppKit controls in your app, you shouldn’t have to adjust your interface to adopt the new appearances. The exception is the slider, which is taller.

Slider Size macOS 11 (default) macOS 10.15 and earlier (default)
Without tick marks Regular 28pt 19pt
Small 20pt 15pt
Mini 17pt 13pt
With tick marks Regular 28pt 24pt
Small 20pt 18pt
Mini 17pt 15pt
  • Without tick marks

    With tick marks

  • Without tick marks

    With tick marks

Beginning in macos 11, the track of a slider with tick marks aligns with the center of the thumb.

Typography

Beginning in macos 11, SF Pro is available as a variable font. The variable font format delivers a single package that includes the glyphs for all supported weights — such as regular, bold, and ultralight — in both uprights and italics. The variable format also supports optical sizing, which is a way to interpolate between glyphs to create size-specific versions of SF Pro to fit every design. Optical sizing replaces the need for the fixed-range Text and Display variants of SF Pro.

macos 11 also introduces support for the full range of text styles, such as body, headline, and callout. Dynamic Type is not available in macos 11. For guidance, seeTypography.

Widgets

A widget elevates a small amount of useful content from your app in a beautiful, glanceable way. In macos 11, you can create widgets in small, medium, and large sizes; people choose the size they want when they add your widget to Notification Center.

You can also create widgets for iOS and iPadOS. For guidance, seeWidgets; for developer guidance, seeWidgetKit. 11

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章