Думаю, що багато спеціалістів з тестування стикалися з труднощами при створенні баг-репортів, які стосувалися назви елементів UI. “Три крапки в хедері”, “верхнє меню”, “кругла кнопка з плюсиком” - це буде зрозуміло розробнику, але ми ж з вами серйозні люди, чи не так?
Пропоную пройтися по основних компонентах користувацького інтерфейсу операційної системи Android, щоб ваш наступний баг-репорт містив не “круглу кнопку з плюсиком”, а правильно названий елемент - “фаб” (Floating action button).
Відштовхуватися будемо від гайдлайнів Google - Material Design.
Для всім відомих платформ доступні два гайдлайни:
Material Design від Google був представлений публіці у 2014 році з виходом Android 5. Основними ідеями Material Design є принцип глибини інтерфейсу, його інтерактивність (чутливість) та рух (анімація зміни стану). Основний посил “матеріалу” полягає в тому, що ви можете уявити інтерфейс у вигляді окремих аркушів паперу, які відкидають тінь один на одного.
Ви можете ознайомитися детальніше у відео нижче:
Завдяки гайдлайну ви зможете:
- прискорити розробку та процес дизайну (через готові рішення, які ви можете завантажити з сайту гайдлайну)
- зробити інтерфейс звичним і зрозумілим користувачам
- заощадити на розробці (через наявність елементів UI в середовищі розробки)
Компоненти Material Design
Розглянемо найпопулярніші елементи керування користувацьким інтерфейсом для операційної системи Android, які найчастіше зустрічаються в реальних додатках.
- AppBar
- Bottom Navigation
- Buttons
- Chips
- Dialogs
- Dividers
- Lists
- Menus
- Navigation Drawer
- Pickers
- Progress Indicators
- Selection Controls
- Bottom Sheets
- Side Sheets
- Snackbars
- Tabs
- Text Fields
- Tooltips
AppBar
AppBar може розташовуватися як внизу екрана, так і вгорі. Майже завжди віддають перевагу використанню “аппбару” з верхньою навігацією. Будемо акцентувати увагу лише на верхньому “аппбарі”. Верхня панель додатку відображає вміст і дії, пов’язані з поточним екраном. Вона використовується для брендингу, заголовків екрану, навігації та дій.
Також AppBar може зникати при скролі. Верхні панелі додатків мають постійну позицію та контент для підвищення обізнаності. Рекомендоване розміщення елементів у верхній панелі додатку:
- Контейнер
- Іконка навігації
- Заголовок
- Елементи дій
- Меню переповнення (зазвичай називають кнопка “Ще”)
Існує два типи верхніх панелей: звичайна панель, і контекстна панель дій. Контекстні панелі дій надають дії для вибраних елементів. Верхня панель додатку може трансформуватися в контекстну панель дій, залишаючись активною доти, доки дія не буде виконана або доки вона не буде відхилена.
Більш детально ознайомитися з верхньою панеллю можете за посиланням
Bottom Navigation
Нижні панелі навігації дозволяють переміщатися між основними пунктами призначення в додатку.
У нижній навігації є три пункти призначення, кожен з іконкою та текстом.
- Контейнер
- Неактивна іконка
- Неактивний текстовий заголовок
- Активна іконка
- Активний текстовий заголовок
Нижні панелі навігації відображають від трьох до п’яти пунктів призначення в нижній частині екрана. Кожен пункт призначення представлений іконкою та необов’язковим текстовим заголовком. При дотику до нижньої іконки навігації користувач потрапляє в пункт призначення верхнього рівня, пов’язаний з цією іконкою.
Більш детально ознайомитися з нижньою навігацією можете за посиланням
Buttons
Кнопки дозволяють користувачам виконувати дії та робити вибір одним натисканням.
- Текстова кнопка (низький акцент). Текстові кнопки зазвичай використовуються для менш важливих дій.
- Контурна кнопка (середній акцент). Контурні кнопки використовуються для більшого виділення, ніж текстові кнопки через обведення.
- Заповнена кнопка (великий акцент). Заповнені кнопки мають більший акцент, оскільки вони використовують кольорову заливку та тінь.
- Кнопка перемикання
- Кнопки перемикання групують набір дій, використовуючи макет і інтервал. Вони використовуються рідше, ніж інші типи кнопок.
Більш детально ознайомитися з кнопками можете за посиланням
Floating Action Button (FAB)
Кнопка з плаваючою дією представляє основну дію екрана. FAB виконує основну або найпоширенішу дію на екрані. Вона відображається перед усім вмістом екрана, зазвичай у вигляді круглої форми з іконкою в центрі. FAB бувають трьох типів: звичайні, міні та розширені.
- Контейнер
- Іконка
Більш детально ознайомитися з “фабом” можете за посиланням
Chips
Чіпси - це компактні елементи, що представляють вхідні дані, атрибут або дію.
- Контейнер. Містять усі елементи чіпса, і їхній розмір визначається цими елементами. Контейнер також може бути визначений штрихом.
- Мініатюра (необов’язково). Мініатюри ідентифікують об’єкти (наприклад, окремих осіб), відображаючи аватар, логотип або іконку.
- Текст. Текст чіпса може бути іменем, описом, тегом, дією.
- Іконка «Видалити» (необов’язково). Чіпси можуть включати іконку «Видалити»
Більш детально ознайомитися з чіпсами можете за посиланням
Dialogs
Діалоги інформують користувачів про завдання і можуть містити критичну інформацію, що вимагає прийняття рішення.
Діалог - це тип модального вікна, яке з’являється перед вмістом додатку, щоб надати важливу інформацію або запросити рішення. Діалогові вікна вимикають усі функції додатку, коли вони з’являються, і залишаються на екрані доти, доки не будуть підтверджені, відхилені або не будуть вжиті необхідні дії.
Діалоги цілеспрямовано переривають, тому їх слід використовувати з обережністю.
- Контейнер
- Назва (необов’язково)
- Допоміжний текст
- Кнопки
- Код
Більш детально ознайомитися з діалогами можете за посиланням
Dividers
Роздільник - це тонка лінія, яка групує контент у списки та макети. “Дівайдери” розділяють контент на чіткі групи. Вони мають бути помітними, але не виділятися на тлі всього макета.
Більш детально ознайомитися з роздільниками можете за посиланням
Lists
Списки представляють собою безперервний вертикальний текст або зображення. Представляють собою безперервну групу тексту або зображень. Вони складаються з елементів, що містять основні та додаткові дії, які представлені іконками та текстом.
- Список
- Рядок
- Вміст елемента списку
Більш детально ознайомитися зі списками можете за посиланням
Menus
Меню відображають список варіантів на тимчасових поверхнях. Вони з’являються, коли користувачі взаємодіють з кнопкою, дією або іншим елементом керування. Меню має легко відкриватися, закриватися з легкою взаємодією. Вміст меню має відповідати потребам користувача. Меню з’являються, коли користувач торкається інтерактивного елемента інтерфейсу, такого як іконка, кнопка, дія або контент, текст тощо.
- Контейнер
- Іконка
- Текст
- Роздільник
Більш детально ознайомитися з меню можете за посиланням
Navigation Drawer
Navigation Drawer забезпечують доступ до пунктів призначення у вашому додатку. Надають доступ до адресатів і функцій додатку, таких як перемикання облікових записів. Вони можуть постійно відображатися на екрані або керуватися іконкою меню навігації. Розташування та вміст списку в стилі Navigation Drawer чітко визначають їх як навігацію. Вони впорядковують пункти призначення відповідно до важливості для користувача, причому часто використовувані пункти призначення спочатку, а пов’язані групи групуються разом. Navigation Drawer містять список, вбудований у лист. Вони можуть бути розширені за допомогою заголовків і роздільників для організації довших списків.
- Контейнер
- Заголовок (необов’язково)
- Роздільник (необов’язково)
- Накладання активного тексту
- Активний текст
- Неактивний текст
- Підзаголовок
- “Скрім” (тільки модальний)
Більш детально ознайомитися з Navigation Drawer можете за посиланням
Pickers
“Пікер” дати дозволяє користувачам вибирати дату або діапазон дат. Вибір дати може відображати минулі, теперішні або майбутні дати - залежно від завдання. Чітко вкажіть важливі дати, такі як поточні та вибрані дні. Щоб вибрати день або час інтуїтивно, використовуйте звичайні шаблони вибору, такі як календар.
- Назва
- Вибраний діапазон дат
- Перемикач на введення з клавіатури
- Мітка місяця та року
- Поточна дата
- Дата початку
- Вибраний діапазон
- Дата закінчення
Більш детально ознайомитися з пікерами можете за посиланням
Progress Indicators
Індикатори виконання відображають невизначений час очікування або відображають тривалість процесу. Індикатори прогресу інформують користувачів про стан поточних процесів, таких як завантаження додатку, відправка форми або збереження оновлень. Вони повідомляють про стан додатку та вказують доступні дії, наприклад, чи можуть користувачі переходити з поточного екрана. “Прогреси” використовують анімацію, щоб привернути увагу та інформувати користувачів про прогрес.
Індикатори прогресу виглядають і анімуються таким чином, щоб відображати стан процесу. Вони ніколи не бувають просто декоративними.
Material Design пропонує два візуально відмінних типи індикаторів прогресу: лінійні та кругові. Тільки один тип має представляти кожен вид активності в додатку. Наприклад, якщо дія оновлення відображає круговий індикатор на одному екрані, ця ж дія не повинна використовувати лінійний індикатор в іншому місці додатку.
Більш детально ознайомитися з індикаторами виконання можете за посиланням
Selection Controls
Елементи керування вибором дозволяють користувачу вибирати параметри. Сюди відносяться: чекбокси, радіо кнопки та свитчі. Елементи керування вибором дозволяють користувачам виконувати завдання, які включають вибір, наприклад вибір параметрів або вмикання чи вимикання параметрів. Елементи керування вибором знаходяться на екранах, які просять користувачів приймати рішення або оголошувати налаштування.
Switch
Використовуйте світч для:
- вмикання або вимикання одного елемента на мобільному телефоні та планшеті
- негайної активації або деактивації чогось
Checkboxes
Використовуйте чекбокси, щоб:
- вибрати один або кілька варіантів зі списку
- представити список, що містить підвибірки
- увімкнути або вимкнути елемент
Radio Buttons
Використовуйте радіо кнопки, щоб:
- вибрати один варіант зі списку
- виставити всі доступні варіанти
Більш детально ознайомитися з елементами керування можете за посиланням
Bottom Sheets
Bottom Sheet - це поверхні з додатковим вмістом, прикріплені до нижньої частини екрана. Є три типи, які підходять для різних випадків використання:
- Стандартні Bottom Sheet’и відображають контент, який доповнює основний контент екрана. Вони залишаються видимими, поки користувачі взаємодіють з основним контентом.
- Модальні Bottom Sheet’и є альтернативою вбудованим меню або простим діалоговим вікнам і надають місце для додаткових елементів, більш довгих описів та іконок.
- Розширювані Bottom Sheet’и забезпечують невелику згорнуту поверхню, яка може бути розширена користувачем для доступу до ключової функції або завдання. Вони пропонують постійний доступ до стандартного листа з простором і фокусом модального листа.
- Лист (Sheet)
- Контент
- Скрім (тільки модальні)
Більш детально ознайомитися з Bottom Sheet можете за посиланням
Side Sheets
Бокові листи - це поверхні, що містять додатковий вміст, які прив’язані до лівого або правого краю екрана. Вони бувають двох типів:
Стандартні бокові листи відображають контент, який доповнює основний контент екрана. Вони залишаються видимими, поки користувачі взаємодіють з основним контентом.
- відображення списку дій, які впливають на основний вміст екрана, наприклад, фільтри
- відображення додаткового контенту та функцій
Модальні бокові листи використовуються на мобільних пристроях замість стандартних бокових листів через обмежений розмір екрана. Вони можуть відображати ті ж типи контенту, що й стандартні бокові листи, але мають бути відхилені для взаємодії з базовим контентом.
- Лист
- Вміст
- Скрім (тільки модальні)
Більш детально ознайомитися з Side Sheet можете за посиланням
Snackbars
Снек-бари надають короткі повідомлення про процеси додатку в нижній частині екрана. Вони інформують користувачів про процес, який додаток виконав або буде виконувати. Вони з’являються тимчасово, у нижній частині екрана. Вони не повинні переривати взаємодію з користувачем і не вимагають, щоб користувацьке введення зникало. Одночасно може відображатися тільки один снек-бар.
- Текст
- Контейнер
- Дія (необов’язково)
Більш детально ознайомитися зі снек-баром можете за посиланням
Tabs
Вкладки організують контент на різних екранах, наборах даних та інших взаємодіях. Дозволяють переміщатися між групами контенту, які пов’язані та на тому ж рівні ієрархії. Кожна вкладка повинна мати вміст, відмінний від інших вкладок у наборі. Наприклад, вкладки можуть представляти різні розділи новин, різні жанри музики або різні теми документів.
- Контейнер
- Активна іконка
- Активний текст
- Активний індикатор таба
- Неактивна іконка
- Неактивний текст
- Елемент таблиці
Більш детально ознайомитися з табами можете за посиланням
Text Fields
Текстові поля дозволяють користувачам вводити та редагувати текст (як не дивно :) ). Текстові поля дозволяють користувачам вводити текст у користувацький інтерфейс. Вони зазвичай з’являються у формах і діалогах. Текстові поля мають виділятися та вказувати, що користувачі можуть вводити інформацію.
Текстові поля бувають двох типів:
- Заповнені текстові поля
- Виділені текстові поля
Обидва типи текстових полів використовують контейнер для забезпечення чіткої можливості взаємодії, що робить поля помітними в макетах.
- Заповнені текстові поля
- Виділені текстові поля
- Контейнер
- Провідна іконка (необов’язково)
- Текст
- Введений текст
- Іконка видалення (необов’язково)
- Індикатор активації
- Допоміжний текст (необов’язково)
Більш детально ознайомитися з текстовими полями можете за посиланням
Tooltips
Спливаючі підказки відображають інформативний текст, коли користувач наводить курсор миші на елемент, фокусується на ньому або натискає на нього. Підказки з’являються при наведенні, фокусуванні або дотику та зникають через короткий час. Спливаючі підказки містять лише короткий текст опису.
Більш детально ознайомитися з підказками можете за посиланням
Усі матеріали були взяті та доповнені з cайту