Vorheriger Artikel Nächster Artikel

iOS 7: So klappt die Umgestaltung eigener Apps im Flat Design

hat einen neuen Look im verpasst, der sich auch auf das auswirkt. Die Meinungen darüber gehen zwar auseinander, aber das ändert nichts daran, dass Entwickler und Designer ihre eigenen entsprechend anpassen sollten, damit sie nicht veraltet wirken. Wie man diesbezüglich am besten vorgeht, beschreibt der Konzern in einem umfangreichen Transition-Guide. Wir fassen die wichtigsten Aspekte zusammen.

iOS 7: So klappt die Umgestaltung eigener Apps im Flat Design

In dem auf der Developer-Website veröffentlichten Transition-Guide wird nicht nur beschrieben, wie Designer bei der Umgestaltung ihrer Apps am besten vorgehen sollten, sondern auch, wie der Übergang von iOS 6 zu iOS 7 gelingt, ohne bestehende Nutzer außen vor zu lassen. Insbesondere geht Apple darauf ein, wie Entwickler neue Elemente des User-Interface wie transparente Leisten, Vollbild-Layout oder Buttons ohne Rand einsetzen sollten. Auch wenn es in dem Guide in erster Linie um das neue Design von iOS 7 geht, ist der offizielle Release erst für Herbst 2013 angekündigt. Das heißt, dass Entwickler und Designer wenigstens bis dahin auch weiterhin iOS 6 unterstützen sollten.

Unterschiede bei der Navigationsleiste zwischen iOS 6 und iOS 7. (Screenshot: Apple Developer Website)
Unterschiede bei der Navigationsleiste zwischen iOS 6 und iOS 7. (Screenshot: Apple-Developer-Website)

Drei Design-Grundsätze für iOS 7

iOS 7 bietet eine ganze Menge neuer Features und Entwickler müssen diese entsprechend für ihre eigenen Apps berücksichtigen. Nach Ansicht von Apple lauten die drei wichtigsten Grundsätze für das Design von iOS-7-Apps „Deference“, „Clarity“ und „Depth“.

  • Mit „Deference“ ist gemeint, dass das User-Interface den Nutzer beim Interagieren und Wahrnehmen von Inhalten unterstützt – niemals aber mit den Inhalten selbst konkurrieren sollte.
  • „Clarity“ dagegen erklärt sich fast von selbst: Das Design sollte in erster Linie von Funktionalität gekennzeichnet sein, Texte sollten – egal in welcher Größe – immer lesbar sein, Schmuckelemente  sparsam eingesetzt werden und Icons möglichst selbsterklärend und deutlich gestaltet werden.
  • Den „Depth“-Grundsatz erläutert Apple so: Visuelle Layer und realistische Bewegungen sollen den Anwender verzücken und zu einer besseren Nutzung führen. Apple geht es dabei in erster Linie darum, dass Designer unterschiedliche Ebenen einsetzen, um dem Nutzer mit Hilfe von transparenten Hintergründen und verbesserten Übergängen die hierarchische Struktur einer App zu kommunizieren.
Mit dem Einsatz von Dynamic Type kann man in iOS 7 erreichen, dass Text automatisch für jeden Font angepasst wird.
Mit dem Einsatz von Dynamic Type kann man in iOS 7 erreichen, dass Text automatisch für jeden Font angepasst wird.

Tipps für ein ansprechendes UI in iOS 7

Apple möchte, dass Apps von anderen Entwicklern dem Stil von iOS 7 entsprechen. Um es Designern leichter zu machen, gibt das Unternehmen im Transition-Guide einige Tipps, wie man ein klares und visuell ansprechendes User-Interface gestalten und flüssige Übergänge implementieren kann.

Demnach sollten sich Designer vom Einsatz visueller Rahmen und Schablonen verabschieden. Stattdessen sollten Apps wenn möglich immer den ganzen Screen nutzen und Inhalte sollten sich bis zum Rand des Bildschirms erstrecken. Darüber hinaus sollte man Stilmittel wie Gradienten und Schlagschatten vermeiden. Nach Ansicht von Apple führen diese Gestaltungselemente nämlich zu überladenen User-Interface-Elementen, die dann mit den eigentlichen Inhalten einer App konkurrieren. Um zu erreichen, dass das UI wie gewünscht nur eine unterstützende Rolle spielt, sollten Apps zudem ausreichend Weißraum beinhalten und gleichzeitig das UI mit dem Einsatz von Farben vereinfachen.

Diese Voraussetzungen muss jede App erfüllen

  • Aktualisiertes und hochauflösendes Icon in 120 x 120 Pixeln
  • Das Ladebild muss das Feld für die Statusleiste beinhalten, sofern das noch nicht der Fall ist
  • Alle Designs und grafische Elemente müssen das Retina-Display und iPhone 5 unterstützen

Diese Voraussetzunge sollte jede App erfüllen

  • Inhalte sollten auch durch transparente UI-Elemente hindurch erkennbar sein
  • Redesign von in Leisten verwendeten Buttons im Stil von iOS 7
  • Auf Buttons ohne Rand vorbereiten und keine Hintergrundbilder mehr für Buttons verwenden
  • Hart kodierte UI-Werte durch dynamische austauschen und dabei Auto Layout verwenden
  • Eigene App auf geänderte Abmessungen von UI-Control-Elementen überprüfen, die sich auf das Layout auswirken können
  • Dynamic Type einsetzen
  • App auf Kompatibilität mit den neuen Gesten für das Control-Center und die Navigation überprüfen
  • Stilmittel wie Schlagschatten oder Gradienten vermeiden

Weiterführende Links

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Dirk am 19.06.2013 (10:14 Uhr)

    Es wäre toll, wenn Apple es mal schaffen würde, eine neue SDK-Version rauszubringen, nach der man nicht die App überarbeiten muss. Schön für Entwickler, aber bei den Unternehmen kommen solche Zwangsüberarbeitungen nicht so gut an. Dass die App nicht den neuen iOS 7-Look hat, ist ok, aber sie sollte doch bitte aussehen wie vorher. Und das ist leider nicht der Fall beim Kompilieren gegen iOS 7.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema iOS 7
In neuem Gewand: SEO-Tool linkbird verpasst sich ein Redesign
In neuem Gewand: SEO-Tool linkbird verpasst sich ein Redesign

Linkbirds neues User-Interface steht unter dem Motto „Visibility, Chances, Analysis“. Für den User soll es einfacher, besser und effizienter werden. Wir geben euch einen ersten Einblick in das … » weiterlesen

Sticker UI Book: Das Stickeralbum für UX- und UI-Designer
Sticker UI Book: Das Stickeralbum für UX- und UI-Designer

Wer sagt, dass Webdesign nicht auch analog funktionieren kann? Das Sticker UI Book, das derzeit auf Kickstarter sein Glück versucht, versüßt UX- und UI-Designern nicht nur den kreativen Prozess, … » weiterlesen

Flat Design: 20 sehenswerte User-Interfaces
Flat Design: 20 sehenswerte User-Interfaces

Nicht frei von Kritik, bleibt Flat Design trotzdem das große Thema im Webdesign. Wie ansehnlich gut durchdachte User-Interfaces im Flat Design aussehen können, zeigt dieser Artikel anhand von 20 … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen