Applicaties ontwerpen voor ios en Android

Ontwikkelen van Apps voor iOS en Android

Applicaties ontwerpen voor iOS en Android 2.1

Inleiding Zowel Apple als Google heeft een paar tips gegeven bij het maken van een ontwerp voor een applicatie voor iOS en Android. De grote kracht van een goede smartphone-applicatie is dat het er rustig en eenvoudig uitziet, terwijl de applicatie toch veel mogelijkheden heeft.

2

In dit hoofdstuk worden verschillende tips en richtlijnen voor het ontwerp van een goede smartphone-applicatie besproken.

Ontwikkelen van Apps

2.23

Applicaties Ontwerpen voor iOS en Android

Index Navigatiebalk

2.2

Schema voor het design en de lay-out van iOS-applicaties

Bij het ontwerp van een goede, gebruikersvriendelijke lay-out voor een iOSapplicatie komen een paar standaarden kijken. In de onderstaande afbeelding zijn de afmetingen gegeven van een native applicatie voor een iPhone en een

Tab-bar

iPod, waarbij gebruikgemaakt wordt van een officiële navigatiebalk en tab-bar aan de onderkant. De applicaties die in dit boek aan de orde komen, maken geen gebruik van de tab-bar aan de onderkant, maar wel van de navigatiebalk aan de bovenkant. Voor een gebruiker is het belangrijk dat hij iets herkenbaars ziet. Daarom is het verstandig om de officiële instellingen voor zowel de navigatiebalk als de tabbar over te nemen.

2.24



iOS-apparaten hebben niet allemaal dezelfde schermafmetingen. In de

Index

afbeelding hierboven staan de instellingen van een iPhone 4(S) en een iPod van de vierde generatie. In de onderstaande tabel zijn de afmetingen gegeven van alle iOS-apparaten die

Retina display

gelanceerd zijn van juni 2008 tot april 2012. De nieuwste iOS-apparaten hebben een retina display. Dit type display heeft significant meer pixels dan een ‘traditioneel’ display. Apparaat

Breedte (pixels)

Hoogte (pixels)

Retina display

iPod tweede generatie

320

480

Nee

iPod derde generatie

320

480

Nee

iPod vierde generatie

640

960

Ja

iPhone 3G

320

480

Nee

iPhone 3GS

320

480

Nee

iPhone 4

640

960

Ja

iPhone 4S

640

960

Ja

iPad 1

1024

768

Nee

iPad 2

1024

768

Nee

The new iPad

2048

1536

Ja


2.25


2.3

Schema voor het design en de lay-out van Android-applicaties

Google heeft een aantal richtlijnen gegeven voor het design van applicaties. In de beginjaren van Android waren er nauwelijks richtlijnen. Hierdoor hebben de applicaties veel verschillende lay-outs, en dat heeft tot gevolg dat gebruikers er langer over doen om de interface van een applicatie te leren. Als een applicatie in Google Play wordt aangeboden, zijn de lay-outrichtlijnen van Google niet verplicht. Deze richtlijnen zijn vooral gebaseerd op versie 4.0 van Android, waarin de interface ingrijpend is gewijzigd. Een van de belangrijkste richtlijnen van Google is dat de applicaties geen stijlelementen van een iOS-apparaat of een BlackBerry mogen bevatten, bijvoorbeeld pijltjes naast lijstitems en de tab-bar onderin de applicatie. Een quote van Google over dit punt: “Als je het thema van interface-elementen wilt aanpassen, doe dat dan voorzichtig en volgens de richtlijnen van je eigen merk, niet volgens de conventies van een ander platform.” Alle richtlijnen die Google geeft voor het ontwikkelen van Android-applicaties, specifiek voor versie 4.0, zijn te vinden op de website: http://developer.android.com/design/index.html

2.26



Bij de iOS-apparaten van Apple komen er relatief gezien weinig verschillende schermresoluties voor. Bij Android is dit niet het geval, omdat er veel verschillende apparaten zijn die gebruikmaken van het besturingssysteem Android. In de tabel zie je de afmetingen van de meest populaire Androidapparaten. Apparaat

Breedte in pixels

