Webdesign-Tutorial (8): Webseitenhierarchie und Raumgestaltung
|
<br />Vorheriger Artikel: Webdesign-Tutorial (7): Verbesserung der Effizienz der Webseiten-Erstellung 1: Unverzichtbares Nörgeln. Es herrscht Ordnung, Regelmäßigkeit und Besonderheit. Das nennt man Level ! Die Iteration der Ebenen drückt die Präsenz des Raums aus. Punkte, Linien und Flächen. Punkte bewegen sich, um Linien zu bilden, Linien bewegen sich, um Oberflächen zu bilden, Oberflächen bewegen sich, um Körper zu bilden, und mehrere Körper bilden eine komplexe Struktur. Das ist Weltraum. Natürlich sprechen wir hier vom mathematischen oder logischen Raum. Es ist kein philosophischer Raum. Zwei: Das Gefühl, das nicht getrennt werden kann – Perspektive; Ich habe bereits früher einen Artikel über die Perspektive geschrieben. Hier sind noch ein paar Bilder, die Ihnen das Verständnis erleichtern. Perspektive ist nicht das Wichtigste, aber notwendig !  3. Die am häufigsten verwendeten Ausdruckstechniken – Virtualität und Realität und Kontrast;  Dies ist ein sehr häufiges Bild in XP. Sehen Sie sich die Ebenen an. Nah ist groß und fern ist klein – nah ist fest und fern ist leer – nah ist schwer und fern ist leicht .  Schauen Sie sich die Änderungen an. Das Wort selbst und die Szene, in der es vorkommt. Distanzveränderungen, Wechsel, Realität und Illusion. (Lassen Sie es als Aufgabe, probieren Sie den sogenannten Web2.0-Stil aus und wenden Sie ihn auf den Text an.)  Schauen Sie sich das Virtuelle und das Reale noch einmal an, die Schichten!  Richtung!  Schauen Sie, nur ein paar einfache Elemente! Drei: Altes Gerede - Farbe und Farbstufen;  Ich möchte dieses Bild wirklich nicht zeichnen! Die Beziehung zwischen Farbton und Ebene . Design lässt sich nicht von Schichten und Farben trennen. Wenn wir über Farbe sprechen, kommen wir um die drei Elemente der Farbe nicht herum, nämlich Farbton, Helligkeit und Reinheit. In Bezug auf die Farbtonverarbeitung rufen unterschiedliche Farben bei Menschen unterschiedliche Gefühle hervor. Wenn Sie einem Bild unterschiedliche Farben hinzufügen, entstehen Ebenen. Um die Teile hervorzuheben, die hervorgehoben werden sollen, und die Teile abzuschwächen, die abgeschwächt werden sollen, müssen Sie zur Verarbeitung flexibel unterschiedliche Farbsinne einsetzen. Um unterschiedliche visuelle Effekte und Farbstufen zu erzielen, werden Farben unterschiedlicher Farbtöne kombiniert. Durch die Kombination von warmen und kalten Farben oder von warmen Farben unterschiedlicher Farbtöne oder von kalten Farben unterschiedlicher Farbtöne ergeben sich satte und farbenfrohe Schichten. Das Verhältnis von Helligkeit und Pegel. Bei der Farbhelligkeitsverarbeitung ist der Helligkeitskontrast wichtiger. Neben der Emotionalität der Farben müssen Sie auch die Schichtung von Schwarz, Weiß und Grau im Farbschema berücksichtigen. Dies ist die Helligkeitsbeziehung der Farbkonfiguration. Durch die Anordnung von Farben unterschiedlicher Helligkeit entsteht ein Gefühl der Schichtung. Weiß hat die höchste Helligkeit unter den Farben und Schwarz die niedrigste. Werden sie zusammen platziert, bilden sie einen starken Kontrast. Wenn jedoch Rot und Orange, Farben ähnlicher Helligkeit, zusammen angeordnet werden, ist der Eindruck der Schichtung relativ schwach. Die Beziehung zwischen Reinheit und Niveau. Wenn eine Farbe mit hoher Reinheit mit einer Farbe mit niedriger Reinheit zusammengebracht wird, wird die Farbe mit hoher Reinheit heller und die Farbe mit niedriger Reinheit dunkler. Also. Farben mit hoher Reinheit tendieren dazu, nach vorne zu treten, während dunkle Farben eher zurücktreten. Auf diese Weise sind die Farbstufen sehr klar. Wenn man zum Erreichen der Designanforderungen die Farbreinheit nutzen möchte, müssen selbstverständlich der Farbton und die Helligkeit der Farbe berücksichtigt werden. Unabhängig davon, welche Farben verwendet oder wie sie angeordnet werden, sind Farbton, Helligkeit und Reinheit schwer zu trennen und können nicht isoliert werden. Die Beziehung zwischen Farbfläche und Ebene. Beim Komponieren eines Bildes müssen Sie sorgfältig auf die Position und Größe der einzelnen Teile achten. Hierbei handelt es sich um eine Rasterung der Farbfläche. Um einen einheitlichen und harmonischen Ton zu erreichen, wird im Allgemeinen eine Farbe als Hauptton verwendet und nimmt die Hauptposition des Bildes ein, dh einen größeren Bereich, während andere Farben natürlich einen kleineren Bereich einnehmen. Dadurch bleibt nicht nur der Grundfarbton erhalten, sondern es entstehen auch Kontrastebenen, die das Bild einheitlich und abwechslungsreich zugleich gestalten. Dieser Absatz ist sehr harmonisch. Harmonie wie aus dem Bilderbuch! Hier sind einige Möglichkeiten zur Beurteilung: 1. Nacktes Strähnchen. Dies funktioniert nicht nackt ohne CSS, aber nachdem der Designentwurf fertig ist, führen Sie alle Ebenen zusammen und konvertieren Sie sie in den Schwarzweiß- oder Labormodus, um ein Gefühl für Schwarz, Weiß und Grau zu bekommen. Blinzeln Sie und schauen Sie. Schließen Sie die Augen, öffnen Sie sie dann plötzlich und schauen Sie. Starren Sie auf etwas, bis Ihre Sicht verschwimmt, und schauen Sie dann wieder hin! (Bitte übernehmen Sie die Verantwortung für Ihre eigenen Augen!!!) (ii): Umkehrung. Erkennen Sie Schwächen in der Hierarchie durch Rückvergleich. (C): Abgeschnitten. Schneiden Sie das Design entsprechend der Zusammensetzung in N Teile und betrachten Sie sie mit den beiden oben genannten Methoden. Dies ist für Webdesigner relativ wichtig! 4. Räumliches Gefühl – Integration und Transzendenz der Anzeigeplattform; Siehe Bild, Originaladresse: http://shyls.longfor.com.cn/main.html  Es ist sehr typisch, die Komposition und die Farben sind sehr geschmackvoll. Obwohl die Schichten nicht hervorstechen, wirkt es sehr harmonisch! Heben Sie immer die wichtigsten Punkte hervor, egal ob in gedruckter Form oder im Internet. Heben Sie jedoch die wichtigsten Punkte auf der Webseite hervor. Dabei kommen im Allgemeinen einfache Mittel wie Farbe und Volumen zum Einsatz. Die Technik, den Eindruck räumlichen Volumens hervorzuheben, wird nicht oft verwendet. Mit anderen Worten, es unterliegt großen Einschränkungen und wird für Anzeigeseiten, insbesondere FLASH-Seiten, verwendet. Ich leihe mir hier ein Bild aus, die Quelladresse lautet http://www.chengshiwen.com/attachments/month_0808/z200883102438.jpg. Es wurde vom Autor nicht genehmigt. Wenn Sie also Einwände haben, werde ich es sofort entfernen.  Textur, Details und Layout sind alle erstklassig, aber die entfernten Berge am Ende entsprechen nicht den Sehgewohnheiten! Es ist etwas umständlich und der blaue Himmel hätte etwas tiefer sein können. Lassen Sie die Figuren aus der Anzeigeplattform springen ! Eigentlich ist es ganz einfach: Ändern Sie einfach Ihre Denkgewohnheiten. Generell gilt beispielsweise, dass sich eine Person in einem begrenzten Bereich befindet. Also drehen wir sie um, sodass das Volumen der Figur größer ist als die Fläche, sodass die Figur normal erscheint und die Fläche perspektivisch dargestellt wird! Beim Rendern eines dicken, vielschichtigen Hintergrunds werden nahe gelegene Objekte vergrößert, um ihre Proportionen hervorzuheben. Sie können den gleichen Effekt erzielen! OK, schau dir die Bilder und Demos an. Sei nicht zu vorsichtig. Sag einfach, was ich meine:  Im Internet gibt es Fotos von ganz besonderen Werbetafeln. Schülerinnen und Schüler sind herzlich eingeladen vorbeizuschauen! Die Stadt Hangji in Yangzhou ist ein landesweit bekannter Produktionsstandort für Zahnbürsten und Touristenbedarf. Die Auffahrt zur Stadtautobahn soll nun eine große Colgate-Säule sein, aus der ein Zahnbürstenkopf herausragt, der von hinten durch einen Stahlrahmen fixiert wird. Von Weitem sieht der Zahnbürstenkopf so aus, als ob er in der Luft schwebt. Dieses ist zwar teurer, die Wirkung ist aber wirklich gut! Etwas östlich der Yangzhou Yucai-Grundschule steht eine Reihe von Ladenschildern, alle mit einem einheitlichen dunkelzinnoberroten Hintergrund, klassischen Mustern und zugehörigen Schriftzeichen. Obwohl der Designinhalt nicht umfangreich ist, ist es ziemlich spektakulär zu sehen, dass Dutzende oder sogar Hunderte davon gleich sind! Es fühlt sich sehr harmonisch und einheitlich an! „ Design ist überall um Sie herum. Schauen Sie sich oft die Buswerbung am Straßenrand, Bahnsteigwerbung, Ladenschilder, sogar verteilte Flyer, Wandmalereien und Dekorationen in Geschäften usw. an … Ihre Fähigkeiten werden sich unsichtbar verbessern! Denken Sie selbst darüber nach. Alle Materialien, die Sie gesammelt haben, sind in Ihrem Kopf. Kombinieren Sie sie mit dem wirklichen Leben ... 』 Farbe kann auch dreidimensional sein  Ball? Licht?  Die Beziehung zwischen dem Vordergrundobjekt (dem hervorzuhebenden Objekt) und dem Hintergrund <br />Wenn der Hintergrund einen abstrakten Stil mit nicht-realistischem und leichtem visuellem Gewicht aufweist, wie etwa Wolken, Glasfasern oder Lichtkreise, dann sollte das Vordergrundobjekt auf relativ konkrete und klare Weise ausgedrückt werden. Was ist, wenn der Hintergrund konkret und visuell aufwändig ist, beispielsweise eine Karte? Landschaft? Usw. Dabei ist auf die Übereinstimmung des Layouts und den Beginn und das Ende des Hintergrunds zu achten. Ob die Farbe mit der Farbe des Vordergrundobjekts kollidiert oder dieser ähnelt. Darüber hinaus dient der Kontrast in der Textgröße nicht nur dazu, ein bestimmtes Wort hervorzuheben und auch nicht nur der Komposition. In einem figurativen Kontext, mit komplexen, unkontrollierbaren Farben. Die Textgrößen sind gestaffelt, um das Lesen zu erleichtern! /**************Die Trennlinie am Ende***************/ An diesem Artikel wurde schon seit langer Zeit gearbeitet, und ich habe viermal daran gearbeitet, was einen ganzen Monat gedauert hat! Viele Ideen wurden nicht rechtzeitig festgehalten, was dazu führte, dass ich diese in der kurzen Zeit nicht klar und mit den passenden Worten beschreiben konnte! Außerdem wurde in der Mitte vorübergehend ein neuer Artikel hinzugefügt: Webdesign-Tutorial (7): Verbessern Sie die Effizienz der Webseiten-Produktion! Eigentlich sollte dieser Artikel ursprünglich Kapitel 7 sein... Poste es einfach, du musst nicht zu viel Unsinn erzählen, du kannst es später einfach überarbeiten! Oh, und ein Titelbild! Laden Sie die Quelldateien der in diesem Kapitel verwendeten Materialien und Demos herunter: Kapitel 8: Eine kurze Einführung in Ebenen und Raum (Perspektive und Stereo).rar |
<<: Vue+axios-Beispielcode zum Hochladen von Bildern und Erkennen von Gesichtern
Artikel empfehlen
Installieren Sie Docker auf Centos7 (neueste Version 2020 verfügbar, einfach kopieren und einfügen)
Informationen zur Bedienung finden Sie hier in de...
CSS3-Eigenschaft line-clamp steuert die Verwendung von Textzeilen
Beschreibung: Begrenzen Sie die Anzahl der Textze...
So verwenden Sie DCL zum Verwalten von Benutzern und Steuern von Berechtigungen in MySQL
DCL (Data Control Language): Datenkontrollsprache...
Zusammenfassung des Linux-Befehls nc
Der vollständige Name von NC lautet Netcat (Netwo...
VMware-Installationsfehler: VMware Workstation konnte VMware Authorization Service nicht starten
Hintergrund: Ich möchte einen SAP ECC Server inst...
Eine kurze Diskussion zur MySQL-Indexoptimierungsanalyse
Warum sind die von Ihnen geschriebenen SQL-Abfrag...
Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]
Dieser Artikel beschreibt die Linux-Benutzer- und...
So installieren Sie den Kibana-Tokenizer im Docker-Container
Schritt: 1. Erstellen Sie eine neue Datei docker-...
Der MySQL-Server läuft mit der Option --read-only und kann diese Anweisung daher nicht ausführen.
Ich war in einer Besprechung, als ein Kollege anr...
4 flexible SCSS-Kompilierungsausgabestile
Vielen Leuten wird das Kompilieren erklärt, sobal...
Konfigurationshandbuch für den Lastenausgleich auf Ebene 4 von Nginx
1. Einführung in Layer 4 Load Balancing Was ist L...
Unicode-Signatur-BOM-Problem (Byte Order Mark) für UTF-8-Dateien
Beim Debuggen einer chinesischen Zen Cart-Website...
So wechseln Sie zwischen Vue-Produktions- und Entwicklungsumgebungen und verwenden Filter
Inhaltsverzeichnis 1. Wechseln Sie zwischen Produ...
MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten
Dieser Artikel stellt vor, wie Sie IP-Adressdaten...
Installation und Verwendung von MySQL unter Ubuntu (allgemeine Version)
Unabhängig von der verwendeten Ubuntu-Version ist...