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
Was bedeutet das „a“ in rgba? CSS RGBA-Farbleitfaden
RGBA ist eine CSS-Farbe, mit der Farbwert und Tra...
Docker-Container sichert regelmäßig die Datenbank und sendet sie an das angegebene Postfach (Designidee)
Inhaltsverzeichnis 1. Hintergrund: 2. Gestaltungs...
Analyse und Lösung des a.getAttribute(href,2)-Problems in IE6/7
Kurzbeschreibung <br />In IE6 und 7 wird in...
Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten
Inhaltsverzeichnis 1. Was ist ein Prototyp? 2. Pr...
Ausführliche Erläuterung der Standortpriorität von Nginx
Standortausdruckstyp ~ bedeutet, dass ein regulär...
Einführung in semantische XHTML-Tags
Der erste Punkt ist, dass Menschen die Semantik vo...
Detaillierte Erläuterung des Lese-Commits der MySQL-Transaktionsisolationsebene
MySQL-Transaktionsisolationsebene anzeigen mysql&...
CSS3 realisiert die Animation des Shuttle-Sternenhimmels
Ergebnis: html <canvas id="Sternenfeld&qu...
So importieren Sie Excel-Dateien in eine MySQL-Datenbank
In diesem Artikel erfahren Sie, wie Sie Excel-Dat...
Grundlegende Verwendung von UNION und UNION ALL in MySQL
In der Datenbank führen sowohl die Schlüsselwörte...
HTTP-Rückgabecodeliste (Erklärung auf Chinesisch und Englisch)
Liste der HTTP-Rückgabecodes (unten finden Sie ei...
So verwenden Sie Typescript zum Kapseln von lokalem Speicher
Inhaltsverzeichnis Vorwort Szenarien für die Verw...
Einige grundlegende Anweisungen für Docker
Inhaltsverzeichnis Einige grundlegende Anweisunge...
JavaScript implementiert die Maussteuerung eines frei beweglichen Fensters
In diesem Artikel wird der spezifische JavaScript...
So fügen Sie Emoji-Ausdrücke in MySQL ein
Vorwort Als ich heute ein Feedback-Formular für e...