Современные UI-тренды и как использовать их в разработке приложений

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

Изучив Windows 11, Android 12 и iOS 15, которые вышли в этом году (и прошлогоднюю macOS Big Sur), я заметил довольно много общего в дизайне основных операционных систем. В некоторых случаях вообще кажется, что все идет к конвергенции (слиянию). Это касается разных деталей: от линейных иконок до вариативных шрифтов и вложенных элементов.

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

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

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

1. Линейные иконки, дополняющие шрифт

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

Дизайнеры стремились помочь пользователю безболезненно перейти от физического взаимодействия к цифровому. Яркий пример — иконки Сьюзан Каре для оригинального Macintosh, а также фотореалистичный набор Microsoft в Windows Vista и 7.

Когда в Windows 8 и iOS 7 на смену скевоморфизму пришел “плоский” дизайн, иконки стали монохромными и линейными. А с выпуском Android 12 и новой версии материального дизайна Google — Material You (или Material Design 3) все основные операционные системы стали использовать этот новый стиль.

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

При разработке иконок учитываются те же факторы, что и при создании шрифтов, и они часто появляются рядом с текстом. — Руководство “Material Design 3”

Иконография гармонично сочетается с системным шрифтом San Francisco. — Руководство Apple “Human Interface Guidelines”

Яркий пример — символы SF от Apple: они имеют те же 9 начертаний, что и системный шрифт, и выровнены по высоте заглавных букв. Это означает, что иконки реагируют на настройки пользователя, если человек включает полужирное начертание, чтобы текст было проще прочитать.

Дизайн-команда Uber использовала аналогичный подход: иконки дополняют фирменный шрифт Uber Move, и имеют 3 начертания для расстановки акцентов.

Иконки имитируют системы письма

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

Они аналогичным образом появились в результате перехода человечества от пиктограмм, напоминающих реальные объекты, (таких как египетские иероглифы) к более абстрактным символам. Например, чтобы рассказать о птице, не обязательно ее рисовать: просто напишите несколько букв. 

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

Еще одно преимущество линейных иконок состоит в том, что для обозначения их состояния или выделения, как в случае с полужирным шрифтом, можно использовать заливку. Например, в Material Design 3 “иконки с заливкой указывают на активное состояние элемента”, а Apple в своем руководстве Human Interface Guidelines предлагает “отмечать с помощью заливки выбранные опции” или “расставлять визуальные акценты”. 

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

Предсказывать будущее — глупая затея, но, если проанализировать историю письменности, то становится понятно, что все системы постепенно сближаются, символы представляют одни и те же звуки и идеи: например, “а” всегда означает “а”, а буквы “муравей” — соответствующее насекомое. Конечно, остаются разные варианты написания этих символов (заглавная буква А с засечками или без), но все они примерно одинаковы во всех гарнитурах.

Иконография, похоже, движется в том же направлении. Ниже вы можете увидеть, как выглядит иконка “Добавить папку” у Apple, Google и Microsoft: основа везде одна и та же — контур закрытой папки с символом “+”. По мере того, как иконки становятся все более привычным элементом графического интерфейса, люди запоминают значение конкретных символов и различия становятся чисто стилистическими, как и в случае с текстом.

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

В этом случае обратитесь к одному из проверенных наборов линейных иконок, например, бесплатным Feather icons или Iconic.app. А если вы раньше использовали материальные иконки с заливкой, как мы, вы можете с легкостью поменять их стиль на линейный (Кажется, в Material Design 3 Google сделал этот вариант стилем по умолчанию.)

2. Персонализация на основе обоев

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

Лучше всего об этом сказано в блоге Google о материальном дизайне: “Пользователи настраивают рабочий стол и в реальном, и в цифровом мире, добавляя личные изображения, которые доставляют им радость и обеспечивают комфорт.”

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

Техника соединения обоев и UI существует не первый год: от полупрозрачной панели инструментов и меню в интерфейсе Aqua Mac OS X до прозрачных рамок окон в теме Aero Glass Windows Vista и 7. Знаменитая iOS 7 сделала размытый фон неотъемлемой частью UI: целые экраны, например, Центр уведомлений и Центр управления, отображали размытую версию установленных пользователем обоев.

