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!