Verbesserung der Wirkung von Hyperlinks im Webdesign und in der Produktion
|
Hyperlinks ermöglichen es Benutzern, sofort von einer Seite zur nächsten oder von einer Site zur nächsten zu springen. Diese Macht kann jedoch Ängste auslösen. Mithilfe von Hyperlinks können Besucher von einer Seite zur anderen oder von einer Site zur anderen springen. Dieses häufige Springen kann jedoch bei manchen Menschen Angstgefühle auslösen. Damit Benutzer sicher surfen können, sollten die Links absolut klar und eindeutig sein. Um Benutzern das Durchsuchen der Seite zu erleichtern, muss der Hyperlink absolut präzise und klar sein. Grundsätze Gesetz 1. Text-Hyperlinks sollten klar von normalem Text zu unterscheiden sein. Hyperlink-Text muss vom normalen Inhaltstext unterschieden werden 2. Jedes Mouseover-Verhalten sollte einen Hervorhebungseffekt haben. Wenn die Maus über einen Hyperlink bewegt wird, muss dieser hervorgehoben werden. 3. Der Inhalt von Hyperlinks sollte so kurz wie möglich, aber lang genug sein, um Folgendes zu identifizieren: Der konkrete Inhalt des Hyperlinks muss prägnant (kurz und prägnant) sein: <!--[wenn !supportLists]--> · <!--[endif]--> Wohin Sie gehen [ Sprungadresse ] <!--[wenn !supportLists]--> · <!--[endif]--> Was Sie bekommen [Was Sie bekommen möchten ] <!--[wenn !supportLists]--> · Was Sie wollen 4. Hyperlinks mit unterschiedlichen Zielen sollten klar unterscheidbar sein. Hyperlinks zu unterschiedlichen Zielen müssen klar unterscheidbar sein 5. Hyperlinks sollten auf unerwartete Folgen hinweisen, z. B.: Erläutern Sie alle besonderen Situationen, die nach dem Anklicken eines Hyperlinks eintreten können, beispielsweise: <!--[wenn !supportLists]--> · <!--[endif]--> Links zu Dateien [ Link zu einer Datei ] <!--[wenn !supportLists]--> · <!--[endif]--> Links, die Fenster öffnen oder schließen [Durch Klicken auf einen Link wird ein Fenster geöffnet oder geschlossen ] Was macht man zu einem Link? Bedenken Sie den Zweck dieses Hyperlinks Beispiel für Hyperlink-Inhalte: Amapproved.com Beispiel für Hyperlink-Inhalt: Amapproved.com Eine Site zum Auffinden zugelassener Aston Martins, und sie ist im Großen und Ganzen gut. Dies ist der Suchergebnisbildschirm. Raten Sie mal, wie Sie von den Suchergebnissen zu den Details eines bestimmten Fahrzeugs gelangen? Der einzige Link ist das Fahrzeugmodell (in der Spalte „Fahrzeugübersicht“). In diesem Fall ist es die Website für Autos von Aston Martin . Man kann sagen, dass sein Gesamterscheinungsdesign klassisch ist. Dies ist eine Seite zur Anzeige von Suchergebnissen. Stellen Sie sich nun vor, wie Sie über die Suchergebnisse detaillierte Informationen zu einem Fahrzeug anzeigen können. Als einziger Hyperlink ist hier der auf das „ Fahrzeugmodell “ in der Spalte „ Fahrzeugübersicht “ zu finden . Das erste und größte Problem besteht darin, dass Sie die Hyperlinks nicht unterscheiden können, wodurch Prinzip 1 verletzt wird. Sie wissen nicht, wo Sie klicken müssen, um weitere Informationen zu erhalten: Sie müssen raten. Das erste und größte Problem besteht darin, dass Sie nicht erkennen können, was ein Hyperlink ist. Dies verstößt gegen Regel 1 , die besagt, dass Sie nicht wissen, wo Sie klicken müssen, um weitere Informationen zu erhalten, und deshalb zuerst darüber nachdenken müssen.  Das zweite Problem ist: Die Links sehen gleich aus, obwohl sie auf völlig unterschiedliche Ziele verweisen (jeder ist ein anderer gebrauchter Aston Martin). Dies verstößt gegen Prinzip 4. Da alle Links auf dieser Seite denselben Inhalt (das Fahrzeugmodell) haben, ist es noch weniger offensichtlich, dass es sich um den Link handeln könnte. Das zweite Problem besteht darin, dass diese Links zwar auf völlig unterschiedliche Ziele verweisen (jeder unterschiedliche Link verwendet den Namen „ Aston Martin “), aber nahezu identisch aussehen, was gegen Regel 4 oben verstößt . Darüber hinaus enthalten alle Links denselben Inhalt. ( Fahrzeugmodell [Fahrzeugtyp ] ), wodurch der Hyperlink weniger offensichtlich wird. Wenn ich auf „Aston Martin DB7 GT“ klicke, erwarte ich allgemeine Informationen zum Aston Martin DB7 GT. Dies verstößt gegen Prinzip 3, da der Link nicht genau beschreibt, was ich bekomme, wenn ich darauf klicke. Wenn ich auf den Link „ Aston Martin DB7 GT “ klicke, erwarte ich allgemeine Informationen zum Fahrzeugtyp „ Aston Martin DB7 GT “. Ich stellte jedoch fest, dass die Informationen, die ich schließlich erhielt, nicht mit der Beschreibung des Links übereinstimmten. Dies verstößt dann gegen Regel 3 . Was sollten sie tun? Wie kann die Website verbessert werden? Was Sie erhalten, sind die Informationen zu einem bestimmten Auto. Was das bestimmte Auto repräsentiert, ist die gesamte Tabellenzeile. Es gibt keine andere eindeutige Kennung für das Auto (Kilometerstand, Preis usw. sind nicht unbedingt eindeutig). Daher sollte die gesamte Zeile der anklickbare Hyperlink sein. (Es wäre auch hilfreich, wenn die Zeile beim Mouseover ihre Farbe/ihren Farbton ändern würde.) Das „ Ding, das Sie erhalten “ sollten Informationen zu einem Auto sein. Die Informationen, die das spezifische Modell darstellen, sollten die gesamte Tabellenspalte einnehmen. Da es außerdem kein Bestätigungsobjekt mit spezifischen Modellinformationen (wie Kilometerstand, Preis usw.) gibt, muss die gesamte Tabellenspalte ein anklickbares Hyperlink-Objekt sein. (Es wäre leichter zu erkennen, wenn sich die Farbe des Hyperlinks ändern würde, wenn Sie mit der Maus darüber fahren). Größe in Hyperlinks ausdrücken Beschreibt die Größe des Hyperlink-Objekts Es kommt häufig vor, dass Computer diese Art von Informationen ausgeben, um die Erwartungen des Benutzers beim Verknüpfen mit einer Datei zu wecken: Beim Verknüpfen mit einer Datei stellen wir häufig fest, dass der Hyperlink eine Beschreibung der Dateigröße enthält. Dies erleichtert den Benutzern die Entscheidung, ob sie auf den Dateilink klicken sollen. Beispiel: PDF (46.764 Bytes) Wenn man an die Ziele des Benutzers denkt, muss er ungefähr wissen, wie lange der Download dauern wird: Werden es ein paar Sekunden oder Minuten sein? Das ist im Allgemeinen die genaueste Angabe, die nötig ist. Überlegen Sie, was die Ziele Ihrer Benutzer sind. Normalerweise müssen sie wissen, wie lange der Download dauert: ein paar Sekunden oder ein paar Minuten? Deshalb sollten wir es so genau wie möglich beschreiben. Was soll es sein? Wie ist die oben genannte Dateigröße zu beschreiben? Es bringt überhaupt keinen Vorteil, mehr als zwei signifikante Stellen in der Dateigröße anzugeben. Oben sollten 47 KB stehen. Verwenden Sie für Online-Dateigrößen außerdem immer nur Kilobyte oder Megabyte. (Gute, nützliche Dateigrößen mit zwei signifikanten Stellen lauten: 4,7 KB, 47 KB, 470 KB, 4,7 MB usw.) Bei der Beschreibung der Dateigröße sollten Sie möglichst nicht mehr als zwei signifikante Ziffern verwenden. Die obige Dateigröße sollte als 47 KB angegeben werden . Daher sollten Dateien im Internet nach Möglichkeit in Kilobyte ( kb ) oder Megabyte ( mb ) beschrieben werden. (Wir empfehlen die folgenden zweistelligen Beschreibungen: 4,7 KB, 47 KB, 470 KB, 4,7 MB usw.) Formatieren von Hyperlinks Definieren des Formats für Hyperlinks Wenn wir Text-Hyperlinks von anderem Text unterscheiden müssen, sollte dies durch Farbe oder Formatierung wie Unterstreichung/Fettdruck erfolgen? Wenn wir verschiedene Textlinks in einem Text unterscheiden müssen, sollten wir für den Hyperlink-Teil eine andere Farbe als für den normalen Text verwenden oder den Hyperlink-Text unterstreichen oder fett drucken. De facto wurde vereinbart, dass Hyperlinks blau und unterstrichen dargestellt werden, beim Anklicken rot werden und besuchte Links violett sind. Die Farbänderungen, die der Standard-Hyperlink-Aktion entsprechen, sind: Zunächst ist der Hyperlink blau und unterstrichen; wenn Sie darauf klicken, wird er rot; besuchte Hyperlinks werden violett angezeigt. Die lesbarste Art, den Großteil des Textes darzustellen, ist schwarz auf weißem Hintergrund und die Darstellung von Text-Hyperlinks in Blau (# Die gängigste Methode zur Verbesserung der Lesbarkeit von Hyperlinks ist die Verwendung von schwarzem Text auf weißem Hintergrund und blauen Texthyperlinks ( # Hyperlinks können grau statt blau sein, mit oder ohne Unterstreichung.  Es ist angebracht zu fragen, ob die Unterscheidung allein anhand der Farbe für farbenblinde Menschen funktioniert. Das obige Bild ist ein Screenshot dieser Seite, völlig entsättigt. Es zeigt, dass selbst ohne Farbe ein ausreichender Tonwertunterschied zwischen Schwarz und Blau besteht, um den Hyperlink deutlich zu machen. Die unterstrichene Version ist etwas deutlicher, aber die Anzeige der Unterstreichung beim Hovern würde einen ähnlichen Zweck erfüllen. Gleichzeitig müssen Sie auch bedenken: Ist es für Menschen mit Farbenblindheit akzeptabel, wenn Sie sich zur Unterscheidung des Hyperlink-Status ausschließlich auf Farbänderungen verlassen? Am besten fragen Sie sie, ob sie die Farben erkennen können. Das Bild oben ist ein Screenshot der Seite. Im Bild oben können Sie sehen, dass der Hyperlink auch ohne Verwendung des Farbänderungseffekts des Hyperlinks eindeutig anhand von Schwarz und Blau identifiziert werden kann. Durch das Unterstreichen von Hyperlinks können Benutzer diese leichter erkennen. Derselbe Effekt wird auch erreicht, wenn die Unterstreichung angezeigt wird, wenn die Maus über den Hyperlink bewegt wird. Müssen Hyperlinks unterstrichen werden?  Bei gelegentlichen Inline-Links funktioniert die Unterstreichung problemlos. Selten verwendete integrierte Hyperlinks können unterstrichen werden. Dadurch fällt der Link etwas mehr auf als durch die Farbe allein. Durch das Unterstreichen eines Hyperlinks (und nicht nur durch Ändern seiner Farbe) kann dieser besser hervorgehoben werden. In diesem Beispiel eignet sich die Unterstreichung gut dazu, Artikeltitel vom Untertitel zu unterscheiden. In diesem Fall werden durch die Unterstreichung die primären und sekundären Überschriften deutlich voneinander unterschieden. Ich denke, dass Unterstreichungen nicht hilfreich sind, wenn in Absätzen oder Linklisten zahlreiche Inline-Links vorhanden sind oder wenn eine Seite viele Linksätze enthält. Wenn ein Absatz, eine Linkliste oder eine Seite zu viele Hyperlinks enthält, sind diese durch das Unterstreichen nicht besonders auffällig. Nachfolgend werden die Auswirkungen zweier Hyperlink-Sätze verglichen. Der Hyperlink auf der linken Seite ist unterstrichen, der auf der rechten Seite hingegen nicht, und zwar wie folgt:     Beachten Sie, dass die nicht unterstrichenen Textblöcke schneller und einfacher zu lesen sind. Hinweis: Wenn Sie eine Liste mit Links wie die oben stehende haben, ist diese ohne Unterstriche leichter zu lesen. In diesem zweiten Beispiel habe ich auch den Zeilenabstand angepasst, um die zugehörigen Wörter deutlicher hervorzuheben. Im zweiten Fall habe ich auch den Abstand zwischen den Wörtern angepasst, damit es klarer aussieht. Konsistenz Konsistenz Es ist wichtig, dass die Hyperlinkformate auf allen Seiten einheitlich sind. Ein weiterer wichtiger Punkt ist, dass das Hyperlinkformat aller Seiten konsistent sein sollte. Wenn sich einige Textlinks auf unterschiedlichen Hintergründen befinden, z. B. in Navigationsleisten, müssen möglicherweise spezielle Farben oder Behandlungen verwendet werden. Wenn sich der Hyperlink auf einem anderen Hintergrund befindet, beispielsweise in einer Navigationsleiste, verwenden wir dafür natürlich spezielle Farben und Effekte.  Die obigen Ausschnitte stammen von der Guardian Online -Homepage Der obige Clip stammt von der Titelseite von Guardian Online . Während die meisten Links ähnlich aussehen (#036, hauptsächlich nicht unterstrichen), werden beim Hovern, wenn der Mauszeiger über den aktiven Link bewegt wird, einige sehr unterschiedliche Stile angewendet. Die oben aufgeführten Hyperlink-Formate sehen grundsätzlich gleich aus (Schriftfarbe #036 , Hyperlinks werden grundsätzlich nicht unterstrichen und die Effekte beim Überfahren des Hyperlinks mit der Maus sind unterschiedlich). Der psychologische Effekt ist beunruhigend: Man zweifelt, ob alle Links ähnliche Dinge bewirken (d. h. zu einer anderen Seite dieser Site führen) oder ob man unerwartet woanders hingeleitet wird. Ich denke, dass dieses schizophrene Verhalten das Markenerlebnis schwächt und die Benutzerfreundlichkeit beeinträchtigt. Psychologisch gesehen kann dieser Effekt beunruhigend sein. Sie werden Zweifel haben, ob alle von Ihnen verwendeten Links so sind (auch andere Seiten) oder ob sie irgendwohin führen, wo Sie nicht etwas Unerwartetes vermuten. Ich bin davon überzeugt, dass dieser schizophrene Ansatz den Eindruck, den der Benutzer von der Marke der Site hat, schwächt und die Benutzerfreundlichkeit der Site erheblich reduziert. Es gibt keinen guten Grund, alle Hyperlinks unterschiedlich zu behandeln. Das dritte Beispiel verstößt auch gegen das zweite Prinzip, da es durch die Farbänderung schwächer und weniger auffällig wird, was keine „Hervorhebung“ ist. Wir können nicht für alle Hyperlinks unterschiedliche Effekte verwenden. Das dritte Beispiel oben verstößt gegen die zweite Regel; die unterschiedlichen Farbänderungen machen den Superfokus unscharf und lassen ihn überhaupt nicht hervorstechen. Abschluss abschließend Insgesamt scheint es, dass die vorherrschende Konvention in der Branche darin besteht, # Zusammenfassend lässt sich sagen, dass die charakteristischste Änderung des Farbeffekts bei Hyperlinks die folgende ist: Verwenden Sie # Ich denke, dass dies die beste Balance der Funktionalität bietet, wenn es konsistent auf Inline-Hyperlinks und gruppierte Hyperlinks angewendet wird. Ich bin der Meinung, dass die beste Ausgewogenheit der Funktionalität erreicht wird, wenn für alle integrierten und gruppierten Hyperlinks die gleiche Effektvariante verwendet wird. |
<<: Detaillierte Erklärung zum Ein- und Aussteigen aus dem Docker-Container
>>: CSS zur Implementierung von Sprites und Schriftsymbolen
Artikel empfehlen
JS realisiert einfachen Bildkarusselleffekt
In diesem Artikel wird der spezifische JS-Code zu...
Detaillierte Erklärung der Verwendung von Refs in den drei Hauptattributen von React
Inhaltsverzeichnis Klassenkomponente Funktionale ...
So verwenden Sie den Linux-Paste-Befehl
01. Befehlsübersicht Der Einfügebefehl fügt die e...
Ursachen und Lösungen für Verzögerungen bei der MySQL Master-Slave-Replikation
Inhaltsverzeichnis Ein kurzer Überblick über die ...
Beispiel für horizontale und vertikale Zentrierung eines Div-Unterelements mit CSS
Div-Grundlayout <div Klasse="Haupt"&...
jQuery implementiert alle Auswahl- und umgekehrten Auswahloperationsfälle
In diesem Artikel wird der spezifische Code von j...
Vuex implementiert einen einfachen Einkaufswagen
In diesem Artikelbeispiel wird der spezifische Co...
Nginx verwendet Lua+Redis, um IP dynamisch zu blockieren
1. Hintergrund Bei unserer täglichen Website-Wart...
Installationsschritte der Ubuntu 20.04-Doppelpinyin-Eingabemethode
1. Chinesische Eingabemethode einrichten 2. Stell...
Kennen Sie die Bedeutung von Sonderzeichen in URLs?
1.# # stellt eine Position auf einer Webseite dar...
Detaillierte Erläuterung der Befehle für grundlegende MySQL-Operationsanweisung
1. Verbindung zu MySQL herstellen Format: mysql -...
Zusammenfassung zur Verwendung der Reduce()-Methode in JS
Inhaltsverzeichnis 1. Grammatik 2. Beispiele 3. A...
So konfigurieren Sie geplante MySQL-Aufgaben (EVENT-Ereignisse) im Detail
Inhaltsverzeichnis 1. Was ist eine Veranstaltung?...
Analyse des Implementierungsprozesses der Docker-Intranet-Penetration-FRP-Bereitstellung
1. Erstellen Sie ein Konfigurationsdateiverzeichn...
Lösung für mehrere Docker-Container, die nicht die gleiche Portnummer haben
Hintergrund In Docker werden vier Container mit d...