UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Создание эффекта глубины без использования тени
Редакція
Редакція

Опубліковано

Создание эффекта глубины без использования тени

Сказать, что я был разочарован, когда Apple выпустила iOS7 в 2013 году, это ничего не сказать. Чтобы быть в тренде, Apple сплюснула весь свой пользовательский интерфейс без каких-либо реальных усиливающих принципов. Это сопровождалось бесчисленными ошибками для пользовательского опыта, который отошел на задний план, чтобы избавится от скевоморфизма. Это была плоскость во имя плоскости. Сравните это с Material Design Google, который появился вскоре после этого. Material Design по максимуму использовал плоский дизайн с помощью одной особенности – имитация реальных материалов. Этот, создающий эффект присутствия, язык дизайна содержал плоский вид, одновременно поддерживая глубину. Как? Используя большие мягкие падающие тени.

Просто взглянув на два языка дизайна, становится понятно, что материальный дизайн придерживался лучшего подхода. Даже отложив в сторону богатые анимации, Material Design обеспечил более понятный пользовательский интерфейс, который также был перспективным и визуально привлекательным. Он был плоским, но с важным компромиссом тени. Этот небольшой компромисс позволяет материальному дизайну поддерживать глубину и выглядеть более элегантным. Даже Apple, похоже, думает также. С тех пор они позволяют падающим теням ненавязчиво присутствовать в своих пользовательских интерфейсах.

А теперь Microsoft, которые были плоскими до того, как это стало клевым, объявили о своем новом языке дизайна – Fluent Design. Он выглядит великолепно, но он также выглядит очень модно – большие, мягкие тени.

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

Другой подход

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

Итак, как мы воспринимаем глубину, когда нет теней? Есть несколько простых ответов. Масштаб – это самое очевидное решение. Большие вещи рядом, маленькие объекты находятся далеко. Линейная перспектива – другой вариант, использующий размерность объектов, чтобы удалять в пространство. Но для того, чтобы любой из этих подходов был действительно эффективным, потребовалась бы 3D-среда. Построение двумерного пользовательского интерфейса вокруг этих трехмерных принципов было бы неудобным и отвлекающим. Пока дополненная и виртуальная реальности более распространены, это просто не вариант.

Горы, атмосфера

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

Создавая эффект

Создание эффекта глубины без использования тени

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

Создание эффекта глубины без использования тени, содержание слоев

Содержание

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

Атмосфера

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

Оттенок

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

Создание шагов

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

Создание эффекта глубины без использования тени, оттенки цветов

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

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

Реализация в пользовательском интерфейсе

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

Интерфейс IOS в модели атмосферы

Apple Music IOS в модели атмосферы

Результат? Система работала. По крайней мере, на мой взгляд. Может быть, вы думаете: “Нет, этот дизайн выглядит размытым и приглушенным”. На самом деле он отлично смотрится на самом устройстве. Что меня больше всего удивило, так это то, как мой глаз, естественно, нашел свой путь через интерфейс. Интерактивные элементы казались выпрыгивали, что упрощало их поиск и фокусировку. Остальные элементы отступили в пространстве, все еще обеспечивая контекст и глубину. И лучшая часть?

Не требуется ни одной падающей тени.

Уровень ОС дизайн систем

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

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

Интерфейс MacOS в модели атмосферы

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

Несколько примечаний напоследок

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

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

Наконец, я хотел бы узнать, что вы думаете! И дайте мне знать.

Привет!

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

Посмотрите мои работы


Перевод статьи scottjensen

Топ коментарі (0)