menu

Designmönster

Grid

Gridden är en navigation in i djupare information. Den lämpar sig extra väl i appar där användaren förväntas vara i en miljö där man är i rörelse och därför behöver rejäla klickytor.

Exempel

iPhone

Android

Tabbar

Tabbar är det navigationsmönstret som i första hand ska användas för för iOS appar.

Tabbar karakteriseras av att de placeras i nederkanten av skärmen och att varje tabb leder till en distinkt del av appen.

Den största nackdelen med tabbar är att det bara får plats max 5 st i den. Har man fler brukar man göra den sista tabben till en "Mer"-tab som öppnar en vy som innehåller fler menyval. Givetvis placerar man de primära delarna av appen synliga direkt i tabbarna och placerar mindre viktiga vyer som t.ex. inställningar och profil i "Mer"-vyn.

Tabbar i nederkant ska undvikas på Android även om det numera finns som ett designmönster i Material Design. Anledningen att man ska undvika det är att det lätt krockar med hårdvarunavigeringen som alltid ligger i nederkant på Android-enheter.

Exempel

iPhone

Navigation drawer

Det här navigationsmönstret används framförallt på Android enheter som ett alternativ till tabbar i nederkant.

Menyn som kommer in som en panel från vänster aktiveras genom att antingen trycker på "hamburgar"-ikonen i övre vänstra hörnet eller genom att swipa från vänsterkanten.

Exempel

Android

Android

Listor

Listor är användbara för att visa information eller lista saker.

Listorna som vi använder på mobila enhter är identiska med listorna i Unity för webb.

Exempel

iPhone

Navigationslistor

Navigationslistor består av element som går att trycka på för att navigera till en annan vy. De är väldigt lika vanliga listor men listelmementen är något högre för att ge en större tryckyta. De har också en pil-ikon i högra delen.

Navigationslistor ser likadana ut i alla mobila enheter.

Exempel

iPhone

Filter

Filtrering ska alltid placeras i en panel som kommer in från höger. Detta oavsett om det handlar om filtrering av t.ex. en lista eller en karta.

Exempel

[Lägg till bildexempel på detta]