Бывший дизайнер Apple случайно «раскрыл» дизайн нового программного обеспечения iPhone
Эта статья переведена из блога "Physicality: the new age of UI design" Себастьяна де Вита, бывшего дизайнера Apple и основателя Halide camera. Оригинальная ссылка: Physicality: the new age of UI
Для меня, как для бывшего iOS-дизайнера, сейчас наступило захватывающее время, и мой профессиональный мир трясется и грохочет от тайн. Ходят слухи, что операционная система iPhone вот-вот подвергнется серьезной переработке — говорят, что это будет «самая большая за долгое время».
С этим моментом можно сравнить только один момент: весна 2013 года. 10 июня 2013 года Apple выпустила, возможно, величайшее изменение в истории дизайна пользовательского интерфейса: iOS 7. Я точно помню, что я чувствовал: я был ошеломлен.
Если Apple действительно проведет масштабную переработку пользовательского интерфейса в этом году, это будет иметь далеко идущие последствия во многих отношениях, даже затмив «большие изменения» iOS 7. Ходят слухи, что эта переработка охватит iOS, macOS, iPadOS, tvOS, watchOS и visionOS. За годы, прошедшие с момента выпуска iOS 7, iPhone превратился из простого популярного устройства в самую важную вещь в жизни людей. Дизайн iOS повлиял и вдохновил все вокруг нас, от веб-дизайна до графического дизайна и почти всех интерфейсов программного обеспечения.
Я подумал, что воспользуюсь этим моментом, о котором ходят слухи, возможностью насладиться чем-то, пока конечный продукт еще находится за кулисами: не имея представления о том, к чему все идет, я могу дать волю своему воображению.
Если бы я был командой дизайнеров Apple, что бы я сделал? Какие изменения я хотел бы видеть, и какие из них, скорее всего, будут реализованы? Учитывая направление развития технологий, как дизайн интерфейса должен адаптироваться к потребностям крупных изменений?
Давайте посмотрим, что произойдет или может произойти дальше.
Самое мудрое — учиться на истории. Если бы мы классифицировали этапы разработки дизайна iOS, мы могли бы грубо разделить их на «Теневую эру», «Адаптивную эру» и «Новую эру».
Затененный век
Отправной точкой для iOS стала iPhone OS, совершенно новая (на тот момент) операционная система, которая по языку дизайна была очень похожа на функцию Dashboard в Mac OS X Tiger:
через https://numericcitizen.me/what-widgets-on-macos-big-sur-should-have-been/
Ранний прототип iPhone, использующий значок панели управления macOS в качестве приложения
Расположение иконок в iPhone OS 1 было явно скевоморфным .
Скевоморфизм, вы наверняка слышали это слово. Но скевоморфизм означает не просто наличие множества визуальных эффектов в интерфейсе, таких как градиенты, блеск и тени. Его настоящее значение: облегчить пользователям переход от того, к чему они привыкли (например, небольшой кусок пластикового экрана с рядами кнопок на обычном телефоне) к текущей форме (телефон становится экранным и может отображать любую кнопку или интерфейс, который вы можете себе представить).
Когда был выпущен первый iPhone, телефон все еще был нарисован как слева. Сетка кнопок определяла режим работы и зону комфорта.
Конечно, в пользовательских интерфейсах от iPhone OS 1 до iOS 6 было много визуальных эффектов. В теневую эпоху интерфейсов iOS мы видели все: от градиентов и теней в простых элементах интерфейса до реалистичных магнитофонов и микрофонов в аудиоприложениях.
На странице «Поделиться» Facebook действительно есть скрепка! Дорожные знаки на картах iOS на самом деле состоят из сотен крошечных треугольников!
За время работы в Apple я участвовал в нескольких более интересных представлениях. По моему опыту, многое из того, что мы делали в этот период, было направлено на создание ощущения узнаваемости с помощью подробных и обширных визуальных эффектов. Мы потратили много времени на использование Photoshop для создания реалистичных затененных кнопок, виртуального дерева, кожи и многого другого.
Поэтому период от iPhone OS 1 до iOS 6 называется «скевоморфный дизайн». Я думаю, что этот термин не совсем уместен, но общая идея верна.
Но, конечно, металл микрофона на самом деле не металл — он не отражает свет, как настоящий металл, и не ведет себя как объект, который он имитирует. Это просто эффект, чисто визуальный, чтобы помочь пользователям понять, как работает приложение Voice Memos, и весь пользовательский интерфейс iPhone OS 1 следует этому дизайну, чтобы сделать его максимально удобным для пользователя.
Стоит отметить, что эта концепция распространяется и на самые мелкие элементы пользовательского интерфейса: кнопки. Кнопки в iOS разработаны с приподнятыми или утопленными визуальными эффектами, чтобы они больше походили на настоящие кнопки; отключенные элементы обычно упрощаются (серые, прозрачные), чтобы снизить их интерактивность. Все это достигается с помощью большого количества статических растровых материалов.
Постепенно начали появляться более интересные конструкции: на iPad блеск некоторых металлических слайдеров может реагировать на направление устройства; эффект удаления заметок или электронных писем заключается не в том, что они исчезают сразу, а в том, что они перетаскиваются в значок корзины, а корзина даже сначала открывает крышку, а затем снова закрывает ее после того, как документ в нее втянут.
Однако наши новые экраны Retina вскоре станут свидетелями полной трансформации способа представления приложений и информации на экране.
Плоский век
iOS 7 привнесла в iOS совершенно новый язык дизайна, и в то время было много статей, обсуждающих его. Как и в случае с любым крупным редизайном, сообщество пользователей было весьма взволнованно. Я редко выражаю свое личное мнение напрямую, но независимо от того, каково ваше впечатление от iOS 7, нельзя отрицать, что это фундаментальное переосмысление визуального дизайна iOS.
iOS 7 в значительной степени отказывается от визуальных подсказок для интерактивности (вроде выступающей кнопки), возвращаясь к тому, как это было сделано на ПК: кнопка — это просто синий текст на белом фоне.
Поэтому стиль дизайна эпохи iOS 7 часто называют «плоским дизайном». Понятно, почему он так называется, ведь даже кнопки в приложении калькулятора не имеют визуальных выступов:
Домашний экран, когда-то представлявший собой аккуратно расположенные кнопки на обычном телефоне, теперь выглядит намного более плоским — отчасти из-за более простых визуальных эффектов, но, что еще важнее, из-за значительно сокращенного использования теней.
Но почему мы должны убирать тени? В конце концов, они играют важную роль в определении «глубины» элементов интерфейса. Скриншоты выше на самом деле не являются интуитивно понятными, поскольку тени на картинках статичны. На самом деле новый домашний экран на iOS 7 не такой плоский, как кажется.
iOS 7 представила уникальную концепцию «визуального слоя», используя адаптивные или динамические эффекты для различения глубины и иерархии интерфейса. Итак, поскольку вы можете различать, визуализируя значок в слое вне фона, зачем визуализировать блики и тени, которые не могут соответствовать логике реальности? Опираясь исключительно на эффект параллакса, значок явно «плавал» над обоями, а центр уведомлений также можно упростить до матовой панели над главным экраном, размывая его фон для отображения контекста.
Джонатан Айв с гордостью рассказывал о конференции, посвященной запуску iOS 7: «Просто устанавливая разные обои», можно было влиять на внешний вид многих интерфейсов, что в то время было совершенно новым опытом.
Еще одной новой особенностью интерфейса iOS 7 является то, что рамка пользовательского интерфейса (элементы интерфейса, отличные от основных элементов, такие как контур кнопок) имеет тот же динамический дизайн: строка заголовка и клавиатура подобны матовому стеклу, которое может частично отображать скрытый ниже контент.
Хотя некоторые изменения местами были излишними, фундаментальные изменения в iOS 7 в конечном итоге сохранились в последующих iOS — хотя эффекты анимации были значительно уменьшены (параллакс иконок приложений на главном экране теперь практически незаметен), и со временем системный пользовательский интерфейс iOS постепенно приобрел более статичный эффект.
Значки и шрифты стали толще, тени вернулись, а цвета стали менее неоновыми.
Одним из главных изменений iOS за последние годы стал более округлый внешний вид: с более округлыми углами экрана и более округлыми iPhone пользовательский интерфейс претерпел изменения и даже динамически подстраивается под устройство, на котором он работает.
Все больше и больше элементов интерфейса начали смешиваться с контентом посредством различных типов эффектов размытия (например, нового прогрессивного размытия), и формы кнопок начали медленно возвращаться. iOS постепенно вошел в состояние стабильности, но также и немного застоя. Если бы действительно требовалось большое изменение, пришлось бы провести некоторую фундаментальную перестройку.
Новые изменения дизайна iOS больше не будут представлять собой простые статичные растровые изображения, они должны продолжить тенденцию «адаптивного интерфейса».
Эпоха физичности
Когда дизайнеры Apple создавали интерфейс для visionOS, им сказали «начать с нуля». Но как должно выглядеть приложение в дополненной реальности?
Основным принципом языка дизайна visionOS, по-видимому, является требование, чтобы элементы интерфейса всегда были выполнены из «реальных» материалов, и не может быть чисто двумерных панелей или цветов.
Этот принцип применим и к иконкам приложений. Хотя они имеют однонаправленный цветовой градиент, все они имеют свои собственные независимые слои. Из вводного видео ясно видно, что они имитируют реальный материал:
Алан Дай (вице-президент Apple по разработке интерфейса «человек-машина»), представляя интерфейс visionOS, сказал: «Каждый элемент был тщательно спроектирован, чтобы обеспечить глубокое ощущение физики — они имеют размеры, могут динамически реагировать на свет и отбрасывать тени друг на друга».
Это имеет решающее значение в Vision Pro, поскольку интерфейс приложения должен ощущаться естественным образом вписывающимся в окружающий мир и иметь те же богатые текстуры, что и объекты в реальном пространстве. Этот сдвиг парадигмы по сравнению с интерфейсами, с которыми мы знакомы, является глубоким, поскольку он заставляет все старые, бестелесные интерфейсы выглядеть устаревшими.
Даже если мы принудительно внедрим обычный пользовательский интерфейс в среду Vision Pro, результат будет выглядеть забавно:
Поэтому я считаю, что то, что visionOS может привнести в iPhone, iPad и Mac (и другие потенциальные новые аппаратные платформы), будет гораздо больше, чем упомянутый выше статичный визуальный стиль, но может стать новым набором принципов дизайна, поддерживающим стиль всех продуктов Apple следующего поколения и фирменных стилей.
Этот набор принципов дизайна должен быть более тонким, чем тот, что уже есть в Vision Pro, — в конце концов, интерфейс не обязательно должен на 100% соответствовать реальному миру, — но новых динамических эффектов и поведения окружающей среды достаточно, чтобы интерфейс буквально «ожил».
Знакомо? На самом деле, пользовательский интерфейс на iPhone достиг такого уровня:
Функции, которые Apple добавила в iOS за последние годы, существенно отличаются от других частей пользовательского интерфейса, и наиболее показательной из них является Smart Island.
Интерфейс Smart Island полностью динамичен, со свойствами, похожими на реальные материалы и объекты. В некотором смысле Smart Island фактически возвращается к скевоморфному интерфейсу – но он больше не распыляет на все элементы глянцевую краску, а посредством понятного и высокографичного интерфейса поведение Smart Island похоже на вещи, с которыми мы знакомы в реальной жизни, или которые «скорее всего» существуют в этом мире – это новый скевоморфизм, то есть своего рода физичность.
Smart Island — это яркий графический интерфейс, а анимация которого напоминает вязкую жидкость, которую можно перемещать пальцами:
Кроме того, когда различные части жидкости соприкасаются и сливаются вместе, мы также можем наблюдать весьма характерные свойства жидкости, такие как поверхностное натяжение.
По мере ускорения анимация приобретает инерцию, как и прокручиваемые списки в первом обновлении ОС iPhone, но интерактивная анимация Smart Island более реалистична, поскольку в ней также присутствуют направленное размытие движения и эффекты расфокусировки, когда элементы экрана выходят из фокуса.
Похожим образом работает новая анимация Siri, где мигающий свет вокруг экрана больше похож на настоящий световой эффект, соответствующий законам физики, — на свет, излучаемый горячим газом или туманом, адсорбированным на краю iPhone, который загорается, когда пользователь нажимает кнопку или просыпается с помощью голоса.
Что произойдет, если мы сделаем еще один шаг?
Мой взгляд на новое поколение: живое стекло
Я решил попытаться представить, что произойдет дальше — как посредством дизайна пользовательского интерфейса, который я нарисовал сам, так и путем переосмысления философии дизайна этого нового поколения.
Следующим логичным шагом Apple было бы распространение физичности дизайна Vision OS на все свои линейки продуктов. На самом деле, нет необходимости переусердствовать. Всего несколько изменений в существующей основе могут заставить интерфейс наполниться чувством тактильного реализма.
С точки зрения дизайна, если бы я был Apple, я бы описал этот новый интерфейс как «наконец-то достойный нашего изысканного оборудования». В конце концов, все самые важные продукты Apple имеют стеклянные экраны, и новый дизайн может принести интерфейс, который соответствует материалу, создавая у пользователей ощущение, что само стекло также совершенно новое.
Подробная информация о проекте VisionOS, полученная Wallpaper во время интервью с командой дизайнеров Apple
Кнопки и другие элементы пользовательского интерфейса могут обрабатываться на системном уровне, подобно тому, как visionOS отображает окна поверх реального фона.*
*VisionOS — очень интересная платформа с точки зрения визуальных эффектов, поскольку операционная система получает очень мало данных с камеры устройства для обеспечения конфиденциальности и безопасности. Я предполагаю, что пользовательский интерфейс отвечает за синтез визуального эффекта матового стекла, но на самом деле это чип R1, который обрабатывает проход и обратную связь сигнала камеры — другими словами, в теории все устройства Apple могут это делать, они уже сделали синтез эффектов на системном уровне для таких функций, как размытие фона.
Я также потратил некоторое время на проектирование и концептуализацию того, как будет выглядеть и работать новая система эры. Для нового языка дизайна имело смысл использовать стекло в качестве среды взаимодействия, как в visionOS:
На Glass влияет окружающая среда — то, что отображается на экране, контекст пользовательского интерфейса и т. д.
Благодаря своей отражающей способности стеклянные элементы способны отражать окружающее пространство; очень яркие участки контента, например фотографии и видео, могут отображаться непосредственно в формате HDR.
Стеклянные элементы визуально занимают четкую пространственную иерархию; но если нет очевидной слоистости, элемент может быть инкрустирован: другими словами, стать частью стеклянного слоя дисплея или пользовательского интерфейса.
Подобно блестящему логотипу Apple на матовом стекле задней панели iPhone, элементы управления или элементы пользовательского интерфейса также могут быть обработаны различными материалами или цветами. Эти обработки могут даже реагировать на другие светоизлучающие элементы в интерфейсе или ориентацию устройства — например, они будут слегка меняться, когда на них попадает свет, подобно тому, как вы смотрите на окно в visionOS.
Анимация перехода элемента управления может начинаться с начала покрытия контента. Мы можем представить динамическое состояние кнопки «плавающей» и отрывающейся от фона, что более наглядно показывает смену уровня.
Система может воспроизводить эти эффекты тонкими и динамичными способами, в сравнении с которыми традиционные статичные интерфейсы выглядят скучными и безжизненными.
Стекло имеет ряд отличительных свойств, которые отличают его от контента. Оно может размывать материал под собой — как мы видели в существующих элементах управления iOS. Оно также может иметь резкие, высокодинамичные зеркальные блики в зависимости от окружающей среды.
Кнопка управления экспозицией с перетаскиванием, вариант нашего нового управления экспозицией в приложении Halide. Вы заметите, что материал кнопки отражает окружающие блики.
Помимо бликов, матовое стекло может также создавать эффект расфокусировки, то есть демонстрировать взаимодействие с фоном посредством отбрасывания света (а не теней), тем самым достигая отделения от окружающей среды.
Кроме того, он может поглощать и смешивать цвет и тему окружающего интерфейса. Роль матового стекла заключается не только в размытии или преломлении фона, оно также может отражать. Даже эта обработка не лишена примеров. Мы фактически видели эффект в главном визуальном рекламном изображении WWDC25:
Элементы стиля
После разработки единого визуального стандарта давайте рассмотрим конкретные элементы, которые может использовать новая iOS.
Панель вкладок
Во-первых, я думаю, что дни «закрытой панели вкладок» — той, что охватывает весь экран — подходят к концу. На самом деле, я бы не удивился, если бы Apple в этот раз отказалась от всех скрывающих элементов пользовательского интерфейса.
Этот тип статической панели является наследием очень раннего дизайна iOS. Новый дизайн должен иметь возможность «плавать» на отображаемом контенте:
Такие плавающие элементы управления лучше подходят для «поднятия» из базовой панели при прокрутке и автоматического перехода в скрытое положение, когда они не нужны, что позволяет избежать загораживания содержимого.
Управление
Однако если все элементы интерфейса обработаны дорогими материалами, это, скорее всего, заставит людей чувствовать себя визуально перегруженными. Поэтому, как упоминалось ранее, я оцениваю, что «наслоение» этого интерфейса будет применяться на разных уровнях.
Например, кнопка основного действия «Отправить» в приложении «Почта» может быть поднята на большую высоту по оси Z, в то время как другие действия (например, «Отмена») могут быть обработаны более скромно:
Выступающие элементы управления могут использовать более теплые тона, в то время как фоновые элементы склоняются к более холодным цветам для усиления контраста глубины.
Значок приложения
Apple сделала много автоматизированных маскировок иконок в iOS 18, и я не думаю, что это просто для того, чтобы помочь сторонним приложениям адаптироваться к темному режиму или применять оттенки к иконкам в пакетном режиме. Эта простая темная обработка фона иконок заставляет меня думать, что это может быть подготовкой к более динамичным материальным фонам в будущем.
Динамический фон значка в темном режиме — обратите внимание на отражение бликов на фоне, которое отражает окружающую среду.
Не говоря уже о том, что иконки приложений — это плавающие элементы, которые обладают высокой интерактивностью и подходят для обработки в стиле «живого стекла».
Новая версия динамически визуализированной иконки включает "слой контента", эффект текстуры стекла и оптимизацию существующих элементов. Фоновое скругление также было увеличено.
Кроме того, я подозреваю, что некоторые иконки, которые давно следовало перерисовать, будут обновлены в этой волне, например, многие иконки, которые не менялись с iOS 7. Это будет серьезным изменением для иконок «основного бренда» Apple. Предполагается, что новые иконки сохранят изначальную узнаваемость, в то же время включив новый визуальный язык — например, вы можете сослаться на новую обработку иконок Safari.
Также я не удивлюсь, если все значки кнопок станут более округлыми.
Главный экран
Вся система домашнего экрана, возможно, впервые переосмысливается. Сложность и функциональность домашнего экрана значительно возросли с первых дней iOS. Сейчас мне часто приходится тратить время на поиск приложений в App Library.
В целом, я думаю, мы можем ожидать выдвижной интерфейс на основе ИИ, учитывающий контекст, который может сосуществовать с привычным нам интерфейсом сетки. В этот раз у меня просто не было времени нарисовать прототип.
Слайдеры и лотки
Будучи основными интерактивными компонентами интерфейса iOS, слайдеры и лотки получат новую обработку материалов на системном уровне и будут реагировать на окружающую среду дисплея.
Короче говоря, можно представить, что интерфейс пользователя станет более округлым и мягким, демонстрируя красоту, которую привносят полупрозрачные материалы.
Идем на шаг дальше
Это, казалось бы, «простое» изменение материальности — от цвета к динамичному стилю стекла — на самом деле имеет далеко идущие последствия.
Apple — очень особенная компания — этот знаковый стиль интерфейса примерно с 2000 года всегда был тесно связан со стилем ее бренда. Его иконка также является логотипом, а материальная обработка иконки — это тема дизайна, которая выходит далеко за рамки самой платформы операционной системы. Например, вы можете увидеть эту последовательность в навигационной панели официального сайта Apple:
Панель навигации на сайте Apple в основном повторяет стили дизайна разных эпох: появление и становление стиля Aqua с 2000 года, мягкий градиент, представленный iPhone и Mac OS X в 2008 году, и плоская тенденция с 2014 года.
Мы можем обоснованно ожидать, что он примет какой-то новый стиль, который будет более динамичным. Это представляет свои собственные проблемы дизайна.
Лично мне очень нравятся инновационные и интересные пользовательские интерфейсы. iOS — это уже не продукт, а полноценная платформа. Ее дизайнеры должны гарантировать, что система останется красивой в различных нестандартных сценариях использования, даже если сторонние разработчики всегда выдвигают различные неожиданные требования к интерфейсу. Это поднимает вопрос: как нам приветствовать более сложную новую парадигму дизайна интерфейса?
В идеале это приведет к появлению совершенно нового набора инструментов проектирования для создания интерфейсов, гораздо более сложных, чем набор скругленных прямоугольников и простых эффектов тени.
Оглядываясь назад, когда я проектировал различные выдающиеся интерфейсы в "старые времена", я в основном полагался на Photoshop – не потому, что он был рожден для дизайна пользовательского интерфейса. Напротив, это было потому, что Photoshop был достаточно свободен, чтобы нарисовать что угодно, от простой кнопки до зеленого бархатного карточного стола.
Если WWDC будет хоть немного похож на то, что я себе представляю, это будет настоящая кардинальная перемена. Поскольку наши устройства становятся более контекстно-зависимыми, интерфейсы естественным образом будут включать больше динамических элементов, и наш цифровой мир наконец станет совместимым с реальным миром. Эти непрозрачные, статичные и блокирующие обзор элементы пользовательского интерфейса могут в конечном итоге стать историческим маркером, как интерфейс командной строки, замененный многозадачным графическим интерфейсом.
Научная фантастика и стекло
Интерфейсы вычислений будущего на самом деле легко представить. Мы представляли себе их существование в научной фантастике еще до того, как будущее наступило: iPhone похож на современную версию Tricorder из Star Trek; многие приложения ИИ выглядят как устройства из фильмов Her или Blade Runner 2049. Поэтому неудивительно, что этот «стеклянный научно-фантастический» интерфейс появляется в различных демонстрациях концепций технологий, например, в концептуальном видео Microsoft:
Это красивый и захватывающий пользовательский интерфейс, но он существует только в фантастическом мире Microsoft Advertising.
Но интерфейсы в реальности часто не такие яркие. Причина проста: с одной стороны, «живое стекло» в видео все еще слишком идеалистично, а с другой стороны, очень мало компаний, которые действительно могут добиться визуализации интерфейсов, глубоко интегрирующей программное обеспечение и оборудование в свои продукты.
Несмотря на это, мы по-прежнему хотим, чтобы интерфейсы были полны жизни и радости — как в реальном мире, но большинство наших программных интерфейсов по-прежнему безжизненны.
Это также возвращает нас к теме Apple. Apple неоднократно подчеркивала в некоторые особые моменты пресс-конференции: «Только Apple может это сделать». Это идеальное сочетание дизайна и инженерии, а также слияние технологий и гуманитарных наук.
Это актуально и сегодня — только Apple может добиться сглаживания на уровне пикселей и плавной, непрерывной анимации на аппаратном уровне, что позволяет запускать такие функции, как Smart Island и жесты многозадачности; только Apple может интегрировать два чипа и две операционные системы в Vision Pro для достижения синтеза динамических материалов пользовательского интерфейса в Vision OS.
Возможно, только Apple сможет вдохнуть жизнь в ваше экранное стекло и вывести интерфейс человек-компьютер на новый уровень.
Мы узнаем об этом на WWDC, но больше всего я жду продуманного, вдохновенного сочетания дизайна и инженерии, которое, возможно, может предложить только Apple.
Об авторе
Себастьян де Вит — голландский дизайнер и фотограф, известный своей работой в индустрии технологических продуктов и страстью к фотографии. Себастьян работал дизайнером в Apple над такими проектами, как MobileMe (предшественник iCloud) и Find My, а также работал в Sony, HP, EA, Oracle и многих других известных компаниях.
В настоящее время он наиболее известен как соучредитель и разработчик приложения для камеры Halide. Это универсальное профессиональное программное обеспечение для камеры завоевало множество наград с момента своего запуска и стало практически необходимым инструментом для iPhone-фотографии.
#Добро пожаловать на официальный публичный аккаунт WeChat iFanr: iFanr (WeChat ID: ifanr), где вам будет представлен еще более интересный контент как можно скорее.
iFanr | Исходная ссылка · Просмотреть комментарии · Sina Weibo