Wer, wohin und warum gehen sie: Trends im Mobile Design 2016



    In der Welt der mobilen Entwicklung werden Ansätze zur Erstellung von Schnittstellen besonders häufig geändert und neu überdacht. Dies geschieht nicht nur aufgrund der neuesten Modetrends, sondern auch aus rein praktischen Gründen sowie aufgrund der Entwicklung der Technologien selbst. Wir haben uns entschlossen, die bemerkenswertesten aktuellen Trends im Bereich Mobile Design zu analysieren und am Ende des Artikels eine Liste nützlicher Tools und Blogs für Interface-Designer zusammenzustellen.

    Mehrschichtige Schnittstellen


    Der Hauptunterschied zwischen Computern und Mobilgeräten besteht in der physischen Größe des Displays. Die lange Zeit unzureichende Bildschirmfläche war einer der Gründe, warum die Schnittstellen mobiler Anwendungen im Vergleich zu Programmen für PCs äußerst einfach (wenn nicht primitiv) blieben.

    Bis 2016 wird dieser Unterschied teilweise durch die Verwendung von mehrschichtigen Schnittstellen ausgeglichen, die in ihrem Gerät einem Software-Stapel oder einem Stapel Papier ähneln (denen die Analogie näher kommt). Der Kern dieses Ansatzes besteht darin, dem Benutzer zu einem bestimmten Zeitpunkt ein Funktionsfenster zur Verfügung zu stellen und gleichzeitig einen einfachen und schnellen Zugriff auf alle anderen Fenster zu gewährleisten.

    Beim Aufbau von mehrschichtigen Schnittstellen werden häufig verwendet:

    • Tab - Leiste . Wie in Browsern für PCs oder andere vertraute Anwendungen besteht der Zweck dieses Elements darin, eine große Menge an Informationen in ein einziges Schnittstellenelement (Registerkarte) zu „packen“. Bei der Verwendung von Registerkarten ist ein gutes Prinzip „eine Registerkarte = 1 Fenster“.

    • Dropdown-Listen . Sie werden verwendet, um das Menü zu implementieren. Die Listen sind normalerweise groß und füllen den Bildschirm fast aus. Sie enthalten eine Reihe von Optionen, die derzeit erforderlich sind und die weiter in Kategorien unterteilt werden können, die verschachtelte Dropdown-Listen darstellen, eine Art Kaskadenansatz.

    • Feste Menüs . Sätze der am häufigsten verwendeten und notwendigen Funktionen. Der Zweck eines solchen Menüs besteht darin, immer auf dem Bildschirm sichtbar zu bleiben und dem Benutzer den schnellsten Zugriff auf die wichtigsten Aktionen zu gewährleisten. Das Verschieben eines solchen Menüs von den üblichen Orten ist höchst unerwünscht.

    • Modale Fenster . Wie beim Desktop-Design werden sie verwendet, um alle anderen Fenster zu überlappen. Aus diesem Grund wird die Aufmerksamkeit aller Benutzer auf ihre Inhalte gelenkt.

    Um die visuellen Unterschiede zwischen den Ebenen der Benutzeroberfläche zu verbessern, werden häufig Verdunkelungseffekte verwendet - nur die aktive Ebene bleibt zu 100% sichtbar, und der Rest wird durch das Auferlegen einer durchscheinenden Maske verborgen.





    Kartenlayout


    Dieser Trend ist vor relativ kurzer Zeit vom Webdesign (wo er populär wurde, insbesondere Facebook und Twitter) abgewandert, hat aber bereits viele Unterstützer gewonnen.

    Die Organisation der Benutzeroberfläche in Form von Blöcken fester Größe (meist rechteckig oder quadratisch) hat ihre Vorteile - dieser Ansatz erleichtert die Anpassung des Designs an unterschiedliche Bildschirmauflösungen. Bei der Umstrukturierung der Benutzeroberfläche auf eine andere Auflösung müssen die Blöcke basierend auf dem verfügbaren Arbeitsbereich sortiert und in der Größe geändert werden. Eine ungefähre Vorstellung davon, wie dies in der Praxis funktioniert, erhalten Sie, indem Sie einfach das Windows Explorer-Fenster öffnen und sehen, wie der Inhalt wiederhergestellt wird, wenn die Fenstergröße geändert wird.



    Raster ist der Standard und einfachste Weg, um Kartenentwurfsblöcke zu organisieren. Mit der Organisation von Blöcken ist der Hauptraum für Experimente verbunden. Sie können beispielsweise ein einfaches geschweiftes Raster ersetzen oder unterschiedliche Spaltenlängen und -breiten verwenden oder den Abstand zwischen Elementen dynamisch ändern. Es gibt viele Möglichkeiten, die Anwendung einzigartig zu machen.

    Was den Inhalt selbst betrifft, kombiniert die Kartendesigneinheit normalerweise die folgenden Elemente:

    • Überschrift.
    • Hintergrundbild der Karte.
    • Steuertasten.
    • Textinhalt (gekürzt, erweiterbar).
    • Sekundärtext (Datum, Autor, Inhaltsgröße usw.).

    Heutzutage wird dieser Ansatz in einer Vielzahl von Anwendungen verwendet, die mit vielen ähnlichen Datentypen arbeiten. Oft werden sogar Menüs auf Basis von Kartenblöcken implementiert.

    Design für große Geräte


    Vor kurzem haben Hersteller viele mobile Geräte mit ziemlich großen Bildschirmen herausgebracht. Zum Beispiel beträgt die Diagonale des iPhone 6 Plus 5,5 Zoll, was für ein Smartphone, gelinde gesagt, sehr viel ist.

    Ein wesentliches Problem bei solchen Geräten ist die Unannehmlichkeit der Einhandbedienung. Während bei kleineren Smartphones der größte Teil des Bildschirms für den Daumen leicht erreichbar ist, kann bei großen Bildschirmen der komfortable Bereich je nach Hand des Benutzers nur etwa 1/4 des Bereichs betragen. Und wenn die Anwendung ein wichtiges Oberflächenelement anzeigt, z. B. in der Mitte oder oben auf dem Bildschirm, ist dies bei Verwendung von Geräten mit einer großen Diagonale nicht sehr praktisch.

    Daher versuchen Schnittstellenentwickler, solche Situationen zu berücksichtigen. Beispielsweise platzieren sie Steuerelemente nur am unteren Bildschirmrand oder verwenden ein dichteres Layout, sodass Benutzer weniger dehnen müssen, wenn die Benutzeroberfläche skaliert wird.

    Vergleich der Displaygröße der IPhone-Serie:



    Sinnvolle Animation


    Es geht nicht nur und nicht so sehr darum, die Benutzeroberfläche zu animieren, um die Attraktivität zu erhöhen, sondern um die Benutzerfreundlichkeit zu verbessern und Interaktivität hinzuzufügen.

    Verschiedene Elementtransformationen, Hervorhebungen, reibungslose Übergänge, Effekte des Erhöhens, Verschiebens und Versteckens - all dies bei ordnungsgemäßer und mäßiger Verwendung betont Benutzeraktionen und macht die Benutzeroberfläche reaktionsschneller und einprägsamer. Viele erinnern sich wahrscheinlich daran, dass Sie in guten Videospielen diese oder jene Aktion direkt „fühlen“ können - es sind hochwertige und relevante Animationseffekte, die eine sehr reichhaltige Benutzererfahrung bilden können.

    Vergessen Sie jedoch nicht die möglichen „Fallstricke“ - egal wie hochwertig und gut entwickelt die Animation selbst ist, alle visuell wahrnehmbaren „Bremsen“ (verursacht durch schlechte Codeoptimierung oder schwache „Hardware“) negieren die positiven Effekte. Um solche Probleme zu vermeiden, ist es sinnvoll, dem Benutzer die Möglichkeit zu geben, Sonderangebote zu deaktivieren. Effekte.

    Gestenentwicklung


    Die Verwendung von Gesten beim Arbeiten mit Touchscreens ist eine der natürlichsten Navigationsmethoden. Jetzt besteht die Tendenz, Gesten zu komplizieren, wenn anstelle der einfachsten Bewegungen detaillierte Kombinationen aufgereiht werden. Durchdacht und verfeinert, können sie die Interaktion mit der Anwendung erheblich vereinfachen und die Verwaltungsfunktionen im Allgemeinen erweitern.

    Gleichzeitig lohnt es sich, beim Experimentieren mit Bewegungen an die Hauptsache zu denken - neue Gesten einzuführen ist nur dann gerechtfertigt, wenn sie eine der vorhandenen Interaktionsformen verbessern, vereinfachen oder natürlicher machen. Andernfalls kann es zu Unzufriedenheit der Benutzer kommen, da Gesten, obwohl sie einen Komfort bieten können, der mit herkömmlichen Schnittstellen nicht erreicht werden kann, schwerer zu beherrschen sind. In Anbetracht dessen wird empfohlen, „Unternehmensgesten“ auf der Grundlage von Bewegungen zu erstellen, die dem Benutzer bereits bekannt sind.

    Häufige Gesten:



    Neue Tricks in der Navigation


    Modulares, Parallaxen- und verstecktes Scrollen sowie endloses Scrollen werden immer beliebter. Bis vor kurzem waren diese Navigationstypen im mobilen Design relativ selten, obwohl sie im Vergleich zum klassischen horizontalen und vertikalen Scrollen günstig sind.

    • Durch modulares Scrollen kann der Benutzer innerhalb eines Abschnitts der Benutzeroberfläche navigieren, ohne dass dies Auswirkungen auf andere Elemente hat. Diese Art des Bildlaufs eignet sich gut für Anwendungen, die mit einer großen Menge an Inhalten arbeiten, die in mehreren unabhängigen Bereichen des Bildschirms angezeigt werden.

    • Parallaxe ist ein bekannter Effekt in der Computergrafik. Damit können Sie die Aufmerksamkeit des Benutzers auf bestimmte Elemente lenken und die Bildlaufanimation als Animation verwenden.

    • Verstecktes Scrollen ist am unauffälligsten und spart Platz auf dem Bildschirm. Scroll-Elemente werden erst während der Ausführung angezeigt und verschwinden nach einer Weile wieder. Geeignet zum Scrollen in Anwendungen, in denen große Inhalte angezeigt werden - Folien, Fotos usw.

    • Endloses Scrollen ist weithin bekannt für seine Verwendung in sozialen Netzwerken. Wird häufig verwendet, wenn die Anwendung eine große Menge an Informationen enthält, sodass Sie die Aufmerksamkeit des Benutzers für lange Zeit behalten und die Interaktionstiefe erhöhen können.

    Farbe und Typografie


    Die Mode zum „Kolorieren von Anwendungen“ ist ein Produkt des Trends des flachen Designs. Im flachen Design wird am häufigsten Weiß als Hintergrundfarbe verwendet, aber heutzutage versuchen Designer zunehmend, sich mit weniger vorhersehbaren Farben hervorzuheben.

    Ein interessanter praktischer Punkt in Bezug auf das Farbdesign: Laut den Ergebnissen der von der Greenbot-Ressource durchgeführten Tests wird bei Verwendung von Schwarz in der Benutzeroberfläche (# 000000) bei Geräten mit AMOLED-Displays eine erhebliche Batterieeinsparung erzielt. Bei gewöhnlichen LCD-Anzeigen wird diese Abhängigkeit jedoch nicht beobachtet.

    Der typografische Trend kann kaum überschätzt werden. Bei beengten Platzverhältnissen hilft die Ausrichtung und Formatierung von Text und einzelnen Oberflächenelementen dabei, maximale Informationen in einer gut strukturierten Form zu übertragen. Es überrascht nicht, dass Designer jetzt versuchen, sich auf typografische Satztechniken zu konzentrieren.

    Typografie mit Schwerpunkt Farben:


    Merkmale und Muster moderner Trends


    Im Allgemeinen sind die Designtrends im Jahr 2016 aktualisierte und optimierte Versionen bereits bestehender Trends und Ansätze in anderen Segmenten. Gleichzeitig ist die Tendenz, aus dem Bereich des Webdesigns zu erben, deutlich zu erkennen - die Ansätze sind sowohl in Desktop- als auch in mobilen Versionen von Websites entlehnt.

    Je nach dem Grad der Auswirkung auf das Ergebnis (Erscheinungsbild, Verwendbarkeit der Anwendung) können Designtrends bedingte Trends für Schlüssel und Sekundär sein. Die ersten stehen immer im Vordergrund und bleiben im Fokus der Aufmerksamkeit des Benutzers. Und sekundäre Striche sind neben dem Gesamtbild eher getrennte Striche. Benutzer geben ihnen mit geringerer Wahrscheinlichkeit eine bewusste Bewertung, aber Anwendungsentwickler sollten die sekundäre Funktionalität nicht unterschätzen, da die Liebe zum Detail eine der Komponenten eines guten Designs ist.

    Erwähnenswert ist außerdem der Übergang von Flat Design zu Material Design, der sich in einen anderen Designtrend verwandelt hat: Der erste ist äußerst minimalistisch und basiert auf mehreren Grundfarben, und der zweite ist immer noch dieselbe Flat, verwendet jedoch Animationen, Schatten, Übergänge und andere Effekte, deren Kombination gibt es mehr Ähnlichkeit mit klassischen Ansätzen (insbesondere Skeuomorphismus) Flat Design hat sich seit 2010 verbreitet, als Microsoft begann, das sogenannte Metro-Design in seine Produkte einzuführen. Dann war es ein neuer Trend, ein bewusst vereinfachtes und funktionales Bild im Vergleich zu skeuomorphen und überladenen Grafikeffekt-Interfaces. Im Jahr 2014 ging Google noch einen Schritt weiter und führte eine Reihe von Prinzipien in Flat Design ein, dank derer es sich in Material Design "verwandelte". Grundsätzlich betrafen die Änderungen nicht die grafische Komponente, sondern die Konstruktion und Interaktion der Elemente, deren Verhalten. Heute verlagert Material Flat allgegenwärtig vom Podium des „fortschrittlichsten“ Designs im mobilen Segment.

    Eine weitere merkwürdige Tendenz, die sich fast zu einem Muss entwickelt hat, ist das Layout im Stil von Pixel Perfect, wenn das Seitenlayout auf eine pixelgenaue Auflösung eingestellt wird. Dies vermeidet einerseits Probleme beim Skalieren und automatischen Anpassen von Layouts an die vielen Auflösungen, die im mobilen Segment auftreten. Dieser Ansatz weist jedoch erhebliche Nachteile auf: Schwierigkeiten bei der Unterstützung, bei Änderungen usw.

    Trends bei realen Anwendungen


    Google spielt Musik


    Es ist schwer vorstellbar, dass Google-Anwendungen nicht die aktuellen Trends im mobilen Design widerspiegeln, da Google selbst häufig der Gründer ist.

    In der Anwendung zum Hören und Herunterladen von Musik verwendeten die Designer des Unternehmens sowohl das Kartendesign als auch eine mehrschichtige Benutzeroberfläche. Modulares Scrollen ist ebenfalls vorhanden.

    Karten in der Schnittstelle:


    Das modale Fenster und das feste Menü der Multilayer-Oberfläche:


    Streifen


    Eine der Apps wurde 2016 mit dem Apple Design Award ausgezeichnet. Streaks hat aufgrund der angemessenen Anwendung moderner Designansätze in vielerlei Hinsicht die Aufmerksamkeit der Benutzer und hohe Bewertungen auf sich gezogen. Strenger Minimalismus und Betonung des Farbdesigns werden hier kombiniert. Infolgedessen erwies sich die Benutzeroberfläche für die meisten Benutzer als sehr einfach und intuitiv.

    Farbschema und Design der Bedienelemente:



    Alles in einer Geste


    Diese Android-Anwendung zeichnet sich durch die Implementierung neuer Produkte im Bereich der Gestensteuerung aus. Als Dienstprogramm, das die Funktionalität des Geräts erweitert, zeigt es die Vorteile der "manuellen" Steuerung.


    Nützliches Toolkit


    Materialdesignspezifikationen von Google:
    " https://material.google.com/

    Apple Designinformationen:
    " https://developer.apple.com/design/

    Eine Auswahl von Diensten zum Erstellen von Prototypen:
    " https://spark.ru / startup / componentix / blog / 4781/20-instrumentov-dlya-dizajnera-mobilnih-prilozhenij

    Blogs für UX-Designer:
    " https://www.smashingmagazine.com/category/uxdesign/
    " http://theuxintern.com/
    " Http://uxmyths.com/
    " http://boxesandarrows.com/
    " http://usabilitygeek.com/
    " http://uxmovement.com/

    Jetzt auch beliebt: