Heim > Web-Frontend > CSS-Tutorial > Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial

Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial

WBOY
Freigeben: 2016-05-16 12:08:38
Original
2837 Leute haben es durchsucht

Anfänger, die Webseiten erstellen, sind möglicherweise eher daran gewöhnt, einige schöne Bilder als Hintergrund für ihre Webseiten zu verwenden. Wenn Sie jedoch große kommerzielle Websites durchsuchen, werden Sie feststellen, dass sie mehr Weiß, Blau, Gelb usw. verwenden, um das Web zu erstellen Seiten sehen eleganter, großzügiger und warmer aus. Noch wichtiger ist, dass dadurch die Geschwindigkeit, mit der Besucher Webseiten öffnen, erheblich beschleunigt werden kann.

Im Allgemeinen sollte die Hintergrundfarbe einer Webseite weicher, schlichter und heller sein, gepaart mit dunklem Text, damit sie natürlich und angenehm aussieht. Für einen auffälligeren visuellen Effekt verwenden Sie eine dunklere Farbe für den Titel. Das Folgende ist meine Erfahrung beim Anpassen der Hintergrundfarbe und der Textfarbe von Webseiten, als ich Webseiten erstellte und die Webseiten anderer Personen durchsuchte. Diese Farben können als Hintergrundfarbe des Textes oder als Hintergrundfarbe des Titels verwendet werden Gepaart mit verschiedenen Schriftarten wird es auf jeden Fall etwas Schönes geben, ich hoffe, es wird für alle beim Erstellen von Webseiten nützlich sein.

Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes TutorialBgcolorΚ″#F1FAFA″——Die Hintergrundfarbe für den Haupttext ist gut und elegant
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes TutorialBgcolorΚ″#E8FFE8″——Die Hintergrundfarbe für den Titel ist besser
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#E8E8FF″——Die Hintergrundfarbe für den Haupttext ist besser und die Textfarbe ist Schwarz
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#8080C0″——Es ist besser, gelben und weißen Text zu verwenden es
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ ″#E8D098″————Es ist besser, hellblauen oder blauen Text darauf zu haben
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#EFEFFDA″——Es ist besser, hellblauen oder roten Text zu haben es
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″ #F2F1D7″——Es sieht elegant aus mit schwarzem Text und sieht auffällig aus, wenn es rot ist
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes TutorialBgcolorΚ″#336699″——Es sieht besser aus mit weißem Text
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#6699CC″———— Mit weißem Text sieht es besser aus, Sie können ihn als Titel verwenden.
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#66CCCC″——Mit weißem Text sieht es besser aus, Sie kann es als Titel verwenden
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#B45B3E″ – Mit weißem Text sieht es besser aus. Einige können Sie als Titel verwenden:
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#479AC7″ – Mit Weiß sieht es besser aus Text, Sie können den Titel
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#00B271″ erstellen. – Mit weißem Text sieht es besser aus mit schwarzem Text, normalerweise als Haupttext
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#D5F3F4″————Mit schwarzem Text, normalerweise als Haupttext, sieht es besser aus
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#D7FFF0″——— —Mit schwarzem Text sieht es besser aus, normalerweise als Haupttext
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ″#F0DAD2″————Mit schwarzem Text sieht es besser aus, normalerweise als Haupttext
Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes Tutorial BgcolorΚ "#DDF3FF „——Mit schwarzem Text sieht es besser aus. Als Haupttext
sind im Allgemeinen sowohl ein hellgrüner Hintergrund mit schwarzem Text als auch ein weißer Hintergrund mit blauem Text ein Blickfang, aber ersterer hebt den Hintergrund hervor und letzterer hebt ihn hervor der Text. Ein roter Hintergrund mit weißem Text und ein dunklerer Hintergrund mit gelbem Text sind sehr wirkungsvoll. Fähigkeiten zur Farbanpassung von Webseiten, Textschriftart, Schriftgröße, Schriftlayout usw._Grundlegendes TutorialDieser Artikel ist nur eine Einführung. Jeder kann seiner Fantasie freien Lauf lassen, um die Webseite attraktiver zu gestalten.

Heutzutage wird das Internet immer beliebter In letzter Zeit ist das Surfen im Internet nach und nach zu einem unverzichtbaren Bestandteil unseres Lebens geworden. Die Online-Welt ist bunt und es sind zahlreiche hervorragende und schöne Webseiten entstanden. Die Darstellung einer großen Menge an Netzwerkinformationen besteht aus nichts anderem als Text, Bildern, Flash-Animationen usw. Unter diesen ist Text das wichtigste Gestaltungselement einer Webseite. Für Anfänger im Webdesign ist es besonders wichtig, die Textlayoutgestaltung im Webdesign zu verstehen und zu beherrschen. Im Folgenden möchte der Autor über seine persönliche Meinung sprechen.
Formatierung von Text


Schriftgröße, Schriftart, Zeilenabstand

Die Schriftgröße kann auf unterschiedliche Weise berechnet werden, z. B. in Punkten #quotel.quoter# oder in Pixeln (Pixel). Da der auf Pixeltechnologie basierende Druck in Punkte umgerechnet werden muss, wird empfohlen, Punkte als Einheit zu verwenden.
Die am besten geeignete Schriftgröße für die Anzeige des Haupttextes einer Webseite liegt bei etwa 12 Punkt. Viele umfassende Websites verwenden heutzutage aufgrund der großen Menge an Inhalten, die auf einer Seite angeordnet werden müssen, normalerweise eine Schriftgröße von 9 Punkt. Für Überschriften oder andere Bereiche, die Hervorhebung erfordern, können größere Schriftarten verwendet werden, für Fußzeilen und unterstützende Informationen können kleinere Schriftarten verwendet werden. Es ist zu beachten, dass kleine Schriftgrößen tendenziell ein Gefühl von Integrität und Raffinesse vermitteln, aber weniger lesbar sind.
Webdesigner können Schriftarten verwenden, um die Emotionen, die sie in ihren Designs ausdrücken möchten, besser widerzuspiegeln. Die Auswahl einer Schriftart ist ein emotionaler, intuitiver Akt. Doch egal welche Schriftart gewählt wird, sie muss sich am Gesamtdesign der Webseite und den Bedürfnissen des Betrachters orientieren. Zum Beispiel: Fette Schriftarten sind stark und kraftvoll, mit maskulinen Eigenschaften und eignen sich für Inhalte in den Bereichen Maschinen, Bauindustrie usw.; dünne Schriftarten sind elegant und sorgfältig, mit weiblichen Eigenschaften und eignen sich eher für Inhalte in den Bereichen Kleidung und Kosmetik , Lebensmittel und andere Branchen. Wenn auf derselben Seite weniger Schriftarten vorhanden sind, ist das Layout elegant und stabil. Wenn viele Schriftarten vorhanden sind, ist das Layout aktiv und farbenfroh. Der Schlüssel liegt darin, diesen proportionalen Zusammenhang anhand des Seiteninhalts zu erfassen.

Aus Sicht der Verbesserung der Plattformunabhängigkeit ist es am besten, die Standardschriftart für Textinhalte zu verwenden. Weil der Browser die Schriftartenbibliothek auf dem lokalen Computer verwendet, um den Seiteninhalt anzuzeigen. Als Webdesigner müssen Sie berücksichtigen, dass die meisten Browser nur drei Schriftarten und einige entsprechende spezifische Schriftarten auf ihren Computern installiert haben. Die von Ihnen angegebene Schriftart ist möglicherweise nicht unbedingt auf dem Computer des Betrachters zu finden, was große Einschränkungen beim Webdesign mit sich bringt. Die Lösung des Problems lautet: Wo es wirklich notwendig ist, spezielle Schriftarten zu verwenden, kann der Text in ein Bild umgewandelt und dann in die Seite eingefügt werden.

Änderungen im Zeilenabstand können auch große Auswirkungen auf die Lesbarkeit von Texten haben. Im Allgemeinen eignen sich Zeilenabstandseinstellungen nahe der Schriftgröße besser für Fließtext. Das normale Verhältnis des Zeilenabstands beträgt 10:12, d. h. wenn die Zeichen 10 Punkt groß sind, beträgt der Zeilenabstand 12 Punkt. Dies ist hauptsächlich auf die folgenden Überlegungen zurückzuführen: Durch den richtigen Zeilenabstand entsteht ein offensichtlicher horizontaler Leerstreifen, der die Augen des Betrachters leitet, während ein zu großer Zeilenabstand dazu führt, dass eine Textzeile ihre gute Kontinuität verliert.

Neben seinem Einfluss auf die Lesbarkeit ist der Zeilenabstand selbst auch eine äußerst ausdrucksstarke Designsprache. Um die dekorative Wirkung des Layouts zu verstärken, kann der Zeilenabstand bewusst erweitert oder verkleinert werden, um ein einzigartiges ästhetisches Interesse widerzuspiegeln. Beispielsweise kann eine Vergrößerung des Zeilenabstands eine entspannte und entspannte Stimmung widerspiegeln und eignet sich für unterhaltsame und lyrische Inhalte. Darüber hinaus können durch sorgfältige Anordnung große und enge Abstände nebeneinander bestehen, was die räumliche Hierarchie und Flexibilität des Layouts verbessern und einzigartigen Einfallsreichtum beweisen kann.

Der Zeilenabstand kann mithilfe des Attributs „line-height“ festgelegt werden. Es wird empfohlen, Punkte oder einen Prozentsatz der Standardzeilenhöhe als Einheit zu verwenden. Beispiel: {Zeilenhöhe: 20pt}, {Zeilenhöhe: 150 %}.

Die Gesamtanordnung des Textes

Der Haupttextteil der Seite ist eine Gruppe, die aus vielen einzelnen angeordneten Wörtern besteht. Es ist notwendig, der Form volles Spiel zu geben dieser Gruppe im Gesamtlayout der Seite wirken. Aus künstlerischer Sicht kann die Schrift selbst als Kunstform betrachtet werden, die einen großen Einfluss auf die Persönlichkeit und die Emotionen der Menschen hat. Im Webdesign ist die Verarbeitung von Schriftarten ebenso wichtig wie die Verarbeitung anderer Designelemente wie Farbe, Layout, Grafiken usw. In gewisser Weise können alle Gestaltungselemente als Grafiken verstanden werden.

1. Grafischer Text

Schriftarten haben zwei Funktionen: Die eine besteht darin, die Funktion der Wortbedeutung und -semantik zu realisieren, und die andere ist die ästhetische Wirkung. Die sogenannte Graphisierung von Text bedeutet, seine ästhetische Wirkung zu betonen, symbolische Texte als grafische Elemente zum Ausdruck zu bringen und gleichzeitig die ursprüngliche Funktion zu stärken. Als Webdesigner können Sie Schriftarten entweder konventionell setzen oder künstlerisch gestalten. Egal was passiert, alles sollte sich darauf konzentrieren, wie Sie Ihre Designziele besser erreichen können.
Durch die grafische Gestaltung und Darstellung von Text können tiefgründige Designideen in einer kreativeren Form zum Ausdruck gebracht werden, die die Monotonie und Schlichtheit von Webseiten überwinden und die Herzen der Menschen beeindrucken kann.

2. Die Überlagerung von Text

Nach der Überlappung zwischen Text und Bildern oder zwischen Text und Text kann ein Gefühl von Raum, Sprung, Transparenz, Rauschen und Erzählung entstehen und so zum Mittelpunkt der Seite werden aktives, auffälliges Element. Obwohl die Overlay-Technik die Lesbarkeit des Textes beeinträchtigt, kann sie einen einzigartigen visuellen Effekt auf der Seite erzeugen. Diese Ausdruckstechnik, die nicht auf Lesbarkeit, sondern bewusst auf „Rauschen“ abzielt, verkörpert einen künstlerischen Trend. Daher wird es nicht nur häufig im traditionellen Layoutdesign, sondern auch häufig im Webdesign verwendet.

3. Titel und Textkörper

Beim Anordnen des Titels und Textkörpers können Sie zunächst überlegen, den Textkörper in zwei Spalten, drei Spalten oder vier Spalten anzuordnen und dann den Titel zu platzieren. Der Zweck der Aufteilung des Textes in Spalten besteht darin, Platz und Flexibilität auf der Seite zu schaffen und Starrheit in den Spalten und Eintönigkeit beim Einfügen von Titeln zu vermeiden. Obwohl der Titel der Titel des gesamten Absatzes oder Artikels ist, muss er nicht unbedingt am Anfang des Absatzes stehen. Es kann in der Mitte, horizontal, vertikal oder seitlich angeordnet werden und kann sogar direkt in Wortgruppen eingefügt werden, um mit einem neuartigen Layout die alten Regeln zu brechen.

4. Vier Grundformen der Textanordnung

Der Haupttextteil der Seite ist eine Gruppe, die aus vielen einzelnen angeordneten Wörtern besteht. Es ist notwendig, die Rolle dieser Gruppenform im Gesamtlayout voll auszuschöpfen der Seite.
An beiden Enden gleich: Die Länge des Textes vom linken zum rechten Ende ist gleichmäßig und die Zeichengruppe bildet eine quadratische Fläche, die aufrecht, streng und schön aussieht.
Zentrierte Anordnung: Wenn der Wortabstand gleich ist, ordnen Sie den Text mit der Mitte der Seite als Achse an. Diese Anordnungsmethode lässt den Text hervorstechen und erzeugt eine symmetrische formale Schönheit.
Linksbündig oder rechtsbündig: Durch die Ausrichtung nach links oder rechts bildet der Anfang oder das Ende der Linie auf natürliche Weise eine klare vertikale Linie, die sich leicht an die Grafik anpassen lässt. Diese Anordnungsmethode ist locker und eng, leer und solide, springend und elegant und schafft eine formale Schönheit aus Rhythmus und Rhythmus. Die linke Ausrichtung entspricht den Lesegewohnheiten der Menschen und wirkt natürlich; die rechte Ausrichtung wird selten verwendet, da sie nicht den Lesegewohnheiten entspricht, aber neuartig erscheint.
Um das Bild herum anordnen: Ordnen Sie den Text am Rand des Bildes an. Wenn Sie das Basisbild in den Text einfügen, wirkt dieser harmonisch und natürlich.

Betonung von Wörtern

1. Die Hervorhebung am Zeilenanfang
vergrößert und dekoriert das erste Wort oder den ersten Buchstaben des Textes und bettet es am Anfang des Absatzes ein. Dies wird im traditionellen Medienlayoutdesign als „Drop-Style“ bezeichnet.Die Erfindung dieser Technik geht auf mittelalterliche Schreiber in Europa zurück. Da es Aufmerksamkeit erregt, dekoriert und das Layout aktiviert, wird es im Textlayout von Webseiten verwendet. Der Bereich des Tropfens sollte den Bereich einer vollständigen Textzeile umfassen. Die Stärke der Vergrößerung hängt von der Webseitenumgebung ab.
2. Betonung von Zitaten
Bei der Gestaltung von Webseitentexten stößt man häufig auf Gliederungstexte, also Zitate. Ein Zitat fasst den Hauptgedanken eines Absatzes, eines Kapitels oder des gesamten Textes zusammen, daher sollte ihm im Layout eine besondere Seitenposition und Platz zur Hervorhebung eingeräumt werden. Zitate können auf unterschiedliche Weise angeordnet werden, z. B. durch Einbettung auf der linken und rechten Seite, über, unter oder in der Mitte des Textes, und sie können sich in Schriftart oder -größe vom Text unterscheiden.
3. Betonung einzelner Wörter
Wenn Sie einzelne Wörter als Schwerpunkt der Seite betrachten, können Sie die visuelle Wirkung der Wörter durch Fettdruck, das Hinzufügen von Rahmen, Unterstreichungen, das Hinzufügen von Hinweissymbolen, Kursivschriften usw. bewusst verstärken. sodass es auf der gesamten Seite hervorragend und auffällig aussieht. Darüber hinaus kann das Ändern der Farbe eines Texts auch dazu führen, dass dieser Teil des Textes hervorgehoben wird. Diese Methoden nutzen tatsächlich das Gesetz des Kontrasts.

Die Farbe von Text

Im Webdesign können Designer verschiedene Farben für Text, Textlinks, besuchte Links und aktuell aktive Links auswählen. Wenn Sie beispielsweise den FrontPage-Editor verwenden, lauten die Standardeinstellungen wie folgt: Die normale Schriftfarbe ist Schwarz, die Standard-Linkfarbe ist Blau und ändert sich nach einem Mausklick in Lila. Durch die Verwendung von Text in verschiedenen Farben kann der Teil, den Sie hervorheben möchten, auffälliger werden. Beachten Sie jedoch, dass die Textfarbe nur in geringem Umfang verwendet werden kann. Wenn Sie alles hervorheben möchten, wird nichts hervorgehoben. Darüber hinaus beeinträchtigt die Verwendung zu vieler Farben auf einer Seite die Fähigkeit des Betrachters, den Seiteninhalt zu lesen, es sei denn, Sie haben einen besonderen Designzweck.

Neben der Hervorhebung spezieller Teile des Gesamttextes kann der Einsatz von Farbe auch Auswirkungen auf den emotionalen Ausdruck des gesamten Textes haben. Dabei geht es um die emotionale Symbolik der Farbe, auf die hier aus Platzgründen nicht näher eingegangen werden soll.

Außerdem ist der Kontrast der Textfarben zu beachten, der den Kontrast in Helligkeit, Reinheit und den Kontrast zwischen warm und kalt umfasst. Diese wirken sich nicht nur auf die Lesbarkeit von Texten aus, sondern – was noch wichtiger ist – Sie können durch den Einsatz von Farbe die gewünschten Designeffekte, Designemotionen und Designideen erzielen.

1. Farbverarbeitung
 
Farbe ist das Sensibelste für das menschliche Sehen. Wenn die Farbe der Homepage gut gehandhabt wird, kann sie das Tüpfelchen auf dem i sein und mit halbem Aufwand das doppelte Ergebnis erzielen. Das allgemeine Anwendungsprinzip von Farben sollte „Gesamtkoordination, lokaler Kontrast“ lauten, das heißt: Der Gesamtfarbeffekt der Homepage sollte harmonisch sein und nur lokale und kleine Bereiche können einen starken Farbkontrast aufweisen. Bei der Verwendung von Farben können je nach Bedarf des Homepage-Inhalts unterschiedliche Hauptfarben verwendet werden. Weil Farben symbolisch sind, zum Beispiel: Zartes Grün, Smaragdgrün, Goldgelb und Taupe können jeweils Frühling, Sommer, Herbst und Winter symbolisieren. Zweitens gibt es professionelle Farben wie Olivgrün für Militär und Polizei, Weiß für Medizin und Gesundheitswesen usw. Farbe hat auch offensichtliche psychologische Gefühle, wie z. B. Kälte- und Wärmegefühle, voranschreitende und zurückweichende Effekte usw. Darüber hinaus weisen Farben aufgrund des Einflusses von Umwelt, Kultur, Tradition und anderen Faktoren auch große Unterschiede in ihren Farbpräferenzen auf. Durch die vollständige Nutzung dieser Farbmerkmale kann unsere Homepage eine tiefgreifende künstlerische Konnotation erhalten und so den kulturellen Geschmack der Homepage verbessern. Hier sind einige häufig verwendete Farbschemata:

1. Warme Farben. Das heißt, die Kombination aus Rot, Orange, Gelb, Ocker und anderen Farben. Die Verwendung dieser Farbe kann der Homepage eine warme, warme und enthusiastische Atmosphäre verleihen. ​

2. Coole Farben. Das heißt, die Kombination aus Cyan, Grün, Lila und anderen Farben. Der Einsatz dieser Farbe kann der Homepage eine ruhige, kühle und elegante Atmosphäre verleihen. ​

3. Kontrastfarben. Das heißt, Farben mit völlig entgegengesetzten Farbeigenschaften im gleichen Raum abzugleichen. Zum Beispiel: Rot und Grün, Gelb und Lila, Orange und Blau usw. Diese Farbkombination kann einen starken visuellen Effekt erzeugen und Menschen ein helles, farbenfrohes und festliches Gefühl vermitteln. Natürlich können Kontrasttöne bei falscher Anwendung kontraproduktiv sein und zu kitschigen, auffälligen Effekten führen. Dies erfordert das Verständnis des wichtigen Prinzips „große Harmonie, kleiner Kontrast“, das heißt, der Gesamtton sollte einheitlich und harmonisch sein, und es kann in lokalen Bereichen einige kleine starke Kontraste geben. ​

Schließlich müssen wir auch die Tiefe und Helligkeit der Hintergrundfarbe der Homepage berücksichtigen, um einen Begriff aus der Fotografie zu verwenden: „High-Key“ und „Low-Key“. Diejenigen mit hellen Hintergrundfarben werden als High-Key bezeichnet; solche mit dunklen Hintergrundfarben werden als Low-Key bezeichnet. Wenn die Hintergrundfarbe dunkel ist, sollte die Farbe des Textes hell sein, und der dunkle Hintergrund sollte verwendet werden, um den hellen Inhalt (Text oder Bilder) hervorzuheben. Wenn die Hintergrundfarbe hingegen hell ist, sollte die Farbe des Texts hell sein Der Text sollte dunkler sein und der helle Hintergrund sollte verwendet werden, um den dunklen Inhalt (Text oder Bilder) hervorzuheben. Diese Tiefenänderung wird in der Farbwissenschaft als „Helligkeitsänderung“ bezeichnet.Auf einigen Homepages ist die Hintergrundfarbe schwarz, aber auch der Text ist in einer dunkleren Farbe gehalten. Da die Helligkeit der Farben relativ nahe beieinander liegt, werden die Augen des Lesers beim Lesen sehr hart, was sich auf den Leseeffekt auswirkt. Natürlich darf sich die Helligkeit der Farbe nicht zu sehr ändern, sonst wird der Helligkeitskontrast auf dem Bildschirm zu stark, was auch die Augen des Lesers unerträglich macht.

Farbanpassung von Webseiten  

Die Farbe von Webseiten ist einer der Schlüssel zum Erstellen eines Website-Images, aber die Farbanpassung bereitet Internetnutzern Kopfzerbrechen. Welche Farben sollten für den Hintergrund, Text, Symbole, Rahmen, Hyperlinks usw. von Webseiten verwendet werden und welche Farben sollten aufeinander abgestimmt sein, um die erwartete Konnotation am besten auszudrücken? Ajie spricht hier über einige Erfahrungen und hofft, Sie zu inspirieren.

Lassen Sie uns zunächst einige Grundkenntnisse über Farbe verstehen:

1. Farbe entsteht durch die Brechung von Licht.

2. Rot, Gelb und Blau sind die drei Primärfarben, und andere Farben können mit diesen drei Farben gemischt werden. Der Farbausdruck in der HTML-Sprache von Webseiten wird durch die numerischen Werte dieser drei Farben ausgedrückt. Beispiel: Rot ist die Farbe (255,0,0), die hexadezimale Darstellung ist (FF0000), Weiß ist (FFFFFF). , sehen wir oft, dass „bgColor=#FFFFFF“ bedeutet, dass die Hintergrundfarbe weiß ist.

3. Farben werden in zwei Kategorien unterteilt: achromatisch und chromatisch. Unter achromatischen Farben versteht man die Systemfarben Schwarz, Weiß und Grau. Farbe bezieht sich auf alle Farben außer unbunten Farben.

4. Jede Farbe hat die Eigenschaften Sättigung und Transparenz. Änderungen der Eigenschaften erzeugen unterschiedliche Farbtöne, sodass mindestens Millionen von Farben erzeugt werden können.

Ist es besser, beim Erstellen von Webseiten Farbe oder Nicht-Farbe zu verwenden? Nach Untersuchungen professioneller Forschungseinrichtungen ist der Memory-Effekt von Farbe 3,5-mal so hoch wie der von Schwarz und Weiß. Das heißt, Farbseiten sind im Allgemeinen attraktiver als vollständig schwarz-weiße Seiten.

Unser üblicher Ansatz ist: Verwenden Sie Nicht-Farbe (Schwarz) für den Hauptinhaltstext und verwenden Sie Farbe für Ränder, Hintergründe und Bilder. Auf diese Weise wird die Seite als Ganzes nicht eintönig und der Hauptinhalt wird nicht überwältigend.

●Nicht-Farbkombinationen

Schwarz und Weiß ist die einfachste und einfachste Kombination. Weiße Zeichen auf schwarzem Hintergrund und weiße Zeichen auf schwarzem Hintergrund sind sehr klar. Grau ist eine universelle Farbe, die mit jeder Farbe kombiniert werden kann und auch den harmonischen Übergang zwischen zwei gegensätzlichen Farben unterstützen kann. Wenn Sie wirklich keine passende Farbe finden, dann versuchen Sie es mit Grau, der Effekt wird bestimmt nicht so schlimm sein.

●Farbanpassung

Farben ändern sich ständig und die Farbanpassung steht im Mittelpunkt unserer Forschung. Wir müssen noch mehr über Farbe lernen.

1. Farbkreis. Wir können einen Farbring erhalten, indem wir die Farben „Rot->Gelb->Grün->Blau->Rot“ der Reihe nach überstufen. Die beiden Enden des Farbkreises sind warme und kalte Farben, mit mittleren Farben in der Mitte. (Wie unten gezeigt)

Rot, Orange, Orange, Gelb, Gelb, Gelbgrün, Grün, Türkis, Blaugrün, Blau, Blauviolett, Lila, Lilarot, Rot

|_____|. |_________|. Unterschiedliche Farben vermitteln beim Betrachter unterschiedliche psychologische Gefühle.

Rot---ist eine aufregende Farbe. Die stimulierende Wirkung kann Menschen impulsiv, wütend, enthusiastisch und energiegeladen machen.

Grün – zwischen den kalten und warmen Farben vermittelt es ein Gefühl von Harmonie, Ruhe, Gesundheit und Sicherheit. Gepaart mit Gold und hellem Weiß kann eine elegante und gemütliche Atmosphäre geschaffen werden.

Orange---ist auch eine aufregende Farbe mit leichten, fröhlichen, warmen, warmen und modischen Effekten.

Gelb – hat Glück, Hoffnung, Weisheit und eine leichte Persönlichkeit, es hat die höchste Helligkeit.

Blau---ist die coolste, frischeste und professionellste Farbe. Es wird mit Weiß gemischt, um eine sanfte, elegante und romantische Atmosphäre widerzuspiegeln (wie die Farbe des Himmels:)

Weiß---hat ein Gefühl von Weiße, Helligkeit, Unschuld und Sauberkeit.

Schwarz---hat tiefe, mysteriöse, stille, traurige und deprimierende Gefühle.

Grau---hat ein Gefühl von Mäßigung, Gewöhnlichkeit, Sanftheit, Bescheidenheit, Neutralität und Eleganz. ​

Leichte Änderungen in der Sättigung und Transparenz jeder Farbe erzeugen ein anderes Gefühl. Am Beispiel von Grün hat Gelbgrün eine jugendliche und überschwängliche visuelle künstlerische Konzeption, während Blaugrün ruhig und dunkel wirkt.

●Grundsätze der Web-Farbanpassung

1. Die Lebendigkeit von Farben. Die Farben der Webseite sollten hell und auffällig sein.

2. Die Einzigartigkeit der Farbe. Wählen Sie eine unverwechselbare Farbe, um einen starken Eindruck von Ihnen zu hinterlassen. (Siehe den Abschnitt über Standardfarben für Website-CI in Teil 2 von Design Thinking)

3. Das heißt, die Farbe passt zur Atmosphäre des von Ihnen ausgedrückten Inhalts. Verwenden Sie beispielsweise Rosa, um die Flexibilität einer weiblichen Seite widerzuspiegeln.

4. Die Assoziation der Farbe. Verschiedene Farben haben unterschiedliche Assoziationen. Blau denkt an den Himmel, Schwarz an die Nacht, Rot an glückliche Ereignisse usw. Die von Ihnen gewählte Farbe sollte mit der Konnotation Ihrer Webseite in Zusammenhang stehen.

●Der Prozess der Web-Farbbeherrschung

Mit der gesammelten Erfahrung in der Webseitenproduktion weist unser Farbgebrauch einen solchen Trend auf: Monochrom -> Bunt -> Standardfarbe -> Monochrom.Au début, en raison du manque de technologie et de connaissances, je ne pouvais créer qu'une simple page Web avec une seule couleur. Après avoir acquis une certaine base et certains matériaux, j'espère créer une belle page Web et empiler les meilleures images et le plus. des couleurs satisfaisantes que j'ai collectées sur la page ; mais au fil du temps, j'ai trouvé que les couleurs étaient désordonnées et n'avaient ni personnalité ni style ; j'ai repositionné mon site Web pour la troisième fois et j'ai choisi des couleurs qui me convenaient, et les sites lancés étaient. souvent plus réussi ; lorsque le concept de conception final et la technologie ont atteint leur apogée. En revenant à l'essentiel, vous pouvez concevoir un site simple et beau avec une seule couleur ou même sans couleur.

○Techniques de correspondance des couleurs sur les pages Web

À ce stade de l'article, les internautes impatients peuvent demander : « Quelles combinaisons de couleurs dois-je utiliser pour bien paraître ? Pouvez-vous recommander plusieurs combinaisons de couleurs ? " Ne vous inquiétez pas, voici quelques conseils qui peuvent vous aider à devenir rapidement un maître de la couleur :)

1. Utilisez une seule couleur. Cela fait référence à la sélection d'abord d'une couleur, puis à l'ajustement de la transparence ou de la saturation (pour le dire plus simplement, cela signifie rendre la couleur plus claire ou plus foncée) pour générer une nouvelle couleur à utiliser sur la page Web. Une telle page semble de couleur uniforme et a un sens de la hiérarchie.

2. Utilisez deux couleurs. Sélectionnez d’abord une couleur, puis sélectionnez sa couleur contrastante (appuyez sur ctrl+shift+I dans Photoshop). C'est ainsi que ma page d'accueil a été décidée avec du bleu et du jaune. La page entière est colorée mais pas trop colorée.

3. Utilisez un système de couleurs. Pour faire simple, utilisez une couleur qui ressemble à du bleu clair, du jaune clair, du vert clair ou du jaune terreux, du gris terreux, du bleu terreux. La méthode de détermination de la couleur est différente pour chacun. Je clique sur la case de couleur de premier plan dans Photoshop, je sélectionne "Personnalisé" dans la fenêtre du sélecteur de couleurs qui apparaît, puis je la sélectionne dans la "Bibliothèque de couleurs" :)

4. Utilisez du noir et une couleur. Par exemple, les polices rouge vif avec des bordures noires semblent très « populaires ».

Dans la correspondance des couleurs sur le Web, les tabous sont :

1. N'utilisez pas toutes les couleurs, essayez de vous limiter à trois couleurs.

2. Le contraste entre l'arrière-plan et le texte précédent doit être aussi grand que possible (n'utilisez jamais de motifs compliqués comme arrière-plan) pour mettre en valeur le contenu principal du texte

Correspondance des couleurs

1. Le rouge a une couleur chaude et une personnalité forte et extravertie. C'est une couleur très stimulante pour les gens. Le rouge peut facilement attirer l'attention des gens, et il peut aussi facilement rendre les gens excités, excités, nerveux, impulsifs, et c'est aussi une couleur qui peut facilement provoquer une fatigue visuelle.

a) L'ajout d'une petite quantité de jaune au rouge lui donnera une forte chaleur et le rendra agité et agité.

b) Ajouter une petite quantité de bleu au rouge affaiblira sa chaleur et le rendra plus élégant et doux.

c) Ajouter une petite quantité de noir au rouge rendra son caractère calme, lourd et simple.

d) Ajouter une petite quantité de blanc au rouge le rendra doux, réservé, timide et délicat.

2. Le jaune a un caractère froid, arrogant, sensible, et une impression visuelle d'expansion et d'agitation. Le jaune est la couleur la plus délicate parmi les différentes couleurs. Tant qu’une petite quantité d’autres couleurs est mélangée au jaune pur, sa teinte et son caractère changeront dans une large mesure.

a) Ajouter une petite quantité de bleu au jaune le transformera en un vert frais. Son caractère arrogant a également disparu et c'est devenu un sentiment paisible et humide.

b) L'ajout d'une petite quantité de rouge au jaune lui donnera une sensation orange distincte, et son caractère passera d'indifférent et arrogant à une passion et une chaleur mesurées.

c) Ajoutez une petite quantité de noir au jaune, et la sensation de couleur et les propriétés de la couleur changeront le plus, devenant une impression de couleur complexe avec un vert olive évident. Sa couleur et sa nature sont également devenues matures et faciles à vivre.

d) L'ajout d'une petite quantité de blanc au jaune rend la couleur plus douce, et l'indifférence et l'arrogance du personnage sont diluées, le rendant plus réservé et accessible.

3. Le bleu a un sentiment de cynisme et une personnalité simple et introvertie. C'est une couleur qui aide les gens à se calmer. Le caractère simple et introverti du bleu offre souvent un espace profond, large et calme pour les couleurs aux personnalités actives et au fort pouvoir d'expansion, devenant ainsi un ami amical et humble qui met en valeur les couleurs actives. Le bleu est aussi une couleur qui semble conserver une forte personnalité même après dilution. Si vous ajoutez une petite quantité de rouge, de jaune, de noir, d'orange, de blanc et d'autres couleurs au bleu, cela n'aura pas d'impact significatif sur le caractère du bleu.

a) S'il y a plus de composants jaunes dans l'orange, son caractère aura tendance à être doux, lumineux et parfumé.

b) Mélanger une petite quantité de blanc dans de l'orange peut rendre la perception de l'orange agitée et faible.

4. Le vert est une couleur avec des composantes jaunes et bleues. En vert, l'expansion du jaune et la contraction du bleu sont équilibrées, et la chaleur du jaune et la froideur du bleu sont compensées. Cela fait des personnages verts les plus paisibles et les plus stables. C'est une couleur douce, calme, lisse et belle.

a) Lorsqu'il y a plus de composantes jaunes dans le vert, le personnage a tendance à être vif, amical et enfantin.

b) Ajoutez une petite quantité de noir au vert, et son caractère deviendra solennel, sophistiqué et mature.

c) Ajoutez une petite quantité de blanc au vert, et son caractère aura tendance à être propre, rafraîchissant et frais.

5. La luminosité du violet est la plus faible parmi les pigments colorés. La faible luminosité du violet donne aux gens une sensation terne et mystérieuse.

a) Lorsqu'il y a plus de composantes rouges dans le violet, la perception est dépressive et menaçante.

b) Ajouter une petite quantité de noir au violet le rendra terne, triste et effrayant.

c) Ajouter du blanc au violet peut faire disparaître le caractère terne du violet et devenir élégant, délicat et plein de charme féminin.

6. La couleur du blanc est brillante et son caractère est simple, pur et heureux. Le blanc est saint et inviolable. Si une autre couleur est ajoutée au blanc, cela affectera sa pureté et rendra son caractère subtil.

a) Mélangez une petite quantité de rouge au blanc pour créer une couleur rose clair, fraîche et pleine de tentation.

b) Mélanger une petite quantité de jaune avec du blanc en fera un jaune laiteux, donnant aux gens une impression parfumée.

c) Mélangez une petite quantité de bleu avec du blanc pour donner aux gens une sensation de fraîcheur et de propreté.

d) Mélangez une petite quantité d'orange au blanc pour lui donner une atmosphère sèche.

e) Mélanger une petite quantité de vert avec du blanc donne aux gens une sensation enfantine et douce.

f) Mélanger une petite quantité de violet avec du blanc peut inciter les gens à penser à un parfum léger.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage