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
Anwendungsbeispiel-Tutorial zum Schlüssel-Rendering in Vue
Einführung Während des Front-End-Projektentwicklu...
Lösung für das Problem, dass Tomcat beim normalen Zugriff auf localhost eine 404-Meldung ausgibt
Als ich heute Tomcat für den Zugriff auf die Proj...
Standards zum Schreiben von Codekommentaren bei der Webseitenerstellung
<br />Ich habe die in meiner Arbeit verwende...
Grafisches Tutorial zur Installation und Aktivierung von VMware Workstation 14 Pro
In diesem Artikel erfahren Sie alles über die Ins...
So zeigen Sie verfügbare Netzwerkschnittstellen in Linux an
Vorwort Die häufigste Aufgabe nach der Installati...
Wissenspunkte zum Prinzip der MySQL-Join-Abfrage
Mysql Join-Abfrage 1. Grundlegende Konzepte Verbi...
Details zur Verwendung von Klassenstilen in Vue
Inhaltsverzeichnis 1. Boolesche Werte 2. Ausdruck...
Lösen Sie das Problem mehrerer Listener, die beim Starten von Tomcat in Idea gemeldet werden
Fehler-Screenshot Ich kann nicht finden, wo die A...
Tiefgreifendes Verständnis der Verwendung von r2dbc in MySQL
Einführung MySQL sollte eine sehr häufig verwende...
Zusammenfassung einiger Gründe, warum geplante Crontab-Aufgaben nicht ausgeführt werden
Vorwort Ich hatte kürzlich bei der Arbeit einige ...
Bearbeiten Sie zwei Datenspalten als neue Spalten in SQL
Wie unten dargestellt: wähle a1,a2,a1+a2 a,a1*a2 ...
Analyse der Nginx-Konfiguration und häufig gestellter Fragen des Alibaba Cloud CentOS7-Servers
Vorwort: Dieser Artikel bezieht sich auf den Blog...
Verwenden einer Falle zum Durchführen einer Umgebungsbereinigung vor dem ordnungsgemäßen Herunterfahren des Docker-Containers
Wie können wir beim Beenden eines laufenden Conta...
MySQL-Lösung zur funktionalen Indexoptimierung
Bei der Verwendung von MySQL führen viele Entwick...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64
Windows-Installation mysql-5.7.17-winx64.zip Meth...