design
1.0.0
3.1 Verwenden Sie nie mehr als drei Schriften auf einer Seite gleichzeitig.
Warum? Eine Reihe von Schriftarten, die auf einer einzelnen Seite verwendet werden, zeigt eine schlecht definierte Marke und kann faul und überfüllt erscheinen. Höchstens können drei verschiedene Schriftarten gleichzeitig verwendet werden (Logo, Header, Körpergehalt).
3.3 eine konsistente Typhierarchie beibehalten. Sie sollten immer nur eine Handvoll Schriftstellungsgrößen und ein oder zwei Schriftgewichte verwenden, um Typhierarchie zu entwickeln. Denken Sie an die HTML -Header -Tags H1, H2, H3 usw. Sie sollten für mindestens vier von ihnen unterschiedliche visuelle Stile haben, wobei Variationen in Helligkeit, Größe und Gewicht verwendet werden, um die Bedeutung des Textes zu bezeichnen. Für ein großartiges Beispiel für die Typhierarchie finden Sie die Richtlinien der menschlichen Schnittstelle von Apple.
[3.4] Halten Sie Ihren Körpertext ein normales Gewicht und gut unterteilt. Der Text sollte immer lesbar sein, daher reservieren Sie leichte oder kräftige Schriftarten für große Header oder Fälle, in denen das Schriftgewicht nur geringe Auswirkungen auf die Lesbarkeit des Textes hat. Halten Sie außerdem immer den Linienabstand Ihres Körpertextes bei 1,15 bis 1,5 (abhängig von der Größe), um die Lesbarkeit zu maximieren. Dieser Artikel hat beispielsweise einen REM -Abstand von 1,5 REM. Auch Ihre Körperabsätze zu rechtfertigen, schadet auch nicht.
3.1 Körperhintergründe sollten immer grauer Schatten sein
Warum? Farbige Hintergründe, auch sehr dunkle Grautöne, können die Augen leicht belasten. Für wichtige Inhalte wie den Textkörper einer Webseite oder Anwendung ist es wichtiger Benutzer können die Seite mühelos lesen und intensivieren.
3.3 Verwenden Sie in den meisten Fällen einen weißen Text auf einem beliebigen Bild, farbigen oder Gradientenhintergrund. Wenden Sie bei Bedarf einen sehr leichten Tropfenschatten (<= 10% Deckkraft) auf den Text an.
Warum? White-on-Dark ist oft aethetischer und einfacher zu erstellen Varianten. Die Entscheidung für eine dunkle Farbe, die vor einem farbigen Hintergrund verwendet werden soll, kann oft eine Herausforderung sein. Stellen Sie jedoch sicher, dass auch die von Ihnen gewählte Farbkombination zugänglich ist.
3.4 Verwenden Sie niemals absolute Schwarze.
Warum? Reines, undurchsichtiges Schwarz (#000) ist für die meisten Webseiten oft zu hart. Sogar Githubs Körperschriftfarbe ist #24292e, nicht #000. Im Zweifelsfall können Sie numerische Web-Safe-Graustufen-Hex-Codes ( #111, #222 ... #AAA, #BBB usw. verwenden) verwenden.
3.5 Stellen Sie sicher, dass farbige Komponenten sich nicht gegenseitig grenzen.
Warum? Sofern die Farben nicht sehr starke Komplemente voneinander sind, kann der Kontrast zweier benachbarter Farben oft ein Gefühl der Polarisierung und Aufteilung erzeugen, der den Fluss Ihrer Seite bricht. Wenn Sie sich stattdessen für einen transparenten Navigationsleisten -Hintergrund entscheiden.
Gewährleisten Sie die Konsistenz in allen Komponenten. Sobald Sie eine Lichtquelle für Ihre Seite definiert haben, stellen Sie sicher, dass alle Schatten seiner Richtung folgen. Wenn Licht Ihre Seite mit 135 Grad "schlägt", sollte jeder Schatten und jeder Verlauf bei 135 Grad fallen. Verwenden Sie Schatten als Werkzeug, um Hierarchie oder Zustand zu präsentieren. Schatten sollten verwendet werden, um die Seitenkomponenten entweder zu hervorheben, Seitenstruktur bereitstellen oder den Zustand darstellen. Zum Beispiel können Sie darstellen, dass eine Taste gedrückt wird, indem die Höhe abnimmt, anstatt die Farbe zu ändern. Zu viele Schatten können zu viel Dimensionalität darstellen. Seien Sie also vorsichtig (z. B. erstellen Sie keine Site mit 18 einzigartigen Höhen). Der Versatz Ihres Schattens sollte ungefähr die Hälfte seines verschwommenen Radius gleich machen. Beispielsweise sollte ein Schatten mit einem X / Y -Offset von 10px einen verschwommenen Radius von rund 20px aufweisen. Dieser Ansatz macht den authentischsten Schatten. Halten Sie immer die Deckkraft von Schatten auf unter 25%. Irren Sie sich auf der Seite der Subtilität, um Ihr Design nicht zu beeinträchtigen. Wenn Sie einen dunklen Hintergrund verwenden, müssen Sie in einigen Fällen möglicherweise die Deckkraft Ihres Schattens erhöhen, um die Sichtbarkeit zu gewährleisten. Schatten müssen nicht immer schwarz sein. Bei der Verwendung von Schatten auf farbigen Oberflächen ist es oft vorteilhaft, eine sehr dunkle oder stumpfe Variante der Hintergrundfarbe zu verwenden, um die Schattenmischung zu verbessern.
