Gestaltungsrichtlinien und Empfehlungen für iPhone, iPod und iPad

Der folgende Abschnitt soll einen kleinen Überblick bieten, was bei der Layoutgestaltung für Apples mobile Geräte zu beachten ist.

Vorgaben und feste Größen

Icons

Die folgenden Icons sind für jede App zwingend erforderlich:

  • App Icon (iPhone/iPod) - als PNG in 57px*57px
  • App Icon (iPad) - als PNG in 72px*72px
  • App Icon (iPhone 4) - als PNG in 114px*114px
  • Großes App Icon - als PNG in 512px*512px

Die Icons werden automatisch abgerundet. Der Glanzeffekt der kleinen Icons kann automatisch hinzugefügt werden, kann aber auch bereits im Icon enthalten sein. Im Normalfall sollte das Icon ohne Glanzeffekt entworfen werden.

Tabbar Icons

Wird die standard Tableiste des iPhone verwendet, müssen die Icons in folgendem Format vorliegen:

  • Tabbar Icon - als Graustufen(!) PNG in etwa 30px*30px - 40px*30px

Sonstiges

  • Bildschirmgröße iPhone/iPod - 460px*320px mit Statusleiste, 480px*320px ohne Statusleiste
  • Bildschirmgröße iPhone 4 - 920px*640px mit Statusleiste, 960px*640px ohne Statusleiste
  • Bildschirmgröße iPad - 1004px*768px mit Statusleiste, 1024px*768px ohne Statusleiste
  • Splashscreen - während das Programm lädt, kann ein Splashscreen angezeigt werden. Die Größe entspricht der Bildschirmgröße

Alle folgenden Angaben in Pixeln beziehen sich auf ein iPhone mit der Auflösung 480px*320px. Auf dem iPhone 4 gelten entsprechend immer die doppelten Werte.

Größen und Abstände

Pixelgrößen

Beim Layout sollte beachtet werden, dass die Bildpunkte des iPhone-Displays um einiges kleiner sind, als die der meisten Desktop-Displays. Das Layout sollte am besten testweise als Bild auf einem iPhone/iPod angesehen werden. Falls kein iPhone/iPod verfügbar ist, empfiehlt es sich, dass Layout bei 75% Zoom auf dem Rechner zu betrachten. Sind alle Elemente immer noch groß genug, sind sie auch auf dem iPhone groß genug.

Schriftgrößen

Texte sollten auf dem iPhone generell mindestens eine Schriftgröße größer dargestellt werden, als z.B. auf einer Webseite. Es empfehlen sich folgende Größen:

  • 12 für mehrzeiligen Fließtext oder Icon-Beschriftungen
  • 14 für normale einzeilige Texte oder einzelne Wörter
  • 16-20 für Überschriften

Schriftgrößen kleiner 11 sollten vermieden werden. Es ist möglich, die Schriftgröße für zu lange Texte automatisch anzupassen (so dass der Text immer in den vorgegebenen Bereich passt). Passt ein Text nicht in einen vorgegebenen Bereich, wird dieser am Ende mit “…“ abgekürzt.

Abstände zwischen klickbaren Objekten

Ein Finger ist um einiges größer als ein Mauszeiger, dementsprechend müssen die Abstände zwischen klickbaren Objekten größer gewählt werden. Eine Größe von etwa 40px*40px sollte für einen klickbaren Bereich mindestens vorgesehen werden. Transparente Bereiche einer Grafik sind ebenfalls klickbar. Eine Grafik der Größe 30px*30px mit 5px transparenter Umrandung ist also ebenfalls möglich.

Die klickbaren Bereiche sollten sich nicht überschneiden, da es sonst passieren kann, dass ein falsches Objekt gewählt wird. Der „Klickpunkt“ ist nicht zwangsweise die Mitte des Fingers.

Bei HTML-Texten, die Links enthalten, sollte der Zeilenabstand und die Schriftgröße beachtet werden, so dass zwei Links in angrenzenden Zeilen trotzdem problemlos angewählt werden können. Der Abstand kann in diesem Fall etwas kleiner als die oben empfohlenen 40px*40px sein.

Bilder und Performance

Auf dem iPhone sollten keine Bilder mit einer Größe über 1000px*1000px verwendet werden (z.B. für scrollbare Landkarten, etc.). Auch bei dieser Größe kann die Darstellung schon langsamer werden und das Scrollen ruckeln. Größere Bilder müssen gekachelt werden in mehrere kleinere. Auf dem iPad liegt die Begrenzung etwas höher, aber auch hier verlangsamen Bilder, die größer sind als der sichtbare Bereich, die Performance stark. Große scrollbare Bereiche mit vielen Bildern (z.B. lange Tabellen) beeinträchtigen die Performance ebenfalls. Hier sollten wenige Bilder verwendet werden oder der scrollbare Bereich eingeschränkt werden.

Schrift

Schriftarten

Es können auf dem iPhone/iPod nur die mitgelieferten Schriftarten verwendet werden. Sollen andere Schriftarten verwendet werden, müssen alle Schriftzüge als Bild generiert werden. Auf iPads können laut diversen Quellen über Umwege eigene Schriftarten eingebunden werden, jedoch sollte darauf verzichtet werden.

In der Spiele-Entwicklung mit OpenGL können eigene Schriftarten verwendet werden. Hier werden üblicherweise alle Buchstaben einer Schriftart in ein Bild gerendert. Über dieses Bild erfolgt der Zugriff auf die einzelnen Buchstaben. Es sollte beachtet werden, dass für jede Kombination von Schriftgröße, Schriftvariante und Schriftfarbe ein eigenes Bild generiert werden muss.

Labels, Textfelder und HTML-Bereiche

Ein Label, also ein normaler einzeiliger Schriftzug, kann nur eine Schriftart in einer Variante und mit einer Größe enthalten. Sollen einzelne Worte fettgeschrieben werden, muss für jeden Wechsel in der Schriftvariante oder -größe ein neues Label angelegt werden. Das erfordert zusätzliche Performance und Programmieraufwand. Daher sollten in einzeiligen Texten so wenig verschiedene Schriftarten/varianten/größen verwendet werden wie möglich.

Mehrzeilige Texte können in HTML-Bereichen dargestellt werden. Hier können Formatierungen genau wie auf einer Webseite verwendet werden. Da diese HTML-Bereiche jedoch immer(!) scrollbar sind, eignen sie sich nicht für einzeilige Texte.

Probleme und Besonderheiten

  • Der Bereich für die Statusleiste (die obersten 20px) ist auf einigen Geräten nicht klickbar. Wird die App im Vollbildmodus (also ohne die Statusleiste) ausgeführt, ist zu beachten, dass sich keine klickbaren Elemente in den obersten 20px des Bildschirms befinden sollten.
  • Nicht alle Funktionen die in einer Anwendung von Apple verwendet werden, stehen auch für normale Programmierer zur Verfügung. Meistens handelt es sich dabei nur um technische Funktionen (z.B. Zugriff auf die WLAN-Netzstärke), vereinzelt aber auch um grafische Effekte. Diese könnten dann nur aufwendig nachprogrammiert werden.
  • Tabellen und andere scrollbare Element haben keine dauerhaften Scrollbalken. Es muss also aus dem Layout ersichtlich sein, dass sich der entsprechende Bereich scollen lässt.

Tipps für den Appstore

Dieser Abschnitt gibt einen Überblick, welche Daten für den Appstore benötigt werden und welche Probleme und Ablehnungsgründe es geben kann.

Texte & Inhalte für den Appstore

Folgende Beschreibungen und Texte werden für den AppStore benötigt:

  • Name der App auf dem iPhone (etwa bis 13 Zeichen)
  • Name der App im AppStore (bis zu 255 Zeichen)
  • Beschreibung der App (bis zu 4000 Zeichen)
  • Kategorien (Eine Haupt- und eine Nebenkategorie)
  • Stichworte kommagetrennt (maximal 100 Zeichen insgesamt!)
  • Anwendungs-URL (wird im AppStore mit angezeigt)

Weiterhin werden der Preis und die Länder für die Veröffentlichung festgelegt.

Ablehnungsgründe für Apps

Es gibt eine Reihe von Ablehnungsgründen, die in den Apple Richtlinien oft recht schwammig erwähnt werden. Diese Liste enthält einige häufig auftretende Ablehnungsgründe, ist jedoch bei weitem nicht komplett!

Bedienung / User Interface

  • Bedienung nicht intuitiv - Ein Menüpunkt ist nicht anklickbar (z.B. dauerhaft ausgegraut), ein Standardicon des iPhones wird für einen anderen Zwecke verwendet als vorgesehen, grob vom Standard abweichende Bedienung.
  • Dauerhafte Markierung einer Tabellenzeile - Anklicken einer Tabellenzeile darf keine dauerhafte Markierung der Zeile bewirken (ist leider das Standardverhalten, daher muss bei jeder Tabelle geprüft werden, ob die Markierung wieder entfernt wird!).

Inhalte

  • Benutzung von Apple Trademarks - Alles was irgendeine Verbindung zu Apple vermuten lassen könnte, sollte aus der App entfernt werden. Egal ob in der Beschreibung der App oder innerhalb der App selbst.
  • Gewinnspiel AGBs - Bei Gewinnspielen muss in der AGB klar erwähnt werden, dass Apple mit dem Gewinnspiel in keinerlei Zusammenhang steht. Weiterhin dürfen keine Apple Produkte verlost werden! Hier unterstellt Apple automatisch, dass Apple Inc. mit dem Gewinnspiel in Zusammenhang gebracht werden.
  • Geschützte Begriffe und Trademarks - In der Beschreibung, Keywords und dem Namen der App dürfen keine geschützten Begriffe vorkommen. Dabei entscheidet Apple welche Begriffe geschützt sind und welche nicht. Es sollte die Rechtslage für die Begriffe im Veröffentlichungsland sowie in den USA geprüft werden.
  • Unzulässige Inhalte - Inhalte die gegen geltendes Recht verstoßen, Bilder die zuviel nackte Haut zeigen, beleidigende Inhalte (z.B. stark abwertende Karikaturen von Politikern)

Funktion

  • Funktionsumfang ähnlich einer Apple App - Das Programms darf nicht ähnlich zu einer bereits existierenden Apple App sein.
  • Funktionsumfang zu gering - Das Programm hat keinen erkennbaren Nutzwert
  • Analyse-Software von Drittanbietern - Apps dürfen keine Analyse-Software von Anbietern wie Google oder Microsoft verwenden (Lizenbedingungen Punkt 3.3.9)

AppStore Daten

  • Abweichende Beschreibungen - Die Beschreibung einer App muss auf die App zutreffen und darf keine Features bewerben, die in der App nicht enthalten sind. Auch bei der Beschreibung eines Updates dürfen nur die tatsächlichen Änderungen beschrieben werden. Im Zweifelsfall ist hier weniger mehr.

Programmierung

  • Zugriff auf private API Funktionen - gewisse Funktionen dürfen nur von Apple verwendet werden. Das Verwenden dieser Funktionen schließt die App vom AppStore aus.

Weiterführende Links

 
iphone.txt · Zuletzt geändert: 2010/08/19 10:46 von tyconauts
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht:CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki