Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design

Eine Geschichte von zwei Plattformen: Design für Android und iOS

by
Read Time:15 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Egal, ob Sie intern, im Auftrag oder für eine Agentur arbeiten, Unternehmen benötigen Apps aus vielen verschiedenen Gründen. Gerade etablierte Unternehmen müssen sich um ihre Bestandskunden und die von ihnen genutzten Geräte kümmern. Das bedeutet oft eine neue App für Android und iPhones.

In einer idealen Welt würden wir Monate damit verbringen, zwei Apps zu entwickeln. Aber in Wirklichkeit lassen viele Projekte nicht so viel Zeit. Für alle Apps, an denen ich gearbeitet habe, war die Frist knapp genug, um eine App zu entwerfen, geschweige denn das Projekt vollständig in zwei aufzuteilen.

Sehr oft entwerfen Sie eine App, wobei Optimierungen vorgenommen werden, bevor Sie sie an zwei Entwicklungsteams übergeben. Wenn Sie eine App auf diese Weise entwerfen, ist es wichtig, frühzeitig den Unterschied zwischen den beiden Plattformen zu verstehen und die schnellen Möglichkeiten zu kennen, damit sich die Erfahrung für jede der beiden Plattformen typisch anfühlt.

Bevor Sie beginnen: Wählen Sie Ihren Ansatz

1. Halten Sie Ihren Feind näher

Es ist wahrscheinlich, dass Sie eine persönliche Präferenz für ein System haben. Ich habe immer iPhones verwendet, daher habe ich ein natürlicheres Verständnis der UI-Muster auf iOS. Das erste, was Sie tun müssen, ist, sich mit der anderen Plattform auseinanderzusetzen, und der beste Weg, dies zu tun, besteht darin, ein anderes Gerät zu kaufen, in meinem Fall ein Android. Es könnte sogar eine gute Idee sein, dies für die Dauer des Projekts als Hauptgerät zu verwenden, um ein Gefühl für die Plattform zu bekommen.

Wenn Sie intern arbeiten, lassen Sie sich von ihnen ein Testgerät kaufen. Wenn es irgendwelche Probleme gibt, teilen Sie dem Management den Wert mit, den das Verständnis der alternativen Plattform für Ihre Designarbeit bedeutet (die Kosten sind für zwei Geräte aus eigener Tasche teuer, aber für ein Unternehmen sind es im Vergleich zu den Ausgaben für die Design und Entwicklung einer neuen App). Wenn Sie freiberuflich arbeiten, sollten Sie dies auf Ihre Steuerrechnung absetzen können.

2. Wählen Sie einen Lead

Da wir für beide Plattformen gleichzeitig entwerfen, müssen Sie in der realen Welt mit begrenzter Zeit die Realität akzeptieren, dass Sie von Anfang an eine Plattform priorisieren. Treffen Sie diese Entscheidung nicht nach Ihren persönlichen Vorlieben, sondern nach dem Markt für Ihre App. Verwenden mehr Menschen in Ihrem Markt Android-Telefone? Ist es eine kostenpflichtige App? Was ist die Zielgruppe? Wenn Sie diese Fragen stellen, können Sie entscheiden, was vorzuziehen ist.

3. Kennen Sie die Regeln

Informieren Sie sich über UI-Richtlinien für Android und iOS. In der Vergangenheit war Apple dafür bekannt, strenger mit seinen Richtlinien umzugehen. Um eine App in den App Store zu bekommen, gibt es einen Genehmigungsprozess, der ungefähr zwei Wochen dauert. Es gibt kein Genehmigungsverfahren für den Play Store. Aufgrund dieser niedrigeren Eintrittsbarriere für Android war die Designqualität jedoch traditionell schlechter. Google möchte dies mit seinen Material Design-Richtlinien ändern.

Die Ästhetik des Materialdesigns ist Webdesignern sehr vertraut geworden

Es gibt viele gute und kostenlose UI-Kits, die Sie für Ihre Projekte verwenden können (einige finden Sie am Ende dieses Artikels). Die Verwendung dieser Komponenten verleiht Ihrer App natürlich ein natives Gefühl. Aber selbst wenn Sie die UI-Kits erhalten, kann es schwierig sein, zu wissen, wo sich die Plattformen unterscheiden und wo sie gleich bleiben sollen. Hier möchte ich Ihnen helfen.

Entwerfen Ihrer App

Befolgen Sie diese einfachen Schritte, und Ihre App ist auf dem richtigen Weg, um sowohl auf Android- als auch auf iOS-Geräten zu passen.

1. Allgemeiner Stil

Seit iOS7 hat Apple zu einem flacheren Designstil gewechselt und die skeuomorphen Schatten, Texturen und Effekte, die die frühen Jahre des iPhones prägten, über Bord geworfen. Android, das am Anfang systematischer war, ist etwas in die andere Richtung gegangen. Die neuen Materialdesign-Richtlinien von Google schaffen subtilere Bezüge zur realen Welt, wobei ein mehrschichtiger „Papier“-Ansatz für mehr Hierarchie sorgt.

2. Echte Tasten

Android-Telefone verfügen über eine Zurück-Taste, mit der Sie zu vorherigen Bildschirmen in der App zurückkehren können.

Zurückkommen

iPhones haben diese Taste nicht, daher muss es eine Möglichkeit geben, zum vorherigen Bildschirm zurückzukehren. Dies geschieht normalerweise durch ein „Zurück“-Chevron oben links auf dem Bildschirm, muss jedoch bei den verschiedenen Fahrten in Ihrer App berücksichtigt werden.

3. Globale Elemente

Es gibt globale Elemente (wie eine Statusleiste und eine Kopfzeile), die auf allen Seiten Ihres Designs erscheinen. Sie sollten die Höhe oder den Stil dieser Balken überhaupt nicht ändern, wenn Sie möchten, dass sich die App nativ anfühlt. Ich würde daher empfehlen, sie einmal in Ihrem ersten Seitendesign für jede Plattform zu definieren. Danach können Sie für jedes Ihrer Mockups einen Platzhalter (oder die Status- und obere Leiste Ihres primären Betriebssystems) verwenden, aber den Entwicklern mitteilen, dass er überall gleich sein sollte.

Es gibt leichte Unterschiede zwischen den Navigationsleisten auf jeder Plattform. Bei Android ist der Text linksbündig, bei iOS zentriert. Auf iOS ersetzen viele Unternehmen den Titel der Hauptseite durch ihr Firmenlogo, aber dies ist nicht die beste Vorgehensweise auf Android. Die Statusleiste (mit Ihren Netzwerk-, Akku- und Zeitinformationen) ist eine native Komponente, und Sie müssen das Design nicht berücksichtigen. Achten Sie beim Präsentieren von Mockups nur darauf, das richtige zu verwenden, um Verwirrung oder Ablenkung zu vermeiden.

Global Elements on Android and iOSGlobal Elements on Android and iOSGlobal Elements on Android and iOS

4. Navigation

Der vielleicht größte Unterschied zwischen iOS- und Android-Plattformen ist die Navigation. Das primäre Navigationsmuster auf Android ist ein Schubladenmenü. Android-Benutzer verwenden dies natürlich für Menüelemente, und es ist in der Regel während der gesamten Erfahrung allgegenwärtig. Apples Richtlinien sprechen sich eher für eine Tab-Leiste aus, die sich am unteren Bildschirmrand befindet und einen einfachen Zugriff auf die obersten Bereiche der App ermöglicht. Wenn Sie sich für die Top-Level-Architektur Ihrer App entscheiden, können Sie zwei separate Menüs für die beiden Plattformen planen.

Das Nachdenken über die Architektur der App ist wohl wichtiger als das Layout der Menüs – ein Punkt, den ich in einem anderen Artikel zu einigen dieser Themen erwähnt habe. Wenn Ihre Struktur in Ordnung ist, folgt die Navigation.

Wie Sie hier sehen, gibt es zwei Navigationsmuster: ein Schubladenmenü für Android und eine Tab-Leiste für iOS. Manchmal ist es einfacher, die Navigationsebene einfach auszublenden, während Sie an einzelnen Ansichten arbeiten.

Navigation patterns on Android and iOSNavigation patterns on Android and iOSNavigation patterns on Android and iOS

5. Karten oder nicht?

Karten werden zum wichtigsten UI-Muster im digitalen Design. Sie sind vielseitig und ermöglichen es Benutzern, schnell Inhalte auf eine Weise zu konsumieren, die dem mobilen Verhalten entspricht. Optisch passen Karten sehr gut zum Materialdesign von Android (es ist von Papier inspiriert). Die Verwendung von Schlagschatten und angemessenen Rinnen zwischen den Karten erzeugt ein natürliches Aussehen und ein natürliches Gefühl.

Unter iOS erfordert die Verwendung von Karten mehr Sorgfalt und Überlegung. Sogar große Apps wie Facebook und Pinterest verwenden Karten auf eine Weise, die leicht nicht mit den iOS-Richtlinien übereinstimmt. Die iOS-Richtlinien empfehlen die Verwendung von Tiefe in Transparenzen und Überlagerungen, aber die grundlegende Ansicht ist normalerweise flacher. Instagram verwendet einen völlig flachen Designstil, obwohl jeder Beitrag aus architektonischer Sicht als Karte angesehen werden könnte. Es lohnt sich zu sehen, wie Instagram das gleiche Komponentengefühl innerhalb eines iOS-Stils erhält. Wenn Sie Karten unter iOS verwenden, gehen Sie sehr vorsichtig mit der Verwendung von Schatten um und versuchen Sie, sie so subtil wie möglich zu halten.

Cards for Android and iOSCards for Android and iOSCards for Android and iOS
Karten für Android und iOS, einige Dimensionen verleihen ein wenig Erschwinglichkeit

6. Typografie

Die Systemschriftfamilie auf iOS ist Helvetica Neue. Auf Android ist es Roboto. Obwohl sich der Stil der Schriftarten merklich unterscheidet, sind die Metriken der Schriftarten ziemlich ähnlich. Wenn Sie Zeit sparen, sind Sie sicher genug, mit nur einer zu arbeiten, aber kommunizieren Sie mit den Entwicklern, um die richtige Schriftart für das System zu implementieren. Wenn Sie mit wichtigen Layouts und extremen Schriftgrößen arbeiten, ist es ratsam, Ihr Layout zumindest mit beiden Schriftarten zu testen.

Wenn Sie die Extrameile gehen möchten, müssen Sie die typografischen und Layoutkonventionen auf jeder Plattform genauer beachten, wobei Sie sich wiederum auf die obigen Richtlinien beziehen. Ein paar Verallgemeinerungen:

  • Android Material Design verwendet viel Leerraum im Layout
  • Es gibt auch eine dramatischere Verwendung der Schriftgröße im Materialdesign. Markante Überschriften mit viel Platz sorgen für die Hierarchie
  • Unter iOS gibt es weniger dramatische Größenunterschiede. Es gibt jedoch etwas mehr Variationen bei den Schriftstärken, sodass Sie immer noch eine Hierarchie erstellen können.
  • Normalerweise verwenden beide Plattformen geringere Strichstärken in der Schriftfamilie. Im folgenden Beispiel verwendet das Android-Design jedoch leichte und regelmäßige Strichstärken von Roboto, während das iOS-Design fette und normale Strichstärken von Helvetica Neue verwendet.

Dies ist ein sehr einfaches Beispiel, um zu betonen, dass die Typografie auch auf einfache Weise sofort erkennen kann, ob Sie es mit einer Android- oder einer iOS-App zu tun haben.

Typography on Android and iOSTypography on Android and iOSTypography on Android and iOS

7. Raster und Berührungsziele

iOS (44px @1x) und Android (48dp - 48px im Verhältnis 1:1) haben leicht unterschiedliche Richtlinien für Berührungsziele. In den Materialdesign-Richtlinien wird außerdem empfohlen, alle Elemente an einem quadratischen Grundlinienraster von 8dp auszurichten.

