Donnerstag, 03 April 2014 00:00

Designs für Android erstellen

Christian hatte letzte Woche schon den Blogpost "Pixel ist nicht gleich Pixel" geschrieben, der sich mit Bildschirmauflösungen und Pixeldichten auf unterschiedlichen Geräten beschäftigt. Ich möchte heute nochmals auf diese Thematik eingehen. Designen für Android kann schwierig sein, denn Modelle gibt es in einer unzähligen Vielfalt an Bildschirmgrößen und -auflösungen. Wir helfen durch den Android-Design-Guidelines-Dschungel.

Android Devices

Eine kleine Auswahl unserer Android-Testgeräte.

Sehr oft möchte der Kunde ein Design sehen, bevor die App in die Entwicklung geht. Verständlich. Beim Design für eine iPhone-App legen wir normalerweise fest, ob für iPhone 4 oder 5 entworfen wird. Bei der iPhone-4-Variante dann noch, ob Retina oder nicht, oder beides. Mehr Größen gibt es in der iPhone-Welt nicht. Im Moment zumindest. Wie sieht es jedoch bei Android aus? Modelle und Auflösungen gibt es in einer unzähligen Vielfalt und Kombination. In welcher Auflösung also designen, damit der Kunde ein realistisches Bild hat, wie Größenverhältnisse und Schriften aussehen? Sinnvoll ist es, sich zunächst über die ganzen Begrifflichkeiten einen Überblick zu verschaffen und zu verstehen, was diese bedeuten.

Bildschirmauflösung (resolution) und Pixeldichte (density)

Android-Geräte gibt es in einer unüberschaubaren Anzahl an Bildschirmgrößen. Um das wenigstens ein bisschen zu vereinfachen, teilt Android die Bildschirmgrößen in vier unterschiedliche Einheiten auf:

  • xlarge mit einer Mindestauflösung von 960 dp x 720 dp
  • large mit einer Mindestauflösung von 640 dp x 480 dp
  • normal mit einer Mindestauflösung von 470 dp x 320 dp
  • small mit einer Mindestauflösung von 426 dp x 320 dp

Mit der Bildschirmauflösung ist es unter Android aber nicht getan. Es gibt noch die sehr wichtige Einheit "Density" oder Pixeldichte. Was ist der Unterschied? Im Android-Developer-Guide wird es folgendermaßen erklärt:

Auflösung (resolution) = die Anzahl der physikalischen Pixel auf einem Bildschirm.

Pixeldichte (density) = die Anzahl der Pixel innerhalb eines physikalischen Bereichs auf dem Bildschirm. Diese werden normalerweise DPI (dots per inch) genannt. Bei einem "low-density"-Bildschirm befinden sich auf einem bestimmten physikalischen Bereich (z. B. 1 cm²) weniger Pixel als auf einem "high-density"-Bildschirm. Die Anzeige wirkt also auf einem "high-density"-Bildschirm schärfer, weil die einzelnen Pixel kleiner sind und irgendwann vom menschlichen Auge nicht mehr als solche wahrgenommen werden. Apple bewirbt solche Bildschirme sehr medienwirksam als "Retina-Display".

Auch hier werden die Pixeldichten von Android in Einheiten heruntergebrochen, um es uns ein (ganz, ganz, ganz klein) wenig zu erleichtern. Im Moment sind am verbreitesten:

  • LDPI
  • MDPI (160 dpi) - baseline
  • HDPI (240 dpi)
  • XHDPI (320 dpi)
  • XXHDPI (480 dpi)
  • XXXHDPI (640 dpi)

Verschiedene Pixeldichten

Verschiedene Pixeldichten, Ausschnitt von ca. 2 cm². Links HDPI-Display, Rechts MDPI-Display.

Um noch mehr zu verwirren: Dichte-unabhängige Pixel dp (density independent pixel)

Es gibt noch eine dritte Einheit: Dichte-unabhängigen Pixel. Diese sind eine virtuelle Einheit, die verwendet werden sollte, um UI-Layouts (z. B. Dimensionen oder Positionen) unabhängig von der Pixeldichte zu definieren. Styleguides und Vorgaben für Android-Entwickler sollten also immer in dp definiert werden.

Ein Dichte-unabhängiger Pixel ist die Entsprechung eines physikalischen Pixels auf einem 160 dpi (MDPI) Bildschirm. MDPI beschreibt die Basisdichte (baseline density) für einen Bildschirm in "medium-density". Alle Angaben im Android-Design-Styleguide sind in dp angegeben.

Und was heißt das jetzt alles für mich als Designer?

Ja, zugegebenermaßen ist das alles ziemlich verwirrend. Wie fangen wir jetzt also an? Android selbst schlägt als eine Möglichkeit vor, mit dem Basis-Standard zu arbeiten. Das heißt also in einer normalen Bildschirmgröße (mind. 470 dp x 320 dp) und einer MDPI (160 dpi) Pixeldichte. Eine andere Möglichkeit ist, für das Gerät mit dem größten Bildschirm zu designen und dann herunterzuskalieren, um zu sehen, ob das Design auch auf kleineren Bildschirmen funktioniert.

