Webdesign-Tutorial (5): Visuelles Webdesign
|
<br />Vorheriger Artikel: Webdesign-Tutorial (4): Über Material und Ausdruck Webdesign Advanced Five - Kompositionsbalance und visuelle Führung, Verwendung von Kurven/Bögen/Licht und Schatten Ausgewogenheit der Zusammensetzung 1. Wenn die Zusammensetzung nicht von gleicher Form und Menge ist, kann sie anhand der „Ausgewogenheit“ zusammengefasst und gemessen werden. Gleichen Sie jede Station mit gleichen Formen und Mengen bei 50 % der Komposition aus. 2. Elemente des Gleichgewichts: Gleichgewicht, Veränderung und Einheit, Licht und Dunkelheit, Farbe, räumliche Ebenen usw. Die Beziehung zwischen Zusammensetzung <br />Form, Position, Fläche, Richtung, Ebene Die Regeln der Komposition <br />Balance/Regeln Grundlegende Merkmale der visuellen Führung: (normale Lesereihenfolge einhalten) 1. Farbberatung  2. Formführer  3. Haltungsberatung  4. Licht- und Dunkelführung 5. Halte den Moment fest  6. Proportionen ------------------------------------Schöne Trennlinie----------------------------------- Möglicherweise haben Sie den Eindruck, dass es viele Wiederholungen gibt. Aber wenn Sie sie nicht trennen. Es ist unmöglich, es den Lesern genauer zu erklären. Möglicherweise sind einige Dinge nicht ganz genau oder ich habe sie nicht analysiert. Ich hoffe, Sie können helfen, die Lücken zu füllen. Die Rolle von Bildern/visuellen Anleitungen: 1. Geben Sie die Lesereihenfolge vor. Obwohl es sich um die normale Lesereihenfolge handelt, gibt es dennoch einige Änderungen. 2. Führen Sie zu den wichtigsten Punkten 3. Leiten Sie die Schüler an, die Wichtigkeit von Seiten und den Unterschied zwischen Inhalts- und Funktionsblöcken zu erkennen 4. Fördern Sie das Verständnis von Designideen 5. Leiten Sie die regionale Kultur (z. B. Chinesisch/Englisch) 6. Orientierung. Die spezifischen Inhalte sind in der Navigation konzentriert. Kurven, Bögen, Licht und Schatten <br />Wenn Anfänger kein tiefes Verständnis für Haltungsführung und Formführung haben, verwenden Sie Bögen mit Vorsicht ------------------------------------Vorsichtige Trennlinie----------------------------------- Kurven und Bögen können verwendet werden, um Seiten auf sanfte Weise zu unterteilen. Wir alle wissen, dass der Effekt sehr gut ist. Aber wie verwendet man ihn richtig? Befolgen Sie alle oben genannten Punkte. Wissen Sie genau, was Ihr Bogen tut. Denken Sie ein wenig über die Einstellung der Farb- und Transparenzwerte nach, und ich denke, das sollte nicht so schwierig sein.  Ein Startpunkt und ein Endpunkt. Bedenken Sie die Größe des Bildschirms und wie viel Inhalt bei unterschiedlichen Auflösungen angezeigt werden kann. Wenn es keinen Endpunkt gibt, wie sollen die visuelle Erweiterung und die geführte Assoziation ausgedrückt werden? Denken Sie an die Form von Lotusblättern, denken Sie an die Form von Bananenblättern, denken Sie an die Abgase von Flugzeugen, die sich am Himmel wölben. Tatsächlich ist der Bogen direkt neben Ihnen ... ... Welche Art von Bogen lässt Menschen sich natürlich fühlen? Das wurde noch nicht untersucht. Ich glaube nicht, dass ich die Fähigkeit habe, das zu untersuchen. Veröffentlichen Sie einen Artikel über Physik: http://www.arcmanusa.com/arcforum/viewtopic.php?t=108 Licht und Schatten <br />Hier geht es nicht um Filme. Ich kann es nicht im Detail erklären. Wie auch immer, dieser Effekt ist sehr großartig und GUT. Ich mag ihn sehr. Es folgt immer noch der oben erwähnten Theorie der visuellen Führung und Bögen.  In meinen Favoriten steht die Anmerkung dieser Website: „Die ultimative Anwendung von Licht und Schatten“, Adresse: http://www.nopattern.com/nopattern/ Dieser Artikel wurde eigentlich unbeabsichtigt fertiggestellt, da er andere Konzepte ableitete. Um die Kenntnisse meiner Kollegen zu verbessern, habe ich zu Beginn etwa zwei Stunden damit verbracht, ihnen den Begriff Gleichgewicht zu erklären. Sie hatten einige der zuvor erlernten Dinge gut verstanden. Nach einer ausgewogenen handschriftlichen Anleitung und mündlichen Erklärung. Ich habe an die visuelle Anleitung des Bildes gedacht. Anschließend wurde ein Überblick gegeben. In Kombination mit dem Gleichgewichtsprinzip kam ich auf die Idee, den Bogen auszuarbeiten und mich dann mit der Behandlung von Licht und Schatten zu befassen. Ich habe zufällig einige hervorragende Arbeiten auf diesem Gebiet. Nachdem ich diese Dinge auf eine ausführliche, oberflächliche oder unvollständige Weise erklärt hatte, tauchte das Wort „visuelles Gewicht“ in meinem Kopf auf. Derzeit gibt es keine genaue Definition oder Diskussion dieses Begriffs. Aber ich denke, ich kann es beschreiben. 1: Regelmäßigkeit und Ordnung bestimmen das Niveau und das Gewicht des visuellen Gewichts 2: Die durch Kontrast und Einheit geschaffene Harmonie kann das Gleichgewicht des visuellen Gewichts hervorheben 3: Ein Pfund Baumwolle und ein Pfund Eisen (meine Intuition sagt mir, dass es etwas damit zu tun hat) 4: Lesegewohnheiten: Der Anfang und das Ende sollten wichtiger sein als die Mitte. (Auf der Grundlage gleicher Form und Menge. Beispielsweise eine Reihe von Wörtern) 5: Textur und Assoziation. Dies ist viel einfacher zu erklären. Das Gefühl von weißen Wolken und Baumwolle kann Menschen nicht überwältigen, obwohl der Farbton bei ihnen ein Gefühl der Erstickung und Depression hervorrufen kann. Es ist jedoch immer noch viel heller als Texturen wie Marmor oder Stahl. Es regt das assoziative Denken des Lesers an. Dann wird das Konzept des visuellen Gewichts klarer. 6: Wenn zweidimensionale und dreidimensionale Bilder die gleiche Leistung aufweisen, ist das visuelle Gewicht dreidimensionaler Bilder höher als das zweidimensionaler Bilder. Ich habe versucht, physische Beweise zu finden, aber das einzige, was ich über die Suchmaschine gefunden habe, war „Discovery of the Chemistry of the Eye and the Gravimetric Visual Process“ von HK Hartland und G. Wald, in dem stand, dass diese beiden Personen den Nobelpreis gewonnen haben. Aber es gab keine relevante Erklärung. Und mein Englisch ist sehr schlecht. ----------------------------------------------------------------------------------- Unten ist mein Manuskript, aufgenommen mit meinem Mobiltelefon:  Original JPG herunterladen |
<<: Lösen Sie das Problem des MySQL Threads_running-Surge und der langsamen Abfrage
>>: Detaillierte Erklärung der jQuery-Methodenattribute
Artikel empfehlen
Verständnis und Beispielcode des Vue-Standardslots
Inhaltsverzeichnis Was ist ein Slot Grundlegendes...
Umfassende Zusammenfassung zu MySQL GTID
Inhaltsverzeichnis 01 Einführung in GTID 02 Wie G...
Detaillierte Erklärung zur Verwendung des scp-Befehls zum Remote-Kopieren von Dateien unter Linux
Vorwort scp ist die Abkürzung für „Secure Copy“. ...
Zwei gängige Lösungen für den HTML-Textüberlauf zeigen Auslassungszeichen an
Methode 1: Verwenden Sie zur Lösung die CSS-Überl...
Installationsprozess von MySQL5.7.22 auf dem Mac
1. Verwenden Sie das Installationspaket, um MySQL...
Detaillierte Schritte zum Verpacken und Hochladen von Spring Boot in ein Docker-Repository
Wichtiger Hinweis: Bevor Sie diesen Artikel lesen...
Praktische Aufzeichnung der Handhabung von MySQL-Problemen beim automatischen Herunterfahren
Ich habe vor Kurzem jemandem bei einem Projekt ge...
VUE+Canvas realisiert den gesamten Prozess eines einfachen Gobang-Spiels
Vorwort In Bezug auf das Layout ist Gobang viel e...
Anweisungen zum Wiederherstellen von Daten nach versehentlichem Löschen einer MySQL-Datenbank
Bei täglichen Betriebs- und Wartungsarbeiten ist ...
Implementierung der automatischen Vervollständigung von Docker-Befehlen
Vorwort Ich weiß nicht, wie lange dieser Freund D...
Schritte für Vue zur Verwendung von Ref, um Komponenten über Ebenen hinweg zu erhalten
Vue verwendet Ref, um Komponenteninstanzen über E...
Lösung für das Ausgehen der Auto-Increment-ID (Primärschlüssel) von MySQL
In MySQL werden viele Typen von Auto-Increment-ID...
So übergeben Sie Parameter über CSS an JS
1. Hintergrund, der durch CSS übergeben werden mu...
Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters
Keepalived+Nginx+Tomcat zur Erzielung eines hochv...
Beispiele und Vergleich von 3 Methoden zur Deduplizierung von JS-Objekt-Arrays
Inhaltsverzeichnis 1. Vergleich der Daten vor und...