Современные UI-тренды и как их применять в ваших приложениях


28.01.2022 Время чтения - 19 минут 1710

Если вы похожи на меня, то вы наверняка любите читать про все новые релизы ПО, обзоры новых функций и обновлений UI. А особенно сравнивать их с предыдущими версиями. С выходом Windows 11, Android 12 и iOS 15 (и macOS Big Sur чуть раньше) я заметил довольно много общего в дизайне основных ОС. Это проявляется в разных вещах – от использования контурных иконок до вариативных UI-шрифтов и inset-элементов.

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

Я работаю фронтенд-разработчиком в Rowy и недавно выполнил редизайн его UI. Основной целью было улучшение информационного взаимодействия с рабочим столом. Плюс я хотел отойти от канонов Material Design 2015 года, ориентированного на мобильные устройства, который мы использовали до этого. Перейти к чему-то более современному и похожему на те хорошие UI, к которым мы привыкли сегодня. Тенденции, которые я заметил, помогли определить этот редизайн и, надеюсь, помогут вам при разработке ваших приложений.

Список того, о чем я хочу поговорить.

  • Контурные иконки по умолчанию, дополняющие текст
  • Персонализация на основе обоев
  • Закругленные углы это гармонично
  • Вариативные UI-шрифты с оптическими размерами
  • Фокус на содержании
  • Inset во всем
  • Дифференциация без упора на цвет
  • И стандартный дизайн переключателя

Контурные иконки по умолчанию, дополняющие текст

Иконки – важная часть UI. За последние несколько десятилетий они стали символом трендов в дизайне пользовательских интерфейсов. Когда графические UI были чем-то новыми, иконки имитировали объекты реального мира с максимально возможной детализацией в рамках ограничений технологии отображения. Они были созданы для того, чтобы связать пользовательский опыт с физическим миром. Это видно по иконкам Сьюзан Каре для оригинального Macintosh и фотореалистичному набору Microsoft в Windows Vista и 7.

Когда пользовательский интерфейс перешел от этого скевоморфного стиля к «плоскому» в Windows 8 и iOS 7, дизайн иконок тоже перешел к монохромному контурному стилю. А с выпуском Android 12 и новой версии Material Design от Google под названием Material You (или Material Design 3) все основные ОС стали использовать этот стиль.

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

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

Иконография предназначена для полной интеграции с системным шрифтом San Francisco.
– Руководство Apple Human Interface

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

Набор иконок Apple SF Symbols разработан с теми же девятью насыщенностями, что и их системный шрифт. Источник: Apple
Они выравниваются по высоте системного шрифта, чтобы лучше дополнять текст. Источник: Apple

Команда дизайнеров Uber аналогичным образом создала иконки, дополняющие их шрифт Uber Move. Доступны три варианта насыщенности для разной степени выделения.

Источник: Uber

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

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

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

Еще одним преимуществом контурных иконок по умолчанию является то, что закрашенные варианты можно использовать для обозначения состояния или выделения. Как в случае с жирным текстом. В Material Design 3 активные состояния как раз представлены закрашенными иконками, а Apple в своем Руководстве Human Interface предлагает «использовать вариант заливки для обозначения выбора» или «чтобы придать символу больший визуальный акцент». Редизайн Twitter 2021 года сделал еще один шаг вперед: активная страница выделяется только заполненной иконкой и жирным текстом без изменений цвета.

Твиттер использует только заполненные иконки и жирный текст, чтобы выделить текущую страницу. Эксперты все еще не знают, достаточно ли это доступно.

Предсказывать будущее – глупая затея, но глядя на историю систем письменности, можно заметить сходство в том, какие символы представляют какие звуки и идеи. Символ «а» всегда означает «а», а сочетание букв «ant» означают насекомое, которое называется муравьем. Существуют различия в том, как эти символы вырисовываются (заглавная буква «А» может иметь или не иметь засечки), но все они в основном выглядят одинаково для разных шрифтов.

