Компоненти в графічних інтерфейсах

Компоненти — це дуже широкий термін, що охоплює майже всі елементи в інтерфейсі. Навігаційні панелі — компоненти. Кнопки — теж компоненти. Поля введення, перемикачі, прапорці, списки — все це компоненти.

Єдиного переліку компонентів, спільного для всіх інтерфейсів, не існує, адже сукупність компонентів напряму залежить від складності продукту. В таких складних продуктах як, скажімо, операційні системи, компонентів може бути й кілька сотень. А в простих застосунках — пара десятків.

При цьому в системах начебто однакового рівня складності — скажімо, в операційній системі iOS і в операційній системі Android — можуть бути геть різні набори інтерфейсних елементів. Тому для ліпшого розуміння того, які саме компоненти можуть траплятись в інтерфейсах, ми рекомендуємо вам аналізувати різні дизайн-системи і дивитись там на перелік компонентів і їхній опис.

А в цьому матеріалі ми зібрали добірку компонентів, що є найпоширенішими в різних інтерфейсах та дизайн-системах.

Елементи форм

Поля введення інформації (Input)

Базовим засобом введення інформації в форму є однорядкове поле введення. Як правило, в нього вводиться невеликий за обсягом текст — наприклад, ім’я чи прізвище. Основою такого поля є інтерактивна область введення інформації — контейнер. На додачу до нього поле може містити назву (англійською label), текст-заповнювач (англійською його називають placeholder), супровідний текст-пояснення (наприклад, з підказками стосовно допустимої кількості символів для даного поля) та введений текст (якщо поле вже заповнене).

Радіокнопки (Radio buttons)

Радіокнопки мають круглу форму і використовуються, коли користувачу необхідно вибрати один варіант із множини. Наприклад, для вибору статі або однозначної відповіді на питання — так або ні. Візуально радіокнопка часто складається з назви (або пов’язаного з нею варіанту вибору) та безпосередньо елементу управління. Має неактивний, активний стани, а також стан наведення та заблокований стан.

Прапорці (Checkbox)

Прапорці використовуються тоді, коли користувач може зробити множинний вибір. Наприклад, обрати декілька інгредієнтів до піци. Ще одним контекстом використання прапорців є, навпаки, вибір з одного варіанту (як правило «так») — тоді використовується один прапорець. Ви з подібним маєте справу щоразу, коли укладаєте договір користування. З точку зору оформлення, прапорці мають квадратну форму. Часто їх супроводжує назва, натискання на яку активує пов’язаний з нею прапорець. З прапорцем може бути пов’язаний і ілюстративний елемент. Прапорці можуть мати неактивний та активний стани, а також стан наведення та заблокований стан.

Перемикачі (Toggle)

Перемикачі — чудовий елемент для параметрів, що мають два стани. Наприклад, увімкнене чи вимкнуте налаштування або денна чи нічна тема інтерфейсу.

Перемикачі можуть мати неактивний та активний стани, а також стан наведення та заблокований стан.

Повзунки (Slider)

Повзунки — це спеціальний інтерфейсний елемент для параметрів, що можуть мати лінійний діапазон значень. Наприклад, налаштування гучності, яскравості чи контрастності від 0 до 100.

Як правило, вони складаються з лінійної шкали та, власне, повзунка. В деяких випадках для візуального спрощення цього елементу замість повзунка показують просто ступінь заповненості шкали. Але для мобільних застосунків повзунок є дещо зручнішим способом управління налаштуваннями.

Кнопки (Buttons)

Кнопки — це ключовий елемент дії в інтерфейсах. Дії тут можуть бути різноманітні: відправлення форми, оновлення сторінки, збереження файлу, друк документу, завантаження зображення, видалення об’єкту, перехід до наступного елементу в списку тощо.

Кнопка може складатись з контейнера (тобто, області, на яку можна натиснути), тексту та контекстної іконки. Оскільки кнопки пов’язані з діями, краще за все, щоб текст кнопки містив відповідне дієслово — «оформити замовлення», «видалити», «надрукувати» тощо.

Підказки та сповіщення

Банери (Banners)

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

Спливаючі підказки (Tooltips)

Спливаючі підказки частіше зустрічаються в вебінтерфейсах. Це невеликі елементи, що з’являються біля кнопок чи іконок під час наведення на них курсору миші чи під час активації поля введення. В таких підказках можуть розміщуватись як роз’яснення до інтерфейсних елементів, так і підказки для заповнення полів форми. Скажімо, про вимоги до пароля.

Індікатори прогресу (Progress indicator)

Для довгих форм, що складаються з кількох кроків, або під час читання лонгрідів, буває корисно бачити, наскільки ви просунулись. Для такого контексту часто використовують індикатори прогресу. 

Фактично вони складаються з суцільної порожньої шкали та риски заповненості. Такі індикатори можуть мати форму лінії чи форму кола.

Нижні сповіщення (Snackbars)

Операційні сповіщення (snackbars) з’являються, коли користувач виконав в інтерфейсі якусь дію. Скажімо, відправив листа поштою. Часто тут також з’являється контекстна дія (наприклад, відмінити відправку листа). 

Часто в вебінтерфейсах вони розташовані в нижній частині екрану, але насправді місце їх появи є довільним. В CASES вони з’являються в правому верхньому кутку.

Модальні вікна (Modal window або Pop up window)

Модальними називають елементи, що блокують будь-які інші дії. Це може бути зроблено, щоб сприяти завершенню користувачем запланованої дії. Наприклад, щоб він, почавши оформлювати замовлення на сайті і поклавши товари у цифровий кошик, не відволікся на щось інше. Також це може бути зроблено для того, щоб зосередити увагу користувача на важливому повідомленні. Скажімо: «після цієї дії ви незворотно видалите обліковий запис і його зміст з нашого сайту». Як правило, щоб рухатись далі, користувач має виконати якусь дію. Наприклад, натиснути одну з кнопок: «Все одно видалити» чи «Скасувати видалення».

Списки та картки

Списки (Lists)

Списки є незамінним засобом візуалізації, коли ви маєте масив елементів, подібних за певною вихідною характеристикою чи задачею. Наприклад, продукти, які ви плануєте купити в магазині, об’єднує, власне, ваш похід до магазину.

Список являє собою перелік об’єктів, кожен з яких може бути позначений спеціальним візуальним засобом — маркером. Списки бувають впорядкованими (наприклад, нумерованими, і тоді це значить, що послідовність елементів у списку є чіткою), або невпорядкованими (це значить, що послідовність елементів у списку може довільно змінюватись).

Картки (Cards)

Картка в інтерфейсі — це об’єкт, що об’єднує сукупність пов’язаних елементів в один елемент. Прикладом карток можуть бути картки курсів в списку курсів від Креативної Практики. Власне, картки часто з’являються саме в контексті списків.


Теги (Tags)

Теги — це тематичні маркери, що, як правило, містять контейнер, тобто текст. Іноді вони також можуть містити контекстну дію. Наприклад, якщо тег використовується в фільтрі, такою контекстною дією може бути видалення даного тегу з пошуку.


Навігаційні елементи

Навігаційне меню (Navigation Bar)

Навігаційне меню — це панель для навігації в межах цифрового продукту (мобільного застосунку, вебсайту тощо). Докладно про організацію навігації в контексті вебпроєктів ми вже розповідали на курсі «Основи вебдизайну». А в мобільних застосунках ключова панель навігації розташована в нижній частині екрану. Там знаходяться часто не лише навігаційні елементи, але й ключові дії застосунку.

Звісно, там місця небагато, тому в застосунках ще можна розміщувати додаткові пункти меню у шухлядах чи контекстних меню.

Шухляди (Drawers)

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


Контекстні меню (Contextual Menus)

Навігаційне меню потрібне для переміщення в межах застосунку чи вебсайту з одного розділу до іншого. А контекстні меню використовуються для того, щоб взаємодіяти з окремим елементом системи. Відповідно, вміст меню буде залежити від доступних в контексті даного елементу дій. Наприклад, в графічних редакторах ви викликаєте контекстні меню для взаємодії з шаром, текстом, графічним об’єктом тощо. В інтерфейсах таке меню може прив’язуватись, наприклад, до карток чи до елементів списку.


Вкладинки (Tabs)

З точки зору загальної ідеї, вкладки схожі на меню розділу. Вони пов’язані з окремими інформаційними блоками. Але їхньою відмінністю є те, що якщо пункт меню по розділу переносить вас до певного інформаційного блоку в межах поточної сторінки, а решта розділів залишається при цьому на місці, то активна вкладка приховує решту інформаційних блоків.

Як правило, вкладки зображаються аналогічно до фізичних вкладок, які можна зустріти в каталогах — це прямокутні блоки або ж блоки з невеличкими заокругленнями на кутах. При цьому в активної вкладки таке ж тло, як і в блоку, з яким вона пов’язана, і немає однієї рамки.

На завершення

Звісно, реальний перелік компонентів є набагато ширшим. Тож заохочуємо не вичерпувати своє розуміння їх видів цим матеріалом і обов’язково аналізувати компоненти в дизайн-системах.

·
3780
·
8
·
goodsuper 44
Головна