Введение
Пользовательский интерфейс macOS от Apple. Aqua — это графический пользовательский интерфейс, язык дизайна и визуальный стиль операционных систем Apple macOS и iOS. Изначально он был основан на теме воды, с элементами, напоминающими капли, и активным использованием эффектов отражения и полупрозрачности. Его задача — "включить цвет, глубину, прозрачность и сложные текстуры в визуально привлекательный интерфейс" приложений macOS. При его представлении Стив Джобс заметил: «Он как жидкость, одна из целей дизайна заключалась в том, чтобы, увидев его, захотелось лизнуть». Aqua впервые была представлена на конференции Macworld Conference & Expo 2000 года в Сан-Франциско. Её первое появление в коммерческом продукте состоялось в июле 2000 года с выпуском iMovie 2, а затем в Mac OS X 10.0 в следующем году. Aqua является преемником Platinum, который использовался в Mac OS 8, Mac OS 9 и разработческих версиях Rhapsody (включая Mac OS X Server 1.2). Внешний вид Aqua неоднократно менялся с годами, наиболее заметно и кардинально — с выпуском macOS Big Sur в 2020 году, который Apple называет «самым масштабным обновлением дизайна со времён появления Mac OS X».
Aqua is the graphical user interface, design language and visual theme of Apple's macOS and iOS operating systems. It was originally based on the theme of water, with droplet like components and a liberal use of reflection effects and translucency. Its goal is to "incorporate color, depth, translucence, and complex textures into a visually appealing interface" in macOS applications. At its introduction, Steve Jobs noted that " it's liquid, one of the design goals was when you saw it you wanted to lick it". Aqua was first introduced at the 2000 Macworld Conference & Expo in San Francisco. Its first appearance in a commercial product was in the July 2000 release of iMovie 2, followed by Mac OS X 10.0 the following year. Aqua is the successor to Platinum, which was used in Mac OS 8, Mac OS 9, and developer releases of Rhapsody (including Mac OS X Server 1.2). The appearance of Aqua has changed frequently over the years, most recently and drastically with the release of macOS Big Sur in 2020 which Apple calls the "biggest design upgrade since the introduction of Mac OS X."
Предыстория
В течение многих лет Apple безуспешно пыталась создать операционную систему Mac OS следующего поколения, включая проекты с кодовыми названиями Pink, Taligent и Copland. Mac OS X в конечном итоге была создана на базе NeXTSTEP, после того как Apple приобрела NeXT, а её генеральный директор Стив Джобс вернулся в Apple, компанию, которую он соосновал. Ранние версии Mac OS X, известные как Rhapsody, представляли собой версию для разработчиков с временным пользовательским интерфейсом, сочетавшим элементы "Platinum" из MacOS 8 и OpenStep. От подхода Rhapsody в конечном итоге отказались, и в 1998 году новая операционная система получила название Mac OS X. Финальный интерфейс операционной системы, Aqua, был представлен на выставке Macworld Expo в январе 2000 года.
Элементы дизайна
В стиле Aqua используются синий, белый и серый цвета как основные цвета во всем оформлении. Строки инструментов окон, фоны окон, кнопки, меню и другие элементы интерфейса выполнены в этих цветах. Например, панели инструментов и боковые панели часто имеют серый или металлический оттенок, фоны окон и всплывающие меню – белые, а кнопки (в более ранних версиях системы также ползунки полос прокрутки) выделены ярким синим цветом. В версиях OS X до OS X Yosemite к большинству элементов управления применялся эффект "стекла" или "геля". Дэвид Погю описал этот эффект как "аппетитные капли геля зубной пасты Crest Berrylicious". macOS предлагает немного встроенных возможностей для изменения общего внешнего вида системы. Пользователи могут выбрать графитовую тему вместо синей по умолчанию. При использовании графитовой темы элементы управления приобретают цвет шифера, серо-голубой или серый оттенок, включая основные элементы управления окном, которые в стандартной теме имеют красный, желтый и зеленый цвета. Эта опция была добавлена по просьбе разработчиков и пользователей, которым синяя тема казалась слишком яркой или непрофессиональной. OS X Yosemite представила темный режим, который затемняет преимущественно белую панель меню и Dock. Пользователи также могут свободно выбирать цвет выделения текста и файлов.
Окна
Исторически, в Aqua было два дизайна окон: окна Aqua по умолчанию и окна «металлический блеск». Окна Aqua обычно имеют металлическую или серую панель заголовка с тремя кнопками на левой стороне (для закрытия, сворачивания и масштабирования или перехода в полноэкранный режим). Визуально эти кнопки изначально располагались сверху, но позже казались углубленными в окно. Окна Aqua практически не имеют рамки или внешней границы, вместо этого используются тени для отделения и различия активных и неактивных окон. Эстетика фонов окон изменилась от полосатых к белым. Окна «металлический блеск» имели толстую рамку с металлической текстурой или темно-серым фоном и углубленными кнопками и внутренними рамками. Они также обладали свойством перетаскиваться в любой точке рамки, а не только в панели заголовка и панели инструментов. Apple рекомендовала использовать окна «металлический блеск» для приложений, имитирующих реальные устройства (например, iTunes) или предназначенных для взаимодействия с ними (например, iSync), но подверглась критике со стороны дизайнеров за несоблюдение собственных рекомендаций или их непоследовательное применение (они также использовались в Safari или Finder). Окна «металлический блеск» в значительной степени устарели с момента выхода Leopard и стали визуально неотличимыми от окон Aqua. Листы — это диалоговые окна, модальные для конкретного окна. При открытии они выдвигаются к пользователю, как лист бумаги, отсюда и название. Они частично прозрачны и привлекают внимание к содержимому листа. Элементы управления родительского окна отключаются до закрытия листа, но пользователь может продолжать работу в других окнах (включая те, что в том же приложении) во время отображения листа.
Меню
Меню имеют слегка прозрачный серый фон, а при выделении элементы меню становятся синими. В меню приложений, расположенных в виде одной строки в верхней части экрана, клавиатурные сочетания отображаются справа от названия пункта меню, а сам пункт – слева. В Yosemite меню гораздо более прозрачные и имеют эффект размытия. Также доступны различные варианты выпадающих меню для использования непосредственно в окнах. Стандартное всплывающее меню белое с синим индикатором и стрелками, направленными в противоположные стороны, а меню «выпадающее» имеет только одну стрелку, направленную вниз, в индикаторе. Меню «выпадающее» доступно в четырех вариантах оформления Aqua, большинство из которых устарели в более поздних версиях macOS.
Текстовые поля и поля
Текстовые поля черные, текст в них белый, с границей, создающей эффект углубления. Помимо стандартных прямоугольных текстовых полей, доступны округленные поля для поиска. Для ввода больших объемов текста предусмотрено многострочное текстовое поле. Также доступно комбинированное текстовое поле и выпадающее меню, позволяющее пользователю вводить значение вручную или выбирать из списка. Существует также комбинация текстового поля и элемента выбора даты и времени, позволяющая вводить дату и время или редактировать их с помощью кнопок навигации. В Mac OS X 10.4 был представлен новый элемент интерфейса, позволяющий пользователю перетаскивать нередактируемые "токены" в текстовое поле, между которыми можно вводить текст. Пробелы до и после токенов автоматически удаляются.
Нажимать на кнопку
Стандартные кнопки с закругленными углами доступны в двух вариантах: белые и синие. Синяя кнопка является кнопкой действия по умолчанию, и в версиях ОС до Yosemite она подсвечивалась пульсацией, чтобы побудить пользователя выполнить это действие. Действие синей кнопки обычно также можно выполнить, нажав клавишу Return. Белые кнопки обычно используются для всех остальных действий. Также доступны кнопки с закругленным скосом, предназначенные для отображения иконки; стандартные квадратные кнопки; квадратные кнопки из стекла и круглые кнопки. Кроме того, доступны круглые фиолетовые кнопки онлайн-справки, которые при нажатии отображают справку по текущей задаче. Треугольники раскрытия, хотя технически и являются кнопками, позволяют показывать и скрывать элементы управления, чтобы экономить место.
Кнопки отметки и радиокнопки
В macOS пустые флажки — это маленькие белые прямоугольники со скругленными углами. При установке флажка они становятся синими и появляется галочка. По сути, это кнопки, которые можно включать или выключать. Радиокнопки похожи по внешнему виду и поведению, за исключением того, что они круглые и содержат точку вместо галочки. Радиокнопки объединяются в группы, из которых одновременно может быть выбрана только одна. В Yosemite была добавлена короткая анимация, показывающая процесс заполнения флажка или радиокнопки.
Таблицы и списки
Таблицы и списки можно классифицировать тремя основными способами: стандартная многоколоночная таблица с местом для ввода значений или размещения других элементов интерфейса, таких как кнопки; представление в виде структуры, которое может содержать треугольники раскрытия/сворачивания для отображения и скрытия наборов данных; и представление столбцами Миллера, аналогичное представлению столбцов в Finder. Все представления таблиц могут использовать чередующиеся синие и белые фоны строк.
Показатели прогресса
Существует два основных типа индикатора выполнения: полоса прогресса или монохромный вращающийся элемент (не спиннер в виде курсора). Сама полоса прогресса доступна в двух вариантах: неопределённая, которая просто показывает анимированные диагональные сине-белые полосы без индикации прогресса; или определённая, которая отображает пульсирующую синюю полосу на белом фоне, пропорциональную проценту завершённой задачи. Индикатор вращающегося колеса, впервые появившийся на экране загрузки Mac OS X в версии 10.2, представляет собой последовательность из 12 серых линий, постепенно темнеющих к центру, расположенных по кругу, напоминая вид спицованного колеса, вращающегося по часовой стрелке. Многие другие интерфейсы переняли этот элемент, включая веб-браузеры Firefox и Camino, а также множество веб-сайтов, выполненных в стиле Web 2.0. В Yosemite полоса прогресса была изменена на тонкую, светло-серую. Неопределённый вариант сохранил пульсацию, но более медленную и растянутую по времени. Теперь индикатор выполнения отображается во время загрузки, заменяя вращающийся элемент, использовавшийся в предыдущих версиях.
Разное
Слайдеры доступны в трех типах: с метками и треугольным ползунком, с круглым ползунком и без меток, и круговой слайдер, который можно вращать. Все они могут быть расположены горизонтально или вертикально. Круговой слайдер представляет собой просто серую точку на белом круге, которую можно вращать для установки значений. В macOS есть стандартный элемент управления для выбора цветов, который выглядит как обычная квадратная кнопка с образцом цвета в центре. При нажатии на него отображается стандартная цветовая палитра macOS. Вкладки в macOS почти идентичны кнопкам, при этом невыбранные вкладки белые, а выбранная вкладка – синяя. Также доступны "ячейки" для изображений: небольшой углубленный контейнер, в который можно перетаскивать файлы изображений. Когда ячейка содержит изображение, она может отображать миниатюрное представление содержимого файла.
Шрифты
Apple использовала Lucida Grande в качестве системного шрифта от первой версии Cheetah до Mavericks. Иногда Apple также использовала Helvetica и Helvetica Neue, например, в приложениях Mail и iPhoto. Системный шрифт был изменен на Helvetica Neue в Yosemite и снова в El Capitan на собственный шрифт Apple San Francisco. macOS использует антиалиасинг шрифтов для всей системы, чтобы сгладить края и сохранить узнаваемые формы шрифтов, иногда в ущерб четкости и ясности.
Анимации
Aqua активно использует анимацию. Примеры включают: иконки в Dock подпрыгивают вверх и вниз при запуске соответствующих приложений. Иконки Dock также подпрыгивают в другом ритме, когда фоновое приложение требует внимания пользователя. Иконки Dock могут увеличиваться в размере при приближении курсора. Эта функция (называемая «увеличением») является необязательной. При минимизации окна «втягиваются» в Dock с помощью эффекта «Джин» или «Масштабирования». Оба эффекта настраиваются пользователем. Первый превращает окно в изогнутую форму, имитируя обратную анимацию джина, выходящего из лампы, а второй уменьшает окно, пока оно не станет достаточно маленьким для Dock. При нажатии клавиши Shift оба эффекта можно увидеть в замедленном режиме. Эти сочетания клавиш также применимы к другим эффектам Aqua, таким как Dashboard, Mission Control и Front Row. При удержании клавиш Control и Shift эффект минимизации занимает вдвое больше времени, чем при удержании только Shift. Удержание только Control слегка замедляет анимацию. Существует также неофициальный эффект Dock под названием «Всасывание», который можно включить, вручную отредактировав файл конфигурации или используя команду в Terminal; он, по-видимому, идентичен эффекту, сопровождающему удаление виджетов из Dashboard. При открытии или закрытии папки на рабочем столе окно Finder, кажется, появляется из иконки папки или исчезает в ней, а не возникает из ниоткуда. Этот эффект присутствовал в Finder Classic Mac OS под названием ZoomRects, но был удален из ранних версий для разработчиков Mac OS X. Листы «выдвигаются» из-под заголовков окон. Листы выглядят как листы бумаги, которые толкают к пользователю или выскальзывают, как из лотка. Виджеты Dashboard, кажется, прилетают на экран. Виджеты Dashboard появляются с эффектом «ряби», как будто падают на поверхность пруда. При удалении виджеты всасываются в кнопку закрытия, как будто их затягивает в вакуум. Этот эффект также можно применить к окнам, минимизируемым в Dock. Panther также отличался более широким использованием стиля «Металлизированная поверхность», особенно в Finder и веб-браузере Safari. «Металлизированная поверхность» впервые появилась в QuickTime Player 4.0 в 1999 году. В Руководстве по дизайну интерфейсов Apple указано, что интерфейс в стиле «Металлизированная поверхность» следует использовать для программ, имитирующих работу или интерфейс реальных устройств (скеуморфизм). Mac OS X Tiger принесла более тонкие изменения, включая унифицированную панель заголовков. Полосы были полностью удалены из меню и заменены глянцевым белым оформлением. Вкладки были изменены, чтобы выглядеть как обычные сегментированные кнопки. Иконка меню Apple стала более матовой, а новая утилита Spotlight для поиска была постоянно закреплена справа на панели меню в том же цвете и градиенте, что и меню Apple.
Dock icons bounce 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 can 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. By pressing the shift key, both effects can be seen in slow motion. These keystrokes can also be applied to other Aqua effects such as Dashboard, Mission Control and Front Row. Holding Control as well as Shift makes the minimize effect take twice as long as just holding Shift. Holding just Control also slows down the animation slightly. There is another undocumented dock effect called "Suck" which can be enabled by hand editing a configuration file or using a Terminal command; this appears to be the same effect that accompanies the removal of widgets from the Dashboard. When a folder on the desktop is opened or closed, the corresponding Finder window appears to come from, or disappear into, the folder icon rather than just appearing from nowhere. This effect was present in the Classic Mac OS Finder as ZoomRects, but had disappeared from early Mac OS X developer releases. Sheets are "posted" out of window title bars. Sheets appear to be pieces of paper being thrust toward the user, or slide out like paper from a tray. Dashboard widgets appear to fly onto the screen. 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. This effect can be applied on windows being minimized to the Dock. Panther also featured an increased use of the "Brushed Metal" look, especially to the Finder and Safari web browser. Brushed Metal had first appeared in QuickTime Player 4.0 in 1999. Apple's Human Interface Guidelines stated that the brushed metal interface be used for programs that mimic the operation or interface of common real world devices (skeuomorphism). Mac OS X Tiger brought more subtle changes, including the unified titlebar scheme. Pinstripes were removed from the menu bar entirely and replaced with a glossy, white look. Tabs were altered to appear as normal segmented buttons. The Apple menu icon was toned down to a more matte appearance and the new Spotlight search utility was permanently bound to the very right of the menu bar in the same color and gradient of the Apple menu.
Mac OS X Leopard и Snow Leopard
Mac OS X Leopard внесла масштабные изменения в Aqua. Окна Aqua и окна с эффектом "шлифованного металла" приобрели единый металлический, серый вид, полосатые фоны были полностью удалены, панели инструментов и заголовки были объединены в единое целое, различия между активными и неактивными окнами стали более выраженными за счет более толстых теней и монохромного отображения неактивных окон, цвет строки меню изменился на серый с возможностью полупрозрачного отображения на поддерживаемых Mac, а Dock получил трехмерный вид с отражающей стеклянной "поверхностью". Дизайн Dock при размещении слева или справа изменился на черный полупрозрачный фон с белой рамкой и закругленными углами. Контекстные меню получили слегка скругленные углы, а множество значков были переработаны, включая значки папок и значки Системных настроек. Mac OS X Snow Leopard практически не внес изменений в Aqua. Наиболее заметным изменением стало изменение контекстного меню элементов Dock с белого на полупрозрачный черный.
Mac OS X Lion, OS X Mountain Lion и Mavericks
Mac OS X Lion представила множество изменений, вдохновленных iOS, которые сохранились в OS X Mavericks и OS X Yosemite, хотя последняя изменила общую эстетику. Полосы прокрутки были удалены, а ползунки прокрутки превратились в тонкие, полупрозрачные полосы, исчезающие в неиспользуемом состоянии. Радиус скругления углов кнопок был уменьшен, что придало им вид, напоминающий Mac OS 8 и 9. Гелеобразный вид большинства элементов был заменен на слегка глянцевый и более плоский. Фоны окон стали немного светлее, а углы окон – закругленными. Lion также добавила больше анимации. OS X Mountain Lion внесла лишь незначительные изменения и изменила внешний вид Dock на стиль матового стекла с закругленными углами, прямоугольными индикаторами, новым диагональным разделителем и новой иконкой корзины. OS X Mavericks отказалась от нескольких насыщенных и декоративных элементов дизайна, отражая масштабные изменения в дизайне iOS 7. Приложения «Календарь», «Контакты» и «Заметки» соответственно лишились кожаного, книжного и блокнотного оформления (все они были введены в Lion). Текстуры льняного полотна в Центре уведомлений и Launchpad также были удалены и заменены на простые серые фоны.
OS X Yosemite, El Capitan, macOS Sierra, High Sierra, Mojave и Catalina
В OS X Yosemite многие элементы и иконки Aqua были упрощены и стали более плоскими, вслед за аналогичным изменением дизайна в iOS 7. Apple внедрила в систему тот же насыщенный эффект матового стекла, названный "Vibrancy" (Вибрация). Примеры включают Dock, строку меню, боковые панели, Центр уведомлений и Mission Control. Подобный эффект был применен к панелям инструментов, но они сохранили свой серый цвет. Кнопки панелей инструментов стали белыми, и Apple представила более компактный тип панели инструментов, который убрал заголовок окна, но сохранил кнопки панели инструментов (например, в Safari). Некоторые элементы управления, такие как флажки и переключатели, получили анимацию, а в других местах анимация была удалена, например, анимация "исчезновения" при удалении иконки с Dock и анимация "куба" при быстром переключении между учетными записями пользователей. Apple изменила системный шрифт на Helvetica Neue. Yosemite также добавила "темную тему", которую можно включить в настройках, делающую Dock и строку меню черными. OS X El Capitan внесла лишь незначительные изменения в Aqua. Белые кнопки панелей инструментов вновь приобрели легкий глянцевый вид, значок загрузки был переработан, а эффект Vibrancy был уменьшен в определенных областях, таких как Mission Control. Системный шрифт был изменен еще раз, на собственный шрифт Apple San Francisco, одновременно с iOS 9 и после выпуска этого шрифта для watchOS в апреле 2015 года. Эти изменения продолжились в macOS Sierra, High Sierra, Mojave и Catalina.
macOS Big Sur, Monterey, Ventura и Sonoma
macOS Big Sur внесла существенные изменения в дизайн Aqua, приведя его в соответствие с другими платформами Apple, такими как iOS и iPadOS. Dock теперь отделен от края экрана и имеет более скругленные углы. Иконки приобрели форму скругленного квадрата и стали более объемными. Строки заголовков лишились градиентного оформления, перейдя к плоскому белому виду, а текст заголовка стал жирным и выровнен с элементами панели инструментов, которые больше не заключены в отдельный фон. Модальные окна значительно изменились: они теперь имеют размер, соответствующий содержимому, с крупной иконкой вверху, текстом в центре и кнопками внизу. Листы больше не выдвигаются из-под строки заголовка, как листы бумаги, а просто плавно появляются из центра окна. Унифицированные боковые панели стали более распространенными и теперь используются по умолчанию во всех приложениях. Окна получили более скругленные углы и приобретают оттенок от обоев пользователя, подобно эффекту Mica в Windows 11. Строка меню стала полностью прозрачной, используя сильное размытие для отделения от фона. Эта версия Aqua продолжала использоваться в macOS Monterey, Ventura и Sonoma.
Приложения Microsoft Windows
Aqua также была интегрирована в приложения Apple для Microsoft Windows, такие как iTunes, QuickTime и Safari (хотя и не в Safari 4). iTunes для Windows в целом следовал тем же обновлениям, что и соответствующая версия для macOS, за исключением использования элементов управления пользовательского интерфейса Windows и кнопок в стиле Windows в правом верхнем углу окна проигрывателя. В версии 3 Safari для Windows предлагал функциональный внешний вид и ощущения, очень похожие на macOS. Начиная с версии 4, использовалась более типичная для Windows тема с применением стандартных элементов управления пользовательского интерфейса Windows и оформления окон. QuickTime для Windows использует ту же тему, что и в более ранних версиях QuickTime для macOS, с окнами, имитирующими шлифованный металл, и кнопками в стиле Aqua в верхней части.
Критика
Большая часть оригинального дизайна Aqua напоминала полупрозрачный двухцветный облик современного оборудования Apple. В 2003 и 2004 годах Apple перешла к использованию матового алюминия в промышленном дизайне (как, например, в алюминиевых дисплеях Apple Cinema Display). Дизайн Aqua изменился в соответствии с этим. Эта несколько противоречивая смесь стилей интерфейса вызывала споры в сообществе пользователей Mac.
Судебные разбирательства
В прошлом Apple угрожала судебными исками тем, кто создавал темы, имитирующие их визуальный стиль. Сообщество разработчиков тем для Mac негативно отреагировало на жесткие действия Apple против любых элементов, похожих на Aqua. Брэд Уорделл из Stardock противопоставил склонность компании к судебным разбирательствам более открытому подходу Microsoft к интеграции сторонних тем в Windows XP.