Die Crux an der ganzen Sache – wenn der Kunde das Design wirklich genau beurteilen will (z. B. Schriftgrößen), muss er sich dieses auf einem Gerät ansehen, für das die Datei erstellt wurde. Um das Ganze noch viel verwirrender zu machen: Es ist nicht so, dass ein Gerät mit "normaler" Bildschirmauflösung auch unbedingt eine MDPI Pixeldichte hat. Eine kleine Auflistung, welche Geräte, welche Pixeldichte haben, wurde auf der Seite Screen Sizes and Densities im Android Developer Guide erstellt. An dieser Liste erkennen wir schon, dass heutzutage fast keine Geräte mehr eine geringere Pixeldichte als MDPI haben (jedenfalls hier in Deutschland, in Ländern in denen ältere Geräte verwendet werden, mag das wieder anders aussehen).

Und nun ein konkretes Beispiel

Wenn wir ein Design in einem Grafikprogramm erstellen wollen, haben wir dort als Maßeinheit nur Pixel. Wir müssen also dp in Pixel umrechnen. Da MDPI unsere Basis ist, entspricht ein dp einem px. Die Umrechnung in andere Pixeldichten wird im Android-Design-Styleguide erklärt. Als kleine Hilfe gibt es aber auch online einen Umrechner von dp in px.

Nun ist es noch sinnvoll zu überlegen, für welche Geräte man das Design erstellen möchte. Hier hat sich bewährt, mit dem Kunden abzustimmen, welche Testgeräte dieser zur Verfügung hat. Bei unserem letzten Projekt hatte der Kunde ein Samsung Galaxy SIII Mini als Testgerät mit einer Bildschirmauflösung von 480x800 Pixel und einer HDPI Pixeldichte. Aus diesem Grund haben wir die Datei in Photoshop mit 480 Pixeln Breite angelegt. Da wir hier mit einer HDPI Pixeldichte arbeiten, müssen wir Größen umrechnen. Wie bereits erwähnt sind im Android-Design-Styleguide die Maße in MDPI angegeben. Beispielsweise ist dort die Höhe der Actionbar mit 48 angegeben. Diesen Wert muss man nun in HDPI umrechnen. Das heißt die Basis-Maße (MDPI) x 1,5 nehmen, hier im Beispiel also 48 x 1,5 = 72. In Photoshop wird deshalb die Actionbar mit einer Höhe von 72px angelegt.

Dieses Design kann auf einem Samsung Galaxy SIII Mini, Samsung Nexus S oder HTC Desire angesehen werden. Das Design wird dann nicht verzerrt dargestellt und alle Schriftgrößen und Proportionen können richtig beurteilt werden.

Und wenn der Kunde nun sehen will, wie es auf seinem brandneuen Android-Gerät mit xxxhdpi-Pixeldichte aussieht? Die Antwort ist tatsächlich, dass dann eine neue Photoshop-Datei in der entsprechenden Auflösung erstellt werden muss. 

Und eure Erfahrungen?

Wir sind natürlich neugierig, was ihr für Erfahrungen gemacht habt und wie ihr vorgeht, wenn ihr Designs für Android-Apps erstellt. Oder habt ihr weitere Fragen? Wir freuen uns, wenn ihr eure Erfahrungen hier als Kommentar hinterlasst. :-)

 

Susanne

Freigegeben in Blog

Viele Apps sind mittlerweile auf eine gute Usability bedacht. Es gibt Bücher, Experten oder ganze Geschäftszweige, die sich mit dem Thema beschäftigen. Das Programm muss intuitiv zu bedienen sein - am besten ohne Einarbeitungszeit. Dies erreicht man durch eine selbsterklärende Benutzeroberfläche. Doch was ist in welchem Rahmen für jemand bestimmtes selbsterklärend?

Freigegeben in Blog
Donnerstag, 27 Oktober 2011 17:19

E-Book: Mobile Design & Usability

Mobile Design & Usability – warum soll man sich darüber überhaupt Gedanken machen?

In unseren Workshops, Projekten und bei unzähligen Kundengesprächen werden uns immer wieder Fragen rund um das Thema Design von Apps gestellt. Fragen, die uns zu diesem E-Book insprierten.

Das Ergebnis ist eine komprimierte Einführung in das Thema “Mobile Design & Usability”. Es gibt einen Überblick über die Design-Philosophie sowie die wichtigsten User-Interface-Elemente von Android- und iPhone-Apps und geht außerdem auf die Grundprinzipien von User-Interface-Gestaltung ein. Um die Herangehensweise noch besser zu verdeutlichen, haben wir uns eine fiktive Android- und iPhone-App ausgedacht und sie designt: Lokuskop, eine App, mit der nach öffentlichen Toiletten im Umkreis gesucht werden kann.

Wir würden uns freuen, wenn Sie es auch Ihren Freunden, Kollegen, Bekannten und für wen es auch sonst interessant sein könnte, weiterempfehlen. Natürlich sind Feedback, Anregungen für zukünftige Updates sowie Lob jederzeit willkommen.

Think of design as communication between you and the user.
Jim Palmer auf der Google I/O 2010

E-Book herunterladen
Version 1.1 (PDF, 4,2 MB)

Freigegeben in Downloads
Mittwoch, 07 März 2012 10:14

Nina Wieland

Concept, Design & Usability

nw

Seit 2008 verstärkt Nina Wieland (Dipl Ing. (FH) Medientechnik) das Team von insertEFFECT und bringt ihr Wissen in den Bereichen Usability, Konzeption und Design von mobilen Webseiten ein. Diese Tätigkeitsfelder resultieren aus ihrer Diplomarbeit, die sie bei insertEFFECT zum Thema "Usability Test von mobilen Webseiten" geschrieben hat.

Mail: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!
Phone: 0911 / 274487-140

Freigegeben in Team