Einführung in den visuellen Ausdruck des Kerninhalts von Webseiten (Bild und Text)

Einführung in den visuellen Ausdruck des Kerninhalts von Webseiten (Bild und Text)
Der erste Schritt beim Design ist immer die Optimierung und Verfeinerung von Informationen. „Dies ist ein Satz auf dem Banner des Baidu Alliance User Experience Center. Während ich Webdesign mache, habe ich immer mehr persönliche Erfahrungen und Ideen zu solchen Zusammenfassungen. Natürlich enthält dieser prägnante Satz tatsächlich viel Inhalt. Ich persönlich denke, dass er mindestens die folgenden vier Aspekte umfasst: 1. Welche Informationen müssen aus Sicht der gesamten Attraktivität der Website auf der Webseite platziert werden, um die Attraktivität der Website besser zu realisieren? Welche Informationen müssen beibehalten werden? Und welche Informationen müssen auf anderen Seiten platziert oder sogar einfach verworfen werden? 2. Wie kann man für die Informationen, die auf der Seite platziert werden sollen, besser Text schreiben und Bilder auswählen, um die perfekte Einheit von Funktionalität und visueller Schönheit zu erreichen? 3. Unterscheiden Sie die Wichtigkeit von Informationen, welche sind wichtig und müssen hervorgehoben werden? Und welche sind weniger wichtig? 4. Wie können Sie nach der Unterscheidung der primären und sekundären Informationen diese in Bezug auf Layout, Farbe und Größe, d. h. visuell, besser hervorheben und ausdrücken?
In jedem dieser vier Teile gibt es nahezu endlos viele Themen zu besprechen. Daher werde ich in diesem Artikel nur mein Verständnis des vierten Aspekts, nämlich der Beziehung zwischen dem Kerninhalt und dem visuellen Ausdruck auf der Webseite, zusammenfassen. Ich werde mein Bestes tun, um alle Inhalte aufzuschreiben, die ich berücksichtigt habe, und einige konkrete Beispiele anführen, um meinen Standpunkt zu veranschaulichen, damit jeder ihn besser verstehen kann.
1. Der Einfluss des Kerninhalts auf das Seitenlayout <br />Das folgende Bild zeigt ein Unternehmen, das WordPress-Website-Erstellung anbietet. Auf seiner Homepage können Sie von oben nach unten die folgenden Informationen sehen: Navigation, Logo, Slogan, Arbeitsanzeige, Gründe für die Wahl unseres Unternehmens, Kontaktformular, Protokollliste, E-Mail-Abonnement, Twitter-Informationen und Copyright-Informationen. Das erste Bild ist zweifellos der Slogan und die Arbeitsdarstellung des Unternehmens, die den Kerninhalt auf der Homepage dieser Website darstellen. Denn wenn Sie als Website-Erstellungsunternehmen Ihren Kunden mitteilen, was Sie tun und wie Sie es intuitiv tun, sollte dies der Inhalt sein, den sie am meisten wissen möchten. Welche visuellen Überlegungen wurden also für den Kerninhalt angestellt?
Wir können sehen, dass der Designer im Werbeslogan eine sehr große Textgröße für das Wort „WordPress“ verwendet und eine dunklere graue Farbe gewählt hat, um es von anderen Texten abzuheben und hervorzuheben, dass das Unternehmen eine Website speziell mit WordPress als Backend erstellt. Die Größe des Werkanzeigebildes unter dem Werbeslogan ist mit einer Breite von 540 Pixeln sehr groß, und die Breite des gesamten Designs beträgt 1000 Pixel. Ein so großes Anzeigebild auf der Homepage ermöglicht es den Kunden, das ursprüngliche Erscheinungsbild des Werks sehr klar und direkt zu sehen und ihnen so einen intuitiven Eindruck vom Produktionsniveau des Unternehmens zu vermitteln. Eine derart groß angelegte Werkdarstellung hat tatsächlich vage das Layout der gesamten Website bestimmt. Überlegen Sie einmal: Nachdem Sie im oberen linken Bereich des Bildschirms ein Rechteck mit einer Breite von 540 Pixeln und einer Höhe von 460 Pixeln platziert haben, welche Informationen sollten dann im nächsten Bereich platziert werden? Es ist eigentlich so, als würden Sie Bausteine ​​platzieren, Sie platzieren sie einfach nacheinander entsprechend ihrer Wichtigkeit. Natürlich ist dies nicht die einzige Layoutmethode, aber egal, welche Layoutmethode verwendet wird, unser Denken sollte auf funktionalen Überlegungen basieren. Wir können also kreativ sein, müssen aber den Unterschied zwischen dieser Kreativität und reiner, unkonventioneller Kreativität verstehen.
Visuelle Darstellung des Kerninhalts einer Webseite 123WORDPRESS.COM
Wenn uns das Seitenlayout oben noch recht standardmäßig vorkommt, vermittelt uns das Layout der Homepage des Hotels unten möglicherweise einen Eindruck von Neuheit. Es ist ersichtlich, dass dieses Design ein großes Bild von Lebensmitteln als Hintergrund verwendet und die Navigation und der Hauptinhaltsbereich nur ein Drittel der gesamten Seitenhöhe einnehmen, sodass das Hintergrundbild in einem großen Bereich dargestellt werden kann. Wie beim obigen Design besteht der Zweck dieses Layouts nicht einfach darin, anders zu sein oder optisch ansprechend zu sein, sondern die Besonderheit des Hotels kann im Catering-Aspekt liegen. Um den Kerninhalt hervorzuheben, wurden im Layout entsprechende Überlegungen angestellt. Auch das Restaurant unten legt im Hauptbildteil Wert auf köstliches Essen, aber die beiden verwenden völlig unterschiedliche Layoutmethoden. Obwohl jedes einzigartige Überlegungen zur Informationsarchitektur hat, kann man sie auch als zwei verschiedene kreative Möglichkeiten betrachten, denselben Kerninhalt auszudrücken.
2. Der Einfluss des Kerninhalts auf das Farbschema Lofter ist ein leichter Blog-Dienst von NetEase, der vier Haupttypen von Informationen enthält: Bilder, Musik, Text und Video. In Bezug auf das Vorlagendesign von Lofer hat Herr Mugou im Artikel „LOFTER Light Blog Template Design“ die folgenden Designüberlegungen für die Vorlage, die hauptsächlich Bilder anzeigt: „Diese Vorlage ist normalerweise so gestaltet, dass sie Fotografie-Benutzer zufriedenstellt. Der Bildanzeigebereich muss groß genug und cool genug sein; auf der Vorlagen-Homepage können mehrere Bilder auf einem Bildschirm angezeigt werden; der Hintergrund muss dunkel sein, um das aktuelle Bild hervorzuheben; das Rahmendesign lässt das Bild hervorstechen oder macht das Bild exquisiter.“ Durch Analysieren und Verstehen dieser Designidee können wir feststellen, dass der Bildanzeigebereich groß genug sein muss, was die Layoutüberlegung ist, die wir oben erwähnt haben, und der Hintergrund dunkel sein muss, was Auswirkungen auf das Farbschema hat, das wir hier besprechen werden.
An der fertigen Arbeit von Puppet können wir erkennen, dass der gemäß der Designidee erstellte graue Hintergrund ruhig und zurückhaltend ist und einen scharfen Kontrast zum weißen Bildrand und Hintergrund bildet. Das grau-weiße Farbschema steht außerdem nicht im Widerspruch zu den bunten Bildern. Egal, wie sich das Bild ändert, es kann mit Grau und Weiß abgestimmt werden. Daher fallen die bunten Bilder vor dem weißen Hintergrund und Rand stärker ins Auge und ermöglichen es, wichtige Informationen wie Fotos visuell vollständig zum Ausdruck zu bringen.
Ein weiteres Beispiel ist Naver, eine koreanische Website für Suchmaschinendienste. In dem Artikel „Effiziente Designvisualisierung“ schrieb liuman0722 über das Design von Naver: „Naver Shopping, im Besitz von Naver, einer bekannten koreanischen Portal-/Suchmaschinen-Website, ist als Produktsuchdienst positioniert. Durch die Suche nach Produktnamen können Sie die Produktlinks auflisten, die von fast allen großen koreanischen E-Commerce-Websites nach Produktkategorien bereitgestellt werden. Daher werden auf der Benutzeroberfläche starke Kontrasttöne verwendet, um die Suchfunktion und den Navigationsbereich (den grünen Bereich in der oberen linken Ecke der Seite) hervorzuheben. Durch visuelle Anleitung können sich Benutzer auf den Kerninhalt und den Fokus ihrer Sicht konzentrieren. Auf einer Seite mit Weiß als Hauptfarbe sehen die Augen zuerst die stark gefärbten Teile, sodass kräftige Farben auch verwendet werden können, um den Kerninhalt hervorzuheben und die Sicht des Benutzers dorthin zu lenken.“
Alle visuellen Designs basieren auf Informationen. Wir müssen zunächst den Inhalt und die Struktur der Informationen klären, damit wir wissen, worauf wir uns konzentrieren und wo wir aufhören müssen. Andererseits kann man sagen, dass viele Designideen und -gedanken in den Informationen selbst implizit enthalten sind, wie beispielsweise das oben erwähnte Layout und Farbschema. Solange die Informationen verfeinert und optimiert werden, wird im Prozess der Informationssortierung nach und nach klar, wie dies zu tun ist.

<<:  Die Beziehung zwischen JS-Konstruktor und Instanziierung sowie Prototypeinführung

>>:  Detaillierte Beispiele zur Verwendung der Box-Shadow-Eigenschaft in CSS3

Artikel empfehlen

So verwalten Sie MySQL-Indizes und Datentabellen

Inhaltsverzeichnis Tabellenkonflikte finden und b...

Detaillierte Erläuterung der MySQL-Benutzer- und Berechtigungsverwaltung

Dieser Artikel beschreibt anhand von Beispielen d...

Über den Lösungseintrag zur fehlenden Reaktion der Seite bei Verwendung von window.print() in React

Inhaltsverzeichnis 1. Hintergrund des Problems: 2...

Erfahren Sie mehr über den Hyperlink A-Tag

fragen: Ich habe den Hyperlink mit CSS formatiert...

Detaillierte Erläuterung der Front-End-Methode zum Übergeben von Parametern zwischen HTML-Seiten

In Projekten kommt es häufig vor, dass eine Liste...

Kurze Analyse des MySQL-Zeichensatzes, der Datenbankwiederherstellungsfehler verursacht

Beim Importieren von Daten mit falscher MySQL-Zei...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.5

Organisieren Sie die Tutorialnotizen zur Installa...

Native JS realisiert einheitliche Bewegungen verschiedener Sportarten

In diesem Artikel wird eine einheitliche Bewegung...

Zusammenfassung von 4 Methoden des Div+CSS-Layouts, um eine 2-Enden-Ausrichtung von CSS zu erreichen

Das Div+CSS-Layout zur Erzielung einer 2-Enden-Au...

So aktivieren Sie die Swoole Loader-Erweiterung auf dem virtuellen Host des Linux-Systems

Besonderer Hinweis: Es wird nur die Swoole-Erweit...

Beheben Sie den 1251-Fehler beim Herstellen einer Verbindung zwischen MySQL und Navicat

Ich habe den Computer neu installiert und die neu...

Verwendung und Unterschiedsanalyse von „Ersetzen in“ und „Einfügen in“ beim Update doppelter Schlüssel in MySQL

Dieser Artikel veranschaulicht anhand von Beispie...

Holen Sie sich die IP und den Hostnamen aller Hosts auf Zabbix

zabbix Zabbix ([`zæbiks]) ist eine Open-Source-Lö...

Einführung in 10 Hooks in React

Inhaltsverzeichnis Was ist ReactHook? React biete...

Analyse des allgemeinen MySQL-Abfrageprotokolls und des langsamen Abfrageprotokolls

Die Protokolle in MySQL umfassen: Fehlerprotokoll...