Ленти с раздели и долна навигация: правила за проектиране, които издържат
Как да проектираме ленти с раздели и долна навигация на iOS и Android: 3 до 5 дестинации, навигация, а не действия, етикети, значки, видимост и анимирани активни състояния.
Ядро за вкъщи
Използвайте лента с раздели или долна навигация за три до пет дестинации от най-високо ниво, а не за действия. Дайте на всеки раздел икона и етикет, дръжте лентата видима, докато хората се движат между разделите, избягвайте препълване на раздели „Още“, където можете, и използвайте значките пестеливо. Анимирайте активното състояние фино, така че хората да видят къде се намират.
Какво казват платформите
Material Design 3 казва, че навигационните ленти осигуряват достъп до три до пет дестинации, всяка с икона и етикет, и една дестинация е винаги активна. Насоките на Apple казват да се използва лента с раздели за навигация, а не за предоставяне на действия, за да се поддържа видима, докато хората се движат между секции (освен когато модалът я покрива) и да се избягват преливащи раздели.
Избор на раздели
Разделите представляват структурата на приложението:
- Изберете разделите, които хората използват най-често, а не всеки раздел, който имате.
- Използвайте съществителни за дестинации („Библиотека“), а не глаголи за действия („Качване“).
- Поставете действия в самия екран, в лента с инструменти или плаващ бутон за действие.
- Ако имате нужда от повече от пет, преразгледайте структурата си, преди да добавите раздел „Още“.
Етикети и значки
Разделите само с икони спестяват място, но карат хората да се досещат. Етикетите правят навигацията по-ясна, особено за по-рядко срещаните икони. Значките трябва да сигнализират за нещо, което хората трябва да предприемат; бадж, който винаги присъства, спира да се забелязва.
Запазване на състоянието на раздел
Apple отбелязва, че лентите с раздели позволяват на хората да превключват секции, като същевременно запазват текущото състояние на навигация във всяка секция. Връщането към раздел трябва да показва къде е спрял, а не да нулира в началото.
Движение
Малък преход на активния индикатор, като хапче, което се плъзга, или икона, която се изпълва, помага на хората да следят къде се намират. Дръжте го бързо, под около 250 милисекунди, избягвайте подскачането на всяка икона при всяко докосване и го опростете, когато е включено намаленото движение.
Ключове Principle, които трябва да запомните
- Три до пет дестинации от най-високо ниво
- Навигация, не действия
- Икона плюс етикет за всеки раздел
- Дръжте го видим и запазете състоянието на всеки раздел
- Фино, бързо движение в активно състояние
Често задавани въпроси
Източници
- Navigation bar guidelines — Material Design 3
- Tab bars — Указания за човешкия интерфейс на Apple