В последнее время обои начали влиять на все элементы UI. В темном режиме macOS Mojave Apple фон открытых окон подстраивается под цвет обоев, что называется Desktop Tinting. В руководстве Human Interface Guidelines сказано, что благодаря этому “окна более гармонично сочетаются с остальным контентом”.

Позднее в большом обновлении Big Sur компания расширила применение этой функции. Теперь фон окон аналогичным образом меняется и в светлом режиме.

Windows 11 представила похожее решение — материал Мика, который описан в руководстве по дизайну как “непрозрачный материал, использующий тему и фоновый рисунок рабочего стола для получения персонализированного внешнего вида.” Соответствующий оттенок также применяется для обозначения активного окна.

На новый уровень выходит и Material You в Android 12: под цвет обоев подстраивается не только фон приложения, но и акцентные цвета кнопок и других элементов управления, а также более нейтральный цвет текста. Вся цветовая палитра генерируется с учетом обоев каждого отдельного пользователя.

Важнейший принцип новой дизайн-философии Google: “Что если форма следует не за функцией, а за эмоциями?” Это фактически полный отказ от “универсального” дизайна с высокотехнологичным интерфейсом для удовлетворения потребностей пользователей. Будет интересно посмотреть, последуют ли этому примеру другие компании.

Система цветов материального дизайна

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

Мы раскроем эту тайну, если внимательно изучим недавно опубликованный репозиторий утилит цветовой системы материального дизайна на GitHub:

1. Команда разработала собственную систему цветов: “оттенок, цветность, тон” или “HCT” (hue / chroma / tone) на основе цветовых моделей CAM16 и CIELAB (или LAB). CAM16 является преемником LAB: эта модель была разработана с учетом того, как люди воспринимают цвет.

2. Ключевым в этих моделях является “тон” или значение L *, которое описывает воспринимаемую яркость цвета. При этом значение L *, равное 0, соответствует черному цвету, а 100 — белому. Это очень помогает в разработке доступных цветовых палитр, поскольку помогает обеспечить достаточную контрастность цветов на основе воспринимаемой яркости.

3. Согласно рекомендациям по обеспечению доступности веб-контента (WCAG 2), минимальный контраст для основного текста составляет 4,5:1. Применение воспринимаемой яркости напрямую в качестве значения для описания цвета упрощает задачу.

Как объясняет команда: “В отличие от коэффициента контрастности, измерение контрастности в L * является линейным, вычисления простыми, а разница в 50 единиц гарантирует коэффициент контрастности больше или равный 4,5”.

4. Учитывая все вышесказанное, осталось лишь создать палитру цветов с разными тонами или значениями L * и применить к ней любой оттенок. Затем подберите достаточно контрастные пары для элементов пользовательского интерфейса. Например, кнопка, которая имеет фон с L* = 40 и содержит белый текст (L * = 100) соответствует минимальным требованиям контрастности (разница значений L * больше 50).

LCH для всего остального

Это эффективная техника, которая позволяет без особых усилий генерировать доступные цветовые сочетания, но для нее не требуются утилиты цветов. Модель LAB можно представить как LCH (яркость, цветность, оттенок), по аналогии с системой цветов HCT, где значение L используется для расчета контраста.

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

(Кроме того, LCH входит в веб-стандарты как часть CSS Color Level 4! Вы можете написать lch (40% 44 49) в CSS и не конвертировать этот цвет в HSL или RGB, но, к сожалению, на сегодняшний день такой код поддерживается только браузером Safari. Леа Веру, автор статьи, ссылку на которую я оставил выше, является членом рабочей группы W3C CSS, разрабатывающей этот самый стандарт.)

Итак, все, что вам нужно сделать, — преобразовать начальный цвет в LCH и менять значение L, чтобы создать палитру. Затем используйте комбинацию цветов, яркость которых различается не менее, чем на 50 единиц, что обеспечит достаточный контраст.

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

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

До разработки HCT дизайн-команды из Lyft и Stripe изучали ту же проблему, и Stripe в конечном итоге также пришел к использованию LCH. Я оставляю ссылки на оба их исследования, которые будет полезно почитать, если вы заинтересовались этой темой.

