Новая эра пользовательского интерфейса

Перевод статьи Себастиана де Вита. Время чтения: 18 мин.

Сейчас захватывающее время для дизайнера на iOS. Моя профессиональная вселенная дрожит и грохочет, наполненная глубоким чувством тайны. Ходит много слухов и шепотков о грядущем масштабном редизайне операционной системы iPhone — таком, который обещает стать «крупнейшим за долгое время».

Подобный момент был лишь однажды: весной 2013 года. 10 июня Apple продемонстрировала то, что станет величайшей сменой парадигмы в дизайне пользовательских интерфейсов за всю историю: iOS 7. Я точно помню, где я был и что чувствовал. Это был шок.

Если в этом году действительно произойдет крупный редизайн, он будет иметь далеко идущие и значительные последствия, которые по множеству причин превзойдут по значимости обновление iOS 7. По слухам, редизайн будет всеобъемлющим; переосмысление стиля iOS, macOS, iPadOS, tvOS, watchOS и visionOS. За годы, прошедшие между анонсом iOS 7 и сегодняшним днем, iPhone превратились из просто популярного устройства в самый важный объект в жизни людей. Дизайн iOS повлиял и вдохновил многое вокруг, от веба до графического дизайна и любого другого компьютерного интерфейса.

Вот почему я решил воспользоваться этим моментом неопределенности, этим драгоценным мгновением, когда изменения все еще окутаны туманом, чтобы насладиться кое-чем: полной наивностью относительно того, куда все движется, чтобы я мог дать волю своему воображению.

Что бы я сделал, будь я командой дизайнеров Apple? Какие изменения я хотел бы увидеть, и что, по моему мнению, вероятно? Учитывая, куда движутся технологии, как, по-моему, должен измениться дизайн интерфейса, чтобы соответствовать этим изменениям? Давайте посмотрим, что нас ждет (или что могло бы ждать).

Умные люди изучают историю, чтобы понять будущее. Если бы мы попытались классифицировать эпохи дизайна iOS, мы могли бы грубо разделить их на Эру теней, Плоскую эру и Новую эру.

iOS начиналась как iPhone OS, совершенно новая операционная система, стиль которой очень напоминал язык дизайна виджетов Dashboard в Mac OS X Tiger:

Расположение иконок в iPhone OS 1 было явным скевоморфизмом.

Возможно, вы слышали это слово. Вас может удивить, что оно не означает наличие множества визуальных эффектов, таких как градиенты, блеск и тени. На самом деле, оно означает, что для облегчения перехода пользователей от привычного им (в данном случае, телефоны обычно представляли собой моноблоки с сеткой кнопок) к тому, чем они стали (телефоны стали полностью экранными, поэтому они могли отображать любые кнопки или интерфейсы), использовались знакомые образы.

Во время запуска iPhone 1 карикатура на «телефон» все еще выглядела бы как изображение слева. Сетка кнопок определяла его модель взаимодействия и зону комфорта.

И да, в пользовательских интерфейсах от iPhone OS 1 до iOS 6 было очень много визуальных эффектов. В эту эпоху мы видели все: от детализированных градиентов и теней в простых элементах интерфейса до реалистично отрисованных катушечных магнитофонов и микрофонов для аудиоприложений.

Поскольку я сам работал над некоторыми из наиболее интересных проявлений этого во время моей работы в Apple, могу сказать по опыту, что работа, которую мы делали в ту эпоху, была в значительной степени основана на создании ощущения знакомости с помощью продуманных, обширных визуальных эффектов. Мы проводили много времени в Photoshop, рисуя реалистично затененные кнопки, виртуальное дерево, кожу и другие материалы.

Это стало известно как «скевоморфный дизайн», что я считаю не совсем точным названием, но общая идея верна.

Конечно, металл микрофона на самом деле не был металлом — он не отражал ничего, как это делают металлические предметы. Он никогда не вел себя как объект, который имитировал. Это был просто эффект; чисто визуальный лак, чтобы помочь пользователям понять, что приложение «Диктофон» работает как микрофон. Весь интерфейс работал таким образом, чтобы быть максимально доступным.

Примечательно, что эта философия распространялась даже на мельчайшие элементы пользовательского интерфейса: кнопки стилизовались так, чтобы визуально напоминать кнопку, будучи выпуклыми и приподнятыми или утопленными; отключенные элементы часто имели упрощенную обработку, чтобы они выглядели менее интерактивными. Все это было сделано для работы с множеством статичных растровых изображений.

