Какие дизайнерские нововведения нам принёс iOS14
С выпуском iOS 14 и macOS Big Sur мы стали свидетелями следующего заметного обновления в дизайне пользовательского интерфейса, предлагаемого Apple. Изменения не столь революционны, как с пришествием iOS 7 лет назад, но они, несомненно, представляют собой тенденцию, которой дизайнеры пользовательского интерфейса будут следовать в будущем.
Плоский дизайн больше не в тренде
Давайте проясним: минимализм не означает плоский. Некоторые люди склонны использовать эти термины как одно и тоже. Новые операционные системы Apple остаются минималистичными, но при этом используют тени для придания легкого объема в элементах интерфейса.
Как сказала Алан Дай, вице-президент по человеческому интерфейсу в Apple: «Глубина, затенение и полупрозрачность используются для создания иерархии. Новые материалы - богатые и яркие…»
Apple снижает визуальную сложность и делает дизайн еще более минималистичным. Некоторые элементы более плоские, но ощущение от них противоположное. И iOS, и macOS предоставляют пользователям больше трехмерных измерений.
Совет дизайнерам: подумайте, как минимализм может занять место в вашем дизайне. Обратите внимание, как простые эффекты (тени, полупрозрачность) создают визуальную иерархию.
Новые возможности
Человеческому мозгу нужна подсказка, чтобы распознать объект. Мы склонны воспринимать трехмерные объекты как интерактивные. Вот почему у многих кнопок все еще есть тень.
Однако движение также является дополнительной подсказкой. Дизайнеры Apple знают об этом, и значки на панели инструментов macOS потеряли свою форму, чтобы уменьшить визуальную сложность. Но когда пользователь перемещает курсор, его фон выделяется и побуждает его совершить действие.
Последняя очевидная подсказка - это цвет. Apple хочет, чтобы дизайнеры использовали цвет Tint (или Accent), чтобы сделать активные элементы более заметными (все, что раньше было просто голубым теперь может иметь свой цвет). Этот тон должен отражать цвет бренда или продукта. Благодаря этому пользователь сразу выстраивает мысленную связь между компанией и приложением.
Совет для дизайнеров: не каждая пуговица или кнопка должна иметь форму. Подсказка может появиться, когда пользователь наводит курсор на нужный элемент. Поэкспериментируйте с оттенками и устраните визуальную сложность там, где это возможно.
Цифровые материалы
Все началось с Material Design от Google, который представил нам концепцию цифровой бумаги, затем Microsoft представила Fluent Design с несколькими цифровыми текстурами. Похоже, Apple последовала этому примеру, более того, они перевели это на новый уровень!
Это отличное решение, потому что цифровые материалы более приятны нашему уму, чем необработанные пиксельные квадраты. Они делают пользовательский интерфейс более удобным для человека.
Совет для дизайнеров: поиграйте с концепцией цифровых материалов. Используйте глубину, тени и полупрозрачность для создания визуальной иерархии. Если вы еще не знакомы с Material Design или Fluent Design System, прочтите их рекомендации, чтобы понять концепцию.
Незаметные эффекты создают ощущение качества
Есть крошечные детали, которые имеют значение. Вы не можете увидеть их все в макетах или скриншотах, потому что некоторые из них являются движущимися или звуковыми (да, Big Sure представляет десятки новых и улучшенных звуков для пользовательского интерфейса).
Дизайнеры в первую очередь видят эффект размытия следующего поколения - прогрессивное размытие. Речь идет о создании нескольких уровней размытия вместо того, чтобы использовать непрозрачность или тени.
Совет для дизайнеров: узнайте, где и как в новой ОС используется прогрессивное размытие. Подумайте, как это можно применить в ваших проектах. Какие инструменты дизайна могут достичь такого эффекта сейчас?
«Глубина, Затенение и Прозрачность используются для создания иерархии», - Алан Дай.
Новый скевоморфизм
В последние годы в macOS иконки приложений были сглажены и окружены символами в основном круглой формы. Это изменилось. Сейчас большинство иконок приобрели «iOS-подобную» форму, но не плоскую. Это снова скевоморфизм!
Многие новые значки в macOS выглядят потрясающе, но некоторые из них не так хорошо проработаны (например, значок приложения Stock).
Совет для дизайнеров: изучите галерею новых значков. Посмотрите, как дополнительные тени и градиенты меняют ощущение плоских значков iOS, которые идеально подходят к стилю значков Big Sur. Рассмотрите возможность использования трехмерных фигур для некоторых элементов. Однако учтите, что создание новых иконок в скевоморфизме должно быть уместно. С этим стилем нужно быть очень аккуратным.
Важная информация - в виджетах
Самой заметным визуальным нововведением iOS 14 стали, конечно, виджеты. Они отображаются прямо на главном экране. Эти виджеты работают идентично на iPad OS и очень похожи на новые на macOS Big Sur.
Apple рекомендует сфокусировать виджет на одной идее. Чтобы отображать только ту информацию, которая с ней связана, не более того. Также важно отображать динамическую информацию, которая меняется со временем, потому что виджет должен не просто поощрять открытие приложения, а информировать пользователя.
Совет для дизайнеров: подумайте, какая информация из вашего приложения является наиболее важной для пользователей. Этот тип контента может стать основой полезного виджета. Попробуйте поэкспериментировать с новыми размерами (малый, средний и большой) виджетов, отображаемых прямо на главном экране. Помните, чтобы нужно поддержать и темный режим!
Целостный подход к экосистеме
Все системы Apple iOS, iPadOS, macOS и даже watchOS работают как единая экосистема. У них одинаковый шрифт, иконография и почти одинаковые визуальные стили.
Последовательность дает пользователю чувство знакомства и уверенности. Это укрепляет доверие и улучшает связь с брендом.
Совет для дизайнеров: если вы создаете омниканальное решение, доступное для всех типов устройств, обратите внимание на то, как приложения Apple меняются на разных платформах. Как сохраняется согласованность? Где существуют изменения? Какие функции добавлены на разные платформы?
Следить за действиями Apple очень полезно не только с точки зрения понимания работы платформ, но и с точки зрения вашего собственного продукта. Понимая тенденции, вы сможете создавать лучшие приложения и бесшовно встраиваться в системы, создаваемые самой дорогой в мире компанией.
Дополнительно