Как применить эту технику? Существует несколько инструментов для конвертации цветов в LCH и обратно:

• Леа Веру создала палитру для выбора LCH-цветов,
• веб-сайт Colord позволяет конвертировать LCH в hex или RGB,
• если у вас Mac, отличное решение — приложение System Color Picker от Синдре Сорхуса,
• а сервис Accessible Palette генерирует цветовые палитры LAB/LHC.

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

3. Гармоничные скругленные углы

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

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

Такое же правило применяется в дизайне самих устройств: у iPad Pro и iPhone X скругление углов экрана соответствует рамке устройства. На iPhone контуры нижней панели меню также сочетаются с углами дисплея — Apple даже указывает точные параметры в своем программном обеспечении. В видеоплеере вы найдете еще больше элементов, радиус углов которых соответствует контурам экрана.

Для измерений использовались встроенный в Sketch шаблон иконки приложения iOS и радиус углов экрана iPhone 12 из библиотеки ScreenCorners Кайла Башура. Радиус иконки приложения остается неизменным во всей системе и не соответствует радиусу углов дисплея.

Как ни странно, этот принцип не применялся к UI-элементам, которые сохраняли единый радиус углов. В Material Design 2 как диалоговые окна, так и внутренние кнопки имели радиус 4dp, несмотря на то, что расстояние между ними было равно 8dp.

Аналогичный дизайн можно было увидеть в macOS во времена операционной системы Yosemite, а в Windows 10 практически все UI-элементы имели квадратные углы.

В Big Sur и Windows 11 нужный эффект был достигнут за счет увеличения радиуса углов крупных UI-элементов. В macOS кнопки теперь имеют радиус 5pt, а диалоговые окна — 10pt. Кроме того, чтобы форма элементов соответствовала углам устройств, Apple использует “сглаживание углов”. В Windows 11 ранее острые углы были скруглены, и теперь кнопки имеют радиус углов 4px, а окна — 8px.

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

• в Big Sur радиус углов стал больше, и применяется сглаживание углов, благодаря чему они выглядят более плавными,
• в iOS 15 появились кнопки с полностью скругленными углами,
• в Windows 11 исчезли острые углы у большинства UI-элементов,
• в Android 12 был увеличен радиус углов диалоговых окон, навигационных панелей и полностью скруглены углы кнопок, что резко контрастирует со всеми предыдущими версиями материального дизайна.

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

4. Оптические размеры вариативных шрифтов

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

Вариативные шрифты — новый формат на основе OpenType, который позволяет дизайнеру настраивать “вариативные оси” (или переменные), например, начертание, наклон и оптический размер. Обратитесь к этому отличному учебнику, чтобы узнать больше о вариативных шрифтах. Кстати, весь текст набран Roboto Flex, вариативной версией гарнитуры Roboto от Google.

В 2021 году все основные операционные системы используют оптические размеры в UI-типографике:

• Системный шрифт Apple San Francisco был выпущен в 2015 году в двух оптических размерах: «Display» для размеров 20pt и больше и «Text» для всех остальных. В 2020 году Apple объединила эти версии в один вариативный шрифт SF Pro с осью для настройки оптического размера. При создании системных иконок Apple, SF Symbols, также использовалась эта техника.
• Компания Microsoft изменила свой системный шрифт Segoe UI на Segoe UI Variable с осью для настройки оптического размера в Windows 11.
• А Google представил в рамках Material Design 3 GS Text и GS Variable — обновление своего корпоративного шрифта Google Sans.

Обратите внимание: все это разные виды шрифтов без засечек. San Francisco — неогротеск, Segoe — гуманистический гротеск, Google Sans — геометрический гротеск.

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

Бета-версия разработанного Расмусом Андерссоном шрифта Inter, популярность которого постоянно растет, включает оптический размер “Display”. А пока, чтобы дизайн получился удачным, подберите для заголовков более выразительный шрифт. В Rowy я использовал Inter для маленького текста и Space Grotesk в заголовках, чтобы лучше выразить характер бренда.

5. Контент в центре внимания

Плоский дизайн существует уже более 10 лет, и его основная цель — сфокусироваться на контенте, устранив беспорядок и лишний декор UI-элементов. В руководстве по дизайну iOS 15 говорится: “лаконичный привлекательный интерфейс помогает людям понимать информацию и взаимодействовать с контентом, а не вступать с ним в схватку.”

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

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

Все эти приемы преследуют одну и ту же цель: уменьшить визуальный шум и вывести контент на первый план.

Как применить эту технику? Соедините с фоном панель навигации, закрепленную сверху, и делайте ее заметной, когда пользователь начинает прокручивать контент или совершает другие активные действия. Разместите основной контент на отдельном не слишком ярком слое. Мы используем библиотеку React UI, MUI, которая позволяет без труда получить нужный эффект: панель навигации отделяется от остального контента только при прокрутке.

6. Вложить все

Появляется все больше вложенных UI-элементов, которые уже не занимают всю ширину контейнера. Когда в iPhone X вместо кнопки “Домой” прямо на экране появился виртуальный индикатор “Домой”, компания Apple внесла изменения в свое руководство по дизайну и указала на необходимость использования вложенных кнопок со скругленными углами, отказавшись от полноразмерных кнопок (на всю ширину экрана), представленных в iOS 7. 

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

В iOS 15 разработчики Apple изменили внешний вид многих приложений, таких как “Настройки” или “Почта” и внедрили табличное представление данных. Похоже, это ответ на то, что экран iPhone становится все больше и больше. В руководстве отмечается: “когда пространство ограничено, в таблице возникает проблема с переносами текста, особенно если контент локализован”.

В macOS Big Sur, как и в iPadOS, такой дизайн применяется и к спискам в приложении “Почта”. Его также можно увидеть в различных меню, включая панель меню на рабочем столе. Обратите внимание, что область клика занимает всю ширину меню, как и в прежнем полноэкранном дизайне.

Windows 11 использует аналогичный стиль в меню и элементах навигации, как и Android 12 в системных UI-элементах и приложениях.

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

7. Цвет – не единственный способ дифференциации

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

• В 2017 году Spotify добавил точки под кнопками случайного воспроизведения и повтора вместо того, чтобы полагаться только на изменение их цвета.
• В Material Design 3 для обозначения активных страниц в панели навигации используется индикатор в форме капсулы и иконки с заливкой.
• В Windows 11 выбранные опции в списках и панелях навигации отмечены единообразными заметными линиями.

Эта идея повлияла и на наше решение изменить дизайн кнопок-переключателей в Rowy:

8. Стандартный дизайн переключателей

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

В каком направлении движется UI-дизайн?

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

• Рост популярности линейных иконок, имитирующих текст, указывает на то, какую важную роль играют эти символы в коммуникации.
• Тенденция к большей персонализации элементов интерфейса (особенно в Material You) свидетельствует о том, что людям нравится делать вещи, которые они используют, включая технологии, своими.
• Вдохновением для гармоничных скругленных углов и вложенных элементов послужили физические объекты и промышленный дизайн, то есть теперь программное обеспечение в большей степени соответствует устройствам.
• Вариативные шрифты с оптическими размерами применялись еще на заре типографики. В сочетании с дополнительными способами дифференциации элементов (помимо цвета), они делают интерфейсы более удобными для пользователей, особенно с ограниченными возможностями.
• Не менее важны и небольшие изменения: если вы сократите визуальный шум и выведете контент на первый план, людям будет проще сфокусироваться на своих задачах. А стандартный дизайн переключателей снижает когнитивную нагрузку и позволяет мгновенно определить, для чего предназначен конкретный элемент интерфейса.

Такое дизайн-мышление готовит нас к технологиям следующего поколения, в основе которых лежит AR/VR-метавселенная. Нам предстоит выяснить опытным путем, как она улучшит человеческий опыт и будет взаимодействовать с физическим миром. Дизайнеры уже ищут способы адаптировать дизайн-системы под эти изменения. Решения выше, например, применение науки о цвете (система цветов HCT учитывает особенности восприятия) и вложенные элементы, упрощающие изучение контента, помогут нам совершить переход из 2D мира в 3D-метавселенную.