Webseiten-Erlebnis: Farbabstimmung für Webseiten
|
<br />Die Farbe einer Webseite ist entscheidend für das Image einer Website, doch die Farbabstimmung bereitet den Internetnutzern Kopfschmerzen. Welche Farben sollten für den Hintergrund, den Text, die Symbole, die Rahmen, die Hyperlinks usw. einer Webseite verwendet werden und welche Farben sollten aufeinander abgestimmt werden, um die beabsichtigte Konnotation am besten zum Ausdruck zu bringen? Hier sind einige meiner Gedanken. Ich hoffe, sie sind für Sie eine Inspiration. Lassen Sie uns zunächst einige Grundlagen über Farben erlernen: 1. Farbe entsteht durch die Brechung des Lichts. 2. Rot, Gelb und Blau sind die drei Grundfarben. Mit diesen drei Farben können andere Farben gemischt werden. Der Farbausdruck in der HTML-Sprache von Webseiten wird durch die numerischen Werte dieser drei Farben dargestellt. Beispielsweise ist Rot die Farbe (255,0,0) und seine hexadezimale Darstellung ist (FF0000) und Weiß ist (FFFFFF). Das „bgColor=#FFFFFF“, das wir oft sehen, bedeutet, dass die Hintergrundfarbe weiß ist. 3. Farben werden in zwei Kategorien unterteilt: Nichtfarben und Farben. Unter Nicht-Farbe versteht man die Systemfarben Schwarz, Weiß und Grau. Der Begriff „Farbe“ bezieht sich auf alle Farben außer Nichtfarben. 4. Jede Farbe hat die Eigenschaften Sättigung und Transparenz. Änderungen dieser Eigenschaften erzeugen unterschiedliche Farbtöne, sodass mindestens Millionen von Farben erzeugt werden können. Ist es beim Erstellen von Webseiten besser, Farbe oder keine Farbe zu verwenden? Untersuchungen professioneller Forschungsinstitute zufolge ist der Memory-Effekt von Farbe 3,5-mal so stark wie der von Schwarzweiß. Das heißt, Farbseiten sind im Allgemeinen ansprechender als komplett schwarzweiße Seiten. Unsere übliche Vorgehensweise ist: Verwenden Sie für den Hauptinhaltstext keine Farbe (Schwarz) und für Ränder, Hintergründe und Bilder Farbe. Auf diese Weise wirkt die Seite insgesamt nicht eintönig und der Hauptinhalt wird nicht zu verwirrend. ● Keine Farbanpassung <br />Schwarz und Weiß ist die grundlegendste und einfachste Anpassung. Weißer Text auf schwarzem Hintergrund oder weißer Text auf schwarzem Hintergrund sind beide sehr klar und deutlich. Grau ist eine universelle Farbe, die mit jeder Farbe kombiniert werden kann und auch dabei hilft, einen harmonischen Übergang zwischen zwei gegensätzlichen Farben herzustellen. Sollten Sie wirklich keine passende Farbe finden, dann versuchen Sie es doch einmal mit Grau, die Wirkung wird bestimmt nicht allzu übel sein. ●Farbabstimmung <br />Farben verändern sich ständig und die Farbabstimmung steht im Mittelpunkt unserer Forschung. Wir müssen noch etwas mehr über Farben lernen. 1. Farbkreis. Wir können einen Farbring erhalten, indem wir die Farben schrittweise der Reihe nach von „Rot->Gelb->Grün->Blau->Rot“ ändern. Die beiden Enden des Farbkreises sind warme und kalte Farben, und in der Mitte liegen neutrale Farben. (Wie unten gezeigt) Rot, Orange, Orangegelb, Gelb, Gelbgrün, Grün, Cyan, Blaugrün, Blau, Blauviolett, Violett, Violettrot, Rot |___________| |____| |_________| |_________| | | | | Warme Farben, neutrale Farben, kalte Farben, neutrale Farben. 2. Das psychologische Farbempfinden. Verschiedene Farben rufen beim Betrachter unterschiedliche psychologische Gefühle hervor. Rot – ist eine aufregende Farbe. Die stimulierende Wirkung kann dazu führen, dass Menschen impulsiv, wütend, enthusiastisch und energiegeladen sind. Grün – eine Mischung aus kalter und warmer Farbe – vermittelt ein Gefühl von Harmonie, Ruhe, Gesundheit und Sicherheit. In Kombination mit Gold und hellem Weiß kann es eine elegante und gemütliche Atmosphäre schaffen. Auch Orange ist eine spannende Farbe mit leichter, fröhlicher, warmer, gemütlicher und modischer Wirkung. Gelb – steht für Glück, Hoffnung, Weisheit und eine fröhliche Persönlichkeit und hat die höchste Helligkeit. Blau – ist die coolste, frischeste und professionellste Farbe. In Kombination mit Weiß kann es eine sanfte, elegante und romantische Atmosphäre verkörpern (wie die Farbe des Himmels, Weiß – mit einem Gefühl von Weiße, Helligkeit, Unschuld und Sauberkeit). Schwarz – vermittelt ein Gefühl von Tiefe, Geheimnis, Stille, Traurigkeit und Depression. Grau – es steht für Mäßigung, Gewöhnlichkeit, Sanftheit, Bescheidenheit, Neutralität und Eleganz. Leichte Änderungen der Sättigung und Transparenz jeder Farbe erzeugen unterschiedliche Gefühle. Am Beispiel der Farbe Grün zeigt Gelbgrün eine jugendliche und kräftige optische Wirkung, während Blaugrün ruhig und tief wirkt. ●Grundsätze zur Farbabstimmung auf Webseiten 1. Lebendigkeit der Farben. Die Farben der Webseite sollten hell und auffällig sein. 2. Die Einzigartigkeit der Farbe. Wählen Sie eine unverwechselbare Farbe, damit die Leute einen starken Eindruck von Ihnen bekommen. (Siehe den Abschnitt zu Standardfarben für die Website-CI im zweiten Artikel von Design Thinking) 3. Die Eignung der Farbe. Das heißt, die Farbe sollte zur Atmosphäre des Inhalts passen, den Sie ausdrücken möchten. Beispielsweise wird Pink verwendet, um die Flexibilität weiblicher Websites widerzuspiegeln. 4. Die assoziative Natur der Farben. Verschiedene Farben erzeugen unterschiedliche Assoziationen. Blau erinnert uns an den Himmel, Schwarz an die Nacht, Rot an glückliche Ereignisse usw. Die von Ihnen gewählte Farbe sollte mit dem Inhalt Ihrer Webseite in Zusammenhang stehen. ●Der Prozess der Beherrschung von Webseitenfarben <br />Mit zunehmender Erfahrung in der Webseitenerstellung hat sich bei unserer Verwendung von Farben folgende Tendenz ergeben: Monochrom -> bunt -> Standardfarbe -> Monochrom. Aufgrund fehlender Technologie und Kenntnisse konnten zunächst nur einfache Webseiten mit einzelnen Farben erstellt werden. Nachdem man eine gewisse Grundlage und Materialien hatte, hoffte man, eine schöne Webseite zu erstellen, indem man die besten Bilder, die man gesammelt hatte, und die zufriedenstellendsten Farben auf der Seite anhäufte. Doch nach langer Zeit stellte man fest, dass die Farben chaotisch waren und weder Persönlichkeit noch Stil hatten. Als man seine Website zum dritten Mal neu positionierte, wählte man Farben, die zu ihnen passten, und die Websites, die man startete, waren oft erfolgreicher. Als das endgültige Designkonzept und die Technologie ihren Höhepunkt erreicht hatten, kehrte man zur Einfachheit zurück und verwendete einzelne Farben oder sogar Nicht-Farben, um einfache und exquisite Websites zu gestalten. ○Tipps zur Farbabstimmung für Webseiten <br />An dieser Stelle des Artikels fragen sich einige besorgte Internetnutzer möglicherweise: „Welche Farbkombination sieht gut aus? Können Sie einige Farbschemata empfehlen?“ Keine Sorge, hier sind einige Tipps, die Ihnen helfen können, schnell ein Farbmeister zu werden 1. Verwenden Sie eine Farbe. Hier bedeutet es, zunächst eine Farbe auszuwählen und dann die Transparenz oder Sättigung anzupassen (für Laien ausgedrückt: die Farbe aufzuhellen oder abzudunkeln), um eine neue Farbe für die Verwendung auf der Webseite zu erstellen. Eine solche Seite weist eine einheitliche Farbgebung und eine gewisse Hierarchie auf. 2. Verwenden Sie zwei Farben. Wählen Sie zuerst eine Farbe und dann die Kontrastfarbe aus (drücken Sie in Photoshop Strg+Umschalt+I). So habe ich die Farben Blau und Gelb für meine Homepage festgelegt. Die gesamte Seite ist bunt, aber nicht zu bunt. 3. Verwenden Sie ein Farbschema. Einfach ausgedrückt geht es darum, eine Farbe zu verwenden, die ein Gefühl widerspiegelt, wie etwa Hellblau, Hellgelb, Hellgrün oder Khaki, Erdgrau, Erdblau. Die Methode zur Bestimmung der Farbe ist bei jedem anders. Ich klicke in Photoshop auf das Vordergrundfarbfeld, wähle im angezeigten Farbauswahlfenster „Benutzerdefiniert“ und wähle es dann in der „Farbbibliothek“ aus. 4. Verwenden Sie Schwarz und eine Farbe. Beispielsweise wirken knallrote Schriften mit schwarzem Rand sehr „sprunghaft“. Bei der Farbabstimmung auf Webseiten ist Folgendes tabu: 1. Verwenden Sie nicht alle Farben, versuchen Sie, so wenige wie möglich zu verwenden |
>>: Beispielcode zur Implementierung des Bildschubladeneffekts mit CSS3
Artikel empfehlen
Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation
Dieser Artikel stellt hauptsächlich ein Beispiel ...
CSS zum Erzielen einer Schließen-Schaltfläche zum Vergrößern und Verkleinern (Beispielcode)
Dieser Effekt tritt am häufigsten auf unserer Bro...
Ausführliche Erklärung zur Docker-Maschine
Unterschiede zwischen Docker und Docker Machine D...
Schritte für Django zum Herstellen einer Verbindung zur lokalen MySQL-Datenbank (Pycharm)
Schritt 1: Ändern Sie DATABASES in setting.py # D...
Verwenden Sie JS, um Dateien zu bearbeiten (FileReader liest --node's fs)
Inhaltsverzeichnis JS liest Datei FileReader doku...
Vue + Element realisiert Paging-Effekt
In diesem Artikelbeispiel wird der spezifische Co...
HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten
Heute werden wir einen einfachen Herzschlageffekt...
Eine Sammlung möglicher Probleme bei der Migration von SQLite3 nach MySQL
Kurzbeschreibung Passend für Leser: Mobile Entwic...
Wie können wir für Jiedaibao werben, damit sich jeder anmeldet? Methoden und Fähigkeiten zur Förderung von Jiedaibao
Jiedaibao ist eine Softwareplattform für Handykre...
Lösung zum automatischen Neustart von MySQL
Vorwort Kürzlich trat in der Testumgebung ein Pro...
Ubuntu installiert mehrere Versionen von CUDA und wechselt jederzeit
Ich werde nicht erklären, was CUDA ist, sondern d...
Der Effekt des Heranzoomens in einem Taobao-Shop ähnelt dem Prinzip einer Diashow.
Heute habe ich den Mauszoom-Effekt auf der Vorders...
Grafisches Tutorial zur Installation und Konfiguration komprimierter Pakete für MySQL 5.7.24
In diesem Artikel finden Sie das Installations-Tu...
Erläuterung des React+TypeScript-Projektaufbaufalls
Das Erstellen eines React-Projekts kann sehr einf...
So konfigurieren Sie zwei oder mehr Sites mit dem Apache-Webserver
So hosten Sie zwei oder mehr Sites auf dem belieb...