Die Rolle und Methoden der Informationskommunikation im visuellen Design von Websites (Bild und Text)

Die Rolle und Methoden der Informationskommunikation im visuellen Design von Websites (Bild und Text)
Das zeitgenössische visuelle Webdesign hat drei völlig unterschiedliche, aber fortschreitende Prozesse durchlaufen, von der anfänglichen Informationsstapelung über die spätere Grafik und Abstraktion bis hin zur heutigen Informationsvisualisierung. Mit Ausnahme einiger Kunst- oder persönlicher Websites besteht der Hauptzweck des visuellen Designs bei den meisten anderen Websites derzeit darin, Informationen präzise zu vermitteln.
Informationen werden hauptsächlich durch Text, Bilder und Farbblöcke übermittelt und den Benutzern nach der Anordnung im Browser angezeigt. Dies erfordert, dass der überwiegende Teil der Website aus klar lesbarem Text und genauen Bildern bestehen muss.
Wie andere Arten des visuellen Designs muss auch das visuelle Design informationsbasierter Websites einigen grundlegenden Kunstregeln folgen und einige einfache und effektive Kunstmethoden verwenden, um dies zu erreichen. Lassen Sie uns unten über diese spezifischen Methoden sprechen.
Stolzer Raum ———————————————————
Effizienteres Browsen Bei Informationen, die hauptsächlich aus Text und Farbblöcken bestehen, lohnt es sich, immer wieder darüber nachzudenken, wie man Benutzern ein reibungsloses Browsen und eine einfache Bedienung ermöglichen kann. Normalerweise beneiden viele einheimische Designer die Designer in Ländern, in denen Buchstaben als Schrift verwendet werden, denn im Webdesign beträgt die kleinste Pixelschriftart für Chinesisch nur 12 Pixel Songti und die größte Pixelschriftart 14-18 Pixel. Pixelschriften, die diesen Bereich überschreiten, sind fast nicht zu erkennen oder sehr hässlich. Der aus Buchstaben bestehende Inhalt ist jedoch nicht beschränkt und kann so klein wie 9 Pixel oder sogar 8 Pixel sein und trotzdem noch leicht unterschieden werden. Dies lässt viel Spielraum für die Gestaltung von Informationsdesigns.
Wie gestalten wir Informationen also effektiv auf Chinesisch?
Informationskommunikation im visuellen Website-Design 123WORDPRESS.COM
Erstens werden bei der Farbmethode Graustufenfarben verwendet, um die Schrift optisch kleiner erscheinen zu lassen, während wichtiger Inhalt dunklere, reinere Farben verwendet, um ihn größer erscheinen zu lassen. Die Lesbarkeit des Textes kann durch gelegentliches Verwenden einer hellen Hintergrundfarbe unter großen Textabschnitten effektiv verbessert werden. Die Farbe des Haupttextes ist im Allgemeinen nicht die Systemvorgabe reines Schwarz Nr. 000, die für einen weißen Hintergrund eine sehr grelle Farbe ist und den Raum leicht überfüllt und beengt erscheinen lassen kann.
Zweitens ist die Anordnungsmethode eigentlich die grundlegende Methode des Schriftsatzes, bei der der wichtigste große Text und der kleinste Hilfstext zusammengefügt werden und die Unterschiede zwischen ihnen durch Kontrast hervorgehoben werden, um ihre jeweiligen Merkmale hervorzuheben.
Darüber hinaus müssen wir Wörter, die in Zeilen unterschiedlicher Länge stehen, als versetzte „Zeilen“ betrachten; wenn viele Wörter vorhanden sind und diese in Blöcken angezeigt werden, können wir sie als „Flächen“ und nicht als Zeilen betrachten. Die Beibehaltung der visuellen Aufteilung und Anordnung von Linien und Flächen erleichtert die Raumaufteilung.
Drittens: Kontrollieren Sie die Abstände und Ränder. Normalerweise ist der Abstand außerhalb des Inhalts größer als der Abstand zwischen dem Inhalt und der Abstand zwischen Inhaltsblöcken ist größer als die Lücke zwischen dem Inhalt selbst. Dadurch sieht der Inhalt kompakter und ordentlicher aus und gibt den Augen genügend Platz zum Ausruhen, sodass sie sich nicht überfüllt und müde fühlen.
Passen Sie den Abstand und den Zeilenabstand des Hauptinhaltstextes an und versuchen Sie, nicht den Standardabstand des Systems zu verwenden. „Wie man die Länge der Leerzeichen in verschiedenen Buchstabenkombinationen ändert und wie man den besten Druckstil erzielt. Das ist eine schöne, echte künstlerische Feinheit, die die Wissenschaft niemals erfassen kann. Es ist wirklich wunderbar. – Steve Jobs.“ Schenken Sie Daten wie dem Goldenen Schnitt daher nicht zu viel Aufmerksamkeit. Echte Kunst ist der Technologie immer viel weiter fortgeschritten. Dies erfordert unsere langfristige künstlerische Praxis, um unseren ästhetischen Geschmack kontinuierlich zu verbessern.
Die proprietären Schriftarten von Apple werden überall unter Beachtung der Abstände und Zeilenabstände verwendet, was sie einzigartig und dynamisch macht.
Leerraum zu lassen, um den Augen mehr Entspannung zu bieten, ist eine Technik der traditionellen chinesischen Malerei. In der traditionellen chinesischen Malerei ist „Weiß als Schwarz verwenden“ eigentlich eine Gesamtbetrachtung des Raums. Tatsächlich scheitern viele Webdesigns wegen der Vernachlässigung des „weißen“ Raums. Wenn auf einer Seite nicht genügend und bewusst Leerraum vorhanden ist, können Benutzer die Seite nicht problemlos lesen, Informationen werden nicht effektiv übermittelt und es handelt sich nicht um ein gutes Design.
Wenn eine Seite große Textabschnitte oder Bilder enthalten muss, die nicht gelöscht werden können, ist die Gewährleistung der Lesbarkeit eine große Herausforderung. In diesem Fall müssen wir den Umständen entsprechend handeln, Leerstellen verbergen, die Farbtendenz anpassen und den Kontrast zwischen Hell und Dunkel erhöhen. Beispielsweise ist es eine effektive Möglichkeit, den Titel hervorzuheben, indem man die Farbe von großem Text um den Titel herum grauer und heller macht.
Geben Sie dem Raum Glanz <br />Der Raum ist für Designer ebenso wie die Farbe ein grundlegendes Gestaltungselement und sie müssen die Initiative ergreifen, wenn sie dieses besondere Element einsetzen.
Wenn Ihr Design rein, elegant, raffiniert oder sogar zenartig wirken soll, sollten Sie den leeren Raum wertschätzen und lieben. Er ist nicht notwendig, also stören Sie diesen künstlerischen Raum bitte nicht.
Von der Website des Schwerlastfahrers über die Bank of America bis hin zur einst geschäftigen Lotterie-Website wird die gesamte Seite immer fest vom Weißraum beherrscht.
Die Farbe der Stille
 —————————————————
Farbe – simulierter Eyetracker Auf Webseiten mit vielen Informationen als Thema werden Text und Farbblöcke bemalt, wenn die Webseite eine Leinwand ist. Bei einigen Tool-Websites mit einer großen Anzahl von Benutzern, Produkten und Technikern wird Ihnen, um das Laden zu beschleunigen und Downloadknoten zu sparen, fast das Recht entzogen, Bilder zu verwenden. Daher sind bei dieser Art von Website Farbe und Text Bilder, und die endgültige Wirkung der Webseite hängt von der Farb- und Textverwaltung durch den Designer ab, um visuelle Schönheit zu erzielen und die Browsing-Reihenfolge zu steuern.
Analyse der Verwendung von Farben auf der Kmart-Website, die Farben verwendet, um den Benutzern das Browsen zu erleichtern und auch die Geschäftsideen der Website zum Ausdruck zu bringen.
Die Farbe von Text <br />Wenn wir Text normalerweise Farben zuordnen, unterteilen wir sie nach der Wichtigkeit des Textes. Der wichtigste Text erhält die dunkelste und hellste Farbe. Anderem Text werden ebenfalls Farben von dunkel nach hell, von hell nach gräulich-weiß zugewiesen, in der Reihenfolge der Wichtigkeit, basierend auf der Helligkeit und Reinheit der Farbe.
Wenn wir eine große Menge Text anordnen, müssen wir auch die Textfarbe berücksichtigen. Um den Kontext klar zu halten, verwenden wir normalerweise kleine Bereiche mit Schlüsselinhalten wie Überschriften oder wichtigem Text in dunklen und hellen Farben, während große Bereiche mit allgemeinem Text Dunkelgrau Nr. 333 oder Graustufenfarben wie Nr. 666 verwenden. Da #333 einen kleinen Weißanteil hat, ist der Kontrast zum weißen Hintergrund nicht so stark. Gleichzeitig ist die überwiegend schwarze Farbe für eine eindeutige Identifizierung verantwortlich. Tatsächlich gibt es viele Farben dieser Art. Wenn sie sinnvoll eingesetzt und verteilt werden, wirkt die gesamte Webseite klar und angenehm zu verwenden.
Natürlich müssen wir auch beachten, dass die Wirkung einer Farbe auf der Seite umso schwächer wird, je häufiger sie eingesetzt wird. Beispielsweise hat die Website der Citibank eine leuchtend blaue Farbe, die sehr ins Auge fällt. Wenn sie jedoch in großen Mengen verwendet wird, ist sie auf der Seite nicht so hell wie das Dunkelblau, ganz zu schweigen von der roten Farbe an der Seite des Logos. Der Grund, warum eine so helle Kombination auch einfach und schön ist, liegt darin, dass neben einer großen Menge Weiß als Hintergrund eine weitere wichtige Rolle das helle Blockdesign spielt.
Blockfarbe <br />Beim Webdesign für Zahlungs- und Bankgeschäfte ist Farbblockdesign manchmal fast eine notwendige Technik zum Anpassen von Kapitelmodulen. Wenn ein einheitlicher Stil und Text erforderlich sind, verwenden die Farbblöcke im Allgemeinen Farben mit geringer Helligkeit und geringer Reinheit. Manchmal sind die Seiteninformationen groß und blass. In diesem Fall verwenden wir sehr kleine Farbblöcke oder -töne, um den Blick des Benutzers zu lenken. Solche Farbblöcke verwenden im Allgemeinen sehr helle und lebendige Vollfarben.
Google Wallet verwendet Blockfarben, um den Blick des Benutzers zu lenken und ein angenehmes und umfassendes visuelles Erlebnis zu schaffen.
Farbkontrast <br />Wenn die Aufgabe des Farbblocks darin besteht, die visuelle Schönheit hervorzuheben und anzupassen, können Sie eine Kombination aus hochreinen Farbblöcken mit geringer Helligkeit verwenden. Eine solche Kombination ist nicht sprunghaft oder grell, sondern erzeugt leicht ein Gefühl von Rhythmus, wodurch das Bild farbenfroh erscheint.
Digg verwendet für die Gestaltung seiner Website gefährliche Kontrastfarben, die jedoch aufgrund der reduzierten Helligkeit hell und schön wirken.
Farbverteilungsverhältnis <br />Wenn Sie bei den meisten Textinformationsdesigns eine Seite angenehm und exquisit aussehen lassen möchten, müssen Sie das Farbverhältnis des Textes steuern. Im Allgemeinen können Sie 5 % helle Farben verwenden, um extrem wichtigen Text wie einen Betrag usw. hervorzuheben, etwa 60 % Farben mit höherer Helligkeit (z. B. Dunkelgrau) verwenden, um Text mit Schlüsselinhalt hervorzuheben, und etwa 15 % Farben mit mittlerer oder niedriger Helligkeit verwenden, um notwendigen Hilfstext hervorzuheben. Die restlichen 20 % sind Farben mit der niedrigsten Helligkeit (z. B. Hellgrau), die für nicht unbedingt notwendigen Hilfstext reserviert sind. Der Vorteil dieses Verhältnisses sind klare Schichten und deutliche Hervorhebungen. Der letzte Text mit niedriger Helligkeit ist tatsächlich als heller grafischer Farbblock gestaltet, der dem Betrachter hilft, die Reihenfolge beim Blättern zu bestimmen, und den psychologischen Druck verringert, der durch große Textabsätze entsteht.
Farbverteilung von man.de und Bank of America<br /> Tolle Details ——————————————————
Zahlungsdetails <br />Wenn es um Details geht, können wir mit Websites wie Tenpay und Alipay beginnen, die hauptsächlich persönliche Kontoinformationen verwenden. Da Tenpay sich auf Zahlungskanäle von Drittanbietern konzentriert, sind klare Informationen und bequemes Bezahlen die Grundlage der Zusammenarbeit. Das Design erfordert auch Einfachheit und Klarheit und hebt die Funktionalität hervor, was das Seitendesign relativ konservativ und zurückhaltend macht. Die Abhängigkeit von Alipay von Taobao ist offensichtlich, und die von Taobao vermittelte Designidee ist sehr offensichtlich. Sie erfordert, dass die Vielfalt der Zahlungsmethoden und die Fülle an Waren und Anwendungen im Seitendesign deutlich widergespiegelt werden, damit es umfangreicher und blendender erscheint. Daher sind viele Seiten übermäßig ausgefallen und etwas unkonzentriert. Einfachheit und Designreichtum sind die beiden Wege, die die beiden Unternehmen eingeschlagen haben. Mit der Entwicklung der Branche und der Geschäftsausweitung nähern sie sich jedoch auch den Attributen des jeweils anderen an. Es ist nicht überraschend, dass es sich bei beiden Parteien im Wesentlichen um dasselbe Unternehmen handelt, sodass hinsichtlich der visuellen Details der Seite möglicherweise Spielraum für Gestaltung besteht.
Kontrast schafft Schönheit <br />Im Design entstehen ohne wiederholte Vergleiche keine wunderbaren Details. Details sind deshalb so schön, weil sie schwer zu erkennen, aber dennoch klar sichtbar sind. Derzeit müssen Designer n Optionen durchgehen, um die subtilen visuellen Unterschiede zu erkennen. 1px wunderbare Variation Als das iPhone 2007 herauskam, verliebten sich zahllose Designer in seine exquisite Benutzeroberfläche, und die auf 1px genauen Symbole ließen auch viele Markendesigns weit hinter sich. Apple beherrscht die Verwendung von 1px häufig gut, um lebensechte dreidimensionale Effekte wie Projektion, Konvexität und Konkavität sowie Hervorhebung zu erzeugen. Auch im Webdesign beeinflusste Apple mit seinen exquisiten Techniken eine ganze Generation des Website-Designs.
Es ist erwähnenswert, dass diese sorgfältige Darstellungstechnik vollendete Designfähigkeiten und eine Beherrschung des Designmaßstabs erfordert. Wenn Sie nicht aufpassen, wird Ihr Design starr und langweilig und verliert seine Vitalität, genau wie massenproduzierte Ölgemälde in einer Fabrik oder die Produkte hochpräziser Kameras. Viele Designs sind Vertreter dieser unbeschreiblichen Handwerkskunst. Solche Designs sind oft nur um des Realismus willen realistisch, was oft die Fähigkeit des Designs, Informationen zu vermitteln, schwächt.
Tatsächlich veranschaulichen auch Apples Rückkehr zum neuen Lion-System und die Transformation des Symboldesigns beim Nokia N9 den wichtigen Trend, dass sich das Design wieder mehr auf den Ausdruck von Informationen konzentriert.
Apple hat seine ursprünglichen komplexen Symbole in seinem neuen Lion-System in koordinierte, vereinfachte graue Symbole geändert. Das N9 von Nokia hat sein Symboldesign von den ursprünglichen, schwerfälligen, maschinenähnlichen Symbolen zu einfachen, hellen und leicht erkennbaren Symbolen mit farbenfrohen Farbverlaufshintergründen und weißen Silhouetten geändert. Außerdem wurde die Krümmung der Symbole weiterentwickelt, um sie von Apples abgerundeten Quadraten abzuheben, und so ein eigener Stil entwickelt.
Erweiterung von VI Eine weitere Möglichkeit, die visuelle Einheitlichkeit und Einzigartigkeit der Website zu wahren, besteht darin, die umfassende Anwendung von Corporate VI im Design sicherzustellen, insbesondere die Erweiterung der unternehmensweiten Standardfarben auf Webseiten. Die Kombination von Farbstufen unterschiedlicher Helligkeit und Textfarben kann die allgemeine Einzigartigkeit und Wiedererkennbarkeit der Website sicherstellen. Wallmart und Tesco haben ihre Standardfarben im Webseitendesign erweitert, um die Website einheitlich und klar zu gestalten. Wallmart hat sogar den Fernsehbildschirm seiner Produkte auf Blau geändert. Durch die richtige Verwendung von Farben ist die Website klar und schön. Wer sagt, dass Websites von Einkaufszentren in warmen Farben gehalten sein müssen?
Zusammenfassend handelt es sich bei den meisten davon um grundlegende Anwendungen einiger grundlegender Methoden und Mittel des Kunstdesigns im visuellen Website-Design. Solange wir beim Design auf die Verbindung zwischen Netzwerktechnologie und traditioneller Kunstästhetik achten, werden wir definitiv mehr und bessere andere Designtechniken entdecken können, sodass unsere Arbeiten Informationen leichter präzise vermitteln und exquisiter und einzigartiger sein können als unsere Kunstwerke.

<<:  Detaillierte Erklärung zur Verwendung von HTML-Einbettungs-Tags und -Attributen

>>:  Details zu benutzerdefinierten Vue3-Anweisungen

Artikel empfehlen

5 Gründe, warum sich Responsive Webdesign nicht lohnt

Dieser Artikel stammt aus Tom Ewers Managewp-Blog ...

Über die praktische Anwendung von HTML-Mailto (E-Mail) sprechen

Wie wir alle wissen, ist „mailto“ ein sehr praktis...

Webinterview: Der Unterschied zwischen MVC und MVVM und warum Vue nicht vollständig mit MVVM kompatibel ist

Inhaltsverzeichnis Unterschied zwischen MVC und M...

Detaillierte Einführung in das MySQL-Schlüsselwort Distinct

Einführung in die Verwendung des MySQL-Schlüsselw...

Lösung für die Willkommensmeldung im Notfallmodus beim Booten von CentOS7.4

Heute habe ich eine virtuelle Maschine für ein Ex...

js Array-Einträge () Holen Sie sich die Iterationsmethode

Inhaltsverzeichnis 1. Detaillierte Syntax der Met...

Oberflächliches Webdesign

<br />Ich war schon immer der Meinung, dass ...

Der Docker-Container wird direkt ausgeführt, um den öffentlichen IP-Vorgang über Ping abzurufen

Holen Sie sich die lokale öffentliche IP-Adresse ...

Details zum Lazy Loading im Vue-Routing

Inhaltsverzeichnis 1. Was ist Lazy Loading von Ro...

Detaillierte Schritte zur Entwicklung von WeChat-Miniprogrammen mit Typescript

Auf die Vorteile von Typescript müssen wir nicht ...

MySQL 5.7.17 Installations- und Konfigurations-Tutorial für Mac

1. MySQL herunterladen Klicken Sie auf die Downlo...

Detaillierte Beispiele für den Unterschied zwischen den Methoden watch und computed in Vue.js

Inhaltsverzeichnis Vorwort einführen 1. Wirkungsm...

JavaScript implementiert die Operationen „Alle auswählen“ und „Alle abwählen“

In diesem Artikel wird der spezifische Code für J...

So zeigen Sie Linux-SSH-Dienstinformationen und den Ausführungsstatus an

Es gibt viele Artikel zur SSH-Serverkonfiguration...

Analyse des Konfigurationsprozesses zur Installation von MariaDB basierend auf Docker

1. Installation Suchen Sie über DockerHub nach de...