Designtheorie: Lesbarkeit und Verständlichkeit von Texten

<br />Vor nicht allzu langer Zeit habe ich aus geschäftlichen Gründen Souba auf meinem Laptop installiert. Damals kam ein Freund, der im Grafikdesign arbeitet, zu mir, um mit mir über Design zu sprechen. Ich wollte gerade vor meinem Laptop eine URL eingeben, als er auf meinen Computer zukam und rief: „Hey! Du kennst doch auch meinen alten Klassenkameraden „Gao Liang“!“
Ich hatte solche Angst, dass mir der kalte Schweiß ausbrach.

In fast allen Produkten wird Text verwendet. Von kleinen Fehlern, Warnungen und Aufforderungsmeldungen bis hin zu großen Einführungen, Sonderplanungen und Werbetexten. Wenn ein Problem mit dem Text vorliegt, können Sie ihn sehr kostengünstig ändern. Wenn die Verwendbarkeit des Textes jedoch nicht gut ist, wirkt sich dies direkt auf das Produkt aus.
Unter der Verwendbarkeit eines Textes verstehe ich zwei Aspekte: Lesbarkeit und Verständlichkeit .
Unter Erkennung versteht man, ob Benutzer Text normal lesen können, wenn er auf der Benutzeroberfläche angezeigt wird. Die häufigsten Probleme beim Design betreffen die Schriftart, die Schriftgröße, den Zeilenabstand und den Abstand des Textes. Im chinesischen Webdesign werden am häufigsten Song-Schriftarten der Größen 12 und 14 verwendet. Betrachtet man mehrere große inländische Portale, ist dies für chinesische Internetnutzer fast schon zu einer Lesegewohnheit geworden.
Bei Listen oder längeren Textabschnitten ist außerdem auf den Zeilenabstand zu achten. Wenn wir beispielsweise Songti in Schriftgröße 12 verwenden, nutzen wir im Allgemeinen einen Zeilenabstand von 18–20 Pixeln. Songti verwendet in der Schriftgröße 14 normalerweise einen Zeilenabstand von 22–24 Pixeln.

Beim Designen des WEBs müssen Sie den Abstand zwischen Wörtern im Grafikdesign im Allgemeinen nicht berücksichtigen und können einfach den Standardzustand verwenden.
Es gibt aber Ausnahmen. Manchmal verwenden wir 18-Punkt-Fettschrift oder die Schriftart im Song-Stil, beispielsweise für den Titel einer Nachrichtenseite.
Besonders wichtig ist es zu erwähnen, dass sich oben rechts im Artikel auf UCDCHINA.COM ein „-“ und ein „ “-Zeichen befindet:

Dies ist ein durchdachtes Design für Leser mit Sehschwäche oder ältere Leser, die eine größere Schriftart benötigen.
Um die Lesbarkeit des Textes zu verbessern, können Sie die Funktion " " nutzen.
Gleichzeitig müssen Designer auch Aspekte wie Textfarbe, Fettschrift, Ausrichtung, Kontrast, Linkstil usw. berücksichtigen. Um bestimmte Informationen hervorzuheben, formatieren wir den Text normalerweise fett oder ändern die Schriftfarbe. Dabei sollten wir jedoch vorsichtig vorgehen. Zu viel Betonung ist gleichbedeutend mit keiner Betonung, wie beispielsweise im Folgenden:

Einige konservative Designer legen ausdrücklich Wert darauf, dass verlinkter Text unterstrichen wird, während andere Designer die Darstellung unterstrichener Links in großen Bereichen als sehr abstoßend empfinden.
Meiner Ansicht nach geht es hier nicht um die Unterstreichungsfrage, sondern darum, dass jeder Text mit einem Link deutlich vom übrigen Text abgegrenzt werden muss, um ihn zu unterscheiden. wie:

