Праймер за Android навигация

Всяко превозно средство, което някой използва, за да се придвижва между сцени във вашия интерфейс - това е навигация

Щом свържете два екрана заедно в приложение, имате навигация. Тази връзка - каквото и да е - е превозното средство, което превозва потребители между тези екрани. И въпреки че създаването на навигация е сравнително просто, създаването на подходяща навигация за вашите потребители не винаги е просто. В тази публикация ще разгледаме някои от най-често срещаните модели на навигация, използвани в Android, как влияят на навигацията на ниво система и как да смесвате и съпоставяте моделите според вашия интерфейс и вашите потребители.

Дефиниране на навигация

Преди да копаете в общи навигационни модели, си струва да се отдръпнете и да намерите отправна точка за обмисляне на навигацията в приложението ви.

Спецификацията на Material Design има някои страхотни насоки как да подходим към определянето на навигационните структури, но за целите на тази публикация можем да сведем всичко до две прости точки:

  • Изградете навигация въз основа на задачи и съдържание
  • Изградете навигация за хората

Изграждането на навигация въз основа на задачи и съдържание означава разбиване на задачите, които хората ще изпълняват и какво ще видят по пътя, и картографиране на отношенията между тях. Определете как задачите се свързват една с друга - кои задачи са повече или по-малко важни, кои задачи са братя и сестри, кои се гнездят една в друга и кои задачи ще се изпълняват повече или по-рядко.

Точно тук влиза изграждането на навигация за хората - хората, използващи вашия интерфейс, могат да ви кажат дали работи за тях или не, а навигацията ви трябва да бъде изградена около това да им помогне да успеят в приложението ви.

След като знаете как задачите в приложението ви работят заедно, можете да решите какво съдържание потребителите трябва да виждат по пътя и кога и как да го представят - това упражнение трябва да осигури добра основа за решаването кои модели най-добре служат на опита на приложението ви.

Намерете по-подробни указания за разбиване на задачите и поведението за навигация в спецификацията Material.

🗂 Раздели

дефиниция

Раздели осигуряват бърза навигация между изгледи на братя и братя вътре в същия родителски екран. Те са копланарни, което означава, че могат да бъдат преместени наоколо и живеят в разширяема, разпознаваема лента с раздели.

Разделите са чудесни за филтриране, сегментиране или предоставяне на дълбочина на свързани части от съдържанието. Несвързани парчета съдържание или съдържание със собствена дълбока йерархия може да бъде по-добре обслужвано чрез използване на други навигационни модели.

Намерете всички подробности за проектирането на раздели тук и за реализацията на раздели тук.

Раздели в действие

Възпроизвеждане на музика, Google+, Play Newsstand

Play Music (горе, отляво) използва раздели, за да добави дълбочина в музикалната библиотека, като организира едно и също общо съдържание по различни начини за настаняване на различни средства за изследване.

Google+ (по-горе, в центъра) използва раздели, за да сегментира колекции, единичен тип съдържание, което води до много разнородно съдържание по-дълбоко в приложението.

Play Newsstand (по-горе, вдясно) използва раздели на екрана на библиотеката, за да представи различни набори от една и съща информация - единият раздел представя холистична, многопластова колекция, а другият показва съкратен набор от заглавия.

история

Разделите съществуват на едно ниво заедно, в един и същ родителски екран. Така че придвижването между раздели не трябва да създава история нито за бутона за връщане на системата, нито за бутона на приложението нагоре.

Чекмеджета за кораби

дефиниция

По принцип навигационното чекмедже е вертикален прозорец, прикрепен към левия ръб на платното. Чекмеджетата могат да се проявяват извън екрана или включени, постоянни или не, но те винаги имат някои общи характеристики.

Обикновено в чекмеджето за навигация са посочени родителските дестинации, които са връстници или братя и сестри един с друг. Навесно чекмедже може да се използва в приложения с няколко основни дестинации и някои уникални поддържащи дестинации като настройки или помощ.

Ако комбинирате чекмеджето с друг основен компонент за навигация - например долната навигация - чекмеджето може да съдържа вторични дестинации или важни дестинации, които не следват директно в йерархията от долния nav.

Когато използвате навигационното чекмедже, имайте предвид какви видове дестинации представяте - добавянето на твърде много дестинации или дестинации, които представляват различни нива в йерархията на приложението, може да се обърка.

Също така имайте предвид видимостта - чекмеджето може да бъде добро за намаляване на видимостта или уплътняване на навигацията далеч от основната област на съдържанието, но това може да бъде и недостатък в зависимост от това как трябва да бъдат представени и достъпни дестинациите в приложението ви.

Вземете подробни указания за дизайна на чекмеджета за навици тук и прилагането им тук

Научно чекмеджета в действие

Play Store, Google Camera, Inbox

Play Store (горе, отляво) използва чекмеджето nav, за да насочва към различни секции на магазина, всеки от които е посветен на различен тип съдържание.

Google Camera (по-горе, в центъра) използва чекмеджето за поддържане на дестинации - това са най-вече дестинации, които увеличават опита за заснемане, плюс път към настройките.

Inbox (горе, вдясно) има разтегателен навигационен чекмедже, което може да се получи доста дълго. В горната част са основните дестинации, които представят различни сегменти от имейла ви, а отдолу поддържат сегменти, наречени пакети.

Тъй като чекмеджето за навигация в Inbox може да издържи толкова дълго, елементите „настройки“ и „помощ и обратна връзка“ се представят в постоянен лист, достъпен отвсякъде в чекмеджето.

история

Чекмеджетата на Nav обикновено трябва да създават история за бутона за връщане на системата, когато приложението има ясно дестинация „Начало“. В Play Store домашната дестинация е записът за приложения и игри, който всъщност представя на потребителя навигация в раздела, за да види подчертано съдържание от всички типове. Така Play Store създава история, за да се върне до тази дестинация от други области на приложението.

Google Camera също връща потребителите към стандартния, основен режим на заснемане минус всяко увеличаване.

Входът „Старт шофиране“ увеличава основния изглед на карта

Същото важи и за Google Maps (по-горе) - всяка дестинация в чекмеджето е представена като слой отгоре или като допълнение към основния екран на картата, така че бутонът за връщане ни връща обратно към чиста плоча.

Може да забележите, че Play Store (по-горе) не променя индикатора на чекмеджето за навив в лентата с инструменти на бутон „нагоре“, след като отидете до дестинация. Това е така, защото основните дестинации в чекмеджето са на равно ниво в навигационната йерархия на приложението. Тъй като не преминавате по-дълбоко в приложението, като изберете „Филми и телевизия“ от чекмеджето, не можете да продължите нагоре. Все още сте на най-високото ниво, само на паралелен екран.

Долна nav

дефиниция

В Android, долният nav компонент се състои от три до пет основни дестинации. Важното е, че „повече“ не е дестинация. Нито са менюта, нито диалози.

Навигацията отдолу работи най-добре, когато приложението ви има ограничен брой различни дестинации от най-високо ниво (долният навик никога не трябва да се превърта), които трябва да бъдат незабавно достъпни. Едно от основните предимства на „най-долната лента“ е да може да скочи от дъщерния екран към несвързан родителски екран моментално, без първо да се придвижва обратно към текущия родител.

Важно е да се отбележи, че докато дестинациите в долната лента трябва да са еднакви в навигационната йерархия на приложението, елементите в долната лента не са копланарни по начина, по който са раздели, и не трябва да се представят като такива.

Преминаването между дестинации в долната лента предполага връзка между дестинации, която не съществува. Всяка дестинация трябва да бъде дискретен родител, а не роднина на другите дестинации. Ако дестинациите в приложението ви са сходни или съдържат подобно съдържание, може да са по-подходящи за раздели.

Намерете по-подробни дизайнерски указания за долния навик тук, и подробности за внедряването тук.

Долна навигация в действие

Google Photos

Долната nav има някои интересни съображения извън основната си дефиниция. Вероятно най-сложна е представата за това колко устойчива трябва да бъде долната лента. Отговорът, както при толкова много дизайнерски решения, е „зависи”.

Обикновено долната лента съществува в цялото приложение, но има някои случаи, които могат да оправдаят скриването на долната лента. Ако потребителят въведе много плитка йерархия - на едноцелеви екрани като композиция на съобщения - или ако приложението иска да представи по-потапящо преживяване стъпка или две дълбоко в йерархията, долната лента може да бъде скрита.

В Google Photos (по-горе) долният навик изчезва вътре в албумите. Албумите са представени като вторичен слой в йерархията и единственото по-нататъшно навигационно действие е отваряне на снимка, която сама се отваря в горната част на потребителския интерфейс на албума. Тази имплементация удовлетворява правилото за „единствена цел“ за скриване на долния навит, докато служи на целта за създаване на по-потапящо изживяване, след като потребителят излезе от най-високото ниво.

Допълнителни съображения

Ако лентата е устойчива през цялото приложение, следващото логично съображение ще бъде поведението при прескачане между дестинации, използващи лентата. Ако потребителят има няколко слоя в дълбочина в йерархия, произтичаща от една дестинация, и те преминават към друга дестинация и след това преминават обратно към първия, какво трябва да виждат? Родителският екран или екранът на детето, на който те останаха?

Това решение трябва да бъде информирано от тези, които използват приложението ви. Като цяло, докосването на елемент в долната лента трябва да отиде директно към съответния екран, не към по-дълбок слой на йерархията, но както при всяка насока - да се отклонявате с цел.

история

Долната nav не бива да създава история за бутона за връщане на системата. Навлизането в дълбочина в йерархиите, произтичащи от най-долните навигационни местоназначения, може да създаде история за бутона за връщане на системата и бутона за нагоре на приложението, но най-долната лента може да служи и като свой вид историческа навигация.

Докосването на елемент в долната част на навигацията трябва да ви отведе направо до асоциираната дестинация, а докосването му отново трябва да се върнете към нивото на родителя или да опресните родителското ниво, ако потребителят вече е там.

Navigation Навигация в контекста

дефиниция

В контекста навигацията се състои от всяко навигационно взаимодействие извън описаните по-горе компоненти. Това включва неща като бутони, плочки, карти и всичко останало, което пренася потребителя другаде в приложение.

Навигацията в контекста обикновено е по-малко линейна от явната навигация - взаимодействията могат да транспортират потребителя през йерархия, между различни стъпки в отделни йерархии или изцяло извън приложението.

Потърсете повече насоки за навигация в контекста тук.

Навигация в контекста в действие

Часовник, Google и Google Календар

В приложението Clock (горе вляво) има FAB; приложението Google (по-горе, в средата) разчита предимно на информация, подредена вътре в картите; и Google Календар (горе вдясно) създава плочки за събития.

Активирането на FAB в часовника (горе, отляво) ви отвежда до екрана за избор на световни часовници, докосването на метеорологичната карта в приложението Google (горе, в центъра) ви отвежда на страница с резултати от търсенето за „време“ и докосване на плочка за събитие в Календар (горе, вдясно) Ви отвежда до детайлите на това събитие.

На тези скрийншоти също виждаме различните начини, чрез които навигацията в контекста може да транспортира потребителя. В приложението Clock сме на едно ниво от самия часовник, в приложението Google завършихме по същество с увеличаване на основния екран, а в Календар отворихме диалогов прозорец на цял екран.

история

Няма трудно правило за създаване на история чрез навигация в контекста. Независимо дали е създадена историята, разчита изцяло на това каква вътрешна контекстна навигация използва приложението и къде е взета потребителя. В случаите, когато не е ясно точно какъв вид история трябва да бъде създаден, е добре да знаете какво правят бутоните за нагоре и назад.

Buttons Бутони за нагоре, назад и затваряне

Бутоните за гръб, нагоре и затваряне са важни за навигацията в потребителския интерфейс на Android, но често са разбрани погрешно. Трите бутона всъщност имат доста просто поведение от гледна точка на UX, така че запомнянето на следните правила трябва да ви помогне да се измъкнете от всяка неразбираща ситуация.

  • Нагоре се намира в лентата с инструменти на приложението, когато потребителят е спуснал йерархията на приложението. Навигира архивирайте йерархията в хронологичен ред, докато потребителят достигне родителски екран. Тъй като бутонът нагоре не се показва на родителските екрани, той никога не трябва да излезе от приложение.
  • Назад винаги присъства в навигационната лента на системата. Придвижва се хронологично назад, независимо от йерархията на приложението, дори ако предишният хронологичен екран е бил в друго приложение. Той също така отхвърля временни елементи като диалози, дънни листове и наслагвания.
  • Затварянето обикновено се използва за отхвърляне на преходни слоеве на интерфейса или изхвърляне на промените в диалогов прозорец на цял екран. Разгледайте екрана с подробности за събитието в Google Календар (показан по-долу). Временният характер на екрана с детайли става още по-ясен на по-големи екрани. Във „Вх. Поща“ (по-долу) преходът от входяща към съобщение предполага, че съобщението е слой отгоре на входящата кутия, така че бутонът за затваряне е подходящ. Gmail (по-долу) позиционира съобщението като отделно ниво на приложението и използва бутона нагоре.
Календар, Inbox и Gmail

Обърнете се конкретно към резервното копие срещу поведението в материал Spec тук.

Комбиниране на модели

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

Google+

Може би най-очевидният пример е Google+ (по-горе), който смесва всички модели, които обсъждахме - раздели, чекмедже за навигация, дъно за навигация и навигация в контекста.

За да го разградите, най-долният навик е фокусът в G +. Той осигурява достъп до четири дестинации от най-високо ниво. Раздели увеличават две от тези дестинации чрез сегментиране на съдържанието им в разумни категории. Навесното чекмедже съдържа други дестинации, както първични, така и вторични, които могат да бъдат достъпни по-рядко.

Магазин за игри

Play Store (по-горе) използва предимно чекмедже за навигация, често използва навигация в контекста и понякога използва раздели.

В снимките по-горе виждаме дестинации, достигнати през навигационното чекмедже. Чекмеджето все още е достъпно на тези екрани, тъй като те са всички основни дестинации. Точно под лентата с инструменти виждаме чипове за навигиране до филтрирани селекции на съдържание, пример за навигация в контекста. В диаграмите на приложенията се използват раздели за сортиране на цялата диаграмирана карта в конкретни сегменти.

Google Календар

Google Календар (по-горе) използва навигационно чекмедже и навигация в контекста и използва и двете по наистина интересни начини.

Чекмеджето в Календар е нестандартно, използва се предимно за увеличаване на календара. Самият календар се контролира от разширяващ се панел с инструменти, а цветните плочки водят потребителите към подробности за събитията.

Прочетете повече за комбинирането на навигационни модели тук.

Имате ли повече въпроси?

Навигацията е сложна тема. Надяваме се, че този грунд дава добра основа за разбиране на общи принципи за навигация в Android. Ако все още имате въпроси, оставете отговор или се свържете с първата ни сесия #AskMaterial с екипите на Material Design & Design Relations в Twitter тук!