So erstellen Sie einen Styleguide für Ihre Website im Webinterface-Design (mit Bildern und Text)
|
Was ist ein Styleguide? Einfach ausgedrückt handelt es sich dabei um ein Dokument, das Ihnen erklärt, wie Sie eine Geschichte erzählen. Es legt Standards fest, beispielsweise für das Verfassen von Texten, die Formatierung, die Erstellung visueller Elemente und interaktiver Methoden usw. Stilrichtlinien haben ihren Ursprung in der Druckwelt, beispielsweise bei Zeitungen (siehe Stilrichtlinien des Guardian); sie sind auch im Internet von großem Wert. Egal ob im klassischen Druck oder im Internet: Das Wichtigste ist der „Inhalt“. Das ultimative Ziel eines Styleguides besteht darin, Ihre Inhalte in einem klaren und konsistenten visuellen Stil zu präsentieren. Die Global Experience Language (GEL) der BBC ist ein hervorragendes Beispiel für einen Website-Styleguide. Um sich zunächst einen kurzen Überblick zu verschaffen, können Sie rechts auf der Seite unter „Download GEL Web Styleguide“ ein PDF-Dokument herunterladen.  Sie denken vielleicht: „Sollten wir als Designer diese Dinge nicht instinktiv wissen? Warum sollten wir sie in Dokumente aufnehmen?“ Bei der tatsächlichen Arbeit ist es für Designer unmöglich, sich um alles zu kümmern. Beispielsweise können viele Personen und Teams an Geschäftsforschung, Inhaltsstrategie, Benutzererfahrung, technischer Entwicklung, Qualitätssicherung, Bereitstellung und anderen Aspekten beteiligt sein. Sie müssen die Dokumente zum richtigen Zeitpunkt an die entsprechenden Kooperationsabteilungen übermitteln, damit diese die Merkmale des Website-Produkts bei Bedarf genauer verstehen können. Normalerweise beginnen der Interaktionsdesigner und der visuelle Designer mit der Arbeit am Stilhandbuch, nachdem die Arbeit am Design der Website-Benutzeroberfläche abgeschlossen ist. Sehen Sie, ob Ihnen dieses Szenario bekannt vorkommt: Sie haben in Photoshop oder Fireworks einen perfekten visuellen Prototyp erstellt. Jeder Pixel ist perfekt, der Zeilenabstand ist gut kontrolliert und das Farbschema ist sinnvoll und aussagekräftig. Großartig, jetzt ist es an der Zeit, das Design an den Front-End-Entwickler zu übergeben. Wie möchten Sie dem Entwickler jedes Detail des Designs mitteilen? Denken Sie an die wichtigen Designentscheidungen zurück, die Sie während des Designprozesses getroffen haben, die 60 % Deckkraft des Hintergrunds, den ein Pixel breiten hellgrauen Rand des Containers, die pixelgenauen Einstellungen für Polsterung und Ränder … Wie sollten Sie all dies dem Entwickler mitteilen, damit er diese wichtigen Details versteht?  Ein Styleguide muss nicht jedes Pixel in jedem Designelement erklären. Was wir tun müssen, ist, eine Reihe allgemeiner Designprinzipien zusammenzufassen, damit die relevanten Personen im Projekt sie verstehen und schätzen können. Dieser relativ abstrakte Ansatz kann auch Ihre gestalterischen Ideen und Absichten widerspiegeln. „Konsistenz“ ist eine universelle Qualität, die alle Elemente der Benutzeroberfläche haben sollten. Als Teil des Designsystems sollten sie alle ein konsistentes Designkonzept widerspiegeln. Außerdem ist es wichtig, den visuellen Stil und das Erlebnis konsistent zu halten, wenn die Benutzer mit unterschiedlichen Geräten auf Ihre Site zugreifen. Wie Nathan Borror 2009 in einem Artikel über Schnittstellenharmonie sagte: „Eine gute Schnittstellenkonsistenz wird von den Benutzern nicht bemerkt.“ Mit anderen Worten: Die wunderbare Erfahrung, die eine gute Schnittstellenharmonie mit sich bringt, wird den Benutzern Freude bereiten, ohne dass sie es merken. In meinem Styleguide verwende ich in der Regel das in diesem Artikel vorgestellte „Interface Harmony Canvas“, bei dem alle typischen Design-Elemente des Projekts gleichzeitig auf einem Canvas dargestellt werden, inklusive ihrer unterschiedlichen Zustände und dazugehörigen Code-Schnipsel.  Warten Sie nicht bis spät in einem Projekt, um mit der Arbeit an einem Stilhandbuch zu beginnen; Sie können dem Dokument im Verlauf des Designprozesses nach und nach ausgereifte Schnittstellenstilstandards hinzufügen. Es empfiehlt sich, bei der Erstellung von Schnittstellenelementen sorgfältig auf deren Konsistenz und Standardisierung zu achten.  Fokus auf Kommunikation Als Designer verlieren wir uns oft in den Details des Designs. Denken Sie immer daran, dass es beim Design im Wesentlichen darum geht, Informationen zu vermitteln, also zu kommunizieren. Die allgemeine „Designlösung“ ist auch eine Reaktion auf ein bestimmtes Makroproblem. Darüber hinaus müssen wir zu Kommunikationszwecken einen umfassenden Stilleitfaden erstellen, in dem die Designentscheidungen und die Überlegungen dahinter erläutert werden. Kurz gesagt sollten wir einen Stilleitfaden mit diesen „großen“ Elementen als Ausgangspunkt erstellen und sie dann im Laufe der Zeit schrittweise verfeinern. Man kann sagen, dass die nachfolgende Designarbeit sehr ruhig und koordiniert abläuft, wenn Sie bereits vor dem Eintritt des Designprozesses in die Detailphase über die globalen Elemente nachdenken. Tatsächlich erinnert dieser Vorgang ein wenig an das Prinzip von CSS (Cascading Style Sheets). Bei den sogenannten Cascading Style Sheets geht es um die Kaskadierung von Makrostrukturen hin zu Mikrodetails. Man könnte den Stilleitfaden also, wenn man so will, als „kaskadierenden Stilleitfaden“ bezeichnen.  Nachdem wir nun viel Boden abgedeckt haben, schauen wir uns die grundlegenden Schritte und Prozesse zum Erstellen eines Styleguides an. 1. Übersicht Eine kurze Beschreibung des Projekts, einschließlich einer Einführung in die Projektziele und -lösungen. In diesem Teil haben Sie die Möglichkeit, mit anderen Mitgliedern über einige wichtige Richtungsfragen zu kommunizieren, um ihnen den Schwerpunkt und die Ausrichtung des gesamten Projekts klarzumachen. Gleichzeitig können Sie auch kurz den Stil, den Ton und die Inhaltsstrategie beschreiben, die die Website haben soll. 2. Das im Layoutseitendesign verwendete Rastersystem, grundlegende Layoutbedingungen, Positionierungsregeln für Seitenmodule usw. Sie müssen die Positionierung einiger globaler Seitenelemente sowie die zugehörigen Leerraumregeln usw. beschreiben. In diesem Abschnitt sollten auch Drahtgitterprototypen einiger typischer Seiten als Illustrationen erscheinen. 3. Zur Markenidentität gehören Farbschemata, globale Markenbilder, Regeln und Einschränkungen für die Verwendung von Markenbildern usw. 4. Typografie: Stellen Sie das auf der Website verwendete Typografieschema vor, einschließlich Schriftarten, Gründe für die Auswahl dieser Schriftarten usw. Hier werden wir auch einige repräsentative spezifische Diagramme verwenden, um die Beziehung zwischen Schriftstil und Seitenkontext vorzustellen. 5. Navigation: Globale Hauptnavigation, sekundäre Navigation, Dropdown-Menü, Textlinks von Kategorieeinträgen, Suche … alle Elemente, die den Benutzern die Navigation auf der Site erleichtern können, können in diesen Teil aufgenommen werden. Von hier aus werden wir nach und nach in die Details gehen. Auch die Definitionen von Attributen wie Linkfarbe und Hintergrundfarbe von Navigationselementen in verschiedenen Zuständen sollten hier detailliert beschrieben werden, damit Entwickler sie auf einen Blick verstehen. 6. HTML-Elemente Regeln zur Verwendung von HTML-Tags für einige typische Elemente, einschließlich Titelelemente (h1, h2, h3 ...), geordnete Listen, ungeordnete Listen, Schaltflächen, Formulare, Feldsätze, Tabellen usw. Diese Liste an Regeln muss nicht erschöpfend sein, sie sollte aber so umfassend und repräsentativ wie möglich sein; bei Bedarf können Sie mit Frontend-Entwicklern zusammenarbeiten, um diesen Teil zu vervollständigen. 7. Regeln bezüglich Nutzungsszenarien, Größenbeschränkungen, Anzeigeverhältnissen, Cache-Einstellungen usw. für Mediendateien, einschließlich Bilder, Audio- oder Videodateien. 8. Die in diesem Teil anderer Ressourcen enthaltenen Objekte befinden sich grundsätzlich auf Detailebene. Die Designelemente, die nicht in die oben genannten sieben Kategorien eingeordnet werden können und einen hohen Grad an Anpassung aufweisen, können hier platziert werden. Beispielsweise, wie sich die Darstellung verschiedener Module in bestimmten Situationen ändern soll, die Werberegeln der Seitenleiste, der Umgang mit Suchfehlern, die Darstellungsregeln der Kommentarliste, das Durchsuchen der Fotosammlung usw. Normalerweise können wir in diesem Teil einige Designmuster mit hoher Wiederverwendbarkeit untersuchen und zusammenfassen. 9. Interface Coordination Canvas kombiniert alle oben genannten Elemente zu einem großen Canvas. Der sogenannte Canvas kann die Form eines Bildes haben, am besten ist jedoch die Form einer HTML-Seite, da auf dieser flexibler Text und HTML- bzw. CSS-Codeinhalte untergebracht werden können und Frontend-Entwickler entsprechende Codeschnipsel entsprechend den Gestaltungsregeln der Seitenelemente direkt verwenden können. Darüber hinaus können Designer durch die Platzierung aller mit dem visuellen Stil in Zusammenhang stehenden Inhalte auf derselben Leinwand auch ganz einfach die Gesamtkoordination der Seitenelemente überprüfen. 10. Das Thema UX-Dokumentation ist in der Tat kein kleines Thema. Es muss die bisher vom Projekt erzielten Ergebnisse enthalten, wie etwa Sitemaps, Wireframe-Prototypen, High-Fidelity-Prototypen, Benutzerforschungsdokumente usw. Diese frühen Produktergebnisse können im nachfolgenden Design- und Entwicklungsprozess eine wichtige Rolle bei der Definition der Funktionalität, der visuellen Darstellung und der Interaktionsmethoden spielen. Verwenden eines Stilhandbuchs Das Erstellen eines Stilhandbuchs ist nur der erste Schritt. Die Umsetzung in die Praxis ist der wichtigste Schritt. Hängen Sie den Leitfaden an das Projektmanagement-Tool an oder schicken Sie ihn per E-Mail an die relevanten Personen im Projektteam; wenn Sie nicht sicher sind, wer wirklich „relevant“ ist, dann überlassen Sie dies dem Projektleiter oder Produktmanager. Kurz gesagt: Was wir mit einem Styleguide erreichen möchten, ist die Zusammenarbeit im Team, sodass alle gemeinsam an der Fertigstellung des Projekts arbeiten können. Denken Sie nach der Übermittlung des Stilhandbuchs an die Teammitglieder daran, in wichtigen Phasen des Projekts häufig über die Bedeutung dieses Handbuchs zu sprechen, damit es allmählich Teil des Arbeitsablaufs und sogar der Produktkultur wird. Ich muss zugeben, dass ich Stilrichtlinien manchmal etwas langweilig finde, aber das ist okay, denn zumindest können wir das nicht als Ausrede verwenden, keinen zu erstellen. Glauben Sie mir, ein Styleguide spielt eine entscheidende Rolle im Designprozess und für den Erfolg des gesamten Projekts. |
<<: Detailliertes Beispiel für die Blockierung von Flash durch HTML-Elemente
>>: Tutorial zur Bedienung und Wartung von Linux, grundlegende Swap-Partition und LVM-Verwaltung
Artikel empfehlen
Beispielcode zur Implementierung der Schnittstellensignatur mit Vue+Springboot
1. Umsetzungsideen Der Zweck der Schnittstellensi...
Häufig verwendete HTML-Meta-Enzyklopädie (empfohlen)
Der Meta-Tag ist ein Hilfstag im Head-Bereich der...
js einfacher und grober Beispielcode zum Veröffentlichen und Abonnieren
Was ist Publizieren/Abonnieren? Lassen Sie mich I...
Einführung in den HTML-Standard für chinesische Zeichenkodierung
In HTML müssen Sie die von der Webseite verwendet...
Eine kurze Diskussion über die Kerneloptimierung mit hoher Parallelität bei Nginx10m+
Was ist hohe Parallelität? Die standardmäßigen Li...
Drei BOM-Objekte in JavaScript
Inhaltsverzeichnis 1. Standortobjekt 1. URL 2. Ei...
So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst
Konfigurieren Sie die Webseitenkomprimierung, um ...
Detaillierte Erläuterung des MySQL-Clusterindex und des Nicht-Clusterindex
1. Clustered-Index Tabellendaten werden in der Re...
Einführung in Javascript DOM, Knoten und Elementerfassung
Inhaltsverzeichnis DOM Knoten Elementknoten: Text...
Docker-Grundlagen-Tutorial: Detaillierte Erklärung der Dockerfile-Syntax
Vorwort Dockerfile ist ein vom Docker-Programm in...
Grundlegende MySQL-Tabellenabfragen – häufige Fehler beim Left-Join
Überblick Bei kleinen und mittelgroßen Projekten ...
Erfahren Sie in zehn Minuten, wie Sie Microservices mit Docker bereitstellen
Seit seiner Veröffentlichung im Jahr 2013 wird Do...
Eine kurze Diskussion über MySQL-Index-Designprinzipien und die Unterschiede zwischen gängigen Indizes
Indexdefinition: Es handelt sich um eine separate...
Detaillierte Erklärung inkompatibler Änderungen von Komponenten in vue3
Inhaltsverzeichnis Funktionale Komponenten So sch...
Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten
Vor kurzem musste ich beim Entwickeln einer Websi...