Мы все знаем, что Photoshop — это очень мощный инструмент. В этой статье я расскажу вам, как использовать фильтр Photoshop CS3 «»:

Мы создадим изображения, выглядящие, будто они были сняты со сдвигом и наклоном объектива. Инструмент «Размытие при малой глубине резкости » создает эффект более локальной глубины резкости, поэтому некоторые участки вашего изображения будут находиться в фокусе, а другие области будут размыты. В сочетании с альфа-каналом, который определяет направление размытости, у нас появляется мощный инструмент создания масок и изменения фотографий.

Проще всего на практике показать вам, как работает «Размытие при малой глубине резкости ».

Давайте рассмотрим простой пример:

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

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

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

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

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

Мы можем создать такой эффект в Photoshop . Во-первых, откройте изображение, к которому вы хотите применить эффект. Для пейзажей это подходит больше, особенно для снимков на открытом пространстве. Я буду использовать фото, которое я сделал на Гавайях несколько лет назад:

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

Чтобы изменить цветовой режим, перейдите в Изображение — Режим — Цвета RGB :

• Выберите инструмент «Градиент »;
• В панели инструментов нажмите кнопку «Зеркальный градиент »:

3. Выберите черный в качестве цвета переднего плана, белый — цвета фона;
4. Убедитесь, что для градиента задан переход от цвета переднего плана к цвету фона;
5. В палитре «Каналы » создайте новый канал;
6. Нажмите на значок видимости канала рядом с каналом RGB (первый в списке ):

• Теперь вы можете видеть, что на изображении появилась область красного тона. Создайте градиент, начиная от середины изображения (где будет находиться точка резкого фокуса ), и до точки, отдаленной на три четверти расстояния до верхней части изображения;
• Нажмите на канал RGB в палитре «Каналы »:

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

Прежде, чем мы применить «Размытие при малой глубине резкости », давайте сделаем копию изображения на отдельном слое, потому что оригинал понадобится нам позже. Нажмите на палитру слоев, выберите слой с вашим изображением, и нажмите Ctrl + J . Это создаст копию изображения в отдельном слое.

Теперь, при выбранном новом слое войдите в меню Фильтр — Размытие , а затем «Размытие при малой глубине резкости ».

У вас должно появиться следующее окно:

Для нашей карты глубины источник должен быть уже выбран — Alpha 1 (или как вы назвали канал карты глубины, который мы только что создали ).

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

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

Настройки для других опций этой панели я подбираю в значительной степени с помощью эксперимента. Я установил шестиугольную форму диафрагмы, «Кривизну листа » — 12, «Поворот » — 85, а значения остальных опций оставил по умолчанию.

Вы можете «потушить » яркость светлых частей изображения с помощью опции «Зеркальная подсветка ». Вы также можете добавить шум для размытых участков изображения с помощью опции «Шум ».

Кроме того, если вы рисуете градиент в неправильном направлении, то не нужно перекраивать карту глубины: просто установите флажок для опции «Инвертировать ».

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

Например, на моем изображении верхняя часть купола слишком размыта, на мой вкус — она должна быть более в фокусе. Я могу взять «Ластик » с довольно большой мягкой кистью и стереть часть слоя, в котором мы применили «Размытие при малой глубине резкости », чтобы проявить резкий слой ниже:

Это довольно несложно! И это значительно лучше, чем покупать специальный объектив. Законченную версию изображения в большом размере вы можете увидеть здесь :

Перевод статьи «How to use Photoshop’s Lens Blur tool for tilt-shift fakery (Part 1 of 2) » был подготовлен дружной командой проекта

ШАГ ВТОРОЙ: Переходим по вкладке главного меню Фильтр --> Галерея размытия --> Размытие диафрагмы (Filter --> Blur Gallery --> Iris Blur). Это действие откроет панели управления фильтром, а в центре фотографии появится эллипс с элементами управления. Размытие галерея. Контактный добавляется к центру изображения с эллипса вокруг него контроля над эффект размытия изображения (поместите курсор внутри эллипса, чтобы увидеть элементы управления,т.наз "булавки"):

ШАГ ТРЕТИЙ: В правой части экрана имеются две панели: вверху расположена основная панель с управлением количества размытия диафрагмы, а внизу панель с некоторыми дополнительными опциями и настройками для эффекта Боке.

ШАГ ЧЕТВЕРТЫЙ: На панели параметров, расположенной вверху окна Photoshop, также имеются элементы управления, которые могут пригодиться.

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

Совет: Включать/выключать просмотр можно нажатием клавиши P.

Значок в виде изогнутой стрелки называется "Удалить все булавки" (Remove All Pins). Нажатие на него удаляет все элементы управления с изображения, в т.ч. и эллипс, и Вам необходимо будет создавать их заново.

Кнопки как понятно по их виду, служат для принятия фильтра или его отмены.

ШАГ ПЯТЫЙ: Для перемещения эллипса, нажмите на булавку в его центре и перетащите его в новое положение, затем отпустите кнопку мыши. Чтобы изменить количество размытия, кликните по булавке и перетащите ползунок "Размытие" (Iris Blur), расположенный на панели, влево или вправо. Диапазон значений - от 0 до 500 px.

ШАГ ШЕСТОЙ: Четыре точки внутри эллипса регулируют плавность перехода от размытой области к не размытой в центре эллипса.

К области между четырьмя точками и центральной точкой (булавкой) эффект размытия не применяется вообще.

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

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

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

ШАГ СЕДЬМОЙ: Фильтр "Размытие диафрагмы" - это отличный способ для создания эффекта размытия в виде виньетки. Вы можете увеличить эллипс до тех пор, пока он не выйдет за пределы изображения, а затем настроить его так, чтобы у изображения били размыть углы. Для применение фильтра нажмите кнопку ОК или клавишу Enter:

Вот примеры полученных виньетированных изображений с глубиной:

Исходное:

Когда приходится создавать глубину резкости в программе Photoshop, многие пользователи применяют размытие по Гауссу или другие технические приёмы, после применения которых, эффект с трудом выглядит как реалистичный или близко даже нет к той глубине резкости, которую создаёт настоящая камера. В этом уроке, я покажу вам, как создать реалистичную глубину резкости в программе Photoshop, используя Карту Глубины. Наслаждайтесь.

Используя размытие по Гауссу для создания Глубины Резкости не самый хороший способ для достижения и вы чётко это видите на краях объектов и мелких деталях. Посмотрите на изображение ниже, которое приведено в качестве примера. Как вы можете увидеть, Размытие при малой глубине резкости выглядит более реалистично.

Что такое карта глубины?
Карта глубины в программе Photoshop это ничего более, чем изображение серой шкалы, которое используется в качестве альфа канала. Карту глубину можно применять через фильтр (Lens Blur filter), чтобы создать “выборочное размытие”. Фильтр применяет различную степень размытия к каждому оттенку серого. На более тёмных оттенках серого, будет меньше применяться размытие к вашему изображению. Посмотрите на изображение, расположенное ниже. Градиент справа - это используемый градиент, в качестве альфа канала.

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

Практический пример
Я взял фото из Интернета и поместил несколько шаров на различном удалении.

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

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

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

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

Примечание переводчика: Автор создал градиент, удалил половину градиента, скопировал и соединил. Вы можете воспользоваться Зеркальным градиентом (Reflected Gradient).

Следующий шаг - это выделение объектов и назначение каждому из них различного оттенка серого. Вы можете выделить объекты вручную с помощью инструмента Перо (Pen Tool) или Прямолинейного лассо (Polygonal Lasso Tool). В моём случае, у меня уже была копия шаров на отдельных слоях, поэтому, мне было намного легче их выделять.

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

Примечание переводчика: под деталями карты глубины, автор имеет ввиду слой градиента и слой с шарами или слои с другими объектами.

Я закрасил синий шар в чёрный цвет, потому что я хочу, чтобы он был сфокусирован и я придал различные оттенки серого остальным шарам. Зелёный шар (самый удалённый от синего шара) закрашен в светло-серые оттенки, почти что белый, таким образом, он будет самый размытый из всех шаров. Синий шар вообще не будет размыт, потому что я его закрасил в чёрный цвет.

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

После того как вы создали все детали, слейте слой градиента и детали в один слой, перейдите в закладку Каналы (channels), создайте новый слой и вклейте карту глубины.

Примечание переводчика: слейте слой градиента и слои с шарами или с другими объектами в один слой Слой - Объединить слои (Layer - Merge layers) или выделить слои и нажать Ctrl+ E. Потом выделите слой Ctrl+ A, скопируйте выделение Ctrl+ C, перейдите на альфа канал и вклейте выделение на альфа канал Ctrl+ V. При создании деталей, например шаров, создайте копию шара - оригинал выключите (сделайте невидимым), а на копии слоя залейте шар светло-серым оттенком, если он самый дальний шар. То же самое проделайте с другими шарами, но заливайте оттенками серого по мере приближения. Самый близки нам шар залейте чёрным. Если вместо шаров у вас будут другие объекты, то проделываем то же самое с объектами, как в случае с шарами.

В следующем шаге применяем фильтр Размытие при малой глубине резкости (Lens Blur filter) заходим в меню Фильтр - Размытие - Размытие при малой глубине резкости (Filter>Blur>Lens Blur). В настройках, в карте глубины установите Источник (source) альфа канал и примените желаемую степень размытия.

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

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

Вы можете чётко увидеть постепенное размытие на изображении сверху. Но помните, что не все карты глубины также легко создать как ту, которую мы создали.

Это более сложная карта глубины. Эта карта также создавалась вручную с помощью инструмента Перо (Pen Tool) примерно за 25 минут. Количество объектов, которые вы выделяете, зависит от вашей выборности при создании вашей карты глубины.

Результат (примечание: люди за 2 мужчинами должны быть темнее, потому что слишком много размытия применяется к ним)

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

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

Фильтры размытия в Photoshop удобно использовать для постепенного изменения глубины резкости в фотошопе в пределах одного снимка. В частности, фильтр Lens Blur (Размытие при малой глубине резкости) в сочетании с черно-белым градиентом в альфа-канале позволяет создать плавный переход от четкого переднего плана к размытому заднему. Главное - определить фокусный центр, после чего все области, обозначенные в альфе-канале тем же самым оттенком серого, окажутся в фокусе. Остальные же будут размыты в зависимости от того, какой цвет градиента им соответствует.

Подобные публикации:

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

Откроем исходную фотографию.

Перейдём в палитру "Каналы " и создадим новый канал, для чего щёлкнем по второй справа иконке внизу палитры "Каналы ". Появится канал "Альфа 1 " (название по умолчанию) и всё изображение зальётся чёрным цветом.

Включим видимость композитного канала RGB - щёлкнем по "глазику" этого канала, изображение зальётся красным цветом. Нажмём клавишу "D " - установим цвета переднего и заднего планов по умолчанию.

Выберем инструмент линейный "Градиент " (G ), от основного к фоновому.

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

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

Щёлкаем по синему полю композитного канала RGB .

Переходим в "Фильтр - Размытие - Размытие при малой глубине резкости... ".

Значения всех ползунков устанавливаем на ноль (за исключением "Изогелии " - оставляем по умолчанию), щёлкаем по чёрной стрелке правее поля "Источник " и выбираем созданный ранее канал "Альфа 1 ".

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

Автоматически ползунок "Фокусное расстояние размытия " передвинется на величину, соответствующую ранее выбранной точке на изображении (где мы щёлкнули).

Ползунок "Радиус " передвигаем вправо и добиваемся оптимального с Вашей точки зрения уровня размытия изображения. Ползунком "Фокусное расстояние размытия " корректируем фокусный центр. Нажимаем клавишу "Да ".

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

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

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

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

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

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

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

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

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

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

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

Атмосфера

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

Оттенок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет!

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