Dieser Leitfaden hilft Ihnen beim Einstieg in das Android-Design. Dazu werden vorhandene mobile iOS-Designs mithilfe grundlegender Android-UX-Muster und Material Design in Android-Designs umgewandelt.
Für Designparität strukturiert und für Effizienz optimiert. Wenn Sie ein gemeinsames Basis-Designsystem verwenden, können Sie Designs mit Ihrem eigenen System anstelle von Material 3 übersetzen. Sowohl Android als auch iOS folgen dem Grundsatz, dass Inhalte an erster Stelle stehen.
Danach kann das Branding durch Farbe, Schriftart und Form erfolgen. So können Sie nicht nur die Lesbarkeit von Inhalten verbessern, sondern auch die Kohäsion.
Mit iOS-Designs beginnen
Erstellen Sie zuerst eine Kopie Ihrer iOS-App. iOS-Apps sind in drei Bereiche unterteilt: Leisten, Ansichten und Steuerelemente. Sie können diese Struktur verwenden, um die Übersetzung zu bearbeiten und zuletzt das Styling anzupassen.
Bestandteile einer Android-App
1. iOS-System-UI löschen
Statusleiste und Home-Anzeige löschen Das ist jetzt einfacher.
2. Größe von Frames anpassen
Sie können die kompakte Größe für Android verwenden: 412 dp. Berücksichtigen Sie jedoch eine Reihe von Geräten auch innerhalb einer Fensterklasse. Testen Sie beispielsweise bei 360 dp, um kleinere Bildschirme zu berücksichtigen, und passen Sie die App an alle Fensterklassengrößen an.
3. Durch Android-Systemleisten ersetzt
Die Android-System-UI kann je nach Gerät und Einstellungen des Nutzers variieren. Wenn Sie jedoch eine Standard-System-UI anzeigen, können Sie Ihren Designs mehr Kontext geben. Platzieren Sie die Benachrichtigungsleiste oben und entweder eine Navigationsleiste für die Bedienung über Gesten oder eine Navigationsleiste mit drei Schaltflächen unten.
Weitere Informationen finden Sie unter Android-Systemleisten.
4. Je nach Navigation
Ersetzen Sie die Tab-Leiste (untere Navigation) durch die Navigationsleiste.
Sehen Sie sich Ihre Flusskarte noch einmal an. Verwendet Ihre iOS-App ein Dreistrich-Menü? (Gemäß den HIG-Best Practices sollte dieses Muster nicht verwendet werden.) Beschränken Sie sich auf maximal fünf Elemente, verwenden Sie die untere Navigationsleiste für die primäre Navigation und überlegen Sie, ob sekundäre Elemente wie Profil oder Einstellungen in die obere App-Leiste verschoben werden können. Vielleicht haben Sie auch eine primäre Aktion, die in einen schwebenden Aktionsbutton umgewandelt werden kann.
Die primäre Navigation sollte immer in übergeordneten Ansichten (der obersten Ebene für einen Abschnitt in Ihrer Flusskarte) vorhanden sein. Untergeordnete Ansichten (alles unter der Elternansicht) können die primäre Navigation enthalten, wenn sie weiter oben in der Navigationshierarchie stehen und kein modales Dialogfeld sind.
Aktualisieren Sie die untere Navigationsleiste mit den entsprechenden Symbolen und Labels. Auf beiden Plattformen wird eine seitliche Bewegung zwischen Navigationszielen vermieden.
5. Navigationsleisten zu oberen App-Leisten
Gehen Sie die einzelnen Abschnitte durch. Beginnen Sie mit den übergeordneten Ansichten und fahren Sie dann mit den untergeordneten Ansichten fort. Die App-Leiste besteht aus der linken Seite (Navigation und Titel) und der rechten Seite (Aktionselemente).
Wenn Ihre App anstelle einer unteren Navigationsleiste ein Navigations-Drawer-Menü verwendet, wird in allen übergeordneten Ansichten ein Drawer-Symbol angezeigt.
Wenn Ihre App keine Leiste oder Schublade hat, wird in übergeordneten Ansichten kein primäres Navigationssymbol angezeigt.
Der Titel ist in der App-Leiste für Android standardmäßig linksbündig.
In untergeordneten Ansichten wird an der Stelle des Navigationssymbols ein Aufwärtspfeil angezeigt. Nicht zu verwechseln mit „Zurück“. Mit dem Aufwärtspfeil wird der Nutzer in der Navigationshierarchie einer App in einem Nutzerfluss eine Ebene nach oben verschoben. Die Zurück- oder Wischgeste am Rand gehört zur Systemnavigation und verschiebt den Nutzer zurück oder sogar aus der App heraus.
Was ist mit modalen Ansichten? Bei Vollbildmodulen (z. B. Videoplayern und Bildern) ähnelt dies der App-Leiste der Kinderansicht. Das Navigationssymbol sollte jedoch in „Schließen“ geändert werden, um das Modul zu schließen.
6. Etwas mehr Modalität
Beginnen Sie mit großen Modalansichten, die sich am besten eignen, um die Aufmerksamkeit des Nutzers auf eine Aufgabe zu lenken. Unter iOS werden sie oft als Sheets angezeigt, die der Nutzer nach unten wischen kann.
Schließen Sie den Austausch von App-Leisten ab. Bei iOS-Sheet-Modalen werden der obere Sheet-Bereich und der Hintergrund-Peek durch eine Vollbilddialog-App-Leiste ersetzt.
Bonus: Prüfen Sie, ob sich einige Ihrer iOS-Modal-Sheets in Bottom Sheets umwandeln lassen.
Die Blätter „Aktion“ und „Aktivität“ wurden in Bottom Sheets umgewandelt. Auch die Freigabe-Sheets können jetzt übersetzt werden.
Verwenden Sie für Benachrichtigungen Systemdialogfelder. Wenn Sie sie für wichtige Informationen verwenden, die der Nutzer auf irgendeine Weise bestätigen muss, ersetzen Sie sie durch Systemdialogfelder. Denken Sie daran, an dieser Stelle auch alle Eingaben und Auswahlen zu tauschen.
7. Geschwisterinhalte
Tabs, ViewPager oder wischbare Tabs. Wenn Sie segmentierte Steuerelemente unter iOS verwenden, werden diese unter Android in Tabs umgewandelt. Beide dienen dazu, ähnliche, aber nicht identische Informationen zu filtern. Android-Tabs sind in der Regel an die App-Leiste angehängt und bieten den zusätzlichen Vorteil, dass Nutzer zwischen Inhalten wischen können.
8. Inhalte und Steuerelemente
Je nachdem, wie Sie Einschränkungen oder das Verhalten bei der Größenanpassung eingerichtet haben, wurde der Großteil Ihrer Inhalte möglicherweise bereits in der Größe angepasst. Nehmen Sie sich aber die Zeit, die Ränder festzulegen. 16 dp ist ein guter Standard für kleine Bildschirme.
Das Grundlinienraster basiert auf einem 8‑dp-Raster für Komponenten und einem 4‑dp-Raster für Schrift und Symbole. Ein 8-Punkt-Raster funktioniert gut auf iOS. Es kann also als Ausgangspunkt für beide Plattformen dienen.
Steuerelemente Ersetzen Sie diese Schalter durch Android-Schalter. Verwenden Sie Android-Kästchen und ‑Optionsfelder. Android bietet all diese Funktionen.
Wenn Sie Formulare haben, tauschen Sie die iOS-Textfelder gegen Android-Textfelder aus. Das Material ist mit Optionen wie „Umriss“ oder „Gefüllt“ verfügbar. Wählen Sie die Option aus, die am besten zu Ihrem Branding passt.
Material Lists unterscheiden sich in einigen Punkten von iOS-Tabellenzellen:
- Trennlinien werden nur sparsam eingesetzt.
- Auf Listen werden keine Indikatoren verwendet, um visuelle Störungen zu minimieren.
- Die Abmessungen entsprechen dem 8‑dp-Raster.
9. Stil
Farbe:Die UI-Farbe besteht aus Akzent-, semantischen und Oberflächenfarben, die in einem Farbschema zusammengestellt werden. Diese Farben werden entsprechend ihrer Rolle auf die Benutzeroberfläche angewendet.
Typ:Wenn Sie eine Systemschriftart verwenden, ersetzen Sie „San Francisco“. Roboto ist die Standardsystemschriftart für Android. Wir empfehlen Ihnen jedoch, den einzigartigen Stil Ihrer Marke durch das Design und herunterladbare Google-Schriftarten auszudrücken.
Symbole:Das gilt auch hier. Wenn Sie SF-Symbole verwenden, prüfen Sie noch einmal, ob alle in Material Icons oder Symbole konvertiert wurden. Wählen Sie die Variante aus, die am besten zu Ihrer Marke passt. Wussten Sie, dass Sie Material-Symbole auf jeder Plattform verwenden können?
Bewegungsmodus:Android und iOS haben unterschiedliche Motion-Designs, die für jede Plattform berücksichtigt werden sollten. Materialbewegungen sind informativ, fokussiert und werden ausgedrückt. Der Ripple-Effekt ist eine besondere Hervorhebung, die in Komponenten verwendet wird, um taktiles Feedback zu geben. Das Motion-System ist eine Reihe von Übergangsmustern, mit denen Sie Container-Transformationen, Animationen für gemeinsame Achsen, Durchblenden und Einblenden nutzen können. Überlegen Sie, ob Elemente in Ihrem Design persistente Container haben, wie die Beziehung zwischen den Elementen ist und wie sie ein- oder ausgeblendet werden müssen.
10. Aufräumen
Wenn Sie einen Prototyp übersetzen, ist dies ein guter Zeitpunkt, um die Verkabelung zu ändern. Gehen Sie zurück zur primären Navigation. Denken Sie dabei an den Unterschied zwischen „Aufwärts“ und „Zurück“ und wählen Sie Seitenübergänge aus, die für Android geeignet sind (siehe Schritt 9).
Sie sollten einen voll funktionsfähigen Prototyp haben. Da Sie die Größe angepasst haben, ist er bereit für die Übergabe.
Leitfaden zu Stil und Komponenten
Wenn Sie bereits ein Designsystem oder einen Styleguide haben, können Sie Ihre eigenen grundlegenden Stile (Farbe, Schriftart, Symbole, Form) zusammen mit Material Design verwenden, genau wie Sie sie zusammen mit iOS-Richtlinien verwenden würden. Mit Material Theming können Sie Material-Komponenten mit den Farben, Schriftarten und Formen Ihrer Marke anpassen.
Plattformspezifische Richtlinien sind bei Produkten, die auf mehreren Plattformen verfügbar sind, nicht ungewöhnlich und können Ihr eigenes Designsystem nutzerorientierter machen.
Wenn Sie ohne ein Designsystem arbeiten, sollten Sie bedenken, dass nicht jede App oder jedes Produkt ein vollständig benutzerdefiniertes Designsystem benötigt. Erstellen Sie einen Styleguide auf einer Seite. Ein Styleguide ist ein Dokument, in dem die grundlegenden Spezifikationen für Designs beschrieben werden. Markenrichtlinien enthalten oft einen Styleguide.
Sie können diese für Android kopieren und als Quelle für das Aktualisieren von Stilen (oder Symbolen, Komponenten oder einer Bibliothek) verwenden.