Начали появляться первые признаки чего-то более динамичного: на iPad блеск некоторых металлических ползунков мог реагировать на ориентацию устройства. Удаление заметки или электронного письма не просто заставляло его исчезнуть с экрана, а втягивало его в значок корзины, который даже открывал и закрывал свою крышку, когда документ засасывался внутрь.

Наши совершенно новые, насыщенные экраны с Retina-плотностью (2×) должны были претерпеть радикальную трансформацию в способе представления приложений и информации, однако...

iOS 7 представила совершенно новый язык дизайна для iOS. В то время об этом много писали, и, как и при любом кардинальном изменении, эмоции в сообществе зашкаливали. Я оставлю свои собственные мнения в стороне (по большей части), но как бы вы к этому ни относились, нельзя отрицать, что это было фундаментальное переосмысление визуального оформления iOS.

iOS 7 в значительной степени отказалась от визуальных эффектов для обозначения интерактивности. Она вернулась, возможно, к самому примитивному методу обозначения интерактивности на компьютере: некоторые «кнопки» были не более чем синим текстом на белом фоне.

Стиль этой эпохи часто называют «плоским дизайном». Понятно, почему его так называют: даже кнопки в приложении «Калькулятор» визуально не имеют никакой выпуклости:

Домашний экран, когда-то явно отсылавший к кнопкам на телефонах прошлых лет, теперь выглядел гораздо более плоским — отчасти из-за более простого визуального оформления, а также из-за явного отсутствия теней.

Но почему тени должны были исчезнуть? В конце концов, они выполняли важную функцию в определении глубины интерфейса. Взгляд на скриншот выше на самом деле не передает всей картины: новый домашний экран iOS 7 был каким угодно, но не плоским. Причина была в том, что тени были статичными.

iOS 7 приняла концепцию отдельных визуальных слоев и использования адаптивных или динамических эффектов для различения глубины и разделения. Зачем рендерить плоские блики и тени, которые не реагируют на реальное окружение пользователя, если можно отделить иконки, разместив их на отдельной плоскости от фона? Параллакс заставлял иконки отчетливо «парить» над обоями. Панель центра уведомлений могла быть просто матовой панелью над контентом, которая размывала свой фон для контекста.

Джони Айв с гордостью говорил на презентации iOS 7 о том, как «простое действие установки других обоев» влияло на внешний вид многих вещей. Это было нечто совершенно новое.

Также новым в интерфейсе было то, что элементы интерфейса (UI chrome) могли обладать такой же динамикой: такие вещи, как заголовок и клавиатура, могли пропускать часть скрытого ими контента, как будто они были сделаны из матового стекла.

Хотя это, возможно, было некоторым перегибом в некоторых местах, радикальные изменения iOS 7 пришли, чтобы остаться — при этом некоторые из ее динамических «эффектов» были значительно уменьшены (параллакс теперь едва заметен). Со временем ее пользовательский интерфейс вновь обрел гораздо больше статичных эффектов.

Шрифты и иконки стали толще, тени вернулись, а цвета стали гораздо менее неоновыми.

Одним из основных изменений с течением времени стало то, что iOS стала более округлой; в унисон с аппаратным обеспечением, на котором она работала, с новыми изогнутыми углами экрана и все более округлыми iPhone, пользовательский интерфейс соответствовал этому шаг в шаг. Он даже делал это динамически в зависимости от устройства, на котором работал.

Все больше элементов интерфейса начали смешиваться с контентом с помощью различных типов размытия, таких как новое прогрессивное размытие, и формы кнопок постепенно начали возвращаться. Система пришла в стабильное состояние — но оно также было несколько застойным. Для более крупных изменений потребовалось бы переосмысление.

То, что должно было прийти дальше, не могло снова быть просто статичным растровым изображением: оно должно было продолжить тенденцию к все более адаптивным интерфейсам.

Когда дизайнеры Apple представляли интерфейс VisionOS, перед ними стояла задача, по сути, начать все с нуля. Как выглядит «приложение» в дополненной реальности?

Ключевым основополагающим принципом языка дизайна VisionOS, по-видимому, является то, что элементы всегда состоят из «реальных» материалов. В интерфейсе нет плоских панелей цвета и форм.

Это относится даже к иконкам приложений: хотя у них есть цветовые градиенты, они занимают собственные дискретные слои, с явным намерением, показанным в их презентационном видео, ощущаться как настоящие «материалы»:

