Erfahrung in der Gestaltung einer mehrschichtigen Benutzeroberfläche im Webdesign

Viele Internetnutzer fragen sich oft, warum ihre Websites immer Probleme mit der Farbe haben, immer langweilig aussehen und keine Aufmerksamkeit erregen. Nachdem ich mir einige von Internetnutzern gestaltete Websites angesehen hatte, stellte ich fest, dass sie beim Einsatz von Farben nicht mutig genug waren und ein Verständnis für Farbstufen fehlte.
Der Farbgrad bezieht sich darauf, ob das Werk nach der Entfärbung ein Verhältnis von Schwarz über Grau zu Weiß aufweist. Enthält ein Werk mehr Schwarz, wirkt die Gesamtwirkung schwer, enthält es mehr Weiß, wirkt die Gesamtwirkung blass. Gibt es viel Grau und wenig Weiß und Schwarz, wirkt das gesamte Layout unsauber!
Bitte schauen Sie sich das Bild unten an. Dies ist ein entfärbtes Bild. Man erkennt, dass an vielen Stellen nicht nur eine Farbe vorhanden ist, sondern ein Farbverlauf entsteht.
So entwerfen Sie eine mehrschichtige Benutzeroberfläche 123WORDPRESS.COM

So entwerfen Sie eine mehrschichtige Benutzeroberfläche 123WORDPRESS.COM

Viele Leute finden beim Erstellen einer Website ihre eigenen Primär- und Sekundärfarben, nutzen die Sekundärfarben jedoch nicht sinnvoll. Die Werke wirken farblich monoton und leblos, da keine Beachtung der Farbhierarchie zwischen Primärfarbe und Sekundärfarbe geschenkt wird. Auch satte Farbniveaus können dazu beitragen, dem Werk Farbe zu verleihen. Wenn viele Leute leuchtende Farben zum Ausdruck bringen möchten, suchen sie in der Farbauswahl immer nach Farben mit hoher Sättigung und hoher Helligkeit. Doch beim Erstellen stellen sie fest, dass diese nicht so leuchtend sind, wie sie sich das vorgestellt haben. Schauen Sie sich zum Vergleich die Bilder oben an. Sie werden feststellen, dass das Bild oben viel bunter ist als das unten.

Haben Sie jetzt ein neues Verständnis für Farben?
„Farbantworten“ Teil 2: Farbproportionen Dieses Mal werden wir uns eingehender mit den „proportionalen“ Beziehungen befassen, die beim Kombinieren vieler Farben bestehen.
Wenn wir Farben verwenden, ist es unmöglich, allen Farben die gleiche Größe zu geben. Wenn Sie ein Farbspektrum anordnen, ist das natürlich eine Ausnahme. Beim Gestalten einer Webseite oder eines Grafikwerks überlegen wir normalerweise, welche Farbe wir als Hauptfarbe verwenden möchten, und suchen uns verwandte Farben als Sekundärfarben. Wenn es jedoch um die eigentliche Arbeit geht, können die Leute oft nicht zwischen Haupt- und Hilfsverb unterscheiden und sind sich nicht im Klaren darüber, was Haupt- und was Hilfsverb ist. Die hergestellten Dinge sind bunt und haben keine Rangfolge!
Der Wunsch, gute Dinge zu schaffen, besteht bei allen Design-Studierenden. Doch oft läuft es nicht wie geplant und die produzierten Arbeiten genügen nie den eigenen Ansprüchen. Unter ihnen sind die Menschen bei der Wahl der Farbproportionen immer zögerlich, was häufig zu Fehleinschätzungen führt. Wie können wir schöne Farben erzeugen? Die Anordnung der Proportionen kann uns helfen, einige Antworten zu finden! Sehen Sie sich das Bild unten an: Das Folgende ist ein Screenshot einer ausländischen Website. Diese Website verwendet nicht viele Farben: Weiß, Schwarz und Orangerot. Natürlich weiß jeder, welche Farbe am buntesten und welche am wenigsten bunt ist!

Dieses Mal werden wir uns das „proportionale“ Verhältnis vieler Farben genauer ansehen.
Wenn wir Farben verwenden, ist es unmöglich, allen Farben die gleiche Größe zu geben. Wenn Sie ein Farbspektrum anordnen, ist das natürlich eine Ausnahme. Beim Gestalten einer Webseite oder eines Grafikwerks überlegen wir normalerweise, welche Farbe wir als Hauptfarbe verwenden möchten, und suchen uns verwandte Farben als Sekundärfarben. Wenn es jedoch um die eigentliche Arbeit geht, können die Leute oft nicht zwischen Haupt- und Hilfsverb unterscheiden und sind sich nicht im Klaren darüber, was Haupt- und was Hilfsverb ist. Die hergestellten Dinge sind bunt und haben keine Rangfolge!
Der Wunsch, gute Dinge zu schaffen, besteht bei allen Design-Studierenden. Doch oft läuft es nicht wie geplant und die produzierten Arbeiten genügen nie den eigenen Ansprüchen. Unter ihnen sind die Menschen bei der Wahl der Farbproportionen immer zögerlich, was häufig zu Fehleinschätzungen führt. Wie können wir schöne Farben erzeugen? Die Anordnung der Proportionen kann uns helfen, einige Antworten zu finden! Sehen Sie sich das Bild unten an: Das Folgende ist ein Screenshot einer ausländischen Website. Diese Website verwendet nicht viele Farben: Weiß, Schwarz und Orangerot. Natürlich weiß jeder, welche Farbe am buntesten und welche am wenigsten bunt ist!

Weiß ist die häufigste Farbe, gefolgt von Schwarz und Orangerot ist die seltenste. Aber ist Ihnen ein Problem aufgefallen? Die auffälligste Farbe ist nicht Schwarz und Weiß, sondern Orangerot. Dies beweist zumindest, dass mehr Farben nicht unbedingt ins Auge fallen und weniger Farben durchaus die Aufmerksamkeit auf sich ziehen können.
Da Schwarz und Weiß beides unbunte Farben sind, erscheinen Orange und Rot lebendiger. Wie Sie sehen, beträgt das Verhältnis hier etwa 70 % Weiß, 22 % Schwarz und 8 % Orange.

Hieraus ergibt sich: Je greller die Farbe, desto weniger sollte sie verwendet werden und der Anteil muss kleiner sein!

Welche Farbe ist also größer? Wir können uns das Bild oben und das Bild unten ansehen, dann wird jeder ein intuitiveres Verständnis haben. Der Anteil an matten Farben und unbunten Farben ist etwas höher. Hervorhebungsfarben eignen sich nicht für die großflächige Anwendung, sie sollten am besten in kleinen Anteilen auftreten.
„Farbantworten“ Teil 3: Farbkontrast Wir wissen, dass es im Design viele Kontraste gibt, wie Größenkontraste, Formkontraste, Längenkontraste und Mengenkontraste. Diese Kontraste sind relativ leicht zu verstehen, da Größe, Länge und Menge leicht zu erkennen und quantifizierbar sind. Wir können den Goldenen Schnitt verwenden, um die Proportionen dieser Längen und Mengen in unserem Design zu begrenzen. Allerdings können Farben nicht durch den Goldenen Schnitt eingeschränkt werden, sodass der Kontrast zwischen Farben eine Frage der persönlichen Meinung ist. Ich höre oft, wie einige Freunde von Kunstakademien zu mir sagen: „Skizzen hängen vom Aufwand ab, Farben hängen vom Talent ab.“ Obwohl dieser Satz bei manchen Leuten Unbehagen auslöst, kann er auch einige Probleme widerspiegeln, nämlich, dass Farben auf der Wahrnehmung basieren und Übung nutzlos ist.
Es gibt zu viele Farben und es ist nicht realistisch, sie einzeln abzugleichen und zu analysieren. Wenn es nur 256 Farben gibt, besteht kein Grund zur Sorge hinsichtlich der Farben. Wir können es jedoch aus einer anderen Perspektive analysieren. Wir können die drei Aspekte Farbton, Helligkeit und Sättigung vergleichen. Auf diese Weise wird der Farbkontrast leichter zu verstehen. Lassen Sie uns zunächst diese drei Schlüsselwörter erklären: Farbton bezieht sich auf die einzigartigen Eigenschaften jeder Farbe. Beispielsweise sind Rot, Gelb und Blau die Grundtöne einer Farbe. Beispielsweise ist „Burgund“ ein Rotton, den man aber durchaus in die Kategorie Grün oder Blau einordnen kann. Der Begriff Hell und Dunkel ist sehr klar, er bezieht sich auf die Farbtiefe. Mit anderen Worten: Die Helligkeit derselben Farbe ist nachts und tagsüber unterschiedlich, da auch die reflektierte Lichtintensität unterschiedlich ist. Oder anders ausgedrückt: Das Hinzufügen unterschiedlicher Mengen Schwarz zu einer Farbe führt zu unterschiedlichen Änderungen der Helligkeit und Dunkelheit der Farbe. Sättigung bezieht sich auf die „Reinheit“ oder Helligkeit der Farbe. Diese Sättigung ist sehr interessant. Ihre Eigenschaften führen manchmal dazu, dass die Töne und die Helligkeit verschwimmen und schwer zu unterscheiden sind.

Nachdem wir die drei Schlüsselwörter erklärt haben, wollen wir nun darüber sprechen, welche Art von Vergleich möglich ist. Wir alle wissen, dass beim Kombinieren von Farben ein Kontrast vorhanden sein muss, sonst sieht es nicht gut aus. Meistens verstehen die Leute jedoch nicht, wie der Vergleich funktioniert. Eigentlich müssen wir nur die „grauen“ und „bösen“ Farben vermeiden. Was bedeutet „grau“? Es bedeutet, dass der Kontrast zu gering ist, dass es keinen Geist hat und dass es grau und schmutzig aussieht. Was ist also „böse“? Es bedeutet, dass der Kontrast äußerst disharmonisch ist, ein bisschen wie ein Nadelloch, das bei den Menschen Unbehagen auslöst.

Wie kann man das vermeiden? Hier ist ein kleiner Trick. Versuchen Sie einfach, sicherzustellen, dass eines der drei Elemente, Farbe, Helligkeit und Sättigung, einheitlich ist. Bei dieser Art von Farbkontrast gibt es normalerweise keine Probleme und das folgende Diagramm vermittelt uns ein intuitives Gefühl dafür.

Ich habe kürzlich gesagt, dass Design ein Gefühl der Hierarchie haben muss. Dieses Gefühl der Hierarchie kann viele Formen annehmen, wie z. B. die Überlagerung von Farben oder Elementen. Wenn einem Design die Hierarchie fehlt, kann die Seite eintönig oder kitschig wirken. Beim Design tappen wir oft in die Falle, eine bestimmte Farbe oder einen bestimmten Effekt zu bevorzugen, was dazu führen kann, dass unseren Designs auf lange Sicht die Vitalität fehlt. Und wir selbst werden durch unsere Besessenheit von dieser Vorliebe in unserer Ästhetik eingeschränkt, was sich auf unseren Fortschritt auswirken wird. Diese Art von Paranoia führt häufig zu einem Mangel an Hierarchie in unseren Entwürfen.
Wo manifestiert sich also normalerweise das Gefühl der Hierarchie? Im ersten Artikel der Reihe „Farbantworten“, den ich zuvor geschrieben habe, habe ich über die Hierarchie der Farben gesprochen. In diesem Artikel erwähnte ich die Verwendung von „Schwarz, Weiß und Grau“, um die Hierarchie der Farben zu analysieren. Beim Designen verwenden wir möglicherweise eine Farbe für die gesamte Website, stellen jedoch fest, dass die Wirkung dieser einzelnen Farbe unsere Website eintönig und kitschig aussehen lässt. Manchmal sieht es auch dann noch kitschig aus, wenn mehr Farben verwendet werden. Die auf der Website verwendeten Farben sind nicht hierarchisch und kontrastlos. Sie sind alle in einer ähnlichen Graustufe gehalten, sodass die Website grau und schäbig aussieht. Natürlich können wir für das Design auch kontrastreiche Vollfarbblöcke verwenden (viele koreanische Websites verwenden diese Technik). Diese Technik ist ansprechend, weil sie relativ einfach ist, aber sie lässt sich auch leichter kopieren. Doch solchen Designs fehlt die Vitalität. Als Trend sind sie ein bisschen wie Fast Food und können von jedem kopiert werden. Es ist keine Kultur als Grundlage erforderlich. Dies bedeutet natürlich nicht, dass diese Methode völlig nutzlos ist. Sie kann nur als Methode und nicht als Allheilmittel verwendet werden.
Es ist unmöglich, es nur durch Worte zu fühlen. Schauen wir uns also dieses Bild an:

Wir können sehen, dass das Design von IBM nicht viele Farben aufweist, aber dennoch einen Eindruck von Mehrschichtigkeit vermittelt. Er hat hier Schwarz, Hellblau und Weiß, wobei der Kontrast zwischen Schwarz und Hellblau auffälliger ist. Und wir fanden heraus, dass das Schwarz reines Schwarz ist, während das Hellblau leuchtend ist. Dieser starke Kontrast übt einen gewissen Reiz auf das menschliche Auge aus. Und es ist in Schwarz, Weiß und Grau erhältlich. Außerdem sind die Anteile zwischen den dreien nicht gleich. Beim Entwerfen verwenden wir normalerweise Farben mit ähnlichen Graustufen und nicht hoher Sättigung, sodass das endgültige Werk nur grau und eintönig sein kann. Ich werde nicht nach Beispielen für solche Websites suchen, weil niemand damit glücklich wäre. Natürlich schließe ich mich hier auch ein. Haha, du kannst in meinem Portfolio danach suchen, da gibt es bestimmt ein paar graue und hässliche Sachen dieser Art.
Darüber hinaus können wir auch sehen, dass das neue Design von IBM dreidimensionaler ist als das ursprüngliche Design. Dies ist das, was ich oben als Elementebene bezeichnet habe. Durch diese Schichtung wird die visuelle Tiefe des Betrachters erhöht und unsere Webseiten wirken nicht mehr flach. Obwohl es sich nicht um einen 3D-Effekt handelt, glaube ich, dass 2D-Effekte unweigerlich ein neuer Trend im Webdesign werden. Durch die Simulation eines dreidimensionalen visuellen Effekts durch 2D wird das Webdesign dynamischer und der Inhalt reichhaltiger.
Beim Layout aus einfarbigen Blöcken fallen Bilder in leuchtenden Farben stärker ins Auge. Dies ist eine andere Art visueller Ebene, oder man kann es als Kontrast zwischen Komplexität und Einfachheit bezeichnen! Es gibt keine festen Regeln im Design, und es spielen viele Faktoren eine Rolle. Ob ein Design gut oder schlecht ist, hängt davon ab, wie umfassend das Verständnis des Designers von der Welt ist. Daher können sich Designer nicht nur auf die Verbesserung ihrer Produktionsfertigkeiten konzentrieren, sondern müssen auch ihr kulturelles Wissen kontinuierlich erweitern. Erweitern Sie ständig Ihre eigenen Fähigkeiten, damit Sie noch wundervollere Werke gestalten können. Ich möchte mit euch allen hart arbeiten!

<<: So verwenden Sie Vue zum Implementieren von CSS-Übergängen und Animationen

>>: Detaillierte Erklärung des wunderbaren CSS-Attributs MASK

Schritte zum Ausführen von ASP.NET Core im Docker-Container

Erfahrung in der Gestaltung einer mehrschichtigen Benutzeroberfläche im Webdesign

Schritte zum Ausführen von ASP.NET Core im Docker-Container

Lösung für das automatische Trennen der Verbindung von Navicat zur Datenbank nach einer gewissen Zeit

Beispiel zum Ändern des Zeilenabstands einer HTML-Tabelle

Lösen Sie das Problem, dass Sie sich bei der Installation von MySQL auf einem Mac mit Homebrew nicht anmelden können

Einführung in die grundlegenden TypeScript-Typen

So verwenden Sie Standardwerte für Variablen in SASS

Reines CSS zum Hinzufügen von Stil zur ausgewählten Implementierung (kein Skript)

So verwenden Sie vue3 zum Erstellen einer Materialbibliothek

Detaillierte Einführung in den HTML-Head-Tag

Beispiel für eine geplante MySQL-Datenbanksicherung

Artikel empfehlen

So wählen Sie das Format bei der Verwendung von Binlog in MySQL

Analyse und Lösung des Grundes, warum das Frameset-Tag in HTML nicht normal angezeigt werden kann

Diagramm des Bereitstellungs- und Installationsprozesses in der Java+Tomcat-Umgebung

Tomcat erhält den Clientdomänennamen des Nginx-Reverse-Proxys

Detaillierte Erklärung, wie NGINX PV, UV und unabhängige IP der Website zählt

So lösen Sie das domänenübergreifende Front-End-Problem mithilfe des Nginx-Proxys

Detaillierte Erklärung des Unterschieds zwischen der IE8-Kompatibilitätsansicht (IE7-Modus) und dem eigenständigen IE7

MySQL verwendet Init-Connect, um die Implementierung der Zugriffsüberwachungsfunktion zu verbessern

Typora-Codeblock-Farbabgleich und Implementierungscode für die Titelseriennummer

So verwenden Sie Vuex in einem Vue-Projekt

Detaillierte Erläuterung der Kommunikation zwischen Angular-Eltern- und -Kindkomponenten

Einführung in Fork in Multithreading unter Linux

HTML verwendet reguläre Ausdrücke zum Testen von Tabellenbeispielen

Mysql Sql-Anweisungsübungen (50 Fragen)

Vue implementiert Baumtabelle