Дизайнеры, возможно, находятся на перепутье между плоским дизайном и более детальными и трехмерными элементами дизайна. Вот несколько недавних примеров, которые помогут вам понять, чего стоит ожидать от пользовательских интерфейсов в ближайшее время.
Тенденции в дизайне приходят и уходят, но одним из общих трендов, который существует уже некоторое время, является плоский дизайн — вы видите его повсюду: кнопки в пользовательских интерфейсах, логотипы, графика и т.д. Возможно, сейчас мы переживаем период смены этого подхода, и вот несколько недавних примеров, на которые я наткнулся, которые могут подтвердить это.
В этой статье я в основном сосредоточусь на цифровых интерфейсах и на том, как со временем изменился дизайн в этой области.
Краткий обзор того, как плоский дизайн стал трендом
Плоский дизайн стал модным явлением, и мы увидели, как в одночасье изменился подход к дизайну интерфейсов, когда Apple представила iOS 7 в 2013 году. Конечно, они взяли элементы, которые уже применяли другие производители, но влияние Apple на остальную индустрию (как законодателя мод) невозможно переоценить.
В iOS 7 произошел огромный скачок в языке дизайна iOS. Apple представила гораздо более простой и плоский дизайн по сравнению с более сложным и скевоморфным дизайном предшественника. Тим Кук назвал это «самым большим изменением iOS со времен iPhone».
Как вы можете видеть выше (iOS 6 слева и iOS 7 справа), большинство 3D-элементов были удалены, чтобы сделать дизайн iOS 7 более плоским. Для таких изменений были веские причины. Миру необходимо было отойти от скевоморфного дизайна, который должен был познакомить пользователей с новым поколением интерфейсов.
Прошло 10 лет, а большинство современных интерфейсов по-прежнему используют этот плоский язык дизайна в своих продуктах. Но некоторые его аспекты начинают меняться, поскольку дизайн становится все более сложным и трехмерным (снова!). Давайте рассмотрим несколько недавних примеров.
Редизайн бренда Reddit
Начнем с самого последнего. Недавно Reddit изменил дизайн своего логотипа, переработав иконку и слово. Как вы можете видеть, символ, изображающий Сну (талисман Reddit), теперь имеет некоторые 3D элементы по сравнению со старым логотипом. Мы редко видим неплоские логотипы, а учитывая, что компания Pentagram, работающая со многими крупными мировыми брендами, выбрала это направление, это значит, что мы будем видеть его гораздо чаще.
Современные логотипы обычно плоские из-за их читаемости и масштабируемости. Будет интересно посмотреть, как другие компании будут подходить к своим брендам в ближайшем будущем.
Иконки MacOS Big Sur
Давайте вернемся на несколько лет назад, в 2020 год. В ноябре того года Apple выпустила MacOS Big Sur с обновленным набором иконок. Мне лично нравится думать, что именно с этого момента началась новая тенденция с детализированным дизайном с 3D-эффектами, поскольку именно здесь я видел множество обсуждений на эту тему.
С Big Sur Apple начала добавлять больше деталей в иконки нативных приложений, чтобы они не выглядели плоскими. Как вы можете видеть выше, иконки теперь имеют более глубокие тени и градиенты. Это помогает добавить глубину и сделать иконки более детализированными.
Многие другие сторонние разработчики приложений также последовали примеру Apple и обновили свои иконки, придав им более трехмерный вид, чем раньше.
Как обычно, влияние Apple на дизайн интерфейсов можно увидеть по тому, как многие другие компании и люди последовали новой тенденции.
Новый дизайн Airbnb
Airbnb, обновив дизайн своего приложения летом и зимой, привнесла в него более сложный и трехмерный дизайн. Взгляните на их новую функцию «паспорт гостя». Иконка гостевого паспорта своим дизайном напоминает настоящую «книгу», а при взаимодействии с ней возникает анимация, имитирующая открытие книги в реальной жизни.
Внутренний вид паспорта гостя также имеет тени в верхней части, чтобы добавить глубины и убрать плоский вид.
Еще один пример от Airbnb можно увидеть в их дизайне «любимого гостя» и недавно обновленного «селектора месяца». Как видно на рисунке выше, новый раздел «Любимый гость» добавляет красивый 3D-эффект к рейтингу. Новый селектор месяца (справа) также имеет более реалистичный дизайн циферблата.
Наконец, новые иллюстрации, появившиеся в зимнем релизе, также придают ему более изометрический вид, как вы можете видеть ниже.
Airbnb 2023 Winter Release
(sound on🔈) pic.twitter.com/xRPAaqg8Ut
— Brian Chesky (@bchesky) November 8, 2023
Обновленная система дизайна Shopify
Shopify обновил свою популярную и признанную систему дизайна Polaris, добавив в нее новый язык оформления. Старые плоские кнопки теперь стали меньше и более тактильными.
Редизайн был наполнен смыслом. По словам команды, первоначальный плоский дизайн способствовал созданию более чистых интерфейсов, облегчал понимание и делал работу более эффективной. Но со временем продавцы стали называть работу администратора «скучной», «унылой» и «безвкусной».
Главной целью было улучшить дизайн-системы так, чтобы работа администратора стала более похожей на «профессиональный инструмент».
Более подробное описание этого проекта вы можете прочитать здесь.
Заключение
Так что же все это значит? Я считаю, что мы уходим от полностью плоского дизайна. У плоского дизайна есть свои преимущества, но я думаю, что современные дизайны развиваются таким образом, чтобы добавлять больше деталей. Дизайнеры и разработчики должны быть готовы добавить эти изменения в свои системы, поскольку они становятся обычными для крупных брендов и продуктов.