Designing for Yosemite
People love OS X because it gives them the tools and environment they need to create, manage, and experience the content they care about. A great OS X app integrates seamlessly into this environment, while at the same time providing custom functionality and a unique user experience.
Before you dive into the guidelines that help you design a great app, take a few moments to explore how OS X Yosemite uses simplicity, consistency, and depth to give users a content-focused experience.
Yosemite simplifies many parts of the user interface (UI) to emphasize core functionality. For example, app icons simplify and clarify ornamentation, while remaining gorgeous and instantly recognizable.
The system font is a specially optimized version of Helvetica Neue, which displays textual content with beauty, clarity, and sharpness.
The combined title bar and toolbar area removes clutter from the window UI without decreasing functionality.
Yosemite refreshes and refines the OS X UI, without losing the consistency that helps people feel at home in the environment.
Icon styles are freshly balanced to communicate a sense of harmony and stability.
The realistic icon style—used by Preview, Mail, Photo Booth, and Dictionary, among others—employs a consistent level of detail, perspective, light source, and rendering style.
In icons that use the round graphical style—such as those in iTunes, iBooks, App Store, and Safari—the symbols use the same embossed effect, and the overall shape and use of color are consistent.
Using an optimized version of Helvetica Neue as the system font means that both apps and the system present all text consistently. The use of Helvetica Neue also gives users a consistent experience when they switch between iOS and OS X.
Reminders in OS X
Reminders in iOS
Yosemite refines the impression of plausible, physical dimensionality in the UI. In particular, Yosemite uses translucency and vibrancy to help users focus on what’s important to them. (Vibrancy is a sophisticated blending mode that lets UI elements absorb color from content that’s underneath them.)
Drop shadows, translucency, and vibrant colors help the active window stand out so that users instantly notice it.
A translucent toolbar helps the window UI recede, letting the user’s content appear more prominent.
Sidebars and overlays can use vibrancy to defer to the user’s content in two different ways.
A sidebar that enables app-level navigation, such as the Finder sidebar, lets users see the content behind the window.
An overlay that provides selection and other controls that are focused on window content, such as the Maps Directions view, gives users a more expansive view of the window’s content.
Notification Center helps people stay anchored to their previous context by using a vibrant, dark appearance that automatically complements the desktop beneath it.
App Styles and Anatomy
Broadly speaking, there are three main styles of OS X apps:
Single-window utility. A single-window utility app, such as Calculator or Dictionary, helps users perform the primary task within one window. Although a single-window utility app might also open an additional window—such as a preferences window—the user remains focused on the main window.
Single-window “shoebox.” A single-window shoebox app tends to give users an app-specific way to view and manage their content. For example, Photos users don’t find or organize their photos in the Finder; instead, they manage their photo collections entirely within the app.
Multiwindow document-based. A multiwindow document-based app, such as Pages, opens a new window for each document the user creates or views. This style of app does not need a main window (although it might open a preferences or other auxiliary window).
Regardless of style, an OS X app presents content in one or more windows and app-specific commands in the systemwide menu bar.
The AppKit framework defines the windows, menus, controls, and other objects that you use to present your app’s UI, and it supports many app-level features, such as gesture recognition, font management, image handling, accessibility, and speech synthesis and recognition. AppKit also defines the light and dark vibrant appearances in Yosemite, in addition to a visual effect view you can use to create custom vibrant views (to learn more about this view, see
NSVisualEffectView).
Setting aside programmatic inheritance, you can think of the UI objects that AppKit provides as belonging in the following broad conceptual categories:
- Windows. A window provides the frame in which the app’s content is displayed.
- Menus. A menu, such as File, Edit, or Window, contains commands that people use to control the app.
- Content views. A content view, such as a table view, text view, or popover, displays the user’s content and can contain controls that people use to manage the content.
- Controls. People use controls, such as a buttons, sliders, and checkboxes, to provide input and perform tasks in the app.
To manage many of these UI objects programmatically, you use various types of controllers, such as a window controller, a tab view controller, or a split view controller. Typically, a window controller contains one or more view controllers, each of which manages a set of views and controls.
A storyboard is a great way to visualize the basic anatomy of an app. In a storyboard, a scene represents a controller and the views it manages, and a segue represents a relationship between two scenes. Two scenes can be related by containment (a window controller can contain a tab view controller) or by presentation (a view controller can present a popover).
Viewing an app in a storyboard makes it easy to grasp its anatomy. Here, in the storyboard for an app similar to Pages, you can see the views contained in various view controllers and the relationships between the view controllers.
Leave your comment