Sie sind hier
E-Book

Schnelleinstieg App Usability

Plattformübergreifendes Design: Android, Apple iOS und Windows Phone

AutorMichal Gralak, Thorsten Stark
VerlagFranzis
Erscheinungsjahr2015
Seitenanzahl160 Seiten
ISBN9783645202596
FormatPDF/ePUB
KopierschutzWasserzeichen/DRM
GerätePC/MAC/eReader/Tablet
Preis9,99 EUR
Kleinere Bildschirme, andere Auflösungen, neue Bedienkonzepte: Smartphones und Tablets sind anders als Desktoprechner. Längst haben sich diese Geräte als Standard durchgesetzt. Inzwischen buhlen Millionen von Apps um die Aufmerksamkeit der Benutzer. Um diese zu erlangen, sind pfiffige Apps mit guter Bedienung erforderlich. Was muss man beachten, um eine Oberfläche mit Spaß bei der Bedienung zu entwerfen? Was macht ein mobiles Gerät aus? Smartphones und Tablets unterscheiden sich von Desktoprechnern, nicht nur, was die Dimensionen betrifft. Allein das Touch bietet komplett neue Möglichkeiten. Die verfügbare Hardware muss eingebunden werden: Bluetooth, NFC oder auch Beschleunigungssensor. Statt simpler Mausklicks gibt es Gesten. In zwei Kapiteln lernen Sie, was ein mobiles Gerät wirklich ausmacht. Native App oder plattformübergreifend? Alle Betriebssysteme müssen Sie nicht zwingend bedienen, drei davon schon: Android, Apple iOS und Windows Phone. Was sind die Eigenheiten der Betriebssysteme in Bezug auf die Oberfläche? Detailliert lernen Sie, worauf es bei diesen drei Plattformen ankommt. Ob es immer eine native App sein muss oder ob es nicht auch eine App für alle Plattformen sein kann, lesen Sie in einem extra Kapitel.

Kaufen Sie hier:

Horizontale Tabs

Leseprobe
2Hardwarevoraussetzungen

Checkliste – Apps auf Mobilgeräten bedienen

  Kleine Bildschirme.

  Nach Möglichkeit mit einer Hand bedienbar.

  Sinnvolle Umschaltung zwischen Hoch- und Querformat je nach Haltung des Geräts.

  Unterschiedliche Lichtverhältnisse bei App-Gestaltung berücksichtigen.

  Internetverbindung kann ausfallen.

Was fällt denn eigentlich genau in die Kategorie der Mobilgeräte? Ist ein Laptop auch mobil? Für dieses Buch definieren wir Mobilgeräte als Geräte, die klein und leicht sind, (fast) immer mitgeführt werden, ausschließlich über einen Touchscreen bedient werden und persönlich sind – kurz gesagt, Smartphones, Tablets und Phablets (Smartphones mit Bildschirmgrößen von 6Zoll und mehr).

2.1     Bildschirmgrößen und -auflösungen


Wenn wir attraktive Apps aufbauen, funktioniert das zu einem großen Teil über die grafische Bedienoberfläche. Um diese Oberfläche ansprechend zu gestalten, ist es für Entwickler wichtig, zu wissen, welche Größe, welches Format und welche Auflösung der Bildschirm hat, für den man entwickelt. Schließlich muss die Schrift lesbar sein, sie darf aber nicht so viel Platz einnehmen, dass andere Gestaltungselemente verschwinden. Gutes Design hängt also maßgeblich davon ab, wie gut man die Zielplattform kennt.

Was ist, wenn sich die Größe des Bildschirms ändern kann? Dann müssen sich auch alle Elemente der Benutzeroberfläche und ihre Abstände an die neuen Dimensionen anpassen.

Trotz der Vielzahl von Auflösungen haben sich die Hersteller der mobilen Betriebssysteme etwas einfallen lassen, um den Entwicklern entgegenzukommen. Bei iOS ist es beispielsweise egal, ob man für ein iPad mit Retina-Display oder ohne entwickelt. Das interne Koordinatensystem, mit dem man als Entwickler arbeitet, ist in beiden Fällen 1.024×768. Lediglich bei der Darstellung später wird die höhere Auflösung verwendet, um ein schärferes Bild zu erhalten.

Retina-Display

Apple nennt seine Bildschirme mit hoher Dichte an Pixeln werbewirksam Retina-Display. Damit meinen sie, dass man mit bloßem Auge und bei normalem Abstand zwischen Augen und Display keine Pixel mehr unterscheiden kann. Dass das MacBook Pro mit Retina-Display lediglich die halbe Dichte des iPhones hat, wird damit begründet, dass der Bildschirm des Laptops in der Regel weiter vom Gesicht weg ist als ein Smartphone.

