Inhalt
- 01. Optimieren Sie die Fotografie für HD-Bildschirme
- 02. Verwenden Sie die Animation geschickt
- 03. Alles auf das Wesentliche zurückführen
- 04. Machen Sie alle Schnittstellenelemente konsistent
- 05. Entwerfen Sie Schaltflächen mit Blick auf Berührungen
- 06. Hierarchie mit Größe und Farbe erstellen
App-Design ist eine Übung in brutal einfachem, benutzerzentriertem Design. Der Sweet Spot ist eine ebenso schöne wie funktionale Benutzeroberfläche. Es sollte intuitiv zu navigieren, schnell zu laden sein, aber auch kleine Details enthalten, die es einzigartig und unvergesslich machen.
Dank der flachen Designrevolution und der Verbreitung der reduzierten Ästhetik, die von Apple und Google bevorzugt wird, laufen viele Apps Gefahr, ähnlich auszusehen.
Bis zu einem gewissen Grad ist dies eine positive Sache, da Benutzer instinktiv wissen, wie bestimmte Funktionen funktionieren. Aber es setzt noch mehr Druck auf visuelle Elemente wie Illustration oder Fotografie, um das Erscheinungsbild der App zu definieren.
Lesen Sie weiter, um sechs Expertentipps zu erhalten, wie Sie Bilder im App-Design effektiver einsetzen können ...
01. Optimieren Sie die Fotografie für HD-Bildschirme
Hochauflösende Bildschirme sind heutzutage bei den meisten Smartphones die Norm. Dadurch wird ein Qualitätsmaßstab für die von Ihnen ausgewählten Bilder festgelegt - insbesondere, wenn Sie Fotografie verwenden. Für das iPhone X arbeiten Sie mit einer riesigen Auflösung von 1125 x 2436 Pixel.
Pixellation und Fuzziness sehen unprofessionell aus, aber zum Glück sind diese leicht zu vermeiden, wenn Sie einige Assets von anständiger Qualität beschaffen. Denken Sie jedoch immer an die Ladezeit - die Leute erwarten, dass die Dinge in wenigen Sekunden geladen werden - übertreiben Sie es also nicht. Lass jedes Bild zählen.
Natürlich ist es manchmal unvermeidlich, dass bestimmte Funktionen länger dauern. Hier müssen Sie etwas kreativer denken, um das Warten für den Benutzer angenehmer zu gestalten. Ein Ladespinner oder ein Fortschrittsbalken sind besser als ein leerer oder statischer Bildschirm. Eine weitere Option ist ein "Skelettbildschirm", auf dem Informationen einzeln geladen werden.
02. Verwenden Sie die Animation geschickt
Selbst der subtilste Hinweis auf Animation kann Ihrer App Charme und Persönlichkeit verleihen, egal ob es sich um einen einfachen funktionalen Übergang handelt oder um etwas Charakter- oder Story-orientiertes, das den Benutzer überraschen und begeistern kann.
Unter funktionalen Gesichtspunkten kann die Animation den Nutzern helfen, eine Statusänderung in der App zu verstehen - was sie ausgelöst hat, welche Auswirkungen sie hatte und wie sie bei Bedarf erneut initiiert werden kann. Es kann auch die Aufmerksamkeit eines Benutzers auf einen bestimmten Punkt des Bildschirms lenken.
Bestimmte funktionale Animationen haben eingebaute Assoziationen. Wenn beispielsweise ein Element verschwindet, bedeutet dies, dass es vollständig entfernt wurde. Ein Übergang, bei dem es zur Seite rutscht, bedeutet, dass es einfach versteckt ist und später wieder verwendet werden kann.
Der zweite Typ ist als "entzückende Animation" bekannt. Dies verleiht Ihrer App Wärme und macht sie menschlicher. Es kann alles umfassen, von einer spielerischen Behandlung eines Ladebildschirms oder eines Fortschrittsbalkens bis hin zu Tutorials zu App-Funktionen.
03. Alles auf das Wesentliche zurückführen
Eine der universellsten Regeln für das App-Design besteht darin, die Unordnung zu verringern. Sie arbeiten mit einem relativ kleinen Bildschirm. Je mehr Schaltflächen, Optionen und Funktionen gleichzeitig auf dem Bildschirm angezeigt werden, desto weniger intuitiv ist das Erlebnis.
Halten Sie die Elemente der Benutzeroberfläche auf ein Minimum und präsentieren Sie dem Benutzer nur das, was er wissen muss. Die Benutzer möchten Aufgaben so schnell und effizient wie möglich ausführen, idealerweise in wenigen Schritten, ohne durch endlose Bildschirme zu scrollen oder viele Daten in komplexe Formulare einzugeben.
04. Machen Sie alle Schnittstellenelemente konsistent
Konsistenz ist auch entscheidend, sowohl in Bezug auf die Grafik als auch in Bezug auf die Funktionalität. Ein unverwechselbares, kohärentes Erscheinungsbild - auch wenn die Elemente, die es definieren, relativ subtil sind - hilft Benutzern, sich in der App vertraut und wohl zu fühlen, und macht letztendlich die Navigation einfacher und intuitiver.
Aus visueller Sicht umfasst dies Strukturelemente wie Farben, Schriften, Schaltflächen und Beschriftungen. Aber auch die Verwendung von Illustration oder Fotografie: der gewählte Stil, seine Rolle in der Benutzeroberfläche und wie häufig er erscheint.
Auch die externe Konsistenz ist wichtig. Wenn möglich, sollte eine App das Erscheinungsbild und die Funktionalität der Website einer Marke ergänzen - wenn auch vereinfacht. Gemeinsame Eigenschaften tragen nicht nur zur Vermeidung von Verwirrung bei, sondern fördern auch die Markenbekanntheit.
05. Entwerfen Sie Schaltflächen mit Blick auf Berührungen
Eine weitere goldene Regel beim App-Design ist das Design für Touchscreens und insbesondere für Fingerspitzen. Laut den Richtlinien von Apple sollten Schaltflächen mindestens 44 x 44 Pixel groß sein. Behandeln Sie dies jedoch mindestens. Wenn ein Puffer mit einigen zusätzlichen Pixeln die Frustration verhindert, auf das Falsche zu tippen, lohnt es sich, Platz zu schaffen.
Beachten Sie auch den Abstand zwischen Oberflächenelementen, insbesondere Schaltflächen und anderen funktionalen, interaktiven Teilen des Designs. Selbst wenn Ihre Schaltflächen eine anständige Größe haben, kann ein versehentliches Tippen wahrscheinlicher werden, wenn sie zu nahe beieinander liegen. Dies kann Benutzer stören und dazu führen, dass sie die App mit größerer Wahrscheinlichkeit verlassen.
Unterschiedliche Bildschirmgrößen spielen ebenfalls eine Rolle, insbesondere wenn High-End-Smartphones größer werden. Mit einer Hand gehalten, sind bestimmte Bereiche eines größeren Bildschirms schwieriger zu erreichen als andere und erfordern möglicherweise Dehnung oder sogar einen neu eingestellten Griff.
Häufige Interaktionen und wichtige Navigationselemente sollten bequem zu erreichen sein, während riskantere Optionen wie Löschen und Löschen - die Benutzer nicht versehentlich auslösen möchten - sinnvoller sind, wenn sie leicht außerhalb der Reichweite platziert werden.
06. Hierarchie mit Größe und Farbe erstellen
Abgesehen von Spielen handelt es sich bei den meisten mobilen Apps im Wesentlichen um Listen der einen oder anderen Form - Listen mit Optionen; Funktionen; Dinge zu tun, zu sehen oder zu spielen. Als App-Designer besteht ein Teil Ihrer Rolle darin, dieses Framework interessanter und einfacher zu navigieren.
Selbst in einer einfachen, reduzierten Benutzeroberfläche mit minimalen Designelementen ist es wichtig, eine starke Hierarchie zu erstellen, um Benutzer zu den wichtigsten Informationen zu führen und Handlungsaufforderungen so klar wie möglich zu gestalten.
Größe ist eine Lösung: Das größte Element auf der Seite sollte normalerweise auch das wichtigste sein. Farbe kann aber auch sehr effektiv sein. Wenn eine Liste von Menüoptionen angezeigt wird, die von Schwarz bis Hellgrau eingestuft sind, gehen die Benutzer davon aus, dass die dunklere Farbe wichtiger ist, und tendieren dazu.
Es sind auch bestimmte Assoziationen zu beachten - insbesondere die Farben Rot und Grün. Eine rote Schaltfläche "Bestätigen" neben einer Schaltfläche "Abbrechen" in Grün verwirrt die Erwartungen der Benutzer und verwirrt sie. Gemäß den Richtlinien für Barrierefreiheit von W3C sollte Farbe jedoch niemals der einzige Indikator sein: Textbeschriftungen oder Symbole wie Häkchen oder Kreuze tragen dazu bei, Ihr Design zugänglich zu machen.
