Die Geheimnisse eines effektiven kartenbasierten Designs
Sie möchten also mit einer kartenähnlichen Oberfläche in den Trend kommen? Das ist wahrscheinlich eine großartige Idee; Karten sind eine beliebte und benutzerfreundliche Option für alle Arten von digitalem Design bei unterschiedlichen Gerätegrößen.
Der Schlüssel zu einem Kartendesign besteht darin, etwas zu erstellen, auf das Nutzer klicken möchten. (Das ist der Schlüssel zu einer großen Karte.) Eine Karte sollte als Container für bestimmte Inhalte dienen - Inhaltsverknüpfung, Anmeldung, Videoplayer usw. - mit denen Nutzer interagieren möchten.
So gestalten Sie es ...
Beginnen Sie mit einem schwarz-weißen Umriss
Es klingt ziemlich einfach: Beginnen Sie mit einem schwarz-weißen Drahtgitter für das Design. Denken Sie über die Absicht der Karte nach und welche Teile davon werden geklickt oder getippt. (Die gesamte Karte kann als Link dienen.)
Planen Sie Elemente wie Abstand, Bilder und Typografie, damit Sie die Karte ohne Farbe oder Verzierung sehen können. Betrachten Sie es als die "Spielkarte" -Phase des Designs. Alle Elemente der Karte sind da. Scheint es sich um einen leicht verständlichen Rahmen zu handeln?
Denke darüber nach, wie du es von diesem Stadium an nutzen würdest. Wo würdest du auf eine Aktion klicken? Sind das Muster und das Ergebnis klar? Wie gehst du zurück oder voran? Die Antworten auf diese Fragen sollten relevant sein, ohne dass Hinweise wie ein roter "Klicken Sie hier" -Knopf auf dem Bildschirm blinken.
Wie bei jedem anderen Projekt auch, wenn der Umriss nicht in schwarz und weiß funktioniert, wird das endgültige Design wahrscheinlich auch nicht.
Verwenden Sie übertriebene Abstände
Die größte Herausforderung bei Karten ist die Schaffung eines kompakten Designs, das sich nicht überladen anfühlt. Da kommt Whitespace ins Spiel. Und Sie werden mehr davon verwenden wollen, als sich auf Anhieb wohl fühlt.
Das Hinzufügen von Leerzeichen wird den Elementen mehr Raum zum Atmen geben, wodurch die Gesamtkarte geräumiger und lesbarer wird.
Im Allgemeinen sollten Sie mit dem doppelten Abstand beginnen, den Sie normalerweise zwischen Elementen betrachten. Dachrinnen sollten extra breit sein und der Abstand könnte auch den zusätzlichen Raum nutzen. Der zusätzliche Platz hilft Ihnen, ein offenes Design zu erstellen und den Inhalt klarer zu organisieren. Die Karte hat eine ziemlich begrenzte Zeichenfläche und sollte auf einem einzigen Bildschirm eines Telefons und einem ähnlich großen Teil des Bildschirms auf größeren Geräten wie Tablets oder Desktops passen. Karten können auch gegen andere Karten um Aufmerksamkeit auf größeren Bildschirmen konkurrieren. Zusätzliche Leerzeichen helfen, das gesamte Design offener und einfacher zu machen.
Fügen Sie natürliche Farbe und Schattierung hinzu
Jetzt sind Sie bereit, über Farbe und Schattierung für das Design nachzudenken. Halten Sie es in den Schatten und Stilrichtungen des Designs natürlich und sehen Sie die Realität nach.
Nein, wir sprechen hier nicht von Skeuomorphismus, sondern von Farben mit natürlichen Konturen und Schatten. Denken Sie darüber nach, wie eine Karte angesehen wird. Der Benutzer sollte das gleiche Gefühl bekommen, als würde er es tatsächlich halten.
Verwenden Sie einige der Grundregeln der Physik, um sich jede Karte so vorzustellen (und zu gestalten), wie sie gehalten wird:
- Die Beleuchtung sollte einige Schatten nach hinten und unten werfen.
- Der dunkelste Teil des Designs ist wahrscheinlich unten, dank der Lichtverhältnisse, die normalerweise von oben kommen.
- Vermeiden Sie Inhalte in Bereichen, die zum Halten der Karte erforderlich sind.
- Touchpoints (und die damit verbundenen Calls-to-Action) sollten Schwerpunkte und einfach zu interagieren sein. (So wie das Gesicht einer Spielkarte in der Mitte des Designs ist.)
- Eine Karte entspricht einem Bit Information.
Erstellen Sie einfache Ebenen
Jetzt, wo Sie über Physik nachdenken, bringen Sie es mit einfachen Layern auf die nächste Ebene, um einen einheitlichen Kartenstil für die gesamte Oberfläche zu erstellen. Nicht sicher, wo ich anfangen soll? Google's Material Design Richtlinien sind ein guter Ausgangspunkt.
"Im Materialdesign werden die physikalischen Eigenschaften von Papier auf den Bildschirm übertragen. Der Hintergrund einer Anwendung ähnelt der flachen, undurchsichtigen Textur eines Blattes Papier.
Das Verhalten einer Anwendung ahmt die Fähigkeit des Papiers nach, die Größe zu ändern, zu mischen und in mehreren Blättern zu verbinden. Elemente, die sich außerhalb von Anwendungen befinden, z. B. Status- oder Systemleisten, erhalten eine andere Behandlung. Sie sind von dem App-Inhalt unter ihnen getrennt und tragen nicht die physikalischen Eigenschaften von Papier.
Brechen Sie dies auf und es geht darum, ein digitales Objekt physisch aussehen zu lassen. Und wenn Benutzer es berühren möchten, werden sie darauf klicken wollen. Das Konzept ist so einfach.
Bleiben Sie bei einfachen Schriften
Wenn es um Typografie geht, sind einfache Sans Serifs oft die Antwort. Vermeiden Sie superdünne oder verdichtete Optionen, da diese etwas härter für die Augen sein können.
Die meisten Karten funktionieren am besten mit zwei Schriftartenoptionen (auch wenn sie aus derselben Familie stammen) - etwas für den Hauptteil und ein anderes für die Überschrift oder Call-to-Action. Der wichtigste Faktor bei der Typografie ist, viel Kontrast zu berücksichtigen, damit die Textelemente gut lesbar sind. Denken Sie daran, den Kontrast zwischen den Schriftarten und den Kontrast zwischen den Hintergrund- und Textelementen für jede Karte zu berücksichtigen.
Begrenzen Sie UI-Elemente
Wiederhole nach mir: Eine Karte entspricht einer Aktion.
Das bedeutet wahrscheinlich, dass Sie nicht eine Menge Benutzeroberflächenelemente wie Schaltflächen im gesamten Design benötigen.
Sie brauchen vielleicht gar keine Schaltfläche in einem Kartenstil-Design.
Aber wenn Sie denken, dass Benutzer einen visuellen Hinweis benötigen, genügt ein Knopf. Halten Sie die Form und das Design einfach - auch hier ist der Material Design-Ansatz eine gute Option - und halten Sie sich an einen einzigen Knopf.
Eine Schaltfläche ist wahrscheinlich das einzige UI-Element, das Sie benötigen. Das ist dein Gestaltungsziel.
Fazit
Es gibt keine magische Formel für die perfekte Karte, aber es gibt einige Design-Optionen, die Sie erstellen können, die jeden Benutzer zum Klicken (oder Antippen) ermutigen. Halten Sie Ihr Design in der Realität zentriert, folgen Sie einem minimalistischen Ansatz mit viel Platz und Kontrast, legen Sie Wert auf einfache Typografie und erstellen Sie eine einzelne Aktion für jede Karte.
Wenn Sie diesem Überblick folgen, können Sie Kartenprojekte, mit denen Benutzer interagieren möchten, am besten vorstellen und konzipieren. Kombinieren Sie diese Ideen mit Design-Theorie und Ihren verrückten Fähigkeiten für ein großartiges Projekt, das Spaß für die Benutzer und ästhetisch im Trend haben wird.