Mga pattern ng nabigasyon sa mobile app: mga tab, drawer, at magkakaugnay na daloy

Magsimula sa istraktura, hindi sa bahagi

Ilista ang mga destinasyon ng app at pangkatin ang mga ito ayon sa mental model ng user. Ang isang destinasyon tulad ng Search ay maaaring umupo sa tabi ng Home bilang isang peer; ang detalye ng na-save na item ay nasa ilalim ng Na-save. Kung kailangan ng mga tao na lumipat sa pagitan ng mga kapantay, panatilihing nakikita ang mga pagpipiliang iyon. Kung karaniwang lumilipat sila mula sa isang koleksyon patungo sa isang item at pagkatapos ay pabalik, natural na ipinapaalam ng isang stack o nested flow ang relasyon na iyon.

Paghiwalayin ang mga destinasyon sa mga aksyon. Gumawa, magbahagi, mag-filter, at mag-uri-uriin ang pagbabago o kumilos ayon sa kasalukuyang konteksto; hindi sila karaniwang mga lugar sa app. Ilagay ang mga ito sa isang toolbar, menu, o kontrol sa konteksto sa halip na gawing pangunahing item sa nabigasyon ang bawat aksyon.

• Pangalanan ang mga trabahong paulit-ulit na ginagawa ng mga tao, at tukuyin kung aling mga lugar ang dapat maabot kahit saan.
• Gumuhit ng relasyon ng magulang at anak bago pumili ng mga kontrol sa nabigasyon.
• Panatilihin ang mga destinasyon sa parehong antas ng hierarchy sa visual at sa pag-uugali na pare-pareho.

Ihambing ang tatlong pattern

Ang isang tab bar o navigation bar ay ginagawang nakikita at mabilis na naililipat ang ilang destinasyon sa pinakamataas na antas. Gumagana ito kapag ang mga destinasyon ay mga kapantay at ang bawat label ay nakikilala nang walang paliwanag. Panatilihing napili ang kasalukuyang lugar. Iwasang maglagay ng mga hindi nauugnay na aksyon sa bar o hayaang mag-apaw ang mahahalagang destinasyon.

Ang isang navigation drawer ay maaaring maglaman ng mas malaki, nakagrupong hanay ng mga destinasyon at kung minsan ay paglipat ng account o workspace. Ang isang modal drawer ay nagse-save ng espasyo sa screen, ngunit nangangailangan ng dagdag na open-and-choose na hakbang at pansamantalang sumasaklaw sa content. Sa mga compact na telepono na mahal ay maaaring gawin ang madalas na mga destinasyon pakiramdam buried. Ang kasalukuyang gabay sa Android ng Material 3 ay pinapaboran ang isang navigation bar para sa tatlo hanggang limang compact na destinasyon at iniangkop ang nabigasyon para sa mas malalaking laki ng window; ang mas lumang Materyal na gabay na nagrerekomenda ng mga drawer para sa lima o higit pang mga destinasyon ay hindi dapat mapagkamalang isang unibersal na kasalukuyang threshold.

Gumagamit ang nested navigation ng listahan, card, o link para magbukas ng child view, na may pamagat at back control na nagpapanatili sa path. Nababagay ito sa mga kategorya, setting, detalye ng produkto, at sunud-sunod na gawain. Nagiging nakakadismaya ang malalim na pugad kapag nakatago ang hierarchy, hindi pare-pareho ang gawi sa likod, o dapat na paulit-ulit na magpahinga ang mga user para maabot ang isang kapatid. Magdagdag ng paghahanap, mga shortcut, o isang mas malinaw na istraktura sa pinakamataas na antas kapag ang mga tao ay madalas na tumalon sa mga sangay.

Pumili ayon sa dalas ng gawain at laki ng screen

Itanong kung gaano kadalas lumipat ang mga tao sa pagitan ng mga lugar sa panahon ng isang karaniwang session. Ang isang compact, stable na hanay ng mga high-frequency na destinasyon ay pinapaboran ang isang nakikitang bar. Kung ang karamihan sa paggamit ay nakatuon sa isang gawain o pagbabasa ng isang detalye, panatilihing mas tahimik ang nabigasyon at panatilihin ang puwang para sa nilalaman. Ang isang drawer ay maaaring gumana para sa hindi gaanong madalas na mga seksyon, ngunit tingnan kung ang mga tao ay maaari pa ring mahanap ang mga ito at bumalik nang hindi hinuhulaan.