Алан Дай, представляя интерфейс VisionOS, заявил, что каждый элемент был создан так, чтобы обладать ощущением физичности: они имеют объем, динамически реагируют на свет и отбрасывают тени.

Это крайне важно в Vision Pro, потому что интерфейс приложений должен ощущаться так, как будто он может естественным образом занимать мир вокруг вас и обладать таким же богатством и текстурой, как и любой из объектов, населяющих это пространство. По сравнению с привычными нам интерфейсами, этот сдвиг парадигмы огромен, и он заставляет старые интерфейсы, лишенные физичности, казаться архаичными.

Если бы я поместил обычный интерфейс в контекст Vision Pro, результат выглядел бы почти комично плохо:

Поэтому я считаю вероятным, что на iPhone, iPad и Mac (и потенциальные новые платформы) будет перенесено нечто большее, чем просто статический визуальный стиль из visionOS — кажется вероятным, что набор новых фундаментальных принципов будет лежать в основе всего стиля Apple во всех продуктах и проявлениях ее бренда.

Это должно быть более тонко, чем на Vision Pro — в конце концов, интерфейсам не нужно так сильно вписываться в «реальный мир» — но динамические эффекты и поведение, по сути, оживляют интерфейс.

Звучит знакомо? Существующие аспекты пользовательского интерфейса iPhone уже делают это:

Новые дополнения Apple к интерфейсу iOS за последние годы выделяются своей материальной инаковостью по сравнению с остальной частью интерфейса.

Они полностью динамичны: обладают характеристиками, схожими с реальными материалами и объектами. Мы, в некотором смысле, вернулись к скевоморфным интерфейсам — но на этот раз не с лаком, напоминающим материал. Вместо этого интерфейс ясен, графичен и ведет себя как вещи, знакомые нам из реального мира, или которые могли бы существовать в мире. В этом и заключается новый скевоморфизм. Это тоже физичность.

Dynamic Island — это строгий, графичный интерфейс, который ведет себя как интерактивная, вязкая жидкость:

Вы можете видеть, как он проявляет качества, уникальные для его жидкого материала, такие как поверхностное натяжение, когда его части соприкасаются и сливаются вместе.

Когда он набирает скорость, у него появляется инерция, очень похожая на прокручивающиеся списки самой первой итерации iPhoneOS, но теперь он выглядит для нас более реалистично, поскольку у него также есть направленное размытие в движении или плоскость фокусировки, когда элементы перемещаются в своей плоскости:

Аналогично, новая анимация Siri ведет себя скорее как физически воплощенное свечение — как огненный газ или туман, который притягивается к краям устройства и испускается нажатием кнопки пользователем или голосом.

Каким может быть следующий шаг?

Я хотел бы представить, что может быть дальше. Как путем рендеринга некоторых собственных дизайнов UI, так и путем размышлений о том, какой могла бы быть философия Новой эры.

Логичным следующим шагом могло бы стать распространение физичности на весь интерфейс. Нам не нужно переусердствовать с такой обработкой, но теперь мы можем придать интерфейсу ощущение тактильного реализма.

Философски, если бы я был Apple, я бы описал это как наконец-то получение интерфейса, который соответствует прекрасным материальным свойствам ее устройств. Все поверхности ваших устройств имеют стеклянные экраны. Это привносит интерфейс из соответствующего материала, давая пользователю ощущение, что само стекло оживает.

Детали VisionOS из превосходного интервью [журнала] Wallpaper с командой дизайнеров Apple.

Кнопки и другие элементы UI могут получить системную обработку, очень похожую на то, как visionOS обрабатывает окна.*

*VisionOS — исключительно интересная платформа с точки зрения визуальных эффектов, поскольку операционная система получает очень мало данных с камер устройства для обеспечения конфиденциальности и безопасности. Я предполагаю, что чип «R1», который обрабатывает сквозной режим и потоки с камер, формирует стеклоподобные визуальные эффекты на элементах интерфейса (UI chrome). Все устройства Apple могут это делать: они уже выполняют композитинг эффектов на системном уровне для таких вещей, как размытие фона.

Я потратил некоторое время на разработку и теоретизирование того, как это будет выглядеть и как это будет работать. Для Нового языка дизайна логично, что, как и в VisionOS, материалом интерактивности является стекло:

Стекло подвержено влиянию окружающей среды. Окружающая среда — это ваш контент, его контекст в UI и многое другое.