In Bezug auf die Lesbarkeit können viele Probleme auftreten und Designer müssen lernen, diese zu beseitigen, wenn sie auf sie stoßen. Ein häufig auftretendes Problem ist die Terminologie, da wir bei der Entwicklung von Produkten häufig unbewusst Terminologie verwenden. Viele der Begriffe sind für uns einfach, für unsere Benutzerzielgruppen jedoch nicht leicht.
Vermeiden Sie beispielsweise die Verwendung des Begriffs „ISP“ und sagen Sie stattdessen „Internet Service Provider“. Sagen Sie den Benutzern nicht „PV“, sondern „Verkehr“ usw.
Wir sollten versuchen, die Sprache des Benutzers zu verwenden, anstatt Begriffe als selbstverständlich hinzunehmen. Wenn Sie Fachbegriffe verwenden müssen, seien Sie bei jedem Auftreten konsistent. Verwenden Sie „Suchen“, „Finden“ und „Abfrage“ niemals gleichzeitig. Inkonsistenzen erhöhen den Lernaufwand des Benutzers.
Ein weiteres häufiges Problem ist Mehrdeutigkeit und unklare Bedeutung.
Beispielsweise ist bei dem oben erwähnten „Highlight“ nicht der entscheidende Punkt, ob Sie Ihren Klassenkameraden mit Gao Liang in Verbindung bringen, sondern welche Funktion „Highlight“ darstellt. Es ist verwirrend: Wer hebt wen hervor, warum hebt er hervor?
Ist es in Ordnung, nicht hervorzuheben? Wird es größer oder heller? Es handelt sich hier nicht um ein Missverständnis, sondern um eine Verwirrung – wer nicht weiß, wozu es dient, traut sich natürlich nicht, es zu verwenden.

<<: Problem beim Wechseln der Registerkarten für die Handschrift von React

>>: Detaillierte Schritte zur Installation von rockerChat im Docker und zum Einrichten eines Chatrooms

Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm

Designtheorie: Lesbarkeit und Verständlichkeit von Texten

Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm

So konvertieren Sie eine Spalte mit durch Kommas getrennten Werten in Spalten in MySQL

Eine kurze Erläuterung der ifnull()-Funktion ähnlich der nvl()-Funktion in MySQL

So gehen Sie mit dem Problem um, dass die Datei gelöscht wird, der Speicherplatz in Linux jedoch nicht freigegeben wird

Vergleich der Effizienz verschiedener Methoden zum Löschen von Dateien in Linux

So lösen Sie das Phantomleseproblem in MySQL

JavaScript Snake-Implementierungscode

Nginx führt Anforderungsverbindungen zusammen und beschleunigt den Website-Zugriff – Beispiele

So entwickeln Sie Uniapp mit vscode

Tutorial zur Verwendung des iostat-Befehls unter Linux

Artikel empfehlen

Grundlegende Kenntnisse zum MySQL UNION-Operator

Detaillierte Erklärung der Anzeigemodi in CSS-Tags

Detaillierte Erläuterung verschiedener Kommunikationswege zwischen Linux-Benutzerstatus und Kernelstatus

Lösung für den Fehler bei der Verbindung mit MySQL in Docker

Einführung in die reaktive Funktion toRef-Funktion ref-Funktion in Vue3

Detailliertes Tutorial zur Installation und Verwendung von MySQL 8.0.15 unter Windows

Nutzungsszenarien und Quellcodeanalyse der Funktionskomponenten erweiterter Vue-Komponenten

Eine kurze Analyse von Event Bubbling und Event Capture in js

Ausführen von PostgreSQL in Docker und Empfehlung verschiedener Verbindungstools

Zusammenfassung gängiger Fehler beim Entwurf von MySQL-Tabellen

So fragen Sie Daten innerhalb eines bestimmten Zeitraums mit dem Vue-Frontend und dem Django-Backend ab

Die Neugestaltung einer Website ist für jede Familie eine schwierige Aufgabe

Einführung in die Verwendung von HTML-Bereichsbild-Hotspots mit einer Liste zugehöriger Eigenschaften

Webdesign: Skriptmaterialien rekonstruieren das Benutzererlebnis

Das KTL-Tool realisiert die Methode zum Synchronisieren von Daten von MySQL zu MySQL