Im Folgenden werde ich einen kurzen Überblick über die obligatorischen Punkte geben , die Sie beim Erstellen eines Weblayouts für die weitere Übertragung auf das Layout beachten müssen.
Sie werden Ihnen helfen:
- Denken Sie tiefer über Ihr Layout nach
- Vermeiden Sie unnötige Fragen
- ein besseres Ergebnis erzielen
- Bleiben Sie mit dem Frontend-Entwickler befreundet
Allgemein
- Namenslayouts (Seiten, Frames - erforderlich) sollten die Essenz und den Zweck klar vermitteln und mit den logischen Seiten der Site oder anderen großen Entitäten verknüpft sein.
(Beispiel: "Home - Tablet", "Main - Mobile", "Tasten")
[Bildschirmbeispiel] - Bei der Arbeit mit Ebenen, Gruppen, Komponenten und Bildschirmen muss die Struktur des Dokuments beachtet und mit umfassenden Namen versehen werden
(Beispiel: Haupthintergrund, Einstellungen, Schaltfläche, Registrierungsseite-Handy)
(Schlechtes Beispiel: Frame 1, Gruppe 45, iPhone XR)
[Bildschirmbeispiel] - Wenn Sie eine mobile Version benötigen, sollte für jeden Bildschirm ein 320px breites (iPhone SE) Layout entwickelt werden, zusätzlich können Sie hochauflösende Layouts erstellen.
[Bildschirmbeispiel] - Symbole (svg, ...) sollten herunterladbar sein und im Browser korrekt geöffnet sein. Die Größe der SVG-Zeichenfläche muss dem Inhalt und dem Ablauf entsprechen. Sie können Icon-Sets auf einzelnen Zeichenflächen sammeln.
[Bildschirmbeispiel] Bilder (grafischer Inhalt) müssen hochgeladen werden. Haben Sie eine Auflösung von mindestens 2x. Ohne Vorverarbeitung entladen. (Wie: abgerundete Kanten, Transparenz, Schatten). Außer wenn eine solche Verarbeitung ausdrücklich angefordert wurde.
[Bildschirmbeispiel]
- Es ist notwendig, die Größe des Inhaltsbereichs und die Tatsache zu berücksichtigen, dass diese Größe von Auflösung zu Auflösung variiert. Daher sollte der „Befestigungspunkt“ durchdacht werden.
- Inhaltsbilder sollten als Einzelbild hochgeladen werden.
(Zum Beispiel: Wir haben einen rechteckigen Block mit [Hintergrund] , der sich ändert. Dementsprechend sollte das Bild wie im obigen Beispiel vollständig mit dem Hintergrund entladen werden.)
- Schriftfarben sollten keinen Alphakanal (Transparenz) enthalten, es sei denn, die Schrift wird auf verschiedenen Hintergründen (Verläufen oder Bildern) verwendet und sollte daher diese Logik haben.
- Zunächst sollte eine vollständige Liste (zip.archive) der im Projekt verwendeten Schriftarten bereitgestellt werden (bevor mit den Arbeiten an der Vorderseite begonnen wird).
- Es schadet auch nicht, eine sichere Schriftart zu wählen (die unter allen Windows-, Mac-, Linux- usw. verfügbar ist), die der verwendeten benutzerdefinierten Schriftart ähnelt, damit sie im Falle eines Fehlers beim Laden der benutzerdefinierten Schriftart ersetzt werden kann
(Beispiel: 'Roboto', serifenlos) - Wenn es sich um eine benutzerdefinierte Symbolschrift handelt , sollten die Symbole entsprechend behandelt werden: Sie müssen sie entlang der Basislinien ausrichten, damit mehrere Symbole in der Zeile nicht unterschiedlich groß und mit unterschiedlichen Einzügen sind. Außerdem sollten die Anzahl der Flächen, die Basisdicke der Flächen und der Detaillierungsgrad von Symbol zu Symbol beibehalten werden, da sie sonst heterogen aussehen, als ob sie aus verschiedenen Schriftarten stammen.
- In Ermangelung spezieller Anforderungen an die Verhaltenslogik müssen Blöcke im Stream die Reihenfolge ihrer Position beibehalten, wenn sie an die Auflösungen angepasst werden, die sich in den Anforderungen widerspiegeln.
- Logik sollte sich im Design widerspiegeln. Zum Beispiel mehrere identische Karten, von denen jede eine unterschiedliche Menge an Inhalten, unterschiedliche Bilder, unterschiedliche Zustände usw. anzeigt, so dass es möglich wird, die Abhängigkeit zu verfolgen.
- Zusätzlich zum Layout ist eine Textbeschreibung der Funktionsweise der Elemente willkommen.
- Geben Sie das Verhalten von Elementen an, wenn Text überfüllt ist
(Schneiden Sie beispielsweise Langtext mit Auslassungspunkten in einem Block usw. zu.) - Hinterlassen Sie Kommentare und Beschreibungen (in irgendeiner Weise) zu animierten Elementen und Elementen, deren Verhalten nicht nur durch das Layout eindeutig bestimmt werden kann.
- Seite 404 , 500 und andere Standardbildschirme sollten vorhanden sein.
Alle folgenden Absätze der Anleitung und der Raster können auf der Stilseite gezeichnet werden, auf der all dies strukturiert wird.
Anleitung, GUI, UI-Kit, Style Guide
- Beschreibung und Layout der Blöcke, die durch allgemeine Funktionen verbunden sind, finden Sie in einem Abschnitt des Dokuments.
(Zum Beispiel haben alle Popups einen weißen Hintergrund und abgerundete Ecken 10px, Schaltflächen ...) - Die Typografie sollte zusätzlich auf einer separaten Zeichenfläche beschrieben und gezeichnet werden.
(Beispiel: Alle Überschriften der ersten Ebene sind 24 Pixel unter 40 Pixel eingerückt. Alle Überschriften der zweiten Ebene ..., Absätze ... usw.) - Alle Links, Schaltflächen, Kontrollkästchen und anderen interaktiven Elemente sollten in einem passiven, induzierten und aktiven Zustand gezeichnet werden. Ebenso sollte es Zustände für das Mobiltelefon (Touch-Geräte) geben - passiv, momentan drückend. Zustände: (Link, Hover, Aktiv, Fokus, Besucht, Deaktiviert, Prozess).
[Checkbox-Beispiel]
[Button-Beispiel] - Brotkrumen sollten in allen Zuständen (aktiv, vorher, blockiert, ...) und unter Berücksichtigung von Zeilenumbrüchen gezeichnet werden.
- Die Paginierung sollte in allen Zuständen (im ersten, letzten Zwischenschritt) und mit einer anderen Anzahl von Schritten (1, viele) unter Berücksichtigung einer großen Anzahl von Ziffern (3+ Zeichen) erfolgen.
- Eingaben (Eingabefelder), Formulare sollten in allen Zuständen gezeichnet werden: Standardmäßig mit Fokus, wenn gedrückt, gesperrt, Fehlermeldung, Korrektheitsmeldung usw.
[Eingabebeispiel] Begrenzen Sie die Anzahl der verwendeten Farben und Schattierungen
[Beispiel für Farbstufe] .
- Alle verwendeten Farben müssen als Richtlinie dienen.
(Jede neue Farbe im Layout wird als Fehler angesehen und dem nächstgelegenen der Anleitung gleichgesetzt.) - Farben, die in Bezug auf die Funktionalität einzigartig sind, sollten beschrieben oder an das Wesentliche gebunden werden.
(Zum Beispiel ein Halloween-Aktien-Widget mit einem einzelnen orangefarbenen Hintergrund: Orange ist die Farbe für Halloween-Aktien.)
Mesh
- Einrückungs- und Elementgrößen müssen ein Vielfaches des gleichen Werts sein.
(2px, 4px, 8px, 5px ...)
[Bildschirmbeispiel]
[Nachbeispiel] - Das Raster (falls vorhanden) sollte beschrieben werden und nicht widersprechen
Layouts. Spaltengrößen, deren Anzahl usw. - Die Abmessungen des Behälters sollten auf jedem der vorgestellten beschrieben werden
Berechtigungen. - Die Werte der Haltepunkte sollten beschrieben werden.
- Die vertikale Polsterung der Blöcke im Stream sollte standardisiert werden. (ähnlich der Typografie)
Briefe, Post, Mailinglisten, Post
- Es ist notwendig, die Gestaltung des Briefes so einfach wie möglich zu gestalten . Es ist wichtig zu verstehen, wie das Layout und das <table> -Tag funktionieren . Buchstaben werden auf Tische gelegt. (Anzeige: Block, Flex, Position absolut - kann nicht im Buchstaben angewendet werden). Das Adaptive ist so einfach wie möglich, ohne dass Blöcke ihre Position im Stream ändern. Wünschenswerter gewöhnlicher "Gummi" und 1 Satz Stile
- Verwenden Sie keine benutzerdefinierten Schriftarten im Brief
Natürlich, wenn Sie für ein "Dribbeln" usw. zeichnen. Sie können tun, was Sie wollen, aber für ein ernstes Projekt sind diese Elemente zu 100% notwendig.