Иконография тоже движется в этом направлении – иконка «добавить папку» ниже имеет одинаковый базовый дизайн в наборах иконок Apple, Google и Microsoft. Везде это контур закрытой папки Manila с символом «+». По мере того, как иконки становятся все более распространенными в графических интерфейсах, люди склонны запоминать, какие символы представляют какие идеи. А различия становятся чисто стилистическими, как и в случае с текстом.

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

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

Персонализация становится все более важным элементом UI-дизайна. В то время как кастомизация существует с 90-х годов в виде возможности выбрать пользовательские обои и темы, сейчас дизайнеры находят еще больше способов персонализировать интерфейс. В первую очередь с помощью обоев, выбранных пользователем. Лучше всего об этом сказано в блоге Material Design от Google: «Пользователи настраивают свои рабочие столы в физическом и цифровом мирах с помощью изображений, которые являются личными и обеспечивают комфорт и радость». Обои – это первое, что видит пользователь, и они служат фоном для пользовательского интерфейса. Так что адаптировать остальную часть пользовательского интерфейса к этому элементу не составит труда.

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

Совсем недавно обои начали влиять почти на весь пользовательский интерфейс. Когда Apple представила темный режим в macOS Mojave, они включили оттенок фона окон на основе обоев, который называется «Оттенок рабочего стола». Согласно Руководству Apple Human Interface, это «помогает окнам более гармонично сочетаться с окружающим их содержимым».

Источник: Apple

Позже они расширили это в своем крупном редизайне Big Sur, применив тонировку рабочего стола и к светлой теме:

Слева на фон окна наложен легкий фиолетовый тинт в тон обоев.  Справа тонировка отключена, а фон окна чисто серый.

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

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

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

Источник: Google

Material Design построил цветовую систему

Что команда Material Design не упомянула в своих заявлениях, так это то, как они этого добились. Особенно учитывая, что они говорят, что «должны были найти способ обеспечивать достаточный контраст для всех цветовых комбинаций […] без тестирования каждой из них». Погружение в недавно опубликованный Material color utilities repo на GitHub раскрывает всю тайну:

  1. Команда Material создала собственную цветовую систему: «оттенок, насыщенность цвета, тон» или «HCT» (hue, chroma, tone) на основе моделей цветового представления CAM16 и CIELAB (или LAB). CAM16 – преемник LAB, разработанный с учетом того, как люди воспринимают цвет.
  2. Ключом к этим моделям является «тон» или значение L*, которое описывает воспринимаемую яркость или светлоту цвета. При L*, равном 0, значение соответствует черному цвету, а 100 – белому. Это очень полезно при создании доступных цветовых палитр, обеспечивая достаточную контрастность цветов на основе воспринимаемой яркости.
  3. В Интернете рекомендации WCAG 2 предписывают минимальный контраст 4,5:1 для основного текста. Непосредственное использование воспринимаемой яркости в качестве значения для описания цвета делает это гораздо проще. Как объясняет команда Material: «В отличие от коэффициента контрастности, измерение контрастности в L* является линейным, и его легко вычислить […] разница в 50 гарантирует отношение контрастности >=4,5».
  4. С этими знаниями все, что остается, – это сгенерировать палитру цветов с разными тонами или значениями L* и применить к ней любой оттенок. Затем используйте достаточно контрастные пары для элементов пользовательского интерфейса. Например, кнопка может иметь фоновый цвет с L*=40 и белый текст (L* = 100), и она легко будет соответствовать требованиям минимальной контрастности (разница L* > 50).
Источник: Google

LCH для остальных

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

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

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

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

Источник: Google

Еще до HCT от Material команды дизайнеров Lyft и Stripe исследовали ту же проблему. И в конечном итоге Stripe тоже использовали LCH. Я связал оба их отличных исследования.

Как этого добиться нам? Есть несколько инструментов для преобразования в LCH и наоборот:

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

Two UI themes based on a different primary color. On the left, the primary color is purple and on the right, it’s red. The UI colors for backgrounds and shadows are displayed as LCH. The L and C values are the same across the two themes, but the H value matches the hue of the primary color.

Закругленные углы это гармонично

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

Пример этому можно найти даже в дизайне физических объектов: закругленные углы элементов соответствуют рамке устройства в дизайне iPad Pro и iPhone X. На iPhone со скругленными экранами панель приложений соответствует кривизне экрана – Apple даже указывает точный размер до сотых в своем ПО. То же самое можно увидеть и на примере элементов видеоплеера, которые тоже соответствуют кривизне экрана.

Аннотированный скриншот док-станции iPhone.  Радиус угла дисплея составляет 47,33 pt, расстояние между дисплеем и док-станцией — 12 pt, а радиус угла док-станции — 35,33 pt.
Эти значения были измерены с использованием изображения, предоставленного во 
встроенном в Sketch шаблоне иконки приложения для iOS, и радиуса угла дисплея для iPhone 12 из библиотеки ScreenCorners Кайла Башура. Радиус иконки приложения остается одинаковым во всей системе, поэтому он не подстраивается под кривизну экрана.

Как ни странно, раньше этот принцип не применялся к UI-элементам, в которых использовался один радиус скругления углов. В Material Design 2 и у диалоговых окон, и у внутренних кнопок угловой радиус равен 4dp, несмотря на то, что между ними есть отступ в 8dp. У macOS то же самое было в дизайне еще времен Yosemite (ОС 2014 года), а Windows 10 использовала квадратные углы почти для всех элементов пользовательского интерфейса.

Однако в Big Sur и Windows 11 этот эффект аппроксимируется за счет увеличения угловых радиусов более крупных элементов интерфейса. В macOS у кнопок радиус теперь 5pt, а у диалоговых окон – 10pt. Плюс все они используют «сглаженные углы», чтобы гармонировать с углами устройств Apple. Между тем, Windows 11 классно скругляет ранее острые углы в кнопках на 4 пикселя и в окнах на 8 пикселей.

Аннотированные рядом скриншоты диалоговых окон Windows 11 и macOS 12.  Дизайн Windows 11 использует 8 пикселей для углового радиуса окна и 4 пикселя для кнопки.  Дизайн macOS использует 10pt для окна и 5pt для кнопки.

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

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

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

Annotated screenshot of a dialog window in Rowy. The window’s corner radius is 8px and and the button’s is 4px.

Вариативные UI-шрифты с оптическими размерами

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

Вариативные шрифты – это новый формат шрифта, основанный на OpenType. Он позволяет дизайнеру настраивать определенные «оси вариации» (или переменные) шрифта, такие как нефиксированная насыщенность, наклон и оптический размер. Вы можете узнать больше о вариативных шрифтах в этом отличном руководстве по ним. Оно использует Roboto Flex – вариативную версия гарнитуры Google Roboto.

Text samples of Segoe UI Variable, SF Pro, and Google Sans at different optical sizes that highlight the differences in designs at different optical sizes.

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

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

Еще обратите внимание: все эти шрифты представляют собой разные стили шрифтов без засечек. San Francisco – это неогротеск (neo-grotesque), Segoe – гуманистический (humanist), а Google Sans – геометрический (geometric).

Как этого добиться нам? Вариативные шрифты относительно новы, и производство их стоит дорого. Поэтому таких шрифтов не так много, особенно в свободном пространстве с открытым исходным кодом. До сих пор единственный вариативный шрифт с оптическими размерами и открытым исходным кодом, который я нашел, – это Roboto Flex. Но, похоже, и он еще не закончен. Становящийся все более вездесущим шрифт Inter Расмуса Андерссона имеет в бета-версии размер дисплея. В то же время использование более выразительного шрифта для самых важных заголовков может улучшить ваш дизайн. Для Rowy я использовал Inter в качестве шрифта для мелкого текста и Space Grotesk в заголовках для выделения бренда.

Typography scale used in Rowy. Headings use the font Space Grotesk and smaller UI text use Inter.

Фокус на содержании

Плоский дизайн (flat design) существует уже более десяти лет, и его основная цель – сосредоточиться на содержании. Избавиться от беспорядка и ненужных украшений UI-элементов. В рекомендациях по дизайну iOS 15 говорится: «Четкий, красивый интерфейс помогает людям понимать контент и взаимодействовать с ним, а не конкурирует с контентом за внимание пользователя».

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

A 2×2 grid of screenshots of navigation bars in iOS 15 (left column) and Android 12 (right column). The top row shows the navigation bars before scrolling, with a transparent background. The bottom row shows the bars with backgrounds after the user has scrolled.

На рабочем столе macOS Big Sur смешивает строку заголовка и панель инструментов, пока вы не начнете скроллить или не наведете курсор на панель на несколько секунд. А в некоторых приложениях в Windows 11 строка заголовка вообще не отделяется от контента. Именно контент там помещается на отдельных слоях-карточках.

On the top, two screenshots of the macOS toolbar design. On the left, the toolbar blends into the background by default. On the right, the toolbar has a shadow underneath as the user hovers over the toolbar. Below is a screenshot of the Windows 11 settings app, which always has a transparent background for the toolbar. The content below is housed in a card-like layer with a lighter background and shadow.

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

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

Two screenshots side-by-side of navigation bars in Rowy. On the left, the navigation bar blends into the background in the initial state. On the right, the navigation bar has a white background and shadow after the user has scrolled.

Inset во всем

В том же духе большинство UI-элементов стали делаться через inset, больше не занимая всю ширину своих контейнеров. Когда в iPhone X появился экранный индикатор «Домой» вместо кнопки «Домой», Apple изменила свои рекомендации, предписав кнопкам-вкладышам закругленные углы. И тем самым отказавшись от полноразмерных кнопок из iOS 7. Чтобы адаптироваться к новому дизайну iPhone, вместе с этим изменились и дизайны многих других элементов, закрепленных в нижней части экрана.

Screenshot of the Windows 11 Settings app, macOS 12 Mail app, iOS 15 Settings app, and Android 12 notification panel. In all screenshots, none of the UI elements touch the edge of the windows or screens and are contained in elements with rounded corners.

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

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

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

Two screenshots of menus in Rowy. In both, the menu items do not touch the edge of the menu container and items have rounded corners.

Дифференциация без упора на цвет

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

  • В 2017 году Spotify добавил точки под кнопки воспроизведения в случайном порядке и повтора вместо того, чтобы полагаться исключительно на изменение их цвета.
  • Material Design 3 отображает индикатор в форме таблетки и показывает активные страницы иконками с заливкой на панели навигации.
  • В Windows 11 к выбранным элементам в списках и навигационных панелях добавили хорошо различимую полоску.
Three screenshots. From the left: a Windows 11 navigation pane with a line on the left of the active page, the Spotify playback controls with repeat enabled and a dot below the repeat icon to signify state, and an Android 12 navigation bar with the current page signified by a pill shape behind the page icon.

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

Два скриншота дизайна кнопки-переключателя.  Слева: Material Design 2, в котором используется другой фон для обозначения активной кнопки.  Справа: Rowy, который использует линию в нижней части кнопки для обозначения активной кнопки.

И стандартный дизайн переключателя

Скриншоты дизайна тумблеров в Windows 11, macOS 12, iOS 15 и Android 12.

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

Куда движется UI-дизайн?

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

  • Приближение контурных иконок к тексту свидетельствует о важности иконок в коммуникации.
  • Все более персонализированные элементы интерфейса – а особенно направление, в котором двигается Material You, — показывают, что людям нравится делать вещи, которые они используют, своими собственными. Включая технологии, которые они используют каждый день.
  • Гармонично закругленные углы и элементы вставок вдохновлены физическими объектами и промышленным дизайном, поэтому наш дизайн все более точно соответствует устройству.
  • Использование вариативных шрифтов с оптическими размерами восходит к истокам типографики и, наряду с дифференциацией элементов без упора на цвет, повышает удобство использования для всех. Особенно для людей с ограниченными возможностями.
  • Помогают и более мелкие вещи: уменьшение визуального беспорядка для подчеркивания контента позволяет пользователям сосредоточиться на том, что они хотят делать. А использование стандартного дизайна переключателя устраняет любую когнитивную нагрузку, необходимую для понимания того, что делает элемент интерфейса.
Woman with VR headset on and controllers in hands at sunset.
Фото Vinicius «amnx» Amano на Unsplash

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