40 основных элементов интерфейса, которые должен знать UX-дизайнер
Многие начинающие UX-дизайнеры путаются в названиях элементов интерфейса и не всегда понимают, где и как их применять. Это совершенно нормально — все проходят через этот этап. Поэтому, чтобы помочь разобраться с данной проблемой, я собрал в этой статье 40 базовых элементов интерфейса и постарался детально рассказать, что они из себя представляют и в каких случаях и как применяются. Для удобства я разделил их на четыре основные группы:
- Навигация
- Ввод данных
- Обратная связь
- Отображение данных
Перед началом — важное уточнение. Названия элементов в статье я использую те, которые приняты в нашей команде. В других компаниях они могут немного отличаться: например, кто-то называет элемент «тоггл», а кто-то — «свитч». Главное в данной ситуации — понимать принцип работы элемента, а не заучивать конкретные формулировки.
А теперь давайте перейдем непосредственно к тому, ради чего мы здесь собрались.
Навигация
В данной группе я собрал элементы, которые так или иначе связаны с навигацией в интерфейсе. С их помощью пользователи перемещаются по сайтам, сервисам и приложениям. Также эти элементы группируют контент, упрощая его поиск.
1. Accordion / Аккордеон
Accordion (аккордеон) — это элемент, который показывает список заголовков (обычно в столбик). Когда пользователь кликает по заголовку — он «раскрывается», и под ним появляется дополнительный контент. При повторном клике блок снова «сворачивается».
Откуда взялось такое название? Всё просто: представь гармошку (аккордеон) — она складывается и раскладывается. В интерфейсе идея такая же.
Аккордеон подходит, когда нужно показать много информации, но необязательно всю сразу. Например:
- FAQ (часто задаваемые вопросы) — список вопросов, где ответ раскрывается только при клике.
- Фильтры в интернет-магазине — например, «Цена», «Бренд», «Размер» открываются по клику, чтобы не занимать много места в общей панели фильтров.
- Мобильные интерфейсы — там, где нужно экономить пространство.
2. Collapse / Коллапс
Collapse (коллапс) — это элемент, который позволяет свернуть или развернуть кусок контента. Обычно он управляется кнопкой или стрелочкой, и при клике текст/блок «прячется» или «появляется».
С первого взгляда может показаться, что это то же самое, что и аккордеон, но у них есть принципиальное отличие:
- Аккордеон — это сразу несколько заголовков-блоков, где можно раскрыть один или несколько пунктов.
- Коллапс — это одна область (или блок), которую можно спрятать или показать.
Ярким примером коллапса является блок «Показать ещё» в карточке товара, а также скрываемые фильтры на сайте.
3. Breadcrumb / Хлебные крошки
Breadcrumb (хлебные крошки) — это элемент навигации, который показывает путь пользователя внутри сайта или приложения. Обычно выглядит как цепочка ссылок через стрелочки или «>».
Они нужны для того, чтобы пользователь видел, на какой странице он сейчас находится в структуре сайта или приложения. Также при помощи хлебных крошек можно быстро вернуться назад, кликнув на любой уровень выше. Это довольно удобно, плюс экономит время, потому что не нужно жать «Назад» в браузере по 10 раз.
Если коротко, то хлебные крошки — это «карта пути» внутри сайта.
4. Sidebar / Сайдбар
Sidebar (сайдбар) — это боковая панель в интерфейсе, которая обычно располагается слева или справа от основного контента. Она служит для навигации или доступа к дополнительным функциям.
Данная панель используется как навигация в виде меню сайта или приложения (админки, файловые менеджеры, почта), для фильтров и настроек (например, в интернет-магазинах), а также для отображения различных инструментов (отличный пример – Figma с панелью инструментов и свойств).
Сайдбар может быть фиксированный, скрывающийся-раскрывающийся или всплывающий, который появляется поверх контента при нажатии, например, кнопки «бургер-меню».
5. Pagination / Пагинация
Pagination (пагинация) — это способ разделить большой список контента (например, товары, статьи, результаты поиска) на несколько страниц и дать пользователю управление переходом между ними.
Основное назначение — не загружать на экран сразу слишком много информации. Так пользователь будет легче воспринимать «дозированный» контент, а сайт будет меньше тормозить от ограничения на загружаемый объем данных. И в любой момент пагинация позволяет вернуться к конкретной странице списка. На некоторых сайтах можно встретить кнопку «Показать ещё» или столкнуться с ситуацией, когда контент подгружается сам во время скролла (бесконечный скролл или infinite scroll). Это тоже разновидность пагинации. Чтобы не путаться, в какой ситуации какой тип пагинации использовать, предлагаю простое правило:
- Если информации немного → лучше «Показать ещё».
- Если информации очень много и важна структура → классическая пагинация.
- Если нужно «бесконечно листать» (лента соцсетей) → infinite scroll.
6. Hamburger menu / Бургер-меню
Hamburger menu (меню-бургер) — это иконка в виде трёх горизонтальных полосок ( похоже на бургер 🍔), по нажатию на которую открывается скрытое меню навигации. Обычно используется на мобильных устройствах, чтобы экономить место.
UX-советы:
- В бургер-меню прячь второстепенные разделы, а важные показывай сразу.
- Делай анимацию открытия (выезд, плавность) — это улучшает восприятие.
- Используй знакомую иконку (три полоски), не придумывай «уникальные» символы.
7. Kebab menu / Кебаб-меню
Kebab menu (кебаб-меню) — это иконка из трёх вертикальных точек. По нажатию открывается выпадающее меню с дополнительными действиями или настройками.
Оно называется «кебаб», потому что три точки напоминают кусочки на шампуре.
Коротко об отличиях с бургер-меню:
- Бургер — для навигации (основные разделы сайта/приложения).
- Кебаб — для действий (дополнительные опции для конкретного элемента).
8. Meatballs menu / Фрикадельки
Meatballs menu (фрикадельки) — это иконка из трёх горизонтальных точек. По клику открывается список дополнительных действий или опций.
Называется «meatballs», потому что точки как маленькие фрикадельки рядом друг с другом.
Функционально нет никакого отличия от кебаб-меню, разница только в ориентации точек у иконки. Также иногда выбор между кебаб-менюи фрикадельками зависит от платформы, для которой делается интерфейс:
- Android чаще использует кебаб.
- iOS чаще использует meatballs.
9. Bento menu / Бенто-меню
Bento menu (бенто-меню) — это иконка в виде сетки из маленьких квадратов (обычно 3×3 или 2×2). Выглядит как коробочка с отделениями для еды (бенто-бокс в Японии 🍱).
В интерфейсе она открывает меню приложений или сервисов.
Ярким примером бенто-меню является Google Apps: иконка «девять точек» справа вверху на сайте Google, где спрятаны Gmail, Drive, Calendar и другие сервисы. Основная цель данного меню — спрятать много приложений или функций в компактный вид.
10. Nav bar / Навбар
Nav bar (навбар) — это панель навигации, которая помогает перемещаться по основным разделам приложения или сайта.
На сайтах можно встретить в верхней части экрана в виде меню с разделами. А в мобильных приложениях данный элемент чаще всего находися внизу. С названием данного элемента есть один нюанс именно в мобильных приложениях. Иногда его называют Bottom navigation (нижняя навигация), так как панель находится внизу экрана. Но это не самое страшное.
Если погрузиться в изучение мобильных систем (Material Design на Android и Human Interface Guidelines на iOS), то можно столкнуться со следующими неймингами одного и того же элемента интерфейса:
- Navigation bar (Nav bar) — в Material Design.
- Tab bar — в Human Interface Guidelines.
Такой вот интересный факт.
11. Tabs / Табы
Tabs (табы) — это элемент интерфейса, который позволяет переключаться между несколькими «вкладками» внутри одного экрана или раздела. Каждая вкладка открывает свой набор контента, но при этом пользователь остаётся в рамках одного и того же экрана.
Представь папку с разделителями: ты щёлкаешь по закладке и видишь нужную часть.
Пара примеров использования табов:
- Вкладки в браузере. Каждая вкладка – отдельный сайт.
- Карточка товара в интернет-магазине: «Описание / Отзывы / Доставка».
С визуальной точки зрения табы могут быть горизонтальными и вертикальными, но их функциональная часть и логика всегда одинаковые.
Итак, табы = переключатель контента в одном экране. Они не уводят пользователя «куда-то ещё», а меняют видимую часть внутри текущего раздела.
Ввод данных
В этой группе собраны элементы, которые отвечают за ввод данных в интерфейсе. Это такие компоненты, через которые пользователь может передать информацию системе. С их помощью мы не просто показываем данные, а даём возможность взаимодействия: ввести текст, выбрать вариант из списка, поставить галочку, загрузить файл и так далее.
Главная задача таких элементов — сделать ввод простым, понятным и не требующим лишних усилий.
12. Button / Кнопка
Button (кнопка) — это интерактивный элемент интерфейса, на который пользователь нажимает, чтобы выполнить действие. Она всегда должна выглядеть кликабельной и иметь понятную подпись: «Купить», «Отправить», «Сохранить», «Удалить». Если обобщить, то кнопка переводит пользователя из состояния «хочу» в состояние «сделал».
Ккопки делятся на несколько видов, которые выполняют определенные задачи:
- Primary button (основная) — самая заметная на экране. Для главного действия (например, «Оформить заказ»).
- Secondary button (вторичная) — менее выделяющаяся. Для вспомогательных действий (например, «Подробнее»).
- Tertiary / Ghost / Text button (текстовая) — может быть просто текстом или с лёгкой обводкой. Для дополнительных, не критичных действий (например, «Отмена»).
- Icon button (иконочная) — только иконка без текста (например, «❤» или «🔍»).
UX-советы:
- У кнопки должна быть ясная подпись, по которой понятно, что именно произойдёт.
- Достаточный размер (минимум 44×44px по гайдлайнам Apple/Google).
- Контраст с фоном, чтобы её легко заметили.
- Не перегружать экран десятками primary кнопок — одна основная, остальные второстепенные.
13. Checkbox / Чекбокс
Checkbox (чекбокс) — это маленький квадрат, в который можно поставить или убрать галочку. Он используется, когда нужно выбрать один или несколько вариантов из списка.
Чекбокс может быть включен (checked) или выключен (unchecked). Иногда бывает ещё состояние «частично выбран» (indeterminate) — когда внутри группы отмечены не все элементы, и вместо галочки в квадрате показано тире.
14. Radio buttons / Радио-кнопки
Radio buttons (радио-кнопки) — это элементы интерфейса, которые позволяют выбрать только один вариант из группы.
Они называются так по аналогии со старыми радиоприёмниками: там была группа кнопок, и при нажатии на одну из них остальные автоматически «отжимались». Аналогично они ведут себя и в интерфейсе. Если вы думаете, что их случайно можно перепутать с чекбоксами, то запомните простое правило:
- Radio button – только один вариант из группы.
- Checkbox – можно выбрать несколько одновременно.
15. Dropdown / Дропдаун
Dropdown (дропдаун или выпадающий список) — это элемент интерфейса, который показывает список вариантов только после клика или нажатия на элемент, из которого этот список выпадает (напрмиер, из кнопки, селекта или мультиселекта).
Возможность выбрать один или несколько элементов из списка напрямую зависит от конфигурации элемента, нажатие по которому активирует дропдаун.
16. Input field / Инпут
Input field (инпут) — это поле ввода, в которое пользователь может ввести данные с клавиатуры. Название пришло из HTML-тега <input> —базового элемента для ввода данных в формах.
UX-советы:
- Хорошо, если есть лейбл (название поля) рядом или сверху, чтобы было понятно, что вводить.
- Placeholder лучше использовать как подсказку, а не вместо лейбла.
- Инпуты должны быть достаточно крупными и удобными для клика (особенно на мобиле).
- Ошибки ввода (например, неправильный email) стоит подсвечивать сразу.
Вышеперечисленные советы также актуальны для других полей форм, которые рассмотрим далее.
17. Select / Селект
Select (селект) — это поле формы (и тег <select> в HTML), в котором можно выбрать один вариант из заранее заданного списка, который появляется при нажатии на элемент.
18. Multiselect / Мультиселект
Multiselect (мультиселект) — это то же самое, что и селект, только в нем можно выбрать несколько вариантов из заранее заданного списка.
19. TextArea / Текстэреа
TextArea (текстэреа) — это поле для ввода многострочного текста. В отличие от обычного инпута, где можно ввести только одну строку (например, имя или email), текстэреа позволяет писать длинные тексты, абзацы, комментарии.
UX-советы:
- Поле должно быть достаточно большим, чтобы пользователь сразу видел хотя бы несколько строк.
- Если текст может быть длинным, лучше предусмотреть авторасширение или удобный скролл.
- Хорошо, если рядом есть счётчик символов (например, «осталось 200 символов» в соцсетях).
20. Date picker / Дата пикер
Date picker (дата пикер) — это элемент интерфейса, который позволяет пользователю выбрать дату (или промежуток дат) из календаря или списка. Иногда его называют календарь для выбора даты.
21. Password field / Поле с паролем
Password field (поле с паролем) — это поле ввода, предназначенное для ввода пароля или другой конфиденциальной информации.
Основная особенность: текст, который вводит пользователь, скрыт (обычно заменяется точками ●●● или звёздочками ★★★). Чтобы показать скрытые символы, в поле есть иконка глаза, по нажатию на которую отображаются введенные данные.
UX-советы:
- Скрытие символов предотвращает подглядывание.
- Возможность показать пароль (иконка глаза) повышает удобство.
- Можно показывать индикатор «силы» пароля.
- Иногда рядом выводят подсказку о правилах (минимум 8 символов, цифры, спецсимволы).
22. Form / Форма
Form (форма) — это контейнер для сбора данных от пользователя. Она объединяет различные элементы ввода: инпуты, чекбоксы, радио-кнопки, селекты, текстовые поля, кнопки и так далее.
23. Wizard / Визард
Wizard (визард) — это интерфейс, который делит сложную форму на несколько шагов. Цель — не перегружать пользователя большим количеством полей сразу.
Пользователь видит только один шаг формы за раз, а после его заполнения нажимает на кнопку «Далее» и переходит к следующему шагу. В конце последнего шага находится кнопка завершения действия («Готово» или «Отправить»).
Пример: регистрация с несколькими этапами, настройка профиля, оформление заказа с несколькими страницами.
UX-советы:
- Добавляйте индикатор прогресса.
- Позволяйте возвращаться назад к предыдущим шагам.
- Не делайте слишком длинные цепочки шагов (лучше 3–5 шагов).
- Чётко разделяйте логические блоки.
24. Slider control / Слайдер
Slider control (слайдер) — это элемент интерфейса, который позволяет пользователю выбрать значение (или промежуток значений) из заранее заданного диапазона, перемещая ползунок вдоль линии.
Пример: громкость на аудиоплеере, яркость экрана, цена в фильтре магазина.
UX-советы:
- Отображай текущее значение рядом с ползунком.
- Ограничивай диапазон значений.
- Используй шаги (step) для дискретных значений.
- На мобильных делай ползунок достаточно большим для удобного перетаскивания.
25. Counter / Счетчик
Counter (счетчик) — это элемент интерфейса, который позволяет пользователю увеличивать или уменьшать числовое значение, обычно с помощью кнопок «+» и «−».
Пример: выбор количества товаров в корзине, установка количества участников, настройка таймера.
UX-советы:
- Делай минимальное и максимальное значение (min/max).
- Позволяй вводить число вручную для удобства.
- Подсвечивай неактивные кнопки, если достигнут min или max.
- Используй плавные анимации для лучшего восприятия.
26. Toggle / Тоггл
Toggle (тоггл, тумблер, свитч, переключатель) — это элемент интерфейса, который позволяет включить или выключить какое-то состояние.
Он работает по принципу рычага: одно положение = «Вкл», другое = «Выкл».
27. Search field / Поиск
Search field (поиск) — это элемент интерфейса, который позволяет пользователю вводить запрос и искать что-то в приложении или на сайте. Это особый вид инпута, предназначенный именно для поиска.
UX-советы:
- Поле должно быть достаточно заметным.
- Placeholder «Поиск…» помогает понять назначение.
- Автодополнение и подсказки ускоряют поиск.
- Должна быть возможность очистки поля (иконка «×»).
Обратная связь
Данная группа элементов отвечает за реакцию интерфейса на какие-либо изменения и действия пользователя. То есть, дает обратную связь.
28. Badge / Бэйдж
Badge (бэйдж) — это небольшой визуальный индикатор, который показывает число, статус или короткую метку рядом с элементом интерфейса.
Он помогает привлечь внимание к важной информации: уведомлениям, новинкам, статусам и т.п.
Есть три вида бейджей:
- Numeric badge — число (3, 10+), он показывает количество.
- Text badge — короткий текст (NEW, SALE, PRO).
- Status badge — цветовой индикатор состояния (● Online, ● Error).
UX-советы:
- Используй ограниченные цвета (красный = важно, зелёный = всё ок).
- Не перегружай интерфейс цифрами.
- Убирай бэйдж после того, как пользователь просмотрел уведомление.
29. Confirmation dialogue / Диалог
Confirmation dialogue (диалог) — это всплывающее окно, которое спрашивает пользователя, действительно ли он хочет выполнить важное или необратимое действие. Содержит заголовок или короткий вопрос, текст с уточнением действия и одну или две кнопки: Подтвердить / Отменить.
Цель данного элемента — предотвратить случайные действия, особенно те, которые:
- нельзя отменить (удаление, сброс данных),
- требуют осознанного решения пользователя (например, выход без сохранения).
UX-советы:
- Показывай такие диалоги только для действительно критичных действий.
- Делай кнопки чёткими и разными по смыслу (например: «Удалить» vs «Отмена»).
- Можно подсветить опасное действие красным цветом.
- Пиши конкретно, что именно произойдёт: вместо «Вы уверены?» лучше «Удалить фото “image_123.jpg”?»
30. Progress bar / Прогресс-бар
Progress bar (прогресс-бар) — это графический элемент, который показывает, насколько продвинулось выполнение какого-то процесса: загрузки, установки, заполнения формы или отправки данных. Он помогает пользователю понять, что процесс идёт, сколько уже сделано и сколько примерно осталось ждать.
UX-советы:
- Лучше показывать точное значение или визуальную динамику.
- Если процесс длится дольше нескольких секунд, обязательно показывай прогресс.
- Избегай «зависших» прогресс-баров — даже небольшая анимация помогает.
31. Loader / Лоадер
Loader (лоадер) — это индикатор загрузки, который показывает, что система в данный момент выполняет какую-то операцию: загружает данные, отправляет запрос или подготавливает экран.
Разница между Loader и Progress bar:
- Loader — просто показывает, что процесс идёт, но не показывает прогресс.
- Progress bar — показывает сколько уже выполнено (например, 60%).
UX-советы:
- Добавляй контекст или текст: «Загружаем результаты…».
- Используй скелетон, если можно показать структуру будущего контента.
- Если загрузка длится дольше 3–5 секунд, покажи оценку времени или прогресс-бар.
- Не злоупотребляй лоадерами, потому что пользователи не любят ждать.
32. Toast notification / Тост
Toast notification (тост) — это небольшое всплывающее сообщение, которое ненадолго появляется поверх интерфейса и сообщает пользователю о каком-то событии или результате действия.
Название «toast» (тост) пошло от аналогии с хлебом, который «всплывает» из тостера. Точно так же всплывает уведомление на экране.
UX-советы:
- Показывай коротко и ясно: до 1–2 строк текста.
- Используй разные цвета и иконки для типов сообщений: ✅ успех (зелёный), ⚠ предупреждение (жёлтый), ❌ ошибка (красный), ℹ информация (синий).
- Не закрывай важные элементы интерфейса.
- Дай пользователю время прочитать (3–5 секунд).
33. Notification / Уведомление
Notification (уведомление) — это сообщение, которое информирует пользователя о каком-то событии, действии или изменении в системе. Оно может быть временным или постоянным, внутри интерфейса или системным (на уровне устройства).
Основная цель – дать пользователю понять, что что-то произошло, и при необходимости предложить действие в ответ.
Отличие от Toast notification:
- Уведомление может быть постоянным, а тост исчезает автоматически.
- Тост не имеет действий в отличие от уведомления.
- Уведомление может содержать подробности в отличие от тоста с коротким сообщением.
UX-советы:
- Не перегружай пользователя уведомлениями, показывай только действительно важное.
- Разделяй временные тосты и постоянные уведомления.
- Добавляй иконки и цвета, чтобы быстро различать типы сообщений.
- Позволь пользователю очищать или настраивать уведомления.
- Для критичных событий используй диалоги подтверждения, а не просто уведомления.
34. Modal / Модальное окно
Modal (модальное окно) — это всплывающее окно, которое появляется поверх интерфейса и блокирует взаимодействие с остальной страницей, пока пользователь не выполнит какое-то действие (например, подтвердит, отменит, закроет).
Проще говоря, модалка — это окно, которое требует внимания и действия пользователя, прежде чем он сможет вернуться к основному экрану.
UX-советы:
- Пока открыта модалка, всё остальное недоступно (затемнено).
- Пользователь должен осознанно закрыть окно: кнопкой, крестиком или кликом по фону (если разрешено).
- Используется только для действительно важных или фокусных задач.
Отображение данных
Вот мы и подобрались к последней группе. Здесь всё достаточно банально: элементы этой группы созданы для отображения информации в интерфейсе в том или ином виде. Но нужно не забывать, что нюансы кроются в деталях.
35. Card / Карточка
Card (карточка) — это контейнер для информации, который объединяет текст, изображения, кнопки и другие элементы в единый визуальный блок. Карточки помогают структурировать контент и сделать его легко читаемым.
Пример: карточка товара в интернет-магазине, карточка новости на сайте, профиль пользователя в соцсети.
UX-советы:
- Используй визуальные иерархии: заголовок → изображение → текст → кнопки.
- Не перегружай карточку, лучше показать суть и дать возможность перейти к деталям.
- Делай карточки однотипными в списке, это упрощает восприятие.
- Добавляй тени и отступы, чтобы визуально отделять карточки друг от друга.
36. Chart / Диаграмма
Chart (график или диаграмма) — это визуальное представление данных, которое помогает пользователю быстро понять информацию, сравнить значения и увидеть тенденции.
Графики часто используют в дашбордах, отчётах, аналитике, статистике.
Основные типы диаграмм:
1. Bar chart (столбчатая диаграмма) — показывает сравнение категорий. Пример: продажи по месяцам.
2. Line chart (линейный график) — показывает изменение данных во времени. Пример: динамика температуры за неделю.
3. Pie chart (круговая диаграмма) — показывает доли от целого. Пример: процент распределения расходов.
4. Area chart (площадная диаграмма) — похоже на линейный график, но заполнено цветом под линией. Пример: накопительная статистика.
5. Scatter plot (точечная диаграмма) — показывает связь между двумя переменными. Пример: рост vs вес человека.
6. Donut chart (пончик) — круговая диаграмма с пустым центром. Используется для эстетики и краткого отображения долей.
UX-советы:
- Подбирай тип диаграммы под задачу.
- Добавляй подписи, легенду и единицы измерения.
- Не перегружай графики лишними линиями и цветами.
- Держи интерактивность: подсказки, фильтры, зум, hover-эффекты.
37. Icon / Иконка
Icon (иконка) — это маленький графический символ, который используется для визуального обозначения действия, объекта или функции в интерфейсе. Иконки помогают пользователю быстро понять смысл кнопки или элемента, даже без текста.
UX-советы:
- Используй универсальные понятные символы.
- Если есть риск непонимания, добавляй tooltip или подпись.
- Держи одинаковый стиль всех иконок в интерфейсе (цвет, толщина линий, размер).
- Не перегружай интерфейс лишними иконками — только нужные для действий или навигации.
38. Tag / Тэг
Tag (тег) — это маленький элемент интерфейса, который используется для маркировки, категоризации или фильтрации контента. Теги помогают пользователю быстро понять, к какой категории относится элемент, или отфильтровать контент по меткам.
UX-советы:
- Ограничивай количество тегов на элементе.
- Используй цветовые кодировки, чтобы быстро различать категории.
- Делай интерактивные теги кликабельными, если это фильтры.
- Добавляй возможность удаления или редактирования тегов, если это нужно.
39. Widget / Виджет
Widget (виджет) — это самостоятельный интерактивный элемент интерфейса, который показывает информацию или предоставляет функциональность в компактной форме. Виджеты делают интерфейс более информативным и удобным, собирая данные или выполняя действия без перехода на другую страницу.
UX-советы:
- Держи виджет самодостаточным, пользователь должен понять его смысл сразу.
- Показывай самое важное, не перегружай деталями.
- Распологай виджеты по логике и иерархии.
40. Carousel / Карусель
Carousel (карусель) — это интерактивный слайдер, который позволяет пользователю пролистывать несколько элементов в одном пространстве интерфейса. Цель — экономить место и одновременно показывать несколько объектов (картинки, карточки, отзывы, новости).
UX-советы:
- Показывай хотя бы часть следующего элемента, чтобы дать понять, что есть прокрутка.
- Добавляй индикаторы (точки, стрелки), чтобы пользователи понимали, что можно пролистывать.
- Используй автопрокрутку только с возможностью остановки.
- Минимизируй количество элементов в карусели — лучше 3–5 ключевых.
Заключение
Итак, мы разобрали 40 элементов интерфейса. Я постарался выделить ключевые компоненты, из которых можно, как из конструктора, собирать сайты, сервисы или приложения. Надеюсь, эта статья поможет начинающим UX-дизайнерам и тем, кто только начал изучать данную профессию. Если вы знаете элементы, которых нет в этом списке, пишите комментарии, а я постараюсь описать их в отдельной статье.
А еще, все, кто дочитал до конца, держите лайк ❤