Unter Android gibt es das Konzept der Density-Independent-Pixel (zu Deutsch: auflösungsunabhängige Pixel), kurz: dp. Dabei wird zwischen unterschiedlichen Pixeldichten unterschieden: ldpi (geringe Pixeldichte), mdpi, hdpi und xhdpi (hohe Pixeldichte) sowie xxhdpi und xxxhdpi (sehr hohe Pixeldichte). Dadurch kann der Entwickler sämtliche Größen- und Positionsangaben in dp machen, und je nachdem, auf welchem Gerät die App läuft, werden die Angaben in echte Pixel umgerechnet.

Bildschirmgrößen beim Smartphone


Sieht man sich die im Folgenden abgebildeten Auflösungen an, fällt auf, dass sie stark variieren. Das betrifft nicht nur die Größe, sondern auch das Seitenverhältnis.

Bild 2.1: Unterschiedliche Auflösungen bei Smartphones.

Bild 2.2: Größenvergleich derphysischen Displays.

Tabelle: Smartphone-Screens in Zahlen.

Nachdem Apple es fünf Jahre lang geschafft hat, die physische Bildschirmgröße des iPhones beizubehalten, haben sie sich 2012 dafür entschieden, ihre neuen iPhones mit größeren 4-Zoll-Bildschirmen – anstelle der alten 3,5 Zoll – auszustatten. Das iPhone 5 hat zwei Jahre später einen physisch größeren Bildschirm erhalten. Die Breite wurde beibehalten, lediglich in der Länge sind einige Pixel dazugekommen. Das interne Koordinatensystem wurde entsprechend angepasst: von 320×480 auf 320×568.

Für iOS-Entwickler hat sich also seit den Anfängen die Bildschirmbreite nicht verändert. Programmtechnisch waren es immer 320 Points. Das erleichtert die Gestaltung der Benutzeroberfläche, denn man kann sich sicher sein, dass das Layout identisch aussehen wird, egal auf welchem Gerät die App letztendlich läuft. Nur die Höhe kann bei den neuen Modellen etwas größer ausfallen als bei den vorherigen. Dies lässt sich aber recht einfach bewerkstelligen.

Mit dem iPhone 6 hat Apple erstmals in der Geschichte der iPhones den Bildschirm deutlich verändert. Die Geräte sind sichtbar größer als die Vorgänger.

Apple bietet mit AutoLayout eine Möglichkeit, die grafische Oberfläche einer App dynamisch an unterschiedliche Gegebenheiten anzupassen. Dazu ist nicht einmal eine Zeile Code nötig, denn AutoLayout ist in den Interface Builder von Xcode integriert. Man kann darüber nicht nur die seitlichen Abstände festlegen, sondern auch Abhängigkeiten herstellen. Objekte können aneinander ausgerichtet werden, und die Abstände zwischen einzelnen Objekten können definiert werden, z.B. »≤10 Points«. Dann wird AutoLayout versuchen, diese so anzupassen, dass ihr Abstand maximal 10 Points oder weniger beträgt. Wir reden hier von Points und nicht von Pixeln. Pixel sind die physischen Bildpunkte im Screen, Points hingegen die »virtuellen Pixel« des logischen Koordinatensystems. Das Verhältnis von Point zu Pixel beträgt je nach Endgerät 1:1 (nicht Retina) ,1:2 (Retina) oder 1:3 (iPhone 6 Plus).

Mit den Density-Independent-Pixeln bei Android verhält es sich ähnlich wie mit dem internen Koordinatensystem unter iOS. Als Entwickler hat man ein normalisiertes Koordinatensystem, mit dem man arbeitet, und je nach Gerät wird es dann später mit einem entsprechenden Faktor multipliziert, z.B. mit 0,75 bei einem ldpi-Bildschirm oder mit 1,5 bei einem hdpi-Bildschirm. Da die Hersteller jedoch immer mehr höher auflösende Bildschirme verbauen, werden ldpi, mdpi und hdpi immer seltener verwendet.

Tablet


Smartphones haben Bildschirmgrößen bis ca. 6 Zoll, Tablets hingegen fangen meistens erst bei 7 Zoll an – nach oben hin offen. Jedoch gibt es kaum Tablets, die größer als 13 Zoll sind. Während kleinere Tablets (<10 Zoll) wegen ihrer Größe gern unterwegs genutzt werden, ist vielen Menschen ein Tablet größer als 10 Zoll dafür zu unhandlich und zu schwer. Diese haben ihren Einsatz eher auf dem heimischen Sofa oder in Meetings. Dort werden sie in erster Linie zum Konsumieren aller Arten von Medien verwendet.

Bei Tablets ist die Vielfalt von Auflösungen nicht ganz so hoch wie bei Smartphones. Die meisten bewegen sich in Größenordnungen zwischen 1.024×600 und 2.560×1.600 Pixeln. Das Nexus 7 beispielsweise hat eine sehr hohe Pixeldichte und eignet sich wegen seines länglichen Bildschirms eher zum Lesen von Büchern oder Betrachten von Filmen. Texte zu schreiben ist im Querformat eher anstrengend, da die virtuelle Tastatur schon die Hälfte des Bildschirms einnimmt und nach Abzug von Menü- und Statusleiste kaum noch Platz bleibt für den Text. Beim iPad hingegen hat man mehr Platz für den Text, dafür kann es passieren, dass sich der Text hinter der Tastatur versteckt. Das passiert besonders dann, wenn der Benutzer die geteilte Tastatur gewählt hat. Diese befindet sich dann nicht mehr am unteren Rand, sondern beliebig weiter oben. Das wäre ergonomisch betrachtet sogar ganz gut, jedoch passen die Schreibprogramme das virtuelle Papier nicht daran an, und es verteilt sich auf den kompletten Platz zwischen oberer und unterer Kante. Schade nur, dass da mitten drauf jetzt eine Tastatur liegt.

Bild 2.3: Unterschiedliche Auflösungen bei Tablets.

Tabelle: Tablet-Screens in Zahlen.

Phablet


Die dritte Gerätekategorie sind die Phablets, manchmal auch Smartlets genannt. Der Name setzt sich – wie Sie wahrscheinlich schon vermutet haben – aus den Begriffen »Smartphone« und »Tablet« zusammen. Damit ist der Name nur die logische Konsequenz dessen, was die Geräte sind – nämlich eine Mischung aus Smartphone und Tablet. Man kann sie ebenso gut als große Smartphones oder kleine Tablets mit Telefonfunktion beschreiben. Ihre Anzahl ist noch überschaubar, aber der Trend geht immer mehr in diese Richtung. Verfolgt man die Entwicklung der iPhones oder der Samsung Galaxy S-Reihe, fällt auf, dass sie in den letzten Jahren immer größer geworden sind. Von 3,5 auf 5,5 Zoll bei den iPhones und von 4 auf 5 Zoll bei den Galaxy S.

Die wohl bekanntesten Vertreter der Phablets sind die Geräte der Samsung-Galaxy-Note-Reihe. Ihr 5,3 bis 5,7 Zoll großer Touchscreen kann...

Blick ins Buch

Weitere E-Books zum Thema: Programmiersprachen - Softwareentwicklung

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

Programmieren lernen in PHP 5

E-Book Programmieren lernen in PHP 5
Format: PDF

Mit der Version 5 erreicht PHP einen bemerkenswerten Reifegrad, der PHP zu einer festen Größe in der Welt der Webprogrammierung macht. Gerade die leichte Erlernbarkeit macht PHP zur idealen…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Weitere Zeitschriften

AUTOCAD & Inventor Magazin

AUTOCAD & Inventor Magazin

FÜHREND - Das AUTOCAD & Inventor Magazin berichtet seinen Lesern seit 30 Jahren ausführlich über die Lösungsvielfalt der SoftwareLösungen des Herstellers Autodesk. Die Produkte gehören zu ...

Berufsstart Gehalt

Berufsstart Gehalt

»Berufsstart Gehalt« erscheint jährlich zum Sommersemester im Mai mit einer Auflage von 50.000 Exemplaren und ermöglicht Unternehmen sich bei Studenten und Absolventen mit einer ...

Das Grundeigentum

Das Grundeigentum

Das Grundeigentum - Zeitschrift für die gesamte Grundstücks-, Haus- und Wohnungswirtschaft. Für jeden, der sich gründlich und aktuell informieren will. Zu allen Fragen rund um die Immobilie. Mit ...

dental:spiegel

dental:spiegel

dental:spiegel - Das Magazin für das erfolgreiche Praxisteam. Der dental:spiegel gehört zu den Top 5 der reichweitenstärksten Fachzeitschriften für Zahnärzte in Deutschland (laut LA-DENT 2011 ...

SPORT in BW (Württemberg)

SPORT in BW (Württemberg)

SPORT in BW (Württemberg) ist das offizielle Verbandsorgan des Württembergischen Landessportbund e.V. (WLSB) und Informationsmagazin für alle im Sport organisierten Mitglieder in Württemberg. ...

rfe-Elektrohändler

rfe-Elektrohändler

rfe-Elektrohändler ist die Fachzeitschrift für die CE- und Hausgeräte-Branche. Wichtige Themen sind: Aktuelle Entwicklungen in beiden Branchen, Waren- und Verkaufskunde, Reportagen über ...

Euphorion

Euphorion

EUPHORION wurde 1894 gegründet und widmet sich als „Zeitschrift für Literaturgeschichte“ dem gesamten Fachgebiet der deutschen Philologie. Mindestens ein Heft pro Jahrgang ist für die ...

Euro am Sonntag

Euro am Sonntag

Deutschlands aktuelleste Finanz-Wochenzeitung Jede Woche neu bietet €uro am Sonntag Antworten auf die wichtigsten Fragen zu den Themen Geldanlage und Vermögensaufbau. Auch komplexe Sachverhalte ...

Evangelische Theologie

Evangelische Theologie

Über »Evangelische Theologie« In interdisziplinären Themenheften gibt die Evangelische Theologie entscheidende Impulse, die komplexe Einheit der Theologie wahrzunehmen. Neben den Themenheften ...