Поскольку оно отражающее, оно может отражать то, что находится вокруг него; очень яркие блики в контенте, таком как фотографии и видео, могут даже отображаться как HDR-блики на стеклянных элементах:

Стеклянные элементы заметно занимают место в четкой пространственной иерархии; если это не так, элементы могут быть «встроенными»: по сути, частью плоскости стекла, которой является ваш дисплей, или стеклянного слоя UI:

Подобно тому, как задняя панель вашего iPhone представляет собой матовую стеклянную панель с глянцевым логотипом Apple, элементы управления или элементы могут получить другую обработку материала или цвет. Возможно, эта обработка даже реагирует на другие элементы интерфейса, излучающие свет, или на ориентацию устройства — свет на ней слегка смещается, как это делают элементы в VisionOS при взгляде на них.

Элементы управления могут трансформироваться, когда начинают накладываться на контент. Можно представить анимированные состояния для кнопок, поднимающихся и появляющихся из своего фона при переходе по иерархии:

Эти эффекты могут отображаться тонко и динамично системой. По сравнению с этим, «обычные» статические интерфейсы выглядят и ощущаются инертными и безжизненными.

Стекло обладает особыми качествами, которые прекрасно отделяют его от контента. Оно может размывать материал под ним, как мы уже видим в современных элементах управления iOS. Оно может иметь отчетливые, динамичные зеркальные блики от своего окружения:

Оно может иметь каустику, то есть отделяться от фона, показывая взаимодействие со светом в окружающей среде путем отбрасывания света, а не тени:

...и оно также может наполняться цветом и темой окружающего интерфейса. Стекло не просто размывает или преломляет свой фон: оно также отражает. Это не совсем из ряда вон выходящее: это также видно в графике WWDC25:

Установив набор обработок, давайте рассмотрим элементы Нового дизайна iOS.

Я бы предположил, что эра «закрытых панелей вкладок», то есть тех, которые полностью скрывают контент, подходит к концу. На самом деле, я не удивлюсь, если почти все элементы UI, которые так полностью маскируют интерфейс в виде панели на всю ширину, исчезнут.

Такие типы статических панелей интерфейса являются устаревшим элементом с ранних дней iOS. Новый тип может парить над контентом:

Подобные элементы управления лучше подходят для того, чтобы подниматься из своей «подложки» при прокрутке их за пределы видимости, а также могут аналогичным образом скрываться, чтобы не заслонять контент постоянно.

Может быть чрезмерным, если все элементы интерфейса будут иметь особенно насыщенную обработку, поэтому, как я упоминал ранее, я бы ожидал, что будут применяться различные уровни этой «глубины». Основные действия, такие как кнопка отправки электронного письма в Почте, могут быть приподняты:

В то время как другие действия, являющиеся частью той же поверхности — например, действие «Отмена» здесь — могут получить более тонкую обработку.

Приподнятые элементы управления могут быть слегка смещены в сторону более теплого цветового баланса, а фоновые элементы — в сторону холодного, чтобы подчеркнуть глубину.

Apple проделала значительную работу по автоматическому наложению масок на иконки в iOS 18, и я сомневаюсь, что это было сделано только для темного режима или тонированных иконок на идентичном черном градиентном фоне иконок. Простое, темное оформление фонов иконок заставляет меня предположить, что это была подготовка к более динамичному материальному фону.

Не говоря уже о том, что иконки приложений — это именно тот тип интерактивных, приподнятых элементов, о которых я говорил ранее, которые подошли бы для обработки «живым стеклом».

Я бы также предположил, что некоторые иконки приложений, которые нуждаются в редизайне, получат обновления. Многие не обновлялись со времен iOS 7. Это было бы серьезным изменением для некоторых «ключевых брендов» Apple, поэтому я ожидаю, что оно будет значительным, но совместимым с уходящими иконками для сохранения преемственности при принятии нового визуального языка — что-то вроде иконки Safari выше.

Кстати об иконках, я также не удивлюсь, если сами системные иконки станут немного более округлыми.

Кажется вероятным, что Домашний экран в целом будет переосмыслен впервые. Его сложность разрослась с ранних дней iOS. Я обнаруживаю, что трачу много времени на поиск в своей Библиотеке приложений.

Я думаю, что существует отличный контекстный выдвижной экран с упором на ИИ, который может сосуществовать с обычной сеткой приложений, к которой мы привыкли. У меня было немного мало времени, чтобы сделать макет этого.

Базовые интерактивные строительные блоки интерфейса iOS получат предоставляемые системой обработки, которые реагируют на их окружение:

В целом, можно представить, что округление и смягчение интерфейса с помощью полупрозрачных материалов будет выглядеть довольно здорово.

Это «простое» изменение в обработке — к динамичному, стеклоподобному виду — имеет далеко идущие последствия.

Apple уникальна — ее доминирующий стиль пользовательского интерфейса в 2000-х годах всегда был связан с ее брендингом. Ее иконки также являются логотипами, ее обработки — мотивом, который простирается далеко за пределы платформ, на которых они существуют. Рассмотрим навигацию Apple.com:

Не будет преувеличением предположить, что и это примет какой-то динамичный, новый стиль. В этом и заключаются некоторые из проблем.

Я люблю продукты с инновационными, новыми интерфейсами — современная iOS — это не просто продукт, а платформа. Ее дизайнеры несут ответственность за то, чтобы система выглядела хорошо даже в неконтролируемых ситуациях, когда сторонние разработчики, такие как я, придумывают новые, непредвиденные идеи. Это оставляет нас с вопросом о том, как мы можем принять новую, более сложную парадигму дизайна для интерфейсов.

Замечательным результатом этого могли бы стать новые инструменты дизайна для эпохи проектирования интерфейсов, которые выходят далеко за рамки размещения серий прямоугольников со скругленными углами и применения сильно ограниченных эффектов.

Когда я говорил о разработке забавных, необычных интерфейсов в «старые времена», это в основном делалось в Photoshop. Не потому, что он был создан для дизайна UI — совсем наоборот. Он просто давал достаточно творческой свободы для создания чего угодно, от набора простых кнопок до стола для игры в кости, покрытого зеленым сукном.

Если то, что будет объявлено, похоже на то, что я только что предположил, это начало большого сдвига. По мере того как интерфейсы развиваются вместе с нашим более эмбиентным восприятием вычислений и наполняются более динамичными элементами, они наконец-то могут почувствовать себя укорененными в знакомом нам мире. Непрозрачные, инертные и мешающие элементы могут занять то же место, что и полноэкранные интерфейсы командной строки — мощный нишевый UI, который был вехой в истории, вытесненный оконной средой революции многозадачных графических пользовательских интерфейсов.

Интерфейсы компьютеров будущего часто удивительно легко представить. Мы часто думаем о них и показываем их в художественной литературе еще до их появления: наш iPhone напоминает современный трикодер из «Звездного пути»; многие современные приложения ИИ напоминают устройства из научно-фантастических фильмов, таких как «Она» и (что удручает) «Бегущий по лезвию 2049». Поэтому неудивительно, что концептуальные интерфейсы от таких компаний, как Microsoft, часто содержат «стеклянную» фантастику:

Это красивый, причудливый UI. К сожалению, он существует только в вымышленной вселенной рекламных роликов Microsoft.

Реальный интерфейс, к сожалению, далеко не так вдохновлен такой жизнью и поведенческими качествами. Причина проста: не только крутое живое стекло из видео местами чрезмерно, но и немногие компании действительно могут посвятить значительные усилия созданию интегрированного аппаратно-программного конвейера рендеринга, чтобы обеспечить такие инновации в UI.

Тем не менее, нам нравится представлять наши интерфейсы наполненными такой жизнью и радостью. Мир вокруг нас таков — но наши программные интерфейсы остались по сути безжизненными.

И это подводит нас к Apple. Было несколько случаев, когда Apple анонсировала что-то особенно особенное, и они делали паузу на сцене, чтобы объяснить, что только Apple могла сделать нечто подобное. Это особый союз аппаратного и программного обеспечения — дизайна и инженерии. Технологий и гуманитарных наук.

И это происходит и сегодня. Только Apple могла интегрировать субпиксельное сглаживание и никогда не прерывающиеся анимации на аппаратном уровне, чтобы обеспечить Dynamic Island и жестовую многозадачность; только Apple может интегрировать две операционные системы на двух чипах в Vision Pro, чтобы они могли компоновать динамические материалы UI VisionOS. И, возможно, только Apple может поднять передовой уровень техники до нового интерфейса, который оживляет стекло вашего экрана.

Мы увидим на WWDC. Но лично я надеюсь на тот продуманный и вдохновенный дизайн и инженерию, которые может предоставить только Apple.