Любой тренд имеет свойство наскучивать, и рано или поздно он сменяется другим. То же самое происходит и в сфере UI-дизайна.
Тренды пользовательского интерфейса (User Interface, UI) прошли эволюцию от интерфейсов, имитирующих объекты реального мира, до сверхминималистичных интерфейсов без каких-либо украшательств. У всех у них есть свои преимущества и недостатки.
Чтобы создать исключительный визуальный дизайн и пользовательский интерфейс, важно извлечь уроки из наиболее значимых трендов UI-дизайна, начиная с самых первых.
В статье Лая Тремоза из Фонда интерактивного дизайна рассказывает о 10 главных трендах дизайна пользовательского интерфейса.
Нет времени читать статью? Найдите ее в нашем телеграм-канале и сохраните себе в «Избранном» на будущее.
1. Скевоморфизм
Скевоморфизм (skeuomorphism) — визуальный подход, использовавшийся для разработки самых ранних графических пользовательских интерфейсов.
В скевоморфизме элементы дизайна имитируют свои аналоги из реального мира, объединяя физический и цифровой миры. Наиболее известный пример — иконка корзины, имитирующая реальную корзину.
Лучшая Графическая (GUI) Библиотека Для Python | Tkinter VS WxPython VS PyQt(PySide) VS Kivy
Когда персональные компьютеры и смартфоны только появились, важно было проектировать их таким образом, чтобы начинающим пользователям было проще ориентироваться в новом цифровом мире.
Скевоморфный дизайн отдает предпочтение сходству с реальным миром, а не визуальной привлекательности, обеспечивая таким образом интуитивно понятный пользовательский интерфейс.
В пользовательском интерфейсе ранних версий мобильной операционной системы Apple, iOS, часто можно было заметить скевоморфизм.
Визуальный интерфейс первых приложений и программного обеспечения Apple имитировал реальные объекты. Это делало их использование более простым и интуитивно понятным для начинающих пользователей.
Скевоморфный дизайн был стандартом до начала 2010 года. Эта эстетика дизайна сыграла большую роль в максимально плавном переходе на цифровые платформы.
Поскольку все больше людей становились цифровыми аборигенами, буквальные элементы дизайна перестали быть столь важны для достижения хорошего пользовательского опыта.
Кроме того, из-за высокой детализированности скевоморфные элементы дизайна требуют больших технических возможностей. Рост цифровой грамотности населения проложил путь к процветанию новых стилей UI-дизайна.
2. Минимализм
Тренд минимализма в пользовательском интерфейсе основан на одноименном художественном движении, основным принципом которого является «меньше значит больше».
Этот принцип означает расхламление визуального пространства, другими словами, использование меньшего количества элементов, чтобы иметь возможность уделить больше внимания наиболее важному.
Как делают хороший UI в играх (а как плохой) — дизайн интерфейса в RPG, MMO, экшнах и платформерах
Минималистичные интерфейсы элегантно просты и фокусируются на функциональности каждого элемента, использовании пустого пространства (negative space), ярких цветов и комбинаций шрифтов.
Отсутствие декоративных элементов делает пользовательские интерфейсы очень удобными в использовании, обеспечивая интуитивно понятное путешествие по дизайну. Как правило, минималистичные интерфейсы имеют элегантную и утонченную визуальную привлекательность.
Сайт писателя Алана Троттера — пример минималистичного пользовательского интерфейса с изюминкой. Кликая на выделенные слова, пользователи открывают скрытые сообщения.
Минимализм возник в Нью-Йорке в конце 1950-х годов, и его основными характеристиками были порядок, простота и гармония.
Принцип минимализма «меньше значит больше» позже был адаптирован немецким промышленным дизайнером Дитером Рамсом (Dieter Rams) и стал звучать как «меньше, но лучше».
Этот принцип также известен как: «Хороший дизайн — это как можно меньше дизайна».
«Форма, объем, цвет, поверхность — это нечто само по себе. Их нельзя скрывать как часть совершенно другого целого. Формы и материалы не должны изменяться из-за окружающего их контекста», — Дональд Джадд, американский художник.
Многие другие тренды пользовательского интерфейса, включая плоский дизайн (flat design), в той или иной мере следуют принципам минимализма.
3. Плоский дизайн
Плоский дизайн — это эстетика UI-дизайна, основанная на простоте. Он сместил парадигму в дизайне интерфейса с выглядящих реально объектов на их схематическое упрощение.
Этот тренд имел существенное техническое преимущество, особенно для мобильных устройств, поскольку обеспечивал более высокую скорость загрузки.
Плоский дизайн использует минималистичный подход к элементам пользовательского интерфейса, без каких-либо теней и декоративных элементов. Он опирается на яркие цвета и типографику, чтобы придать дизайну характер и визуальную привлекательность.
Попробуйте выбрать шрифты с изюминкой, способные добавить визуальный интерес, но которые при этом имеют ровные штрихи и сочетаются с эстетикой минимализма.
Плоский дизайн набрал обороты в 2012 году с выпуском Windows 8, iOS 7 от Apple и материального дизайна (Material Design) от Google. При этом плоскому дизайну в какой-то степени недостает визуальных возможностей, и пользователи могут не знать, какие элементы являются интерактивными.
Пункт управления на iOS 7 использует плоский дизайн
Чтобы решить эту проблему и повысить юзабилити, был создан плоский дизайн 2.0. Он использует тонкие тени и цветовые вариации для выделения интерактивных элементов, указывая пользователям, как взаимодействовать с дизайном. Эти незначительные изменения помогают увеличить глубину и размерность и повысить удобство использования.
Плоский дизайн придает цифровым интерфейсам лаконичную и чистую визуальную привлекательность.
4. Стиль Баухаус
Стиль пользовательского интерфейса Баухаус (Bauhaus) вращается вокруг геометрической графики: полукругов, кругов, прямоугольников, треугольников и т. д., инновационного использования типографики и не отвлекающих нефункциональных деталей.
Этот стиль дизайна опирается на сами элементы дизайна: линию, форму, цвет, а также включает в себя абстрактные фигуры и сбалансированные формы.
Этот стиль UI-дизайна основан на художественном и дизайнерском движении Баухаус, возникшем в 1919 году в Веймаре (Германия). Движение Баухаус проложило мост между искусством и промышленностью, объединив ремесла с искусством. Основным его принципом было «форма следует за функцией».
С тех пор этот принцип оказал глубокое влияние на дизайн. Согласно ему, простые геометрические фигуры были разработаны на основе предполагаемой функции или цели объекта, что привело к эстетике минимализма, которая также может быть красивой.
Баухаус отстаивал геометрический, абстрактный стиль, в котором мало эмоций и нет исторических отсылок. Интерфейсы в стиле Баухаус имеют элегантную, современную и чистую визуальную привлекательность.
«Перенос принципов Баухауса в современный дизайн продукта означает наличие достаточной смелости для устранения «шума», — Мелани Дейвейд, UX-дизайнер и арт-директор, коммьюнити-менеджер Adobe Live.
5. Темный режим
Темный режим (dark mode) — это стиль дизайна, при котором светлый текст располагается на темном фоне. Такая цветовая схема снижает яркость, излучаемую экранами устройств, и помогает улучшить визуальную эргономику за счет снижения нагрузки на глаза.
Это особенно полезно для интерфейсов с большим количеством контента. Темный режим также в некоторой степени помогает экономить заряд батареи.
Темные пользовательские интерфейсы были созданы в ответ на цветовые схемы «темное на светлом», имитирующие вид чернил на белой бумаге.
Этот тренд появился в 2016 году, когда Twitter экспериментировал с цветовой схемой «светлое на темном». Популярным этот тренд стал, похоже, тогда, когда Apple выпустил опцию темного режима в обновлении iOS 13.
С тех пор темные режимы стали обычной альтернативой во многих интерфейсах, где пользователи могут выбирать между светлым и темным интерфейсом.
Темный режим и светлый режим
Темные пользовательские интерфейсы имеют четкую, гладкую и современную визуальную привлекательность, которая может быть более щадящей для глаз. Их популярность может быть связана с увеличением количества времени, которое пользователи проводят перед экраном.
Если взаимодействие с вашим продуктом предполагает длительное нахождение перед экраном, добавьте в него опцию темной темы.
6. Крупная типографика
Крупная типографика — это тренд UI-дизайна, где типографика выходит за рамки своей традиционной роли и становится центром дизайна.
Когда типографика является основным элементом дизайна, правила меняются; вращение, скручивание, экстравагантные размеры, разделение слов на множество строк и плохая читабельность — все это становится допустимым.
Тем не менее важно понимать принципы типографики, чтобы успешно их нарушать. Идти на такие смелые дизайнерские решения лучше всего только тогда, когда они служат цели.
Крупные шрифты обычно делают громкое заявление и могут шокировать, поэтому необходимо очень тщательно их продумывать и планировать.
На сайте цифрового агентства Huge используется крупная типографика
7. Неоморфизм
В неоморфном дизайне элементы интерфейса выглядят так, словно они выдавлены из фона. Неоморфизм (neumorphism) сочетает в себе минимализм плоского дизайна с реализмом скевоморфизма.
Однако фокусируется он не на имитации объектов из реальной жизни, а на создании объектов, которые могли бы работать в реальной жизни.
Неоморфный пользовательский интерфейс выглядит так, будто с ним можно физически взаимодействовать; можно нажимать на кнопки и перемещать ползунки.
Этот дизайн банковского приложения, созданный Александром Плюто (Alexander Plyuto), стал вирусным на Dribbble и считается первым неоморфным дизайном
Главное в неоморфизме — то, как он обращается с глубиной. Кнопки отображаются поднятыми до тех пор, пока вы не нажмете на них, а после они выглядят «утопленными».
Для достижения трехмерного вида неоморфизм использует тени и градиенты. Существенными элементами неоморфизма являются низкая контрастность, монохроматические цветовые схемы и тонкие тени.
Этот тип дизайна может иметь потенциальные проблемы с доступностью, особенно в темном режиме, из-за его характерного низкого контраста. Людям с потерей зрения, слепотой и дальтонизмом будет очень сложно взаимодействовать с таким стилем UI-дизайна.
Для обеспечения хорошего юзабилити неоморфный дизайн требует особого внимания к таким элементам и принципам дизайна, как типографика, пространство и иерархия.
Термин «неоморфизм» впервые употребил Михал Малевич, креативный и генеральный директор Hype4, в 2019 году, когда увидел новый подход к скевоморфизму в дизайне на Dribbble и Behance.
Неоморфизм происходит от выражения «новый скевоморфизм». Этот тренд пользовательского интерфейса также называют «мягким UI» из-за характерного низкого контраста.
8. Глассморфизм
Глассморфизм (glassmorphism) — это тренд пользовательского интерфейса, при котором элементы дизайна выглядят как полупрозрачное матовое стекло.
Элементы дизайна кажутся многослойными (объекты, плавающие в пространстве), а верхний слой выглядит как кусок виртуального стекла.
Чтобы добиться эффекта матового стекла, можно использовать размытие фона и полупрозрачный контур, имитирующий край стекла. Чтобы сделать эффект стекла видимым, фоны должны иметь достаточную разницу тонов.
Три наиболее важные характеристики стекломорфизма — это прозрачность, светлые границы и яркие или пастельные цвета.
Операционная система Apple macOS Big Sur использует эффект матового стекла
Дизайнеры ведут много дискуссий о том, способен ли этот тренд обеспечить хорошую доступность. Безопасной отправной точкой может стать использование этого эффекта только на заднем фоне, поскольку пользовательский интерфейс должен по-прежнему работать без фона. Таким образом, слабовидящие люди по-прежнему смогут взаимодействовать с интерфейсом.
Термин «глассморфизм» также ввел Михал Малевич. Этот стиль дизайна пользовательского интерфейса стал популярным после обновления Apple macOS Big Sur в 2020 году. Глассморфизм предлагает красивую и минималистичную визуальную привлекательность.
9. Анимация/движение
Моушн-дизайн в пользовательском интерфейсе — это добавление в интерфейс привлекательных и настраиваемых анимаций и переходов.
Движение или анимация — это интересный способ обогатить пользовательский опыт и добавить в интерфейс реалистичные элементы. Этот тренд повышает визуальную привлекательность, добавляя в дизайн измерение движения.
Чтобы движущиеся элементы имели смысл и выглядели естественно, анимация должна улучшать дизайн, а не отвлекать от него. Очень легко увлечься разнообразными веселыми картинками, но чтобы обеспечить успешный дизайн, к выбору следует подходить с умом.
Например, вы можете использовать анимацию, чтобы направить или даже побудить пользователя выполнить определенное действие или дать ему обратную связь.
Более того, добавления движения в интерфейс способно не только повысить визуальную привлекательность, но и может быть использовано для рассказа истории.
Распространенный способ добавить сторителлинг на цифровые платформы — использовать анимацию, запускаемую прокруткой. В этом случае движение происходит после того, как пользователи прокручивают страницу.
Пользователи чувствуют, что принимают активную роль в истории, поскольку они заставляют ее разворачиваться, и это создает иммерсивный опыт — в определенной степени.
Платформа для путешествий от Yalantis на Dribbble — пример органичного и инновационного использования движения для привлечения внимания пользователя
В целом добавление движения или анимации в дизайн способно вдохнуть жизнь в статические интерфейсы, улучшить взаимодействие с пользователем и его вовлечение в ваши продукты.
10. Иллюстрация
Как тренд пользовательского интерфейса, иллюстрация помогает дифференцировать продукты и сделать их уникальными. В море бесконечных цифровых платформ возможность выделиться — ценный актив.
Иллюстрации могут быть цифровыми или нарисованными от руки, 2D или 3D и могут иметь самую разную эстетику. Кроме того, иллюстрации могут оживить статические страницы, особенно в сочетании с моушн-дизайном.
Люди тянутся к людям, поэтому добавление персонажей на цифровую платформу или в продукт способно вызвать сопереживание, создать незабываемые впечатления и повысить вовлеченность пользователей.
Dropbox использует иллюстрации на своем сайте, чтобы визуализировать свое сообщение и вызвать эмоции
К созданию иллюстраций стоит подходить стратегически. Важно улучшить пользовательский опыт, а не отвлекать пользователей или замедлять работу платформы.
Правильные иллюстрации могут повысить коэффициент конверсии и значительно улучшить пользовательский опыт.
Пользовательские иллюстрации пришли на смену стоковым изображениям и способны придать вашим проектам уникальную визуальную привлекательность и помочь рассказать историю ваших продуктов.
Высоких вам конверсий!
Источник: lpgenerator.ru
10 самых красивых и удобных пользовательских интерфейсов
Несколько недель специалисты Mashable собирали с разных ресурсов информацию о том, как построить отличные пользовательские интерфейсы. По итогам был составлен топ-10 самых красивых интерфейсов – пять для интернета и пять для мобильных сетей – которые можно использовать в качестве ориентиров для построения вашего собственного сайта.
Начнем с того, что рассмотрим пять самых вдохновляющих сайтов и приложений – что в них отлично работает, а что могло быть и лучше. Затем мы рассмотрим пять мобильных приложений для IOS, интерфейсы которых впечатляют и вдохновляют.
The Focks CMS
Что это: модульная, дополняемая, бесплатная система управления контентом с открытым кодом.
Что понравилось: изысканный стиль иллюстраций, отличный функционал иконок, типографика и общий приятный вид. Информация и расширения хорошо продуманы и похоже на то, что это именно та страница, где все вместе отлично сочетается и работает.
Что могло бы быть лучше: крупные иконки тут вполне уместны, однако некоторые элементы все же слишком велики, это несколько дезориентирует.
Mail Chimp
Что это: один из самых популярных почтовых информационных бюллетеней по управлению электронными приложениями для e-mail.
Что понравилось: уникальная и приятная цветовая гамма, хорошая проработка деталей, красивые отчеты и отличный поход к проблеме «пустых аккаунтов», полезные и приятные на вид руководства пользователей. Mail Chimp приятна в использовании и очень удобна.
Что могло было быть лучше: некоторые элементы пользовательского интерфейса в приложении – к примеру, тексту немного не хватает контрастности, что может повлиять на доступность интерфейса.
Ronin Website
Что это: приложение SaaS с таймером и возможностью калькуляции счетов.
Что понравилось: страница Ronin довольно объемна и предоставляет исчерпывающую информацию без перегруженности. Кроме того, регистрационная форма, прайс-лист и страницы с турами одинаково хорошо организованы. Общее ощущение – чистота и открытость. Очевидно, что большое внимание при разработке сайта уделялось точности и согласованности.
Что могло бы быть лучше: несмотря на большой макет и внимание к деталям, сайт все же довольно обыкновенный. Пользовательский интерфейс отличный, но мало чем отличается от многих Web 2.0 сайтов и не кажется оригинальным.
Campaign Monitor’s Worldview
Что это: инструмент, позволяющий видеть абонентов Campaign Monitor на карте мира.
Что понравилось: стартовая страница выглядит великолепно, а интерфейс программы простой и понятный. Нет беспорядка, есть визуализация абонентов и несколько простых меню для управления видом. В приложении нет ничего лишнего, здесь вы сразу можете приступить к работе.
Что могло бы быть лучше: есть некоторые проблемы в производительности приложения, когда оно некоторое время остается открытым (в Firefox на Imac), что определенно влияет на общее впечатление пользователя.
Print Friendly
Что это: Print Friendly делает из любого сайта урезанную версию для печати. Причем ее можно скачать в виде PDF или поделиться с другом.
Что понравилось: на странице мало легкомысленной информации и беспорядка. Сайт просто делает то, что должен делать. На главной странице есть все, что вам нужно. Версия для печати легко читается, легко печатается и ей легко поделиться.
Что могло быть лучше: довольно сложная система –работа Print Friendly создается, а затем помещается в DIV с фиксированной величиной. Было бы хорошо, если бы окно с содержимым просто расширялось в соответствии с загружаемым контентом.
GlobeConvert Pro
Что это: приложение для конвертирования единиц измерения и валют между различными стандартами и странами.
Что понравилось: очень просто в использовании – просто выберите то, что вы хотите конвертировать, в меню слева и введите значение. Сложно придумать что-то проще, и макет страницы прост и понятен.
Nike Football+ Team Edition
Что это: iPad-приложение, которое позволяет составлять программы тренировок по футболу, включая учебные видео и отслеживание процесса.
Что понравилось: в том, что у приложения от Nike отличный дизайн, нет ничего удивительного, но нам очень понравилось, как все это собрано воедино. Отличное сочетание цвета, типографики, иконографики и чистые, простые макеты. Многие спортивные приложения, как правило, забиваются из-за избытка информации, но здесь все расположено аккуратно.
Tabletop
Что это: модульная программа для редактирования аудио и создания миксов для iPad.
Что понравилось: нет ничего нового в том, что очередное iPad-приложение имитирует реальные вещи, но часто они выглядят малопривлекательно. Однако Tabletop успешно обошла эту проблему. В интерфейсе очень много деталей, что придает ему отлично проработанный вид.
Things
Что это: версия для iOS популярного приложения для Mac to-do/GTD.
Что понравилось: довольно простой интерфейс, программа легка в использовании, но что действительно делает ее блестящей, так это внимание к тонкостям. Это совокупность небольших деталей, которые сочетаются для того, чтобы приложение выглядело очень удобным и профессиональным, тонкие градиенты, тени текста, чистые линии и детали внутри иконок.
Notably
Что это: средство для работы с iPad, разработанное для того, чтобы дать возможность писателям творить и организовывать свои книжные коллекции.
Что понравилось: Notably просторная, создает ощущение чистоты, типографика выглядит великолепно. Тонкие, приглушенные цвета снижают утомляемость глаз при работе в редакторе и дают общее ощущение тепла, что делает приложение приятным в использовании. Имитация книги, которая в последнее время стала довольно популярной, особенно хорошо подходит для iPad.
Источник: adindex.ru
Лучший мобильный и веб-дизайн по версии пользователей Behance
Редакция Медиа Нетологии собрала очередную подборку лучших проектов с сайта Behance. В этот раз покажем интерфейсные решения и работы в сфере мобильного дизайна, которые пользователи оценили выше всего.
Наталия Шамало
Редактор Медиа Нетологии
National Geographic
Украинская команда dops.digital разработала сайт для проекта National Geographic. Дизайнеры стремились создать сайт, в котором новые технологии сочетаются с ощущением природы.
Explore the Moon
Цель проекта — создать современный и удобный сайт, чтобы презентовать информацию о полётах на Луну и исследованиях спутника нашей планеты. Проект создан специально для Музея изучения Луны.
Streamtime
Streamtime — это программное обеспечение для управления проектами в творческой индустрии. Продукт помогает управлять рабочим процессом, планировать задачи, отслеживать время, потраченное на проект. Создатели презентовали мобильную версию и запустили демоверсию сервиса.
Профессия
UX/UI-дизайнер
Узнать больше
- Освоите одну из самых высокооплачиваемых IT-профессий в дизайне
- Узнаете, как проектировать интерфейсы на основе исследований
- Научитесь продумывать визуальную коммуникацию с пользователями
Babycare
Kim Yeonhee, дизайнер-иллюстратор из Китая, и её работа для интернет-магазина детских товаров Babycare. Необычный концепт фото товаров, которые как бы застыли в движении и ждут покупки, задают основной стиль в дизайне сайта, а маленькие детали — простой шрифт и минималистичные иконки — делают интерфейс понятным и удобным в использовании.
GamingGear
Ещё один дизайн интернет-магазина. Графический дизайнер из Польши Matt Wojtaś разработал интерфейс для GamingGear. Идея основывалась на двух вводных — современный дизайн и игровая атмосфера.
