40 основных элементов интерфейса, которые должен знать UX-дизайнер

Многие начинающие UX-дизайнеры путаются в названиях элементов интерфейса и не всегда понимают, где и как их применять. Это совершенно нормально — все проходят через этот этап. Поэтому, чтобы помочь разобраться с данной проблемой, я собрал в этой статье 40 базовых элементов интерфейса и постарался детально рассказать, что они из себя представляют и в каких случаях и как применяются. Для удобства я разделил их на четыре основные группы: Перед началом — важное уточнение. Названия элементов в статье я использую те, которые приняты в нашей команде. В других компаниях они могут немного отличаться: например, кто-то называет элемент «тоггл», а кто-то — «свитч». Главное в данной ситуации — понимать принцип работы элемента, а не заучивать конкретные формулировки. А теперь давайте перейдем непосредственно к тому, ради чего мы здесь собрались. В данной группе я собрал элементы, которые так или иначе связаны с навигацией в интерфейсе. С их помощью пользователи перемещаются по сайтам, сервисам и приложениям. Также эти элементы группируют контент, упрощая его поиск. Accordion (аккордеон) — это элемент, который показывает список заголовков (обычно в столбик). Когда пользователь кликает по заголовку — он «раскрывается», и под ним появляется дополнительный контент. При повторном клике блок снова «сворачивается». Откуда взялось такое название? Всё просто: представь гармошку (аккордеон) — она складывается и раскладывается. В интерфейсе идея такая же. Аккордеон подходит, когда нужно показать много информации, но необязательно всю сразу. Например: Collapse (коллапс) — это элемент, который позволяет свернуть или развернуть кусок контента. Обычно он управляется кнопкой или стрелочкой, и при клике текст/блок «прячется» или «появляется». С первого взгляда может показаться, что это то же самое, что и аккордеон, но у них есть принципиальное отличие: Ярким примером коллапса является блок «Показать ещё» в карточке товара, а также скрываемые фильтры на сайте. Breadcrumb (хлебные крошки) — это элемент навигации, который показывает путь пользователя внутри сайта или приложения. Обычно выглядит как цепочка ссылок через стрелочки или «>». Они нужны для того, чтобы пользователь видел, на какой странице он сейчас находится в структуре сайта или приложения. Также при помощи хлебных крошек можно быстро вернуться назад, кликнув на любой уровень выше. Это довольно удобно, плюс экономит время, потому что не нужно жать «Назад» в браузере по 10 раз. Если коротко, то хлебные крошки — это «карта пути» внутри сайта. Sidebar (сайдбар) — это боковая панель в интерфейсе, которая обычно располагается слева или справа от основного контента. Она служит для навигации или доступа к дополнительным функциям. Данная панель используется как навигация в виде меню сайта или приложения (админки, файловые менеджеры, почта), для фильтров и настроек (например, в интернет-магазинах), а также для отображения различных инструментов (отличный пример – Figma с панелью инструментов и свойств). Сайдбар может быть фиксированный, скрывающийся-раскрывающийся или всплывающий, который появляется поверх контента при нажатии, например, кнопки «бургер-меню». Pagination (пагинация) — это способ разделить большой список контента (например, товары, статьи, результаты поиска) на несколько страниц и дать пользователю управление переходом между ними. Основное назначение — не загружать на экран сразу слишком много информации. Так пользователь будет легче воспринимать «дозированный» контент, а сайт будет меньше тормозить от ограничения на загружаемый объем данных. И в…

Источник: vc.ru — vc.ru/design/2289411-40-elementov-interfeysa-dolzhen-znat-ux-dizayner