Hoogte in pixels

Samsung Galaxy S II

480

800

HTC Sensation XE

540

960

Samsung Galaxy Ace

320

480

Sony Ericsson Xperia Ray

480

854

HTC Wildfire S

320

480

Sony Ericsson Xperia Arc S

480

854

Samsung Galaxy Gio

320

480

LG Optimus 3D Cube

480

800

Asus Eee Pad Slider

1280

800

Asus Eee Pad Transformer

1280

800

Asus Eee Pad Transformer

1280

800

Samsung Galaxy Tab 8.9

1280

800

Samsung Galaxy Tab 10.1

1280

800

Prime


2.27


Index 88 bij 88

2.4

Tips*

Vergeet de touchscreen niet! Het belangrijkste aan het ontwerpen van een applicatie voor een mobiel

pixels

apparaat is dat deze geschikt moet zijn voor het werken met een touchscreen. Dat betekent dat een gebruiker minder nauwkeurig op de knoppen kan klikken dan met een computermuis. Apple geeft zelf als richtlijn aan dat ieder object waarop geklikt kan worden, minimaal 88 bij 88 pixels moet zijn voor een iOS-apparaat met een retina display of een iPad. Voor een iOS-apparaat zonder retina display is dit minimaal 44 bij 44 pixels. Deze richtlijn is ook aan te raden bij Android-applicaties. In het onderstaande voorbeeld zie je een applicatie die op het eerste gezicht veel weg heeft van een standaard-iOS-applicatie, bijvoorbeeld de Instellingenapplicatie. Maar als je goed kijkt, zie je dat de rijen minder hoog zijn. En hierdoor is het moeilijker om de juiste rij aan te klikken.

Vermijd een horizontale scrollbalk Als de applicatie te breed is voor het scherm, kan het zijn dat er een horizontale scrollbalk komt. Dit is zeer frustrerend voor gebruikers. Als de applicatie te breed wordt, moet je nagaan of je de applicatie in landscapemodus (liggend)

*

2.28

Vrij naar: http://p2p.wrox.com/content/articles/best-practices-iphone-ui-design



kunt maken. Als dit niet lukt, moet je alle overbodige objecten weghalen, zodat er geen horizontale scrollbalk komt.

Houd het simpel Een van de belangrijke succesfactoren van de iPhone is de eenvoudige opmaak van de applicaties en de intuïtieve bediening. Het is goed mogelijk om een complexe en veelkleurige lay-out te maken, alleen is dit heel vervelend voor de gebruikers. Zo kan de app minder goed leesbaar worden. Een voorbeeld van een applicatie met veel verschillende kleuren, waardoor het lezen van de tekst erg lastig wordt:

Gebruik standaardterminologie Er zijn een paar woorden die in veel iOS- of Android-applicaties terugkomen. Gebruik deze woorden ook, en verzin er zelf geen andere voor. Bijvoorbeeld: - Instellingen, in plaats van Voorkeuren. - OK, in plaats van Oké.

Plaats invoervelden bovenaan Sommige applicaties maken gebruik van tekstvakken waar de gebruiker tekst kan intypen. Plaats deze tekstvakken altijd zo veel mogelijk bovenaan in de applicatie. Het is vervelend voor gebruikers als ze moeten scrollen voordat ze tekst kunnen invoeren. Ontwikkelen van Apps

2.29


Index

Laadindicatie Er zijn applicaties die gegevens van het internet moeten halen

WIFIverbinding

voordat er iets kan worden weergegeven. Als er een WIFIverbinding is, zullen deze gegevens sneller worden geladen dan bij een 3G-verbinding.

3Gverbinding

Als de applicatie gegevens van het internet moet halen, zorg dan voor een laadbalk of een laadindicator. Gebruikers zien dan dat de applicatie niet is vastgelopen, maar informatie aan het ophalen is.

Geef de navigatiebalk een goede titel Ieder apart scherm van de applicatie moet een unieke titel hebben in de navigatiebalk. De titel van een eventuele terug-knop moet de naam zijn van het scherm waarnaar teruggegaan wordt.

2.30


Applicaties ontwerpen voor ios en Android

Recommend Documents