Beim neuesten Projekt, an dem ich gearbeitet habe, fanden wir es sicherer, diese Android-Richtlinien zu befolgen, weil (a) das größere 48px-Touch-Target für beide Plattformen sicher ist und (b) das Layout für das Materialdesign definierter und aktueller ist. In jedem Fall benötigen Sie ein Raster, mit dem Sie arbeiten können, aber da Android strenger definiert ist, haben wir festgestellt, dass 8dp gut funktioniert. Dies bedeutet, dass Sie Ihr Dokument mit Schritten von 8 dp sowohl in horizontaler als auch in vertikaler Ebene einrichten, um ein gekacheltes Rasterlayout zu erstellen.

8. Schaltflächenstile

In Material Design sind mehrere Schaltflächenstile definiert:

  1. Schwebende Aktionstasten: die traditionellsten Tasten. Die Schlagschatten sind ziemlich schwer und heben sie von der Seite ab. Diese sollten nur auf Hintergründen oder sparsam auf Karten verwendet werden. Sie sollten überhaupt nicht für Warnungen oder Popups verwendet werden, da dies zu viele Tiefenebenen erzeugt. Die primäre Aktion nimmt Ihre Akzentfarbe an, während die sekundären Versionen normalerweise eine weniger auffällige Farbe haben.
  2. Flache Schaltflächen: im Wesentlichen Text in Ihrer Akzentfarbe, ohne Begrenzungselemente. Sie verwenden Polsterung und All-Caps-Case, um ihnen Struktur zu geben.

Im Vergleich zu Material Design haben iOS-Apps normalerweise ein flaches Erscheinungsbild und verwenden keine Tiefe oder Schlagschatten. Die primären Schaltflächen haben eine Füllfarbe, während die sekundären Schaltflächen mit einem Strich derselben Farbe umgekehrt sind. Diese Metapher kann etwas eingeschränkt werden, insbesondere im Vergleich zu Registerkarten und anderen folgenden Elementen. Um diesen sehr flachen Stil richtig zu machen, ist es wichtig, klare und konsistente Metaphern für die Bedeutung von Farben in Ihrer App zu haben.

iOS verfügt auch über eine Schaltfläche für den Nur-Text-Stil, die jedoch nicht den Großbuchstaben-Stil von Android teilt und eine geringere Schriftstärke aufweist.

Button styles on Android and iOSButton styles on Android and iOSButton styles on Android and iOS

9. Aktionsblätter

Aktionsblätter ermöglichen es Benutzern, aus einer Vielzahl von Aktionen aus einem UI-Element auszuwählen. Wenn ich beispielsweise ein Bild berühre (oder lange drücke), möchte ich das Bild vielleicht teilen, hochladen, kopieren oder löschen.

iOS und Android gehen damit etwas anders um. Erstens gibt es ähnliche Aktionsblätter, die vom unteren Bildschirmrand als Überlagerung der aktuellen Ansicht angezeigt werden.

Bei Aktionsblättern, Überlagerungen und Warnungen verwenden iOS und Android unterschiedliche Details, um die Tiefe in Ebenen anzugeben:

  • Android-Overlays haben eine einfarbige Farbe mit einem leichten Schlagschatten, um anzuzeigen, dass es sich um eine darüber liegende „Papier“-Ebene handelt.
  • iOS-Overlays haben keinen Schlagschatten, aber eine leichte Transparenz im Hintergrund.
Action sheet differences on Android and iOSAction sheet differences on Android and iOSAction sheet differences on Android and iOS

Dropdown-Schaltflächen

Diese gibt es nur auf Android und sind eine schnelle Methode, um eine Auswahl zu treffen. Beachten Sie jedoch, dass es kein natives iOS-Äquivalent gibt. Im folgenden Beispiel drückt der Benutzer in Schritt 1 auf „Profil“ und erhält an dieser Stelle ein einfaches Menü, um eines der verfügbaren Profile auszuwählen. Diese Menüs werden auch häufig über die Overlay-Schaltfläche in der Aktionsleiste verwendet, die durch drei vertikale Punkte angezeigt wird.

Spezifische Dateneingabe

Für bestimmte Eingaben wie Datum und Uhrzeit bietet Android jetzt integrierte Dialoge. Diese sehen aus wie Warnungs-Popups, aber mit einer Benutzeroberfläche, die speziell auf die Eingabe dieser Art von Daten ausgerichtet ist. Ein Beispiel für eine Kalendereingabe wird gezeigt. Android bietet ein optimiertes Overlay für die Eingabe eines Datums. iOS geht damit ganz anders um und erscheint als Rad, das wie ein unteres Blatt auftaucht. Seien Sie bei der Planung dieser Komponenten vorsichtig und kommunizieren Sie frühzeitig mit den Entwicklern bei Eingabekomponenten.

10. Segmentierte Kontrollen

Segmentierte Steuerelemente werden verwendet, um zwischen verschiedenen Inhalten innerhalb einer einzelnen Ansicht zu wechseln. Ihre Verwendung ist ähnlich, aber sie sind auf jeder Plattform optisch sehr unterschiedlich, daher ist es wichtig, den richtigen Stil zu verwenden. Unter iOS gibt es drei Registerkarten, die ähnlich wie die zuvor besprochenen Leitungsschaltflächen gestaltet sind. Auf Android werden sie durch eine einfache Unterstreichung gekennzeichnet und erhalten viel mehr Leerraum, um ihre Interaktion anzuzeigen.

Segmented controls on Android and iOSSegmented controls on Android and iOSSegmented controls on Android and iOS

11. Benachrichtigungen

Es ist wichtig, den richtigen Stil zu wählen, da sie wichtige Aktionen wie die Registrierung, das Akzeptieren von Bedingungen oder sogar die Bestätigung der Zahlung steuern können. Wir möchten, dass sie sich vertrauenswürdig und heimisch fühlen.

Die Android-Warnungen verwenden die zuvor gezeigten flachen Schaltflächenstile, deren Abmessungen in den Materialdesign-Richtlinien zu finden sind. Die Aktionen befinden sich unten rechts in der Benachrichtigung. Die „Schaltflächen“ sind eigentlich vollständig textbasiert. Sie verwenden alle Großbuchstaben, um ihnen mehr Struktur zu geben, und sie tragen die primäre Aktionsfarbe Ihrer App.

Unter iOS sind die Aktionen durch Trennzeichen getrennt. Sie stehen meist im Satz- oder Titelfall, da sie ihre Struktur aus den einzelnen Blöcken gewinnen. Sie sind im Feld zentriert und erben wiederum Ihre aktive Farbe.

Example of alert dialogues for Android and iOS using location as an exampleExample of alert dialogues for Android and iOS using location as an exampleExample of alert dialogues for Android and iOS using location as an example

12. Symbole

Icon-Design ist ein ziemliches Spezialgebiet im UI-Design. Unabhängig davon, ob Sie kostenlose Icons verwenden, einen Icon-Designer beauftragen oder die Icons selbst entwerfen, gibt es für jede Plattform einen eigenen Stil. iOS popularisierte Liniensymbole mit sehr dünnen Strichen. Die Android-Systemsymbole haben dickere Striche oder sind vollständig solide Symbole. In der Vergangenheit verwendeten Android-Symbole eine Perspektive oder eine dreidimensionale Drehung, aber jetzt geben ihre Richtlinien zweidimensionale Symbole an, die direkt angezeigt werden. Hier ist ein kurzes Beispiel mit mehreren Symbolen zum Vergleich, oder verwenden Sie die direkten Links zu den Symbolrichtlinien für Android oder iOS

13. Snackbars, Toasts, Bilder laden

Pech 13. Es gibt ein paar Details der Benutzeroberfläche, die durch die Ritzen schlüpfen können. Gewöhnliche wie Warnungen und Ladesymbole werden oft Entwicklern überlassen. Möglicherweise haben Sie betrügerische Spinner und seltsame Warnungen erlebt, die sich mit dem Rest der App nicht mehr im Einklang gefühlt haben. Für diese gibt es in der Regel native Lösungen, die jedoch an den Stil Ihrer App angepasst werden können. Dies ist definitiv ein Bereich, in dem die Zusammenarbeit mit Entwicklern der beste Weg ist, um zu entscheiden, wie Ihre funktionieren soll.

14. Gemeinsame UI-Steuerelemente

Optionsfelder, Kontrollkästchen, Felder und Schalter sind funktionale Komponenten, denen ein natives Gefühl gegeben werden sollte. Wie bei Warnungen und Dialogen sind diese Kontrollen und Eingaben ein Bereich des Vertrauens und der Vertrautheit für den Benutzer. Verwenden Sie dafür so viel wie möglich die nativen Komponenten, damit die Leute(a) wissen, wie man sie verwendet, und(b) Ihrer App ihre sensiblen Daten oder Zahlungsdetails anvertrauen.

Im folgenden Beispiel sehen wir Schalter- und Optionsschaltflächen-Äquivalente für Android und iOS. Auch hier sind die Unterschiede klein genug, um mit einem Design fortzufahren und später für das andere zu optimieren, aber die feinen Unterschiede sind für einen nativen Look unerlässlich. Verwenden Sie Ihr UI-Kit so weit wie möglich für diese Komponenten und kommunizieren Sie wieder frühzeitig mit den Entwicklern.

Android left and iOS rightAndroid left and iOS rightAndroid left and iOS right
Android (links) und iOS (rechts)

Zusammenfassung

Es ist keine unmögliche Aufgabe, Ihrer App sowohl auf iOS als auch auf Android mit einem Design ein natives Gefühl zu verleihen. Versuchen Sie, diese Optimierungen von Anfang an im Auge zu behalten, halten Sie Ausschau nach Komponenten, die auf einer Plattform nicht synchron sind, und arbeiten Sie immer so eng wie möglich mit den Entwicklern zusammen.

Ressourcen

Dieser Artikel gibt Ihnen hoffentlich schnelle Antworten darauf, wo Sie beim Design für zwei Apps abweichen können, aber Sie benötigen auch einige Tools und Vorlagen, um Ihr Design richtig auszuführen. Es gibt viele allgemein verfügbare Ressourcen, die Sie als Ausgangspunkt verwenden können. Hier sind einige der besten:

Richtlinien

Wenn Sie mehr wissen möchten, finden Sie viele Informationen, die ich bereitgestellt habe, in den Plattformrichtlinien. Sie sind ziemlich umfangreich, daher habe ich nur die Teile herausgezogen, die für den Vergleich wichtig sind. Wenn Sie jedoch spezifischere Fragen haben, ist dies der beste Ausgangspunkt:

UI-Kits

Mit diesen UI-Kits ersparen Sie sich das erneute Erstellen grundlegender nativer Steuerelemente und passender Größen. Sie können die benötigten Teile herauszupfen und dann zwischen ihnen für die Android- und iPhone-Ausgabe Ihrer Designs wechseln.

Symbole

Selbst wenn Sie Ihre eigenen Symbole erstellen oder in Auftrag geben, sind sie während der Arbeit als Platzhalter nützlich. Icon-Design kann eine Aufgabe für sich sein, und Sie möchten nicht, dass Icons Sie verlangsamen, während Sie ein Gesamtgefühl für Ihre App bekommen. Ich habe vor kurzem festgestellt, dass die Links unten auf icons8 ziemlich gut aussehen, oder flaticon.com ist großartig für allgemeinere Symbole.

Modelle

Es ist immer nützlich, Gerätemodelle zur Präsentation Ihrer App zu haben. Diese gibt es in vielen Kategorien. Vielleicht möchten Sie ein einfaches Gerätemodell für den Kontext, ein vereinfachtes flaches Gerät, um Ihre App zum Leuchten zu bringen, oder ein Lifestyle-Modell, um einen Anwendungsfall zu präsentieren. Hier sind ein paar Ressourcen, die ich nützlich fand, es gibt noch viele mehr. Seien Sie bei der Auswahl von Android-Geräten vorsichtig. Ich würde zur Nexus-Reihe tendieren, da es sich um Googles eigene Telefone handelt und keine Bevorzugung gegenüber anderen Herstellern angedeutet wird.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.