- Aqua (user interface)
Aqua is the
graphical user interfaceand primary visual theme of Apple Inc.'s Mac OS X operating system. It is based around the theme of water, as its name suggests,The word "aqua" is Latin for water.] with droplet-like elements and liberal use of translucency and reflection effects.
The Aqua theme and user interface was first introduced at the January 2000
Macworld Conference & Expoin San Francisco.cite press release
title=Apple Unveils Mac OS X
publisher=Apple Computer] Aqua's first appearance in a commercial product was in the July 2000 release of iMovie 2. [cite web | url=http://www.apple.com/pr/library/2000/jul/19imovie.html | title=Apple Introduces iMovie 2 | author=Apple PR | date=2000-07-19 | work=Apple.com | accessdate=2008-01-05]
Aqua design elements make up the uniform appearance of most Mac OS X applications. Its goal is to "incorporate color, depth, translucence, and complex textures into a visually appealing interface" in Mac OS X applications. [ [http://developer.apple.com/documentation/MacOSX/Conceptual/OSX_Technology_Overview/UserExperience/chapter_6_section_2.html Developer documentation on Aqua] ] Although Aqua is the entire user interface, two notable features of Aqua are gel-like buttons (such as the ones colored red, yellow, and green that control the windows), and a Dock, which facilitates the launching of and navigation between applications.
Much of Aqua's original design was intended to complement the translucent two-tone look of Apple's contemporaneous hardware, primarily the original
bondi blue iMac. In 2003 and 2004, Apple moved to the use of brushed metal in their industrial design (such as with the aluminum Apple Cinema Displays); Aqua changed accordingly, incorporating the additional brushed metal look while deemphasizing the pinstripe backgrounds and transparency effects. In recent years, however, the brushed metal look has also been abandoned, in favor of white semi-reflective plastic, similar to the industrial design of the original iPod. This somewhat inconsistent mix of interface styles has been controversial among the Mac OS X user community. Apple replaced these inconsistent window themes with the introduction of Mac OS X Leopard.
Up until Mac OS X Leopard, each successive release of Mac OS X brought a new “Aqua Blue” wallpaper. It should be noted that in recent releases of OS X, the focus on traditional interface elements, such as drawers, has generally moved to alternative innovations such as movable palettes and inspectors. In general, there has also been a move towards using sidebars, which now appear in many Apple applications; in addition, there are more contextual interface elements and full-screen interfaces in many applications.
The graphical design "fashion" of the various Aqua widgets over time are said by somewho to closely mirror, or draw upon the popularity of design elements in the graphical design, or application skinning world. Notably the Aqua menu bar was seen sporting elements from Max Rudberg's Milk theme in 10.3 Panther. In 10.4 Tiger the glossy look of the menu bar closely resembled Smoothstripes released in 2004, and finally 10.5 Leopard's flatter design of the menu bar mimicked the various Plastic Pro "flat plastic" styled themes that originated in theming communities in the years after Smoothstripes.
Jaguar brought with it flatter interface elements, such as new buttons and drop-down menus, as well as reducing the transparency to tone down the pinstripes in windows and menus. These trends would continue in further Mac OS X releases.
In Mac OS X Panther, brushed metal was fused to the heart of the Macintosh: the Finder. New buttons were made to appear sunken into their surroundings, following a general trend of more flattened interface elements in the operating system. The traditional pinstripes were replaced with a much subtler "milk" theme, most notably in the
menu bar, and the use of transparency was again reduced (for example in the title bars of inactive windows). Tabs also changed; they were made flatter and the whole tab area was sunken rather than raised. Tab buttons were centered on the top border of the tab area. New icons appeared across the system, including a new flatter, glossier Finder icon and a new System Preferences icon.
Tiger brought more subtle changes, including the Unified titlebar scheme. [ [http://developer.apple.com/qa/qa2005/qa1423.html Developer document on Unified] ] Pinstripes were now removed from the menu bar entirely, replaced with a new glossy look. Tabs were altered to appear as normal buttons. The Apple menu icon was toned down to a more matte appearance and the new Spotlight search utility is permanently bound to the very right of the menu bar in the same color and gradient of the Apple menu.
In Leopard, several changes have been made to the user interface. The Dock was made to look more three dimensional, with a reflective “floor” for icons to sit on and icon labels having a semi-transparent background. Active applications are no longer indicated by a black triangle, but now by a glowing blue ball. The dividing line between applications and other Dock items now resembles a
pedestrian crossinginstead of a simple line. The dock is reflective of all elements on the screen except for the mouse cursor. “Stacks” are groups of files which can be stored in the Dock, and fan out when clicked.The Dock is black translucent with a white border and rounded corners when placed on the sides, but it retains a 2D form of its new dividing line. The 2D form can also be brought to the default (bottom) Dock position with third-party tweaking utilities.
menu barat the top of the screen now has the option of being semi-transparent, a feature only available on the IntelMacs and PowerPCG5's and some of the PowerPCG4's. Contextual Menus are now all rounded (only slightly, like the corners of windows).
The drop shadow of the active window is now greatly enlarged for emphasis. Inactive windows are less prominent for greater contrast between active and inactive windows. Title bars are a darker shade of grey, and all toolbars now use a darker “Unified” scheme. Brushed metal is no longer present, and has been replaced instead by a white “plastic” gradient scheme. Many windows now have minimal borders or none at all.
Pinstripes in window backgrounds have now been completely removed. Sheets are now semi-transparent as well as blurring the area behind them for greater legibility.
Numerous icons have been changed, including a set of new folder icons, a new System Preferences icon and an updated Terminal icon, and all main icons have been redrawn in a high-resolution 512-by-512 size for sharper viewing in
Quick Lookand Cover Flow.
The default background image has also been changed to a purple aurora superimposed over a
starfield instead of the previous aqua-blue themes in prior versions of OS X.
The Aqua theme has also been embedded in applications made by Apple for use in
Microsoft Windowssuch as iTunes, QuickTime, and the Safari web browser. iTunes for Windows, which has the exact same theme as the Mac OS X version, also includes Cover Flow, which is incorporated into Leopard. The Windows version of Safari includes a functional Aqua scrollbar, as well as sheet dialogs very similar to those in Mac OS X.
White and blue are two principal colors which define the Aqua style. Title bars, window backgrounds, buttons, menus and other interface elements are all found in white, and some, like scrollbars and menu items, are accented with a shade of blue. Most of the interface elements have a "glass" or "gel" effect applied to them; for instance,
David Poguedescribed the original Aqua scrollbars as "lickable globs of Crest Berrylicious Toothpaste Gel".cite book
last = Pogue
first = David
authorlink = David Pogue
title = Macs for Dummies, 7th Edition
publisher = Hungry Minds
pages = 340
id = ISBN 0-7645-0703-6]
Below, all Mac OS X Cocoa interface elements ('controls') and their
NEXTSTEPclass name are given. Most of the controls are available in three sizes: regular, small and mini.
Both the standard Aqua-themed pinstriped windows (NSWindow) and the brushed metal windows appear to have the title bar buttons sunken into the window, however in versions of Mac OS X prior to 10.2, the buttons appeared to be on top of the pinstriped windows. Brushed metal windows also have more plastic-like buttons. Mac OS X also allows users to choose a Graphite version instead of a Blue version of the interface. (In Graphite, window controls appear silverish-grey instead of red, yellow, and green.)
Toolbars, defined as NSToolbar, are available in two types: standard or unified. Standard retains the normal Aqua title bar and simply places a row of icons below it, whilst the unified look extends the title bar downwards and places icons on top of it, as if the window has one large title bar.
Sheets, which are
modal windows, are also defined as NSWindow. When opened, they are thrusted towards the user like a sheet of paper, hence the name. They are partially transparent and focus attention on the content of the sheet. The parent window's controls are disabled until the sheet is dismissed, but the user is able to continue work in other windows (including those in the same application) whilst the sheet is open.
Menus are backed with a slightly translucent solid gray, and when menu items are highlighted they appear blue. In application menus, which run in a single bar across the top of the
screen, keyboard shortcuts appear to the right-hand side of the menu whilst the actual menu item is on the left.
Drop down menus for use in windows themselves (NSPopUpButton) are also available in several varieties. The standard "pop up" menu is white with a blue end cap with opposing arrows, whilst 'pull down' menus only have one downward facing arrow in the end cap. 'Pull down' menus are available four different Aqua varieties, most of which have fallen into disuse with subsequent Mac OS X releases.
Text boxes and fields
Text boxes are black on white text with a sunken effect border, and are classed as NSTextField. In addition to regular square text boxes, rounded search text boxes are available (NSSearchField). For more extensive text requirements, NSTextView provides a larger, multi-line text field. A combined text box and pull down menu is available, NSComboBox, which allows the user to type in a value in addition to choosing from a menu. NSDatePicker is a combination textbox and picker control, which allows the user to type in a date and time or edit it with directional buttons. NSTokenField was introduced with
Mac OS X v10.4, and allows the user to drag non-editable 'tokens' to a text box, between which text can be typed.
Standard push buttons with rounded corners are available in two varieties: white and blue. A blue button is the default action, and will appear to "pulse" to prompt the user to carry out that action. The action of a blue button can usually also be invoked with the
return key. White buttons are usually associated with all other actions.
Also available are rounded bevel buttons, designed to hold an icon; standard square buttons; glass square buttons and round buttons. In addition, circular, purple
online helpbuttons are available which display help relative to the current task when clicked. All types of button are classed as NSButton. Disclosure triangles, although technically buttons, allow views of controls to be shown and hidden to preserve space.
Checkboxes and radio buttons
In Mac OS X, empty check boxes are small, white rounded rectangles. When they are checked, they turn blue and a check is present. They are defined as NSButtons, in essence they are buttons which can be toggled on or off. Radio buttons are similar in appearance and behaviour except they are circular and contain a dot instead of a check. Radio button groups are defined as NSMatrices containing radio buttons defined as NSButtons.
Tables and lists
Tables and lists can be broadly categorised in three ways: NSTableView, a standard multi-columnar table with space to enter values or place other interface elements such as buttons; NSOutlineView, which is the same as NSTableView except it can contain disclosure triangles to show and hide sets of data; and NSBrowser, akin to the column view in the Finder. All table views can use alternating blue and white row backgrounds.
Two main types of progress indicator are available: a progress bar or a spinning wheel (not the "beachball" wait cursor). Both are defined as NSProgressIndicator. The progress bar itself is available in two varieties: indeterminate, which simply shows diagonal blue and white stripes in animation with no measure of progress; or determinate, which shows a blue pulsing bar against a white background proportional to the percentage of a task completed. The spinning wheel indicator, also found in the Mac OS X startup screen, is simply a series of lines of various tones arranged in a circle spinning, like the side view of a rotating spoked wheel. Many other interfaces have adopted this device, including the
Firefoxweb browser and many web sites.
Sliders are available in three types: one with tick marks and a triangular scrubber, one with a round scrubber and no tick marks and a circular slider which can be rotated. All are defined as NSSlider, and are available horizontally or vertically. The circular slider is simply a gray dot on a white circle which can be rotated to set values.
Mac OS X has a standard control for picking colors, NSColorWell, which appears as a regular square button with a color sample in the middle. When clicked, it shows the standard Mac OS X color palette.
Tab views (NSTabView) in Mac OS X appear to be sunken into the window, and are shaded darker and darker each time a new tab view is added inside another. The tabs appear in a row along the top of the sunken area, and are simply a series of white toggle buttons. The currently selected tab is blue. NSBox is a similar control, used to group interface elements, and uses the same sunken appearance, except without tabs. Image "wells" are also available (NSImageView), a small, sunken container into which image files can be dropped.
Apple uses the
Lucida Grandefont as the standard system font in various sizes and weights. Some areas of the operating system use another font, Helvetica. Mac OS X makes use of system-wide font anti-aliasingto make edges appear smoother.
Aqua makes heavy use of
animation. Examples include:
iconsbounce up and down as their corresponding applications are launched.
* Dock icons also bounce up and down, in a different rhythm, when a background application requires the user's attention.
* Dock icons increase in size when approached by the cursor. This feature (called "magnification") is optional.
* When minimized, windows are "sucked" into the Dock using the "Genie effect" or "Scale effect." Both of the effects are customizable by the user. The former makes a window turn into a curvy shape so it looks like reverse animation of a genie exiting a lamp, and the latter scales down the window until it is small enough to be in the dock. Using the
shift key, both effects can be seen in slow motion. These keystrokes can also be applied to other Aqua effects such as Dashboard, Exposé and Front Row. Holding control as well as shift makes the minimize effect take twice as long as just holding shift. There is another undocumented effect called "Suck" which can be enabled by hand editing a configuration file. [http://osxdaily.com/2007/04/12/change-the-minimize-effect-in-mac-os-x/]
* When a folder on the desktop is opened or closed, the corresponding Finder window appears to come from, or disappears into, the folder icon.
* Sheets are "posted" out of Metal, Unified or Leopard window title bars. A dark rectangular slot is drawn on the window so it appears that a dialog box is in fact a sheet of paper being thrust towards the user.
* Dashboard widgets appear with a "ripple" effect, as if being dropped onto the surface of a
pond. When removed, Widgets are sucked into the close button as if being drawn into a vacuum.
* The contents of a stack will appear to spring out from behind the icon when clicked.
* In the Public Beta of Mac OS X, docked items dragged on to the desktop simply appeared to 'drop' on to the desktop. This behaviour was changed with
Mac OS X 10.0; from this release onward items dragged off the dock would 'disappear' in a cartoon-like puff of smoke, an effect which is used in various places in the system (such as Safari's Bookmarks Bar and iPhoto's tag removal).
Many of these effects can be turned off by the user or are only available on supporting hardware.
ystem integration and standardization
There are a series of Mac OS X features which are standardized across the operating system to make the system more accessible, so the user does not have to learn multiple ways of doing the same thing. Included amongst these features are:
* Services menu - found in the application menu of most applications, which gives the user access to features of other applications
* Palettes - Many palettes are repeated across the system, including:
** Color - The Mac OS X color picker includes multiple ways of choosing colors, including a color wheel, sliders, a wax crayon view, and a "magnifying glass" to select a color from anywhere on the screen
** Fonts - The Mac OS X font picker gives the user access to advanced typography features like ligatures and shadows in any program which allows the formatting of text,
** Character Palette - Found as "Special Characters" in the Edit menus of most applications, allows the user to insert characters they are unable to insert with the keyboard
* Open, Save and Print dialogs - Standard in many applications, and usually use a sheet view
Aqua is powered by the
Quartz Compositor, the Mac OS X window server.
Apple has threatened legal action against those who made themes similar to their
look and feel.
In particular, the use of various
Object Desktopcomponents created by Stardockcame under fire:
WindowBlindsskins [" [http://www.theregister.co.uk/2000/01/14/windows_skin_site_reposts_macos/ Windows skin site re-posts Mac OS X desktop theme] ", " The Register", 14 January 2000.]
DesktopXthemes [" [http://www.theregister.co.uk/2001/02/02/apple_rattles_lawyers_at_desktopx/ Apple rattles lawyers at DesktopX over Aqua] ", "The Register", 2 February 2001.]
IconPackagerpackages that contained Aqua-style icons
Despite accepting (for the most part) Apple's right to their copyrighted artwork, the skinning community took exception to their heavy-handed actions against all Aqua lookalikes;
Stardock's Brad Wardellcontrasted the company's litigious approach with Microsoft's approach to incorporating third-party skins into Windows XP. [cite web
title=Microsoft blesses XP skins
date=September 20, 2001
* [http://developer.apple.com/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGIntro/chapter_1_section_1.html Apple Mac OS X Aqua Human Interface Guidelines]
* [http://www.aquataskforce.com Long Zheng's Aqua Taskforce] - Find, publish and rate user experience "quirks" in Mac OS X
* [http://www.nrkn.com/aqua/ nrkn.com — Making Mac OS X Aqua-style Buttons]
* [http://daringfireball.net/2004/10/does_brushed_metal_matter Does This Brushed Metal Stuff Really Even Matter?] – a discussion of brushed metal and Aqua
* [http://www.pdbuchan.com/tutorials/aquabutton/aquabutton.html Photoshop 6 Aqua Button Tutorial] - David Buchan's aqua button tutorial for Photoshop 6
Wikimedia Foundation. 2010.