Der visuelle Designpfad der Website sollte den Benutzergewohnheiten entsprechen
 Cooper sprach über den visuellen Pfad des Benutzers, der im Allgemeinen von oben nach unten und von links nach rechts verläuft. Ein guter visueller Designpfad sollte sich an diese Benutzergewohnheiten anpassen. Ein schlechtes Design führt dazu, dass sich Benutzer verloren fühlen und ihre Aufmerksamkeit überallhin verlagert wird. Natürlich ist das obige visuelle Pfaddiagramm nicht absolut und die Surfgewohnheiten sind von Person zu Person unterschiedlich. Website-Blöcke  Seitdem Menschen mit Informationen in Berührung kommen, werden diese in quadratischer Form präsentiert: In Zeitungen und Büchern wird ein einzelnes Wort zu einem Punkt, eine Reihe von Wörtern zu einer Zeile und ein Absatz von Wörtern zu einer Fläche. Am effizientesten wird diese Fläche natürlich in einem Quadrat präsentiert. Ein Großteil des visuellen Designs der Site besteht tatsächlich aus Puzzleteilen. Die Blöcke auf der Website können den visuellen Pfad des Benutzers sehr gut leiten. Benutzer können die Blöcke verwenden, um zu bestimmen, ob die Informationen in diesem Bereich das sind, was sie benötigen, sodass sie den Bereich schnell eingrenzen und den nächsten Block sorgfältig durchsuchen oder durchsuchen können. Auf der Homepage von Yahoo können Benutzer beispielsweise aus der Perspektive eines großen Blocks problemlos vier große Blöcke unterscheiden, und jeder Block hat kleine Blöcke.
Ausrichtung und Abstand <br />Der einfachste und am leichtesten zu übersehende Aspekt des visuellen Designs ist die Ausrichtung. Zur Überprüfung betrachten Sie die Kanten innerhalb jedes Quadrats, die Kanten zwischen den Quadraten und insbesondere die vertikale Dimension. Allgemeine Abstandsregel: Der Zeichenabstand ist kleiner als der Zeilenabstand, der Zeilenabstand ist kleiner als der Absatzabstand und der Absatzabstand ist kleiner als der Blockabstand. Zur Überprüfung können Sie versuchen, alle Hintergrundmuster und -linien auf der Website zu entfernen, um zu sehen, ob Sie weiterhin das gewünschte Blockgefühl beibehalten können. Nehmen Sie die neue Homepage von Taobao als Beispiel für Details (die rechte Seite ist, nachdem ich sie angepasst habe). Manchmal müssen wir keine Zeit damit verbringen, schöne Symbole und Farbkombinationen zu erstellen. Auch die sorgfältige Anpassung jedes Pixels der Website kann ihr ein brandneues Aussehen verleihen.  Die Beziehung zwischen Primär- und Sekundärebene <br />Der Schlüssel zur Anleitung der Benutzer liegt im Umgang mit der Beziehung zwischen Primär- und Sekundärebene. Einfach ausgedrückt ist es der Kontrast. Aus visueller Sicht: Die Größe der Form, die Farbe und die Platzierung wirken sich alle auf die Wichtigkeit der Informationen aus. Teilen Sie die Seite aus Sicht eines großen Blocks nicht gleichmäßig auf. Beim dreispaltigen Design sollte eine der Spalten deutlich kürzer sein. Aus lokaler Sicht müssen wir auch den Rhythmus der Informationspräsentation erfassen. Beispielsweise ist beim Design der Nachrichtenspalte in der Mitte von Yahoo das große Bild mit dem großen Titel der erste Punkt, das kleine Bild mit Text der zweite Punkt und reiner Text der dritte. Das Rhythmusgefühl und die Beziehung zwischen dem Primären und dem Sekundären sind sehr stark. Häufig gestellte Fragen
Das Verfassen dieses Artikels fiel zufällig mit der Neugestaltung der Homepages von Sina, Tencent und Taobao im April zusammen. Aus rein visueller Designperspektive ist Tencent sehr sauber und durchdacht.  Klicken Sie hier, um zum Abschnitt „Webseitenerstellung“ zurückzukehren |
<<: Zwei Möglichkeiten, die CSS-Priorität zu verstehen
Artikel empfehlen
Grafisches Tutorial zur Installation von MySQL 8.0.12
MySQL8.0.12-Installationstutorial, mit allen teil...
Beispiel für den schnellen Aufbau eines Redis-Clusters mit Docker
Was ist Redis Cluster? Redis Cluster ist eine von...
Eine vollständige Aufzeichnung des Prozesses zum Erstellen mobiler Anwendungen mit Vue Native
Inhaltsverzeichnis Vorwort Funktionen von Vue Nat...
Verwendung und Optimierung der MySQL COUNT-Funktion
Inhaltsverzeichnis Was macht die Funktion COUNT? ...
9 Tipps zur Codeoptimierung zur Verbesserung der Website-Benutzerfreundlichkeit, auf die Webmaster achten sollten
1. Fügen Sie Ihrem Logo alternativen Text hinzu D...
mysql ist keine interne Befehlsfehlerlösung
Der Fehler „mysql ist kein interner Befehl“ tritt...
Beispiel zum Überprüfen der Kapazität einer MySQL-Datenbanktabelle
Dieser Artikel stellt die Befehlsanweisungen zum ...
So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert
So zentrieren Sie den gesamten Seiteninhalt und pa...
Detaillierte Erklärung der dynamischen Komponenten von vue.js
:ist eine dynamische Komponente Verwenden Sie v-b...
Beispiel für die Erstellung eines XML-Online-Editors mit js
Inhaltsverzeichnis Vorwort Die Notwendigkeit von ...
Vue implementiert Funktionen zum Hinzufügen, Löschen und Ändern des lokalen Speichers
In diesem Artikelbeispiel wird der spezifische Co...
Schreiben und Verstehen von Pfeilfunktionen und diesem in JS
Inhaltsverzeichnis Vorwort 1. So schreiben Sie Fu...
nginx Konfigurationsort Zusammenfassungsort Regelmäßiges Schreiben und Umschreiben von Regeln
1. Regulärer Ausdruck für den Standort Schauen wi...
Lösung für das Problem des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung
Inhaltsverzeichnis Problembeschreibung: Lösung 1 ...
CSS-Standard: Eigenschaft „vertical-align“
<br />Originaltext: http://www.mikkolee.com/...