«Стеклянный мир» iOS 26. Адаптируем приложение под новые гайдлайны
Привет! Это блог CleverPumpkin, студии разработки мобильных приложений и цифровых продуктов.
Уже скоро релиз iOS 26 и обновления SDK приложений. Apple снова вносит корректировки, а разработчики и дизайнеры снова подстраиваются. У текущих приложений будет переходный период, но вопрос с обновлением интерфейсов рано или поздно настанет и придется адаптировать под новый SDK и стиль Liquid Glass, чтобы продукт выглядел современно.
При разработке нативных приложений CleverPumpkin активно использует системные компоненты, поэтому мы уже начали адаптировать дизайн приложений наших заказчиков под обновленные гайдлайны.
В этой статье мы не будем обсуждать проблемы плохого контраста, хотя они действительно есть в некоторых местах. Пока закроем на это глаза и спишем на бета-версию.
Наш дизайнер интерфейсов Фёдор Миронов поделится наблюдениями о новых гайдлайнах и расскажет, какие изменения принесёт Liquid Glass. А ещё покажет несколько примеров обновления интерфейсов тестового приложения и нашего финтех-проекта Moneon. Тем более, теперь есть HIG (Human Interface Guidelines) для Figma и можно детально изучить нововведения.
Разберем их по порядку:
Материалы Liquid Glass
Tab Bar
Navigation Bar
Search
Контекстные меню
Материалы Liquid Glass
Для дизайна стеклянных эффектов в файле гайдов появились отдельные компоненты Liquid Glass Materials. У каждого компонента есть свое назначение и небольшие возможности кастомизации:
Small — используется в навигационных элементах и кнопках, в том числе в таббаре. Особенность этого материала в возможности окрашивать его в нужные цвета. Например, можно сделать цветную стеклянную кнопку.
Medium —используется в контекстных меню и алертах.
Large —используется только в сайдбар-меню.
С разработчиками успели немного покодить и создали простое демо-приложение для проверки применения и кастомизации стеклянных материалов. На тесте реализовали кнопку и карточку, настроили им цвета и закругления. Получается, стекло можно использовать практически в любых UI-компонентах, что дает большую свободу дизайнерам.
Tab Bar
Теперь разберемся с основным навигационным элементом платформы. Таббар «парит» над контентом и вписывается в окружность дисплея iPhone.
Возможностей кастомизации стало меньше. Раньше можно было задавать любой цвет для светлой и темной темы. В iOS 26 стекло не настраивается. У активного таба появился фон, на который тоже нельзя повлиять, но можно, как и раньше, задать цвет иконки и лейбла.
Новая фишка Tab Bar — отделение последнего таба. Apple предлагает использовать его для поиска или какого-нибудь главного действия. Похоже, теперь это будет новый аналог FAB в приложениях для iOS.
Опционально табы можно сворачивать при скролле. С одной стороны, удобно, что появляется возможность закрепить кнопку или виджет над табами. С другой стороны, в свернутом состоянии переключение на другой таб потребует двух нажатий: сначала таббар разворачивается, а уже затем можно выбрать нужный раздел.
Navigation Bar
Navigation Bar теперь тоже «парит» над контентом. По новым гайдам рекомендуется убрать из него фон и четкую границу разделения. Возможностей кастомизации не так много, иконки действий можно объединять в один бабл или разделять на отдельные элементы.
Во время прокрутки, когда контент заходит под Navigation Bar, появляется блюр. У Large Title теперь нативно появился Subtitle. Раньше эта возможность была доступна только в компактном состоянии.
Также можно задавать четкую границу при скролле с помощью компонента Scroll Edge Effect — Hard. Это пригодится в случаях, когда требуется явный контраст между контентом и навбаром.
Search
В поиске появятся новые паттерны, к которым надо будет привыкнуть.
Например, изменение расположения строки поиска добавят плюсов в эргономику и порадуют пользователей удобством. Теперь поиск можно размещать в нижней части экрана, что удобно в тех случаях, когда он является основным действием.
Выход из поиска заменили на иконку. Раньше эта кнопка была текстовой и доставляла проблемы при локализации.
Context Menu
Контекстные меню редко встречаются в нативных приложениях. В своих проектах мы их не использовали, потому что нельзя было кастомизировать фон — они выглядели чужеродно, особенно в тёмной теме. В iOS 26 за счет стекла такие меню будут лучше сочетаться с интерфейсом.
Разбираем на примере
Сейчас в активной разработке находится внутренний финтех-продукт для управления личными финансами Moneon. Его дизайн был уже готов, но с выходом iOS 26 потребует обновления.
Изменения коснутся только системной навигации Tab Bar и Navigation Bar. Также мы начнем использовать Context Menu вместо кастомного Bottom Sheet.
В Moneon целевое действие — это добавление транзакции, для чего ранее использовался FAB. В обновлении от FAB пришлось отказаться, так как он не сочетается с новой навигацией. Взамен решили использовать разделенный Tab Bar, а вместо поиска поставить добавление транзакции.
Пока непривычно. Создается впечатление, что навигация потерялась совсем, но это ощущение возникает только на макетах. На первых тестовых сборках приложения всё выглядит очень органично.
Поддерживать консистентность с Android-версией по-прежнему не проблема — различаться будет только навигация и пара паттернов поведения. Так что со временем все мы привыкнем к новому «стеклянному» стилю.
Что вы думаете о Liquid Glass? Уже тестировали новый HIG в Figma? Делитесь впечатлениями в комментариях.
А если хотите адаптировать ваш продукт под новые гайдлайны или нужна консультация по разработке мобильных приложений — пишите нам в Telegram. Мы умеем не только наводить красоту после апдейтов, но и превращать их в хороший UX.
CleverPumpkin уже 14 лет создаёт мобильные приложения и цифровые сервисы под ключ — от идеи до поддержки. На Хабре мы делимся опытом, рассказываем о проектах, технических сложностях и решениях, которые помогают бизнесу достигать целей.