Einige wichtige Punkte des visuellen Website-Designs
|
Vom Kunsthandwerksdesign über Grafikdesign bis hin zum Webdesign bleiben die Designprinzipien zwar gleich, aber meiner Erfahrung nach bringt der Wechsel des Designmediums viele Besonderheiten des Mediums selbst mit sich. Hier sind einige wichtige Punkte des visuellen Designs von Websites, basierend auf den Erfahrungen anderer und meiner eigenen Erfahrung: 1 – Logo: Grundlegende Logomerkmale, im Einklang mit den Grundlagen des Logodesigns (üblich für Grafikdesign). Anzeigeeffekt: Klarheit, Mindestgröße (aufgrund der Anzeigeauflösung entspricht der Druckwirkung des Offline-Grafikdesigns). 2 – Text: Die Inhaltsebene bestimmt die Schriftart, -größe und -stärke; der Status bestimmt die Farbe (Standard oder einheitlich, je nach Website). 3 – Anzeigen und Inhaltsbilder: Positionierung von Größe und Stil, Harmonie auf derselben Seite, Bildoptimierung, Positionsrhythmus und Größenvergleich. 4 – Symbol: Marke, genauer und angemessener Ausdruck, Designtechnik (basierend auf der Marke), Konsistenz, Funktion: attraktiv, auffällig, leicht zu erkennen, zu verstehen, zu bedienen und zu merken. 5 – Anklickbar (Schaltfläche): Unterschied (nicht anklickbar), basierend auf der Lebenserfahrung der Menschen: Dicke, Anklickbarkeit, Textur (physische Assoziation), Farbe (Marke, Einheit, Kontrast); einheitliche Stilgröße (basierend auf dem einheitlichen inneren Rand des Textes) 6— Hintergrundbild: Schaffung einer Atmosphäre, Übereinstimmung mit dem Produkt, Optimierung (Qualität, Größe, Farbinformationen, Implementierungsplan), 7— Grafik- und Textlayout: Hauptbild und Nebentext, Grafik- und Textrhythmus, Lücken und Modularisierung. 8 – Aktueller Status: Vergrößern (Form), Farbe ändern (invertieren, Kontrast, Helligkeit und Reinheit), Inhaltsaufforderungen nach dem Ein- und Auslinken angeben. 9 – Interaktive Steuerung: angemessener und genauer Stil (Standardwahrnehmung des Systems und der täglichen Routine der Benutzer), Zustand (Optimierung des visuellen Ausdrucksstils und des Aktionsprozesses) und Kreativität. 10 – Laden: Inhaltsrelevanz (Inhaltsrelevanz vor und nach dem Laden), Spaß am langweiligen Warten, Volumen- und Flächenoptimierung, Kreativität. 11 – Benutzerfeedback_Erfolg, Fehler, Eingabeaufforderung, kein Ergebnis: Texterstellung (klar, vernünftig, humanisiert, kreativ), Grafik (klar, auffällig, psychologisch-kognitive Farbgenauigkeit). 12 – Animationseffekt: vernünftiger Prozess (Rationalisierung der Simulation einer realen Umgebung), Kontinuität, Rhythmusgefühl, Ausführung der täglichen Aktionen des Benutzers, Koordination von Soundeffekten und Kreativität. 13 – Anfangs- und Enddesign: Anfang (Markenwerbung, eigene Merkmale, klarer Inhalt, Ausdruck der Atmosphäre, Kreativität. Ende: Echo, Rhythmus (mit dem Anfang), Kreativität. 14 – Adaptives Screendesign (Fullscreendesign): Berücksichtigung der größten und kleinsten Bildschirme (Position von Texten und Bildern, Zeilenumbrucheffekte) 15 – Rasterdesign mit fester Größe: sinnvolle Zellen (unter Berücksichtigung des Goldenen Schnitts), Zellflächenrhythmus und gleichmäßige Ränder 16 – Demo-Designentwurf: die größte und die geringste Berücksichtigung des Inhalts. 17 – Seite: Marke, Konsistenz der Hauptelemente, Wiederverwendbarkeit, Sinn für Rhythmus und Fläche, visuelle Attraktivität, Anleitung beim Browsen, Beziehung zwischen Punkten, Linien und Flächen, Skizzierprinzipien (Verwenden der Grundregeln des Skizzierens zum Erstellen von Seiten). 18 – Lesen: Der Komfort des Hintergrunds zum Lesen (Sehen), der Kontrastkomfort zwischen Inhalt und Hintergrund. Tatsächlich gibt es noch viele weitere Designpunkte, wie Interaktionsdesign und Codedesign. Diese können wir den Benutzern zeigen. Zusammengefasst bilden sie einen großen Prozess des User Experience Designs. Oft können wir dabei nicht jeden Punkt einschätzen, also fassen wir sie zusammen, damit sie jederzeit überprüft werden können! |
<<: Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3
>>: Detaillierte Erläuterung der MySQL-Datenbank mit zig Millionen Datenabfragen und -speicherungen
Artikel empfehlen
Ausführliche Erklärung der Iteratoren in ECMAScript
Inhaltsverzeichnis Vorwort Frühere Iterationen It...
Verwenden Sie CSS3-Hintergrundsteuerungseigenschaften + Farbübergang, um einen Farbverlaufseffekt zu erzielen
CSS3-Hintergrundbild bezogen Kompatibilität: IE9+...
Lösung für das 404-Problem der Tomcat-Installation in Docker
Suchen Sie die Container-ID von Tomcat und rufen ...
Detaillierte grafische Erklärung zum Einrichten von Routing und virtueller Maschinenvernetzung unter Linux
Was ist Routing? Unter Routing versteht man die Ü...
So verwenden Sie IDEA zum Konfigurieren von Tomcat und Erstellen von JSP-Dateien
Bevor Sie idea zum Schreiben von JSP-Dateien verw...
JQuery implementiert das Ausblenden und Anzeigen von Animationseffekten
In diesem Artikel wird der spezifische Code von J...
Detailliertes Tutorial zum Erstellen eines ETCD-Clusters für Docker-Mikroservices
Inhaltsverzeichnis Funktionen von etcd Es gibt dr...
Diagramm des Prozesses von der Deinstallation bis zur Installation von MySQL 5.7.18 yum unter Linux
Nach viel Mühe habe ich endlich den Yum-Installat...
Detaillierte Erklärung zur Ausführung von Skripten oder Anweisungen durch Zabbix auf Remote-Hosts
Szenarioanforderungen 1. Wir können die Skriptfun...
Einführung in häufig verwendete MySQL-Befehle in der Linux-Umgebung
Geben Sie den MySQL-Befehl ein: mysql -u+(Benutze...
Detaillierte Erklärung des Sidecar-Modus in Docker Compose
Inhaltsverzeichnis Was ist Docker Compose Anforde...
JS erzielt Fünf-Sterne-Lobeffekt
Verwenden Sie JS, um objektorientierte Methoden z...
Tutorial-Diagramm zur LAN-Netzwerkkonfiguration für virtuelle Maschinen von VMWare 15.X
Ich habe kürzlich an mehreren virtuellen Maschine...
Was ist ein MySQL-Tablespace?
Das Thema, das ich heute mit Ihnen teilen möchte,...
Tutorial zur Installation von MySQL 5.7.9 mit RPM-Paket unter CentOS 7
Aufgezeichnetes MySQL 5.7.9-Installationstutorial...