Müssen die Texte der Website noch gestaltet werden?
|
Viele fragen sich vielleicht: Muss der Text auf der Website gestaltet werden? Bei vielen Websites machen Wörter mehr als 80 % oder sogar mehr des gesamten Website-Inhalts aus. Anders ausgedrückt: Eine Website kann ohne Farbe und Bilder auskommen, aber nicht ohne Wörter. Ein Produktteam hat eine Rolle namens Content Design. UCDChina hatte einmal ein Thema namens „Achten Sie auf den Text auf der Benutzeroberfläche“, das sehr interessant war. Bevor ich diesen Artikel schrieb, habe ich ihn noch einmal gelesen, einerseits um zu lernen, und andererseits um das Schreiben sich wiederholender Inhalte zu vermeiden. Ich glaube, es wird hilfreich sein, wenn Sie Ihre Website mit den darin enthaltenen Ideen vergleichen. In dieser Ausgabe war Xiaoxiao der einzige, der sich auf die visuellen Aspekte des Textes konzentrierte. Dieser Artikel war sehr interessant und war auch der „meistgesehene“ Artikel in dieser Ausgabe. Dieser Artikel ist eine Fortsetzung einiger der Ideen. Schauen wir uns zunächst das chinesische Schriftdesign außerhalb der Website an. Für englischen Text stehen viele Schriftarten zur Auswahl, für chinesischen Text gibt es jedoch im Allgemeinen nur zwei Arten: Songti und Heiti. Beim traditionellen Layout-Design verwenden Designer gerne englischen Schriftsatz. Warum? Aus visueller Sicht kann die Kombination englischer Buchstaben leicht eine Beziehung zwischen Linien und Flächen herstellen, und die Buchstaben haben ein Gefühl für Rhythmus. Beispielsweise haben die drei Buchstaben aby unterschiedliche Höhen, wenn sie zusammengesetzt werden. Chinesische Schriftzeichen sind relativ eintönig, isoliert und uneinheitlich. Zurück zum Design der chinesischen Schriftzeichen auf der Website: Der Designer muss sich grundsätzlich keine Gedanken über die Auswahl der Schriftart machen, sondern nur über Songti. Wie im vorherigen Artikel erwähnt: Ein einzelnes Zeichen bildet einen Punkt, eine Zeichenfolge bildet eine Linie und ein Absatz aus Zeichen bildet eine Oberfläche . Dies ist das grundlegendste Prinzip des Layoutdesigns und wir müssen dieses Gefühl verstärken. Am Beispiel von Microsoft YaHei und Songti gefällt mir das Design von Microsoft YaHei sehr gut.  Vergrößern Sie die Schriftarten Songti und Yahei auf Größe 12 und achten Sie auf die folgenden Details:
Dies dient nur einem Zweck: Es soll die Zeilenbildung chinesischer Schriftzeichen erleichtern und sie somit flüssiger lesbar machen. Wir können sehen, dass Yahei zwar kein echtes Quadrat ist, aber quadratischer aussieht als Songti. Nach dem Lesen des obigen Beispiels wird mein Punkt klar: Betrachten Sie Ihren Text nicht als Wörter, sondern als Punkte. Bei der visuellen Gestaltung von Text geht es eigentlich darum, sich mit der Beziehung zwischen Punkten, Linien und Flächen auseinanderzusetzen. Im Folgenden sind die spezifischen Entwurfspunkte aufgeführt :
Update: Danke an den Internetnutzer Dreamcolor für die Empfehlung des Artikels „95 % der chinesischen Websites müssen CSS neu schreiben“. Der Artikel erklärt ausführlich die Unterschiede und Prinzipien zwischen px und em. Bevor ich dies geschrieben habe, habe ich es als selbstverständlich angesehen, da ich kein tieferes Verständnis der em-Einheit hatte. Ich habe nur viele Fälle gesehen, in denen die visuellen Effekte bei der Verwendung von em nicht gut aussahen. Jetzt verstehe ich, dass es daran liegt, dass die em-Einheit und px nicht übereinstimmten. Die Schlussfolgerung ist, dass „em“ anstelle von „px“ verwendet werden sollte, aber der „em“-Wert muss richtig eingestellt werden. Stellen Sie in der Schriftfamilie des Hauptteils der CSS-Datei sicher, dass vor „宋体“ Arial oder Verdana steht. Ich persönlich empfehle, es so zu schreiben: font-family:Helvetica,Georgia,Arial,sans-serif,宋体. Dadurch wird sichergestellt, dass die Buchstaben, Zahlen und Symbole in Ihrer Benutzeroberfläche schöner aussehen und – was noch wichtiger ist – leichter zu lesen sind. Im Unterartikel heißt es: „Bei Verwendung der Songti-Schriftgröße 12 verwenden wir im Allgemeinen einen Zeilenabstand von 18–20 Pixeln.“ Songti verwendet in der Schriftgröße 14 normalerweise einen Zeilenabstand von 22–24 Pixeln. Ich stimme zu. Die Zeilenabstandsgröße schwankt mit der Anzahl der Wörter in einer einzelnen Zeile. Ich denke, eine Schriftgröße von 12 Pixeln ist akzeptabel, wenn eine Zeile nur wenige Wörter enthält, und 17 Pixel sind ebenfalls akzeptabel. Die Anzahl der Wörter einer Textzeile sollte 50 nicht überschreiten, der Titeltext der Homepage sollte 8-20 Wörter umfassen. 12- und 14px-Schriftarten sind relativ die feinsten, und 13px können bei Bedarf für den Haupttext verwendet werden. Die Standardschriftgröße in Word entspricht 13px-Schriftarten auf Webseiten. Achten Sie bei einem Textabsatz, insbesondere beim Hauptteil, darauf, dass links und rechts mindestens 15 Pixel Leerraum vorhanden sind, damit die Benutzer ihren Text ohne Störungen umbrechen können. Der Kontrast zwischen Text und Hintergrund sollte deutlich genug sein, um die Lesbarkeit auch des schwächsten Textes sicherzustellen. PS1: Das für Denis‘ reizende Tochter Chenchen entworfene WordPress-Theme wurde heute veröffentlicht und die Details müssen noch angepasst werden. Das Mädchen ist wirklich süß! PS2: Einige Freunde haben mir E-Mails geschickt und mich gebeten, Vorschläge für ihre Website zu machen. Ich werde ihnen alle Antworten zukommen lassen, nachdem ich diese Reihe von Artikeln zum visuellen Design fertig geschrieben habe. Ich denke, die Meinungen im Artikel können mir etwas weiterhelfen? Insbesondere können Sie einen Blick auf die Themen von ucdchina werfen. |
<<: Zabbix überwacht die MySQL-Instanzmethode
>>: Schritte zum Verpacken und Konfigurieren von SVG-Komponenten in Vue-Projekten
Artikel empfehlen
HTML verwendet das Titelattribut, um Text anzuzeigen, wenn die Maus darüber schwebt
Code kopieren Der Code lautet wie folgt: <a hr...
Das WeChat-Applet implementiert einen einfachen Rechner
Ein einfacher Rechner, der als Referenz in das We...
Detaillierte Erklärung von Softlinks und Hardlinks in Linux
Inhaltsverzeichnis 1. Grundlegende Speicherung vo...
MySQL-Gruppe durch Gruppieren mehrerer Felder
Bei täglichen Entwicklungsaufgaben verwenden wir ...
So konfigurieren Sie den Nginx-Lastausgleich
Inhaltsverzeichnis Nginx-Lastausgleichskonfigurat...
Analyse des Quellcodes des React-Ereignismechanismus
Inhaltsverzeichnis Prinzip Quellcodeanalyse Deleg...
Detaillierte Erläuterung der MySQL-Methode für verzögerte Replikationsbibliotheken
Einfach ausgedrückt besteht die verzögerte Replik...
Eine vollständige Liste häufig verwendeter HTML-Tags und ihrer Eigenschaften
Zunächst müssen Sie einige Eigenschaften von HTML...
Verwendung des if-Urteils in HTML
Während der Django-Webentwicklung wird beim Schre...
Einführung in die MySQL-Gesamtarchitektur
Die Gesamtarchitektur von MySQL ist in die Server...
Docker setzt Macvlan ein, um eine hostübergreifende Netzwerkkommunikation zu erreichen
Grundlegendes Konzept: Funktionsprinzip von Macvl...
Grundlegendes zur JavaScript-Prototypenkette
Inhaltsverzeichnis 1. Verständnis der Gleichheits...
Das Shellskript zählt regelmäßig den PV von access.log unter Nginx und sendet ihn an die API und speichert ihn in der Datenbank
1. Statistiken zu PV und IP Zählen Sie die PV (Pa...
HTML Table Tag Tutorial (47): Verschachtelte Tabellen
<br />Der Schriftsatz auf der Seite erfolgt ...
Vue implementiert den Beispielcode zum Verknüpfen der seitlichen Navigationsleiste mit der Registerkartenseite
Inhaltsverzeichnis Technologie-Stack Wirkung anal...