{"id":13845,"url":"\/distributions\/13845\/click?bit=1&hash=54601a6ed47cd6f2ea994f54c639affb7b60c3a1bcc160f3f669d0dd5dd46701","title":"\u041f\u043e\u0434\u043a\u0430\u0441\u0442 \u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u2014 \u0431\u0435\u0437 \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0430 \u0431\u0440\u0435\u043d\u0434\u0435, \u043d\u043e \u0441 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043c\u0438","buttonText":"\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435","imageUuid":"5e2e3429-1282-582a-a245-b0558a631fd2","isPaidAndBannersEnabled":false}

9 главных трендов UI/UX-дизайна в 2021 году

В мире 1,9 млрд сайтов. Пользователи просматривают тысячи из них каждый день. Неважно, насколько полезен ваш сайт. С плохим или устаревшим интерфейсом он становится неэффективным.

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

Давайте подробнее рассмотрим основные тренды дизайна пользовательского интерфейса в 2021 году и узнаем, как известные компании эффективно их используют.

1. Глассморфизм

В прошлом году в веб-дизайн ворвался неоморфизм. Это синтез двух широко используемых методов проектирования пользовательского интерфейса. Их называют скевоморфизмом и флэт-дизайном.

Глассморфизм — тоже из этой же школы. Идея в том, что люди привыкли взаимодействовать с предметами через стекло. Например, покупатели через стекло смотрят на стрелки часов или рассматривают витрину ювелирных изделий. Глассморфизм имитирует видимость «сквозь стекло» за счет размытия фона. И создает иллюзию плавающих стеклянных панелей в вертикальном пространстве.

В 2021 году дизайнеры открыли для себя новый стиль — стекломорфизм. Он достигается благодаря такому эффекту размытия. Этот дизайн UI уже используется на многих известных площадках, но имеет и минусы. Например, пользователям с плохим зрением может стать сложнее взаимодействовать с IT-продуктом, оформленным в таком стиле.

2. Минимализм

Ежедневно мы сталкиваемся с множеством изображений, и чем проще они нарисованы и расположены — тем проще воспринимаются. Это привело к появлению минималистичного движения в UI/UX-дизайне. Компоненты в этом стиле сведены к минимуму, к кружку и паре черточек, чтобы не перегружать пользователя. Применяются тени софтбокса.

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

3. Дополненная реальность

Google и Apple уже выпустили свои платформы разработки дополненной реальности, ARCore или ARKit , обеспечивающие бесшовную интеграцию цифрового и физического миров.

Пользовательские интерфейсы AR могут принимать различные формы:

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

Apple много вкладывает в дополненную реальность, много энтузиазма в штатах вызывает грядущий релиз Apple Glasses. Нет сомнений, что в дальнейшем интерфейсам придется все сильнее адаптироваться к условиям AR/VR.

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

4. Микрокопии и микровзаимодействия

Термин «микрокопия» относится к небольшим предложениям и абзацам, которые появляются в интернете, на сайте, в приложении или любом ИТ-продукте. Это может быть крошечное сообщение об ошибке или всплывающее меню. Подпись к кнопке, надписи на страницах загрузки или ошибки. Надпись о том, что веб-сайт использует файлы cookie — тоже считается микрокопией.

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

Без микрокопии пользователи были бы дезориентированы при взаимодействии с любым компьютерным интерфейсом. Термин часто называют «маленькими словами с большой силой». Он значительно влияет как на пользовательский опыт, так и на значение коэффициента конверсии.

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

5. Голосовой интерфейс пользователя — VUI

Еще одна новая (а на самом деле, старая) тенденция UX. Давно установлено, что для хорошей работы дизайн не обязательно должен быть привлекательным. С ним просто должно быть удобно работать.

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

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

6. Анимация

Если даже самая отличная графика вряд ли сможет привлечь внимание пользователя. Все уже видели всё. А вот анимация по-прежнему может удивить. Она повышает вовлеченность, и придает дизайну жизнь. Не зря Apple активно использует ее на своем сайте, особенно при презентации новых iPhone. И не зря за нее так активно топит Студия Лебедева. Не всем это нравится, особенно когда вы не планировали задерживаться на сайте. Но это работает. И на сайте людей задерживает.

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

7. Яркие цвета

Яркие, для многих даже «вырвиглазные» цвета используются в дизайне UI/UX по-разному, чаще всего в сочетании с другими компонентами графического дизайна. Неплохо работают при использовании креативного, «своего» цветового градиента на сайте. Особенно здорово смотрится при наличии эффектов размытия и зернистости. Хотя, конечно, как и все современные тренды, — это на любителя.

8. Управление жестами

Концепция Air Gesture — новая тенденция, развившаяся за этот год. Впервые появилась в телефонах Samsung в конце 2020-го, а сейчас её используют и Huawei, и Xiaomi. Включает в себя такие жесты, как демонстрация ладони, чтобы сделать селфи перед камерой, или движение пальцем, означающее тап по экрану. Выставленный вперед палец значит «готов», сжатая ладонь — «подожди». Жестов много, и устройства уже умеют их распознавать — это не сложнее, чем считать ваше лицо для Face ID.

9. Крупная типографика

Типографика имеет решающее значение в дизайне ИТ-продукта. Правильный выбор размера шрифта и элементов может давать удивительные результаты .

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

Многие студии начали использовать крупные и жирные шрифты в пользовательском интерфейсе и графическом дизайне. Запомните этот твит: крупной типографики станет еще больше в 2022 году. В некоторых случаях она будет основным элементом веб-сайта (и это уже происходит).

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

0
6 комментариев
Написать комментарий...
Kiras

Откуда вы лезете с этими трендами? Как заткнуть эту дыру?
Нужен блэклист по заголовкам

Ответить
Развернуть ветку
Пуганный Аноним

Кароч в дизайне в тренде цвета, шрифты, формы и анимации.

В автопроме нынче в тренде колеса, рули и ещё эти - кузовы.

Ответить
Развернуть ветку
Андрей Синица

"Кароч в дизайне в тренде цвета, шрифты, формы и анимации"
и руки из нужного места))

Ответить
Развернуть ветку
Nickolay Grachev

Блин, ну эти тренды ещё несколько лет назад были)

Ответить
Развернуть ветку
Duvi 23

Та да, тренды повторяются из года в год

Ответить
Развернуть ветку
Сергей Горностаев

Рано, рано, после нг об этом надо писать

Ответить
Развернуть ветку
Читать все 6 комментариев
null