Välilehtipalkit ja alanavigointi: Suunnittelusäännöt, jotka kestävät
Välilehtipalkkien ja pohjanavigoinnin suunnitteleminen iOS:ssä ja Android:ssä: 3–5 kohdetta, navigointi ei toimintoja, tarrat, merkit, näkyvyys ja animoidut aktiiviset tilat.
Core Takeaway
Käytä välilehtipalkkia tai alanavigointia kolmesta viiteen ylätason kohteeseen, älä toimiin. Anna jokaiselle välilehdelle kuvake ja tunniste, pidä palkki näkyvissä, kun ihmiset liikkuvat osioiden välillä, vältä "Lisää"-välilehtien ylivuoto mahdollisuuksien mukaan ja käytä merkkejä säästeliäästi. Animoi aktiivinen tila hienovaraisesti, jotta ihmiset näkevät missä he ovat.
Mitä alustat sanovat
Material Design 3 sanoo, että navigointipalkit tarjoavat pääsyn kolmeen tai viiteen kohteeseen, joista jokaisessa on kuvake ja tarra, ja yksi kohde on aina aktiivinen. Applen ohjeissa sanotaan, että välilehtipalkkia on käytettävä navigointiin, ei toimien tarjoamiseen, sen pitäminen näkyvissä ihmisten liikkuessa osien välillä (paitsi silloin, kun modaali peittää sen) ja ylivuotovälilehtien välttäminen.
Välilehtien valinta
Välilehdet edustavat sovelluksen rakennetta:
- Valitse osiot, joita ihmiset käyttävät useimmin, älä kaikkia osioitasi.
- Käytä substantiivit kohteissa ("Kirjasto"), älä verbejä toimissa ("Lataa").
- Aseta toimintoja itse näytölle, työkalupalkkiin tai kelluvaan toimintopainikkeeseen.
- Jos tarvitset enemmän kuin viisi, harkitse rakennettasi uudelleen ennen "Lisää"-välilehden lisäämistä.
Tarrat ja merkit
Vain kuvakkeita sisältävät välilehdet säästävät tilaa, mutta pakottavat ihmiset arvaamaan. Tarrat tekevät navigoinnista selkeämpää, erityisesti vähemmän yleisten kuvakkeiden kohdalla. Tunnusten pitäisi olla merkki jostain, jonka mukaan ihmisten on toimittava; aina läsnä oleva merkki lakkaa huomaamasta.
Säilytä tila välilehteä kohden
Apple huomauttaa, että välilehtipalkkien avulla ihmiset voivat vaihtaa osia säilyttäen samalla kunkin osion nykyisen navigointitilan. Välilehdelle palaamisen pitäisi näyttää, mihin se jäi, ei palata alkuun.
Liike
Pieni siirtymä aktiivisessa osoittimessa, kuten liukuva pilleri tai täyttyvä kuvake, auttaa ihmisiä seuraamaan heidän sijaintiaan. Pidä se nopeana, alle 250 millisekunnissa, vältä jokaisen kuvakkeen pomppimista jokaisella napautuksella ja yksinkertaista sitä, kun alennettu liike on käytössä.
Avain Principles muistettavat
- Kolmesta viiteen huipputason kohdetta
- Navigointi, ei toiminnot
- Kuvake plus -tarra jokaiselle välilehdelle
- Pidä se näkyvissä ja säilytä kunkin välilehden tila
- Hienovarainen, nopea aktiivisen tilan liike
Usein kysytyt kysymykset
Lähteet
- Navigation bar guidelines — Material Design 3
- Tab bars — Applen käyttöliittymäohjeet