Главная страница

UI/UX-дизайн тренды — что будет радовать пользователей весь 2019 год?


В прошлом году все говорили о важности адаптивного дизайна под мобильные устройства и только о нём, но в 2019 очевидно — по-настоящему важен контекст. Это тренд номер один. Больше никаких обобщений вроде «занимайтесь мобильными, десктоп в прошлом».


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


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


Мощь браузеров

Воспринимайте их как средство воздействия на своих пользователей. Именно их мощности, скорость и привлекательность дают нам современные возможности:


  1. Тесты производительности показывают положительную динамику для популярных браузеров, несмотря на то, что сайты требуют всё больше ресурсов.

  2. Это возможно благодаря развитию потоковой компиляции. Например, Mozilla обещает ускориться в 10-15 раз благодаря новому компилятору.

  3. Все современные браузеры поддерживают технологию WebGL 2. Она отвечает за отображение 3D-текстур и рендеринга объектов.


Благодаря мобильным и веб-браузерам разрыв между концепцией дизайна и реальностью её воплощения всё время уменьшается. Просто взгляните на график развития технологий. Здесь данные только до 2012 года, но взрыв возможностей на лицо.


Эволюция веба


Проблема вот в чём — браузеры могут быть отличными, но сайты не очень. Но у нас есть советы как раскрыть их потенциал, улучшить юзабилити и соответствовать времени.


Помните, пользователи знают о ваших сайтах больше вас и готовы поделиться своим мнением. Для этого мы проводим аудиты юзабилити. Вопросы вы задаёте сами.  


Целенаправленная анимация (purposeful animation)


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

Анимация


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


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


Анимация для логотипа


Анимированный логотип — это уже способ рассказать историю. Кроме того, подобные фишки способствуют запоминанию.

История через анимацию


Но помните, то, что видит дизайнер и пользователь — разные вещи. Именно поэтому мы начали с контекста. Старайтесь быть нейтральными в выборе, идите на эксперименты, но не забывайте об общей концепции услуги или продукта.


3D в интерфейсах и deep flat

Раньше дизайнеры избегали громоздкого 3D-рендеринга из-за недостаточной производительности. Сегодня браузеры превратили эту роскошь в доступную вещь. Так, что смелее! Сложные визуальные эффекты (VFX) становятся нормой в мире веб-сайтов.


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

3d-value.jpg


Размер экранов мобильных устройств делает подобную визуализацию ещё более притягательной.


3D на мобильном


Посмотрите на реализацию меню и карточки товара. Это сочетания реальности и цифрового изображения вовлекает пользователей. Так и хочется свайпить туда-сюда:


Меню в 3D



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


Похожим образом работает deep flat — когда эффект объёма создаётся с помощью теней, света и отражений:


deep flat


Также есть простой способ придать жизнь объекту. Эффект, который эмулирует 3D. Делается с помощью Principle или After Effects.


Фэйковый 3D


Возможно, в 2019 вернётся даже скевоморфизм — эффект, который был на ранних моделях iPhone. Элемент виртуального дизайна в этом случае повторяет реальный объект. Например, иконка браузера выполнена в 3D. Слева скевоморфизм, справа — флэт.


скевоморфизм


Но, разумеется, никто не станет намеренно возвращаться в прошлое, поэтому сегодня мы видим сочетание простоты и изобретательности.


Сюрреалистичный дизайн

Здесь уже про эмоциональное воздействие. И вовсе необязательно усложнять. Причина, по которой, ренегаты всегда были спутниками трендов и тенденций — естественная привлекательность. Но чтобы уравновесить здравый смысл, полезно добавить немного безумия.


Сюр в дизайне


Мультяшный стиль иллюстраций помогает сохранить свежесть образов. Такого авангарда и безобразия будет достаточно в 2019. Живём в век пост-иронии и можно не стесняться выглядеть комичными.


Градиенты 2.0, сверкающие цвета и темный фон

Благодаря новым экранам цветопередача становится фантастической. Градиенты способны привнести почти ощутимую глубину в интерфейс.


gradient.png


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


Яркие цвета

Но самый крутой тренд — это сочетание тёмного фона и ярких градиентов. Уже не так позитивно, но вызывает доверие. Есть исследование, почему нам так симпатичны темные цветовые схемы интерфейсов. А яркие цвета только раскроются и подчеркнут самое важное.


Темные цветовые решения


Минусы тоже имеются:

  • пока не у всех есть мониторы с технологией OLED, благодаря которой каждый пиксель излучает свет

  • темные интерфейсы не дружат с солнечным светом

  • слишком большая контрастность плохо сказывается на внимание пользователей


Вариативные шрифты

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


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


Вариативные шрифты


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


Настройка вариативного шрифта


Что-нибудь ещё?

Конечно, например, дизайнеры массово переходят на Figma (облачный инструмент для разработки пользовательского интерфейса), а Sketch и Adobe XD остаются в прошлом. Можете проверить свежесть навыков вашего дизайнера, спросив его, в чём он работает :)


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


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


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


Подпишитесь на обновления, чтобы быть в курсе!

Оцените статью:

( 2 оценок, средняя: 3.44 из 5 )

Новые кейсы и лайфхаки еще впереди. Подпишитесь на обновления, и узнавайте все первыми. Это бесплатно!

Адрес подписки уже существует. Пожалуйста укажите другой адрес.

Указать другой

На ваш почтовый адрес отправлено письмо для подтверждения подписки.

Если вы ещё не являетесь пользователем AskUsers,
но хотите улучшить свой сайт, то просто зарегистрируйтесь.

Хочу попробовать