Plattformübergreifende mobile Anwendung: Navigation

    Beim Schreiben einer mobilen Version des Organizers in QML stellte sich mir die Frage, ob es möglich ist, ein solches konsistentes Navigationsmodell zu erstellen, das sich mit minimalen Änderungen an beide Hauptplattformen anpassen lässt. Das heißt, was HIG entsprechen würde, war den Benutzern vertraut und verursachte keine Ablehnung, was viele plattformübergreifende Programme betrifft. Es wurde eine Analyse der grundlegenden Techniken zum Organisieren von Bildschirmen auf beiden Plattformen durchgeführt, auf deren Grundlage ein Modell erschien, das ich teilen möchte.

    Tabs


    iOS : Die darunter befindliche Registerkartenleiste ermöglicht es Ihnen, zu jedem der vier bis fünf Hauptbildschirme der obersten Ebene zu wechseln. Jeder Reiter ist durch eine Signaturzeichnung gekennzeichnet. Der Standard und häufigste Ansatz auf dieser Plattform.

    Android : Es gibt kein vollwertiges Analogon zu iOS-ähnlichen Registerkarten. Außerdem gibt es einen expliziten Hinweis darauf, dass die Navigationselemente nicht darunter angeordnet werden können, da der Ort dort für die Aktionsleiste reserviert ist ( geteilte Aktionsleiste ). Auf der anderen Seite gibt es immer noch Standard-Registerkarten: Sie befinden sich ausschließlich oben und können entweder nur ein Bild oder nur eine Inschrift in Großbuchstaben enthalten. Muss eine Navigation auf einer niedrigeren Ebene darstellen, die dem Modusschalter ( segmentierte Steuerung) entspricht) von iOS (mit ähnlichen Empfehlungen für Standort, Design und Funktionen).


    Fazit: Sie sollten das direkte Übertragen von Tabs von iOS vermeiden, andererseits können Tabs / Schalter für die Navigation auf niedrigeren Ebenen auf allen Plattformen verwendet werden. Aus Konsistenzgründen sind jedoch geringfügige Änderungen erforderlich.

    Zurück-Taste


    Trotz der Ähnlichkeit von Position und Bezeichnung ist der Zurück-Button in iOS dem Hardware-Zurück-Button in Android näher als dem Software- Auf- Button . Im Gegensatz zu iOS sollte die Schaltfläche nicht explizit signiert werden. Wenn ein Titel vorhanden ist, wird er nach links verschoben.


    Navigationsschublade (Hamburger Menü)


    iOS : Nicht-Standard, aber nicht weniger „natives“ Oberflächenelement. Es ist eine seitliche Menüleiste, die links wie unter dem Anwendungsbildschirm angezeigt wird. Manchmal gibt es Implementierungen, die dieses Element oben auf dem Bildschirm anzeigen. Wie auch immer, das Symbol ≡ (Unicode-Zeichen U + 2261 Identisch mit) in der oberen linken Ecke wird als Eröffnungssymbol verwendet. Eine weitere gebräuchliche Methode zum Anrufen ist das Streichen nach rechts. Das Element ermöglicht es Ihnen, vertikalen Platz zu sparen, enthält viel mehr Punkte als die übliche Tab-Leiste, eine zusätzliche Berührung zum Aufrufen des Menüs wird jedoch zu einer Zahlung dafür.


    Mit dem Aufkommen von iOS 7 wurde die obere Statusleiste nicht mehr auf einer separaten schwarzen Leiste, sondern direkt auf der Anwendung ohne Hintergrund angezeigt. Aus diesem Grund müssen Designer einige Tricks anwenden , um einen scharfen Übergang zu vermeiden.

    Android : Das Konzept wird durch ein Standardbibliothekselement umgesetzt , es ist logisch, dass das gleiche Anrufsymbol verwendet wird. Auf jedem im Menü angezeigten Bildschirm sollte ein Symbol angezeigt werden. Ein Anruf per Wisch kann jedoch von jedem Bildschirm aus erfolgen. Der Unterschied besteht darin, dass sich das Pulldown-Menü immer oben auf dem Hauptbildschirm befindet, während sich die obere Aktionsleiste nicht überlappen sollte.

    Fazit: Das Element ist sehr vielseitig und eignet sich für die Navigation auf oberster Ebene. Aufgrund der Funktionen von iOS 7 ist möglicherweise eine Anpassung erforderlich.

    PS Ein hervorragender Artikel mit einer Analyse der wichtigsten Navigationsfehler in Android.

    Jetzt auch beliebt: