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
MySQL Master-Slave-Daten sind inkonsistent, Eingabeaufforderung: Slave_SQL_Running: Keine Lösung
Dieser Artikel beschreibt anhand eines Beispiels ...
Detaillierte Schritte zur Entwicklung von WeChat-Miniprogrammen mit Typescript
Auf die Vorteile von Typescript müssen wir nicht ...
Vue-Kapselungskomponententool $attrs, $listeners-Verwendung
Inhaltsverzeichnis Vorwort $attrs Beispiel: $list...
Praktische Funktionsweise der Verwendung beliebiger Schriftarten auf einer Webseite mit Demonstration
Ich habe bereits einige Nachforschungen zum Thema...
Erklären Sie anhand eines Diagramms, was Web 2.0 ist
Heutzutage sprechen wir oft über Web 2.0. Was als...
Eine kurze Analyse der Crontab-Aufgabenplanung in Linux
1. Erstellen Sie eine Planungsaufgabe Anweisung c...
Lösen Sie die Probleme, die bei der Installation der Mysql 8.0.17 Winx64-Version aufgetreten sind
1. Manuelles Erstellen und Hinzufügen der Datei m...
10 Best Practices zum Erstellen und Warten großer Vue.js-Projekte
Inhaltsverzeichnis 1. Nutzen Sie Slots, um Kompon...
Detaillierte Erklärung der Funktion und Verwendung der DOCTYPE-Deklaration
1. Browser-Rendering-Modus und Doctype Einige Web...
Die perfekte Lösung für das MySql-Versionsproblem sql_mode=only_full_group_by
1. Überprüfen Sie sql_mode wählen Sie @@sql_mode ...
Lösung für das Fehlen einer chinesischen Eingabemethode in Ubuntu
Es gibt keine Lösung für die chinesische Eingabem...
Detaillierte Erklärung der globalen Variablenimplementierung von Uniapp
Vorwort In diesem Artikel werden einige Implement...
Probleme und Lösungen bei der Verwendung des V-Modells zum bidirektionalen Binden der Werte von übergeordneten und untergeordneten Komponenten in Vue
Inhaltsverzeichnis Szenario Versuchen Sie zu löse...
CentOS7-Netzwerkkonfiguration unter virtueller VMware-Maschine (Host für drahtlosen Internetzugang)
Dies ist das erste Mal, dass ich das CentOS7-Syst...
Detaillierte Erklärung zur Verwendung von ES6 Promise
Inhaltsverzeichnis Was ist ein Versprechen? Verwe...