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
Detaillierte Erläuterung des Beispiels zum Einbetten von Videos in eine HTML-Seite und zum Umschalten von Videos mit JS-Steuerung
Zunächst lautet der HTML-Code zum Einbetten des Vi...
Beschreibung der Standardtransaktionsisolationsebene von MySQL und Oracle
1. Transaktionsmerkmale (ACID) (1) Atomarität. Di...
Schritte zum Übertragen des neuen Kernels auf das Linux-System
1. Laden Sie das Ubuntu16.04-Image und den entspr...
Lösen Sie das Problem beim Laden der Vektorkartenquelle in OpenLayers 3
1. Vektorkarte Vektorgrafiken verwenden gerade Li...
Lösung für das Problem, dass Java keine Verbindung zu MySQL 8.0 herstellen kann
In diesem Artikel finden Sie eine Sammlung von Ja...
Häufige Anwendungsszenarien für React Hooks (Zusammenfassung)
Inhaltsverzeichnis 1. Staatshaken 1. Grundlegende...
So fügen Sie img-Bilder in Vue-Seiten ein
Wenn wir HTML lernen, führt das Bild-Tag <img&...
So führen Sie mehrere MySQL-Instanzen unter Windows aus
Vorwort Unter Windows können Sie mehrere MySQL-In...
Die richtige Verwendung von MySQL-Indizes und detaillierte Erklärung der Indexprinzipien
1. Einleitung Warum brauchen wir Indizes? In allg...
Zwei Möglichkeiten, den 30-Sekunden-Werbecode aus dem Youku-Video zu entfernen
Ich glaube, jeder kennt dieses Gefühl: Ein Video m...
Detaillierte Erklärung der Unterschiede zwischen SQL Joint Query Inner Join, Outer Join und Cross Join
Beim Entwickeln von Anwendungen, die eine Datenba...
So löschen Sie schnell alle Tabellen in MySQL, ohne die Datenbank zu löschen
Dieser Artikel beschreibt anhand eines Beispiels,...
Vue verwendet Mixins zur Optimierung von Komponenten
Inhaltsverzeichnis Mixins-Implementierung Zusamme...
Nginx: Ein Domänenname für den Zugriff auf mehrere Projekte – Methodenbeispiel
Hintergrund Kürzlich stieß ich bei der Bereitstel...
Erfahren Sie, wie Sie die Selbstüberwachung von Apache SkyWalking schnell aktivieren
1. Aktivieren Sie Prometheus-Telemetriedaten Stan...