Панелі вкладок і нижня навігація: правила дизайну, які витримують
Як створити панелі вкладок і нижню навігацію на iOS і Android: від 3 до 5 пунктів призначення, навігація, а не дії, мітки, значки, видимість і анімовані активні стани.
Основний винос
Використовуйте панель вкладок або нижню панель навігації для трьох-п’яти пунктів призначення верхнього рівня, а не для дій. Додайте кожній вкладці піктограму та мітку, тримайте панель видимою, коли люди переміщаються між розділами, уникайте переповнених вкладок "Більше", де це можливо, і економно використовуйте значки. Помітно анімуйте активний стан, щоб люди бачили, де вони знаходяться.
Що говорять платформи
Material Design 3 каже, що навігаційні панелі забезпечують доступ до трьох-п’яти пунктів призначення, кожен з яких має піктограму та мітку, і один пункт призначення завжди активний. В інструкціях Apple йдеться про використання панелі вкладок для навігації, а не для надання дій, щоб вона була видимою, коли люди переміщуються між розділами (за винятком випадків, коли її покриває модальний режим), і щоб уникати переповнення вкладок.
Вибір вкладок
Вкладки представляють структуру програми:
- Виберіть розділи, якими люди користуються найчастіше, а не всі розділи, які є у вас.
- Використовуйте іменники для призначення («Бібліотека»), а не дієслова для дій («Завантажити»).
- Розмістіть дії на самому екрані, на панелі інструментів або на плаваючій кнопці дії.
- Якщо вам потрібно більше п’яти, перегляньте свою структуру, перш ніж додавати вкладку «Ще».
Ярлики та значки
Вкладки лише з піктограмами економлять місце, але змушують людей здогадуватися. Мітки роблять навігацію зрозумілішою, особливо для менш поширених значків. Бейджі мають сигналізувати про те, що людям потрібно діяти; постійно присутній значок перестають помічати.
Зберігати стан на вкладку
Apple зазначає, що панелі вкладок дозволяють людям перемикати розділи, зберігаючи поточний стан навігації в кожному розділі. Повернення до вкладки має показувати, де вони зупинилися, а не повертатися до початку.
Рух
Невеликий перехід на активному індикаторі, наприклад таблетка, що ковзає, або піктограма, яка заповнюється, допомагає людям відстежувати, де вони знаходяться. Тримайте це швидко, приблизно до 250 мілісекунд, уникайте підстрибування кожного значка під час кожного дотику та спрощуйте його, коли ввімкнено зменшення руху.
Ключі Principle, які слід запам’ятати
- Від трьох до п'яти напрямків найвищого рівня
- Навігація, а не дії
- Піктограма плюс мітка для кожної вкладки
- Тримайте його видимим і зберігайте стан кожної вкладки
- Тонкий, швидкий рух в активному стані
Часті запитання
Джерела
- Navigation bar guidelines — Material Design 3
- Tab bars — Інструкції щодо людського інтерфейсу Apple