Designprinzipien für Entwickler: Prozesse und CSS -Tipps für besseres Webdesign

Es ist technisch wahr, dass jeder kochen kann. Es gibt jedoch einen Unterschied zwischen dem Wissen, wie man köstliche Gerichte kocht und mehrere Zutaten in den Topf werfen, um Ihr Glück zu probieren. Gleiches gilt für die Webentwicklung. Sie können "Zutaten" background-color , .heading-1 verstehen-aber nicht jeder weiß, wie man diese Zutaten in schöne und benutzerfreundliche Websites umwandelt.

Jedes Mal, wenn Sie HTML und CSS verwenden, entwerfen Sie die Form und Struktur von Inhalten, damit andere verstehen können. Die Menschen entwerfen seit Hunderten von Jahren und haben dabei einige Prinzipien entwickelt, die auch für die heutigen digitalen Schnittstellen gelten. Diese Prinzipien spiegeln sich in drei Schlüsselbereichen wider: Wie Text angezeigt wird (Typeting), wie der Inhalt angeordnet ist (Abstand) und wie personalisiert (Farbe). Lassen Sie uns untersuchen, wie diese Webdesign -Inhaltsstoffe aus der Perspektive eines Entwicklers verwendet werden können, können Sie CSS -Eigenschaften und -anleitungen nutzen, um die Rätselzutaten im Webdesign zu beseitigen.

Inhaltsverzeichnis

• Artensett
• Abstand
• Farbe

Artensett

Leicht zu lesende Websites sind kein Zufall. Tatsächlich hat Taimur Abdaal einen Artikel zu diesem Thema geschrieben, der viele Ratschläge von Entwicklern enthält, die sich mit Typografie befassen. Wir konzentrieren uns auf zwei grundlegende Designprinzipien, mit denen Sie Text in einer angenehmeren und leichteren Lesung zeigen können: Wiederholung und Hierarchie.

Verwenden Sie die Duplikation, um Konsistenz und Wartbarkeit zu erreichen

Aufgrund der Bedeutung der Wiederverwendbarkeit in der Software erscheinen Wiederholungen im Netzwerk ganz natürlich. Mit der CSS -Klasse können Sie beispielsweise einen bestimmten Textstil definieren und ihn dann auf der gesamten Website wiederverwenden. Dies führt zu doppelten und konsistenten Textstilen ähnlicher Inhalte, die den Nutzern helfen, die Website zu durchsuchen.

Wenn Sie beispielsweise am Stil eines neuen Absatzes arbeiten, überlegen Sie zunächst, ob es vorhanden ist, ob Inhalte mit einem ähnlichen Stil vorhanden sind, und versuchen Sie, dieselbe CSS -Klasse zu verwenden. Wenn nicht, können Sie eine neue Klasse mit einem gebräuchlichen Namen erstellen, der an anderer Stelle auf der Website wiederverwendet werden kann. Erwägen Sie .paragraph--emphasize anstelle von .footer\_\_paragraph--emphasize oder Verwenden von .heading-1 anstelle von .hero\_\_site-title . Die ersten Beispiele können auf Ihrer Website verwendet werden, während letzteres auf bestimmte Komponenten beschränkt ist. Sie können sogar ein Präfix wie text- hinzufügen, um anzuzeigen, dass die Klasse speziell für Textstile verwendet wird. Dieser Ansatz verringert die Größe und Komplexität der CSS -Datei und erleichtert es, in Zukunft globale Stile zu aktualisieren.

Im Design gibt es unzählige Möglichkeiten, mit Stilen zu experimentieren. Designer werden manchmal süchtig nach Schriftstilen und schaffen viele etwas andere ähnliche Stile. In Code ist es jedoch sehr wertvoll, Textstile auf ein Minimum zu beschränken. Entwickler sollten Designer fordern, ähnliche Stile zu kombinieren, um die Menge an Code zu verringern und die Wiederverwendbarkeit und Konsistenz zu verbessern.

Hierarchie bietet eine klare visuelle Reihenfolge für Inhalte

Hierarchie werden Sie nur dann bemerken, wenn es nicht existiert. Bei der Typensetzung bezieht sich Hierarchie auf die visuellen Unterschiede zwischen verschiedenen Texten. Es ist der Unterschied zwischen Titeln, Absätzen, Links und anderen Textstilen. Dieser Unterschied wird erreicht, indem verschiedene Schriftarten, Farben, Größen, Fälle und andere Eigenschaften für jeden Textinhalt ausgewählt werden. Eine gute Hierarchie erleichtert das Verständnis und führt die Benutzer leichter zu verstehen und führt dazu, Ihre Inhalte zu durchsuchen.

HTML selbst liefert eine gewisse Hierarchie (z. B. die Schriftgröße des Titels stammt von<h1></h1> ankommen<h6></h6> allmählich abnimmt), aber CSS öffnet die Tür zu größerer Kreativität. Von<h></h> Tags geben größere Schriftgrößen an, und Sie können schnell größere dimensionale Unterschiede zwischen den Titelebenen erzeugen - wodurch mehr Hierarchien bilden. Um mehr Änderungen zu erstellen, können Sie auch die Eigenschaften der Farbe, text-align und text-transform ändern.

Anweisungen zur Schriftauswahl

=====================================================================ieben ==========================================================ieben =====================================================================ieben =====================================================================ieben

============================================================================== ============================================================================== ============================================================================== ============================================================================== ============================================================================== ============================================================================== ============================================================================== ==============================================================================

Wenn es um Typografie geht, müssen wir sicherstellen, dass es so einfach wie möglich zu lesen ist. Der Gesamtfaktor bei der größten Lesbarkeit ist die Schriftart, die Sie auswählen - es ist ein großes Thema. Viele Faktoren bestimmen die "Lesbarkeit" der Schriftart. Einige Schriftarten sind speziell für Titel oder kurze Textzeilen entwickelt. Diese werden als "Anzeige" -Schriftarten bezeichnet und sind oft persönlicher als die für Text entwickelten Schriftarten. Einzigartige Dekorationen und Macken erschweren es schwieriger zu lesen, wenn sie in kleinen Größen und als Teil großer Absätze angezeigt werden. Als Faustregel sollte eine intuitivere Schriftart für Text verwendet werden und nur Schriftarten für Titel anzeigen.

Wenn Sie mangelhaft sind und eine lesbare Schriftart benötigen, versuchen Sie es mit Google -Schriftarten. Fügen Sie dem Vorschau -Feld einen Text hinzu und ändern Sie ihn auf die ungefähre Größe, die auf Ihrer Website angezeigt wird. Sie können dann die Ergebnisse auf Serifen- oder SANS-Serifenschriften eingrenzen und die Schriftliste nach leicht zu lesenden Schriftarten scannen. Roboto, Noto Sans, Merriweather und PT Serifen sind alle sehr lesbaren Optionen.

CSS -Eigenschaften zur Verbesserung der Lesbarkeit

• Die Schriftgröße des Hauptabsatzes sollte je nach gewählter Schriftart zwischen 16px und 18px (1EM und 1,25EM) liegen.

• Stellen Sie die Linienhöhe (den vertikalen Raum zwischen zwei Textzeilen) manuell ein, um Ihren Text weniger überfüllt und leichter zu lesen. Beginnen Sie für Titel mit line-height: 1.25 (d. H. Das 1,25-fache der Schriftgröße), und der Absatz beträgt mindestens 1,5 (jedoch nicht mehr als 1,9) und passen Sie sie nach Bedarf an. Je länger die Textzeile, desto größer sollte die Zeile sein. Um die Flexibilität der Text zu erhalten, vermeiden Sie es, Einheiten in der Zeilenhöhe hinzuzufügen. Ohne Einheiten ist die von Ihnen festgelegte Linienhöhe proportional zu Ihrer Schriftgröße. Zum Beispiel wird line-height: 1.5 und font-size: 18px Ihre Linienhöhe 27 Pixel. Wenn Sie die Schriftgröße in font-size: 16px auf einem kleineren Bildschirm, wechselt die berechnete Linienhöhe automatisch auf 24 Pixel.

• Beachten Sie, wie viele Zeichen in der Textzeile enthalten sind, wobei das Ziel 45 bis 75 Zeichen lang ist (einschließlich Interpunktion und Räume). Dies reduziert das Lesen von Ermüdungen des Benutzers, indem Sie die Augen- und Kopfbewegungen einschränken, um Textlinien zu verfolgen. Aufgrund der Variabilität des Netzwerks ist es unmöglich, die Länge der Linie zu steuern, aber Sie können max-width Weitenwerte und Haltepunkte verwenden, um zu verhindern, dass die Textzeilen zu lang werden. Je kürzer die Textzeile ist, desto schneller die Scangeschwindigkeit. Und machen Sie sich keine Sorgen über die Berechnung der Anzahl der Zeichen pro Zeile. Nachdem Sie ein paar Mal fertig sind, werden Sie das Gefühl haben, was richtig aussieht.

Abstand

Nachdem Sie das Layout anzeigen, können Sie zurücktreten und das Layout oder den Abstand des Inhalts überprüfen. Bewegung und Nähe sind zwei Entwurfsprinzipien im Zusammenhang mit Abstand.

Bei Bewegung geht es um den Inhaltsprozess

Übung ist, wie Ihre Augen durch eine Seite oder den Fluss der Seite gehen. Sie können Bewegung verwenden, um die Sicht des Benutzers zu leiten, eine Geschichte zu erzählen, auf die wichtigsten Aktionselemente zu verweisen oder sie zum Scrollen zu ermutigen. Dies erfolgt durch Erstellen von Inhalten in jeder Komponente und das Anordnen dieser Komponenten, um ein Seitenlayout zu bilden. Wenn Sie darauf achten, wie Ihre Augen den Inhalt durchlaufen, können Sie den Benutzern helfen, zu wissen, wo sie beim Scannen der Seite nachsehen sollen.

Im Gegensatz zu Büchern (die oft sehr lineare Strukturen haben) können Websites in ihrem Layout kreativer sein - auf unzählige Weise. Es ist wichtig sicherzustellen, dass Sie einen Zweck haben, wie Sie Ihre Inhalte layout haben und das Layout so leicht wie möglich durch Ihre Inhalte führt.

Betrachten Sie die obigen drei Beispiele. Welches ist am einfachsten zu verstehen? Die Anordnung links bewegt sich aufgrund der Position des Bildes vom Bildschirm nach links, was es schwierig macht, die Taste zu finden. In der Zwischenoption ist es einfach, den Titel zu ignorieren, da das Bild im Vergleich zum Titel zu groß ist. Auf der rechten Seite zieht der Titel zuerst Ihre Aufmerksamkeit auf sich und das Bild wird konstruiert, um auf das Hauptaktionselement, die Schaltfläche, zu verweisen.

Rohlinge sind nützliche Werkzeuge, um leistungsstarke Bewegungen zu erstellen, aber sie sind einfach zu viel oder zu wenig zu verwenden. Überlegen Sie, wie Sie es verwenden, um die Augen des Benutzers zu leiten und Ihren Inhalt zu teilen. Bei ordnungsgemäßer Verwendung wird der Benutzer den Leerzeichen selbst nicht bemerken, kann sich aber besser auf das konzentrieren, was Sie präsentieren. Beispielsweise können Sie Blödsinn verwenden, um den Inhalt zu trennen (anstatt farbige Kästchen), was zu einem weniger überfüllten Layout führt.

Nähe zur Aufbau von Beziehungen

Wenn Objekte näher kommen, werden sie als relevant empfunden. Durch die Kontrolle des Abstands um Elemente können Sie auf die Beziehung zwischen ihnen hinweisen. Das Erstellen eines Abstandssystems, mit dem die Konsistenz durch Wiederholung aufgebaut und die Verwendung von Zufallszahlen vermieden wird, kann hilfreich sein. Dieses System basiert auf der Standard -Browser -Schriftgröße (1REM oder 16PX) und verwendet verschiedene Werte, die die meisten Szenarien abdecken:

• 0,25REM (4PX)
• 0,5REM (8PX)
• 1rem (16px)
• 2REM (32px)
• 4REM (64px)

Sie können SASS- oder CSS -Variablen verwenden, um diese Werte während Ihres gesamten Projekts konsistent zu halten. Das System könnte so aussehen - aber verwenden Sie alles, was Sie sich wohl fühlen, weil die Benennung von Dingen schwierig ist:

• $space-sm
• $space-med
• $space-lg
• $space-xl
• $space-xxl

Farbe vermittelt Persönlichkeit und zieht Aufmerksamkeit auf sich

Farbe wirkt sich stark auf die Persönlichkeit der Website aus. Wenn es richtig verwendet wird, wird die Seite voller Vitalität und Emotionen. Wenn es unsachgemäß verwendet, lenkt es vom Inhalt ab oder macht es, schlimmer, unzugänglich. Farbe hängt eng mit den meisten Designprinzipien zusammen. Es kann verwendet werden, um Bewegung zu erzeugen, indem die Sichtlinie des Benutzers geleitet wird, um Betonung zu schaffen, indem die Aufmerksamkeit auf die wichtigsten Aktionselemente lenkt.

Anweisungen zur Farbauswahl

Mit Farbe kann es schwierig sein zu wissen, wo Sie anfangen sollen. Um zu helfen, können Sie einen vierstufigen Prozess verwenden, um Ihre Farbauswahl zu leiten und eine Palette für Ihre Website zu erstellen.

Schritt 1: Verstehen Sie Ihre Emotionen

Vor der Auswahl einer Farbe müssen Sie den Ton oder die Einstellung Ihrer Website und Marke verstehen. Schauen Sie sich Ihren Inhalt an und entscheiden Sie, was Sie vermitteln möchten. Ist es lustig, informativ, retro, laut, düster? Im Allgemeinen können Sie den Ton einer Website in mehrere Adjektive zusammenfassen. Zum Beispiel können Sie die Nordfläche als abenteuerlich und robust zusammenfassen, während Apple minimalistisch und schön ist.

Schritt 2: Finden Sie Ihre Hauptfarbe

Denken Sie an Ihre Emotionen und versuchen Sie sich eine Farbe vorzustellen, die sie darstellt. Beginnen Sie mit der Sättigung der Farbe (Intensität der Farbe) und der Helligkeit (der Nähe der Farbe zu Weiß oder Schwarz). Wenn Ihre Stimmung optimistisch oder wunderschön ist, können die Farben der besten (gesättigter) die besten sein. Wenn Ihre Emotionen ernst oder implizit sind, sind dunklere (nicht zu gesättigte) Farben besser.

Wählen Sie als nächstes einen Farbton. Hue bezieht sich darauf, was die meisten Menschen als Farbe betrachten - wo fällt es in der Rotation des Farbrads? Der Farbton der Farbe gibt ihm die größte Bedeutung. Menschen neigen dazu, Farbtöne mit bestimmten Ideen zu verbinden. Zum Beispiel ist Rot häufig mit Macht oder Gefahr verbunden, und Grün ist mit Geld oder Natur verbunden. Es kann hilfreich sein, ähnliche Websites oder Marken zu überprüfen, um die von ihnen verwendeten Farben zu verstehen - obwohl Sie ihrer Führung nicht folgen müssen. Hab keine Angst zu versuchen!

Schritt 3: Hilfsfarben hinzufügen

Manchmal sind zwei oder drei Hauptfarben erforderlich, dies ist jedoch nicht erforderlich. Denken Sie an verschiedene Farbmarken. Einige verwenden eine einzelne Farbe, während andere eine Primärfarbe und ein oder zwei Hilfsfarben haben. Coca-Cola verwendet seine einzigartige rote Farbe. Ikea ist hauptsächlich blau mit etwas Gelb. Tide ist orange mit etwas Blau und Gelb. Abhängig von der Stimmung Ihrer Website benötigen Sie möglicherweise mehrere Farben. Versuchen Sie, Tools wie Adobe Color oder Coolors zu verwenden, die Sie beide die Hauptfarben hinzufügen und dann verschiedene Farbbeziehungen wie komplementäre Farben oder Monochrome ausprobieren können, um schnell zu erkennen, ob etwas gut funktioniert.

Schritt 4: Erweitern Sie Ihre Farbpalette

Nachdem Sie Ihre Hauptfarben eingegrenzt und festgestellt haben, ist es Zeit, Ihre Reichweite mit einer Palette zu erweitern, die Vielseitigkeit und Einschränkungen für Ihre Projekte bietet - eine Methode, die ich als nützlich empfand. Töne und Schatten sind hier der Trick. Die Farbtöne werden durch Mischen Ihrer Hauptfarbe mit Weiß hergestellt, und die Farbtöne werden durch Mischen mit Schwarz hergestellt. Mit der Sass-Farbfunktion können Sie schnell ein gut organisiertes System erstellen:

 <code>$main-color: #9AE799; $main-color-lightest: lighten($main-color, 20%); $main-color-lighter: lighten($main-color, 15%); $main-color-light: lighten($main-color, 10%); $main-color-dark: darken($main-color, 40%); $main-color-darker: darken($main-color, 50%); $main-color-darkest: darken($main-color, 60%);</code>

Um Ihre Palette zu perfektionieren, benötigen Sie auch mehrere Farben wie Weiß und Schwarz. Versuchen Sie, ein "reiches Schwarz" mit dunklen, fast schwarzen Farben Ihrer Hauptfarbe zu erstellen. Wählen Sie am anderen Ende des Spektrums einige helle Grautöne aus, die mit Ihrer Hauptfarbe gefärbt sind. Das Färben von Weiß und Schwarz verleiht Ihrer Seite mehr Persönlichkeit und hilft, ein kohärentes Erscheinungsbild zu erzeugen.

Wenn Sie sich mit interaktiven Produkten befassen, sollten Sie Farben für Erfolg, Warnung und Fehlerstatus hinzufügen. Normalerweise sind grün, gelb und rot für diese geeignet, aber überlegen Sie, wie Sie den Farbton anpassen, um ihn besser zu Ihrer Palette zu machen. Wenn Ihre Stimmung beispielsweise freundlich ist und Ihre Grundfarbe grün ist, müssen Sie möglicherweise die Sättigung der falschen Zustandsfarbe senken, um das rote Gefühl weniger negativ zu machen.

Sie können dies mit der mix -Sass -Farbfunktion tun, indem Sie Ihre Grundfarbe, die Standardfehlerfarbe und den Prozentsatz der Grundfarbe bereitstellen, die Sie mit der falschen Farbe mischen möchten. Das Hinzufügen der desaturate hilft, den Ton der Farbe zu verringern:

 <code>$success: mix($base-color, desaturate(green, 50%), 50%); $warning: mix($base-color, desaturate(yellow, 30%), 5%); $error: mix($base-color, desaturate(red, 50%), 20%);</code>

Wenn es um das Netzwerk geht, müssen Sie ein Farbtonprinzip besondere Aufmerksamkeit schenken: Kontrast. Das werden wir als nächstes vorstellen.

Kontrast

Der Farbkontrast - der Unterschied in Sättigung, Helligkeit und Farbton zwischen den beiden Farben - ist ein wichtiges Designprinzip, das sicherstellt, dass das Netzwerk für Menschen mit geringem Sehen oder Farbblindheit zugänglich ist. Wenn Sie sicherstellen, dass zwischen Ihrem Text und dem Hintergrund auf seiner Website genügend Kontrast besteht, wird es für alle Benutzer mit normaler Sicht besser zugänglich. Befolgen Sie bei der Anzeige der Barrierefreiheit den Farbkontrasthandbuch im WCAG (Web Content Accessibility Guide des W3C). Es gibt eine Reihe von Tools, mit denen Sie diese Richtlinien befolgen können, einschließlich des Check -Panels in Chrome Development Tools.

Jetzt ist es Zeit, diese Prinzipien in die Praxis umzusetzen! Sie können diese Prozesse und CSS -Tipps verwenden, um Erratenelemente in Ihrem Design zu beseitigen und bessere Lösungen zu erstellen. Beginnen Sie mit dem, was Sie kennen, und schließlich werden die hier genannten Designprinzipien für Sie zur zweiten Natur.

Wenn Sie nach mehr praktischen Tipps suchen, haben Adam Wathan und Steve Schoger einige Artikel über ihre Lieblings -Tipps geschrieben.

Das obige ist der detaillierte Inhalt vonDesignprinzipien für Entwickler: Prozesse und CSS -Tipps für besseres Webdesign. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!