Magplano para sa laki ng window, oryentasyon, at mga kumbensyon sa platform. Inilalarawan ng kasalukuyang Human Interface Guidelines ng Apple ang iPhone tab bar bilang top-level navigation at sumusuporta sa isang adaptable tab bar/sidebar presentation sa iPad. Tinatawag ng Material 3 ang compact pattern nito bilang navigation bar at nag-aalok ng iba't ibang mga form ng nabigasyon habang lumalaki ang available na lapad. Ang mga pattern na ito ay nagbabahagi ng layunin ngunit hindi magkatulad na bahagi; sundin ang katutubong pagkakalagay, pag-uugali, at pagbagay sa halip na kopyahin ang chrome ng isang platform papunta sa isa pa.

Gawing maaasahan ang oryentasyon at pagbawi

Mas mahirap matutunan ang nabigasyon kapag icon lang ang ipinapakita; maaari rin itong maging malabo para sa mga gumagamit ng screen reader. Lagyan ng maiikli at nakikitang label ang mga destinasyon, ipaalam sa assistive technology kung alin ang napili, at tiyaking may accessible na pangalan at sapat na tap area ang bawat control. Suriin ang contrast sa napili at hindi napiling estado, malalaking text, lokalisasyon, at mga layout na kanan-pakaliwa. Subukan gamit ang VoiceOver o TalkBack, at gamit ang keyboard o switch navigation kung sinusuportahan. Dapat mahulaan ang galaw ng focus kapag binuksan ang drawer, pumili ng destinasyon, o isinara ang isang view.

Bahagi ng nabigasyon ang pagbawi. Magkaiba ang gamit ng Bumalik at Isara: ibinabalik ka ng Bumalik sa naunang antas ng hierarchy, samantalang isinasara ng Isara ang pansamantala o modal na view. Panatilihin ang posisyon at datos na nailagay na kapag lumilipat sa ibang pangunahing seksyon o bumabalik mula sa detalye. Kung walang laman o pansamantalang hindi available ang isang destinasyon, panatilihin ang puwesto nito at ipaliwanag ang estado sa halip na basta alisin o i-disable ang nabigasyon. Para sa mapanira o magastos na gawain, tiyaking malinaw ang paraan ng pagbabalik bago ito kumpirmahin.

Isang praktikal na pag-audit sa nabigasyon

Maglakad sa app na may totoong gawain, pagkatapos ay ulitin nang naka-enable ang mga feature ng accessibility. Itala kung matutukoy ng mga tao ang kasalukuyang lugar, makakarating sa madalas na destinasyon, at makakabawi pagkatapos ng maling pagliko. Ihambing ang parehong paglalakbay sa isang compact na telepono at isang mas malaking window; ang isang adaptive na layout ay dapat mapanatili ang arkitektura ng impormasyon habang ang kontrol ay nagbabago.

Gamitin ang screen library upang ihambing ang mga tunay na halimbawa ng mga seksyon at daloy ng app, pagkatapos ay suriin ang bawat isa sa mga gawain ng iyong produkto. Pinapanatili ng pinakamatibay na pattern ang istraktura nito na nababasa habang lumalaki ang app at ginagawang malinaw ang landas ng pagbabalik pagkatapos ng pagkaantala.

• Maaari bang ipaliwanag ng isang bagong user ang mga top-level na lugar mula sa kanilang mga label lamang?
• Madali bang magpalipat-lipat ang mga destinasyon ng peer, na malinaw na ipinapakita ang pagpili?
• Nagpapakita ba ang mga screen ng detalye ng makabuluhang pamagat at isang predictable na Back path?
• Ang pagbubukas at pagsasara ba ng drawer ay nagpapanatili ng konteksto at naglilipat ng accessibility na nakatutok nang matino?
• Nananatiling magagamit ba ang mga label, target, contrast, at mga piling estado sa mas malaking text at pantulong na teknolohiya?
• Maaari bang bumalik ang isang tao nang hindi nawawala ang draft input, posisyon ng pag-scroll, o isang kapaki-pakinabang na lugar sa hierarchy?
• Ang istraktura ba ay umaangkop sa isang mas malaking screen nang hindi kino-duplicate ang nakikipagkumpitensyang pangunahing nabigasyon?