Das Textdesign einer Webseite sollte aussehen wie die Kleidung von intelligenten Mädchen
|
<br />„Es gibt keine hässlichen Frauen auf der Welt, nur faule Frauen.“ Dies ist der schönste Satz in der Bibel der weiblichen Schönheit. Solange eine Frau bereit ist, Zeit darauf zu verwenden, darüber nachzudenken, wie sie auf sich selbst aufpasst und wie sie sich kleidet, wird sie immer einen Weg finden, ihre schöne Seite zu zeigen. Ist das beim Interface-Design nicht dasselbe? Werfen wir einen Blick auf den Kleidungsstil kluger Frauen, um zu sehen, ob wir bei der Gestaltung etwas daraus lernen können. Prinzip 1: Die Hauptfarben der Kleidung, die Sie tragen, sollten nicht mehr als drei Egal, welche Art von Kleidung, es sollte eine Hauptfarbe geben, die das Temperament repräsentiert, das die Trägerin zeigen möchte. Sie kann nicht alles betonen – vielleicht hat sie eine ruhige Seite, wie Blau; sie kann auch eine freche Seite haben, wie Orange; eine intellektuelle Seite, wie Weiß; eine süße Seite, wie Pink... Aber wenn sie alle diese Farben gleichzeitig trägt, dann wird sie nutzlos sein, außer wie ein Schmetterling. Es ist wie bei einer Webseite. Es sollten nicht mehr als drei Hauptschriftarten und Farbkombinationen vorhanden sein. Diese werden für das Wichtigste, das relativ Wichtige und das Allgemeine verwendet. Versuchen Sie nicht, alles hervorzuheben, sonst werden Sie am Ende nichts mitbekommen. Betrachten Sie die folgenden zwei Beispiele: Ich liebe diese Site, muss aber zugeben, sie sieht ein bisschen wie ein Schmetterling aus.  Und hier wurden allein auf der Homepage mindestens fünf Schriftarten verwendet. Vielleicht denkt der Designer, dass die Schriftartenbibliothek so viele Schriftarten enthält, dass es eine Verschwendung wäre, sie nicht zu verwenden.  Prinzip 2: Accessoires sollten einen einheitlichen Stil haben und sich gegenseitig widerspiegeln Wenn ein Mädchen heute zu einer Modenschau eingeladen wird und sich für ein enges Abendkleid entscheidet und einen umwerfenden Auftritt hinlegen möchte, glauben Sie, dass ihr dann eine andere Wahl bleibt als ein Paar High Heels? Ich fürchte, nein. Auch wenn sie ein Paar supercoole und vergriffene Nike Air-Schuhe mit der Unterschrift des fliegenden Mannes besitzt und diese am liebsten tragen würde, um anzugeben, muss sie sich zurückhalten. Die Stile der beiden Artikel sind völlig unterschiedlich. Auch wenn es sich bei beiden um erstklassige Produkte handelt, ist es oft eine Katastrophe, sie miteinander zu kombinieren. Vielleicht achten wir mehr auf die Einheitlichkeit des Textes auf einer Webseite, ignorieren aber oft die Einheitlichkeit des Textes in Bildern auf der Seite. Sehen Sie sich das folgende Beispiel an. Obwohl es sich bei beiden um rabattierte Produkte handelt, sind die Preise der Produktbilder von Dangdang an unterschiedlichen Stellen markiert. Dies kann leicht den visuellen Effekt stören und die Effizienz der Informationskommunikation verringern. Amazon hingegen kennzeichnet alle Produktrabatte an einer einheitlichen Stelle und verwendet lediglich Änderungen der Hintergrundfarbe, um zwischen den Rabattstufen zu unterscheiden. Setzen Sie jedes differenzierte Design dort ein, wo es benötigt wird.  Prinzip 3: Details entscheiden über Erfolg oder Misserfolg Ist Ihnen aufgefallen, dass die Outfits mancher Mädchen sehr natürlich und lässig aussehen, als wären sie nachlässig getragen worden, und dass sie dennoch sehr attraktiv sind? Ich kann garantieren, dass solche Mädchen höchstwahrscheinlich ihre Hausaufgaben zu Hause machen, bevor sie ausgehen. Sie werden sorgfältig darüber nachdenken, welches Kleid zu welcher Halskette passt, welche Frisur zu welchen Ohrringen passt und sogar, ob und wie weit die Ärmel hochgekrempelt werden sollen. Nur so ist gewährleistet, dass jedes Detail perfekt umgesetzt ist. Tatsächlich sehen viele Designs auf den ersten Blick gut aus, aber bei näherem Hinsehen fühlen sie sich etwas rau an, genau wie die ausgefransten Kanten schöner Kleidung. Wenn Sie sie tatsächlich tragen, werden Sie feststellen – Oh mein Gott! ! @￥@#%#￥…%￥& Wenn Sie nur 5 weitere Pixel für Text und Ränder verwenden, sieht dieser Tofu-Block viel angenehmer aus. Warum nicht großzügig sein?  Wenn Sie dick sind, nehmen Sie ab, aber zwängen Sie sich nicht in enge schwarze Hosen. Wenn zu viele Wörter und zu wenig Platz vorhanden sind, löschen Sie die Wörter, anstatt sie in einen kleinen Raum zu drängen. Der Platz, der ursprünglich nur vier Wortzeilen aufnehmen konnte (siehe linkes Bild), wurde auf fünf Wortzeilen beschränkt, was wirklich eng aussieht.  Die meisten Websites verwenden Songti als Hauptschriftart, aber ich habe festgestellt, dass nur wenige Websites bemerkt haben, dass Songti sehr schwer zu lesen ist, wenn es zur Anzeige von Englisch verwendet wird. Obwohl wir eine chinesische Website sind, kommen immer mehr englische Wörter in unseren Seiteninhalt. Warum investieren wir nicht etwas mehr Mühe und überlegen, eine separate Schriftart für Englisch zu definieren?  |
<<: Eine kurze Diskussion über den Linux-Signalmechanismus
>>: Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen
Artikel empfehlen
Über IE8-Kompatibilität: Erklärung des X-UA-Compatible-Attributs
Problembeschreibung: Code kopieren Der Code laute...
Detaillierte Erläuterung der Konfigurationsmethode des Vue-Anforderungs-Interceptors
Befolgen Sie die nachstehenden Schritte 1. Inhalt...
CSS fängt die Zeichenfolge mit der angegebenen Länge automatisch ab und zeigt das Ende an ... Unterstützt den FF-Browser
<style type="text/css"> Code kopie...
So gehen Sie mit vergessenen Passwörtern in Windows Server 2008 R2 um
Was tun, wenn Sie Windows Server 2008R2 vergessen...
Zwei Bilder von JavaScript zum Verständnis der Prototypenkette
Inhaltsverzeichnis 1. Prototyp-Beziehung 2. Proto...
So zeigen Sie den Kennwortablauf unter Linux an und konfigurieren ihn
Mit den richtigen Einstellungen können Sie Linux-...
Analyse der Verwendung und des Prinzips der Docker Swarm-Clusterverwaltung
Schwarmclusterverwaltung Einführung Docker Swarm ...
JavaScript zum Hinzufügen und Löschen von Nachrichten im Message Board
Dieser Artikel zeigt ein kleines Beispiel für das...
HTML6 implementiert Beispielcode für Faltmenüs und Akkordeonmenüs
Der Hauptteil der Seite: <body> <ul id=&...
Dieser Artikel fasst die Implementierungsmethoden von 6 Lastausgleichstechnologien zusammen (Zusammenfassung).
Lastenausgleich ist ein häufig verwendetes Mittel...
So erstellen Sie ein ELK-Protokollsystem basierend auf Docker
Hintergrundanforderungen: Mit zunehmender Größe d...
Einführung in den glibc-Upgradeprozess für Centos6.5
Inhaltsverzeichnis Szenarioanforderungen glibc-Ve...
Detaillierte Erklärung der Methoden des fs-Moduls und des Path-Moduls in Node.js
Überblick: Das Dateisystemmodul ist ein einfacher...
Diskussion zu Bildpfadproblemen in CSS (dasselbe Paket/anderes Paket)
In CSS-Dateien müssen Sie manchmal einen Hintergru...
Detaillierte Erklärung der Verwendung der Compose-Funktion und der Pipe-Funktion in JS
Inhaltsverzeichnis Funktion „Verfassen“ Array.Pro...