Favoriten, Touch-Symbole, Kachelsymbole usw

Warum Symbole verwenden? Beim Design dreht sich alles um die Kommunikation zwischen Menschen: Es spielt keine Rolle, wie interessant und wichtig die Informationen sind, die Sie anderen präsentieren, wenn Sie es nicht schaffen, die Aufmerksamkeit Ihrer Besucher auf sich zu ziehen. Beim ersten Besuch einer Website durchsuchen die meisten Nutzer die Seite nach interessanten Inhalten. Erst wenn etwas ihre Aufmerksamkeit erregt, beginnen sie tatsächlich mit dem Lesen. Die Symbole sind einfach und auf effiziente Weise Machen Sie den Benutzer mit dem Inhalt Ihrer Website vertraut.

Symbole haben den gleichen psychologischen Zweck wie Absatzumbrüche: Sie unterteilen den Inhalt visuell und machen ihn so weniger einschüchternd beim Lesen. Eine gut formatierte Seite mit Textunterbrechungen in leicht lesbaren Absätzen und akzentuierten Symbolen ist leicht zu lesen und interessant genug, um die Aufmerksamkeit des Besuchers zu fesseln. Verschwenden Sie keine Zeit mehr damit, riesige Texte zu schreiben, die niemand liest. Beginnen Sie mit der Verwendung von Symbolen!

In diesem Artikel zeigen wir tolle Beispiele und Best Practices für die Verwendung von Symbolen zur Unterstützung von Inhalten im Webdesign.

1. So verwenden Sie Symbole

Der Hauptzweck der Verwendung von Symbolen besteht darin, dem Benutzer zu helfen effizienter Prozess Wahrnehmung und Verarbeitung von Informationen. Typischerweise werden Ziele durch Freiraum und Icons erreicht, die nicht vom Inhalt ablenken, sondern ihn vielmehr ergänzen. Die Verwendung von Symbolen bereichert selbst minimale Inhalte, verleiht ihnen Gewicht und verbessert die Effektivität der Kommunikation ohne unnötige Worte. Icons sollten verwendet werden, um auf Inhalte aufmerksam zu machen, sie aber niemals zu ersetzen.

Stärkung der Funktionsliste

Das Auflisten von Diensten ist eine gängige Praxis und ein notwendiger Bestandteil effektiven Marketings, aber die Liste selbst ist sehr banal und langweilig. Die Verwendung von Symbolen in Kombination mit einer Liste von Funktionen macht es attraktiver und informativer.

Auf neue Features der Webanwendung aufmerksam machen

Symbole sind eine visuelle Einladung, die neuesten und besten Funktionen Ihrer Webanwendung auszuprobieren. Symbole sollten die Aufmerksamkeit Ihrer Besucher erregen und sie auf neue Funktionen leiten. Und sobald die Aufmerksamkeit des Besuchers geweckt ist, erzählen Sie ihm von den großartigen Möglichkeiten, die sich ihm bieten.


Liste verschiedener Anwendungen und Produkte

IN in diesem Fall Sie müssen das Symbol wie ein Logo behandeln und dabei bedenken, dass der Zweck eines Logos darin besteht, eine mentale Verbindung zwischen dem Produkt und dem Bild herzustellen. Das Symbol sollte einzigartig, aber einfach sein: Die meisten Symbole haben eine Größe von 128 x 128 Pixeln, Sie müssen also einen minimalistischen Ansatz wählen und mit minimalen Mitteln viel sagen können.

Beispiel:


Listen Sie Ihre Dienste auf und machen Sie die Liste leichter lesbar

Icons sollten für den Inhalt relevant sein und ein einfaches Design haben. Bestimmen Sie, was Sie mit Ihren Inhalten ausdrücken möchten, und erstellen Sie darauf basierend ein Symbol. Was ist das Thema der Website oder des Artikels? Welche Farben werden verwendet? Welcher Stil ist das? Modern? Klassiker? Symbole sollten visuell mit den im Inhalt ausgedrückten Ideen vereinheitlicht werden.


2. Zweck und Platzierung

Symbole machen die Benutzeroberfläche der Website freundlich, einladend und professionell. Sie zeigen, dass Sie sich überhaupt darum kümmern kleine Details. Lassen Sie Ihrer Fantasie freien Lauf, wenn Sie mit Symbolen arbeiten: Kopfzeilen, Seitenleisten, Fußzeilen und Listen eignen sich hervorragend zum Platzieren von Symbolen.

Hervorheben von Kopf- und Fußzeilen, um Überschriften ein besonderes Aussehen zu verleihen

Selbst ein einfaches Symbol kann einer Website Charme und Persönlichkeit verleihen.

Beispiel:


Bitten Sie Ihren Besucher, eine lange Seite zu lesen

Verwenden Sie Symbole als Punkte in Absätzen. Dieser Ansatz wird die Lesbarkeit selbst des längsten Textes erheblich verbessern.

Beispiel:


Überschriften und Abschnitte trennen

Verwenden Sie Symbole, um verschiedene Textteile visuell voneinander zu trennen.

Beispiel:


Die Größe spielt keine Rolle! Auch kleine Icons können wirkungsvoll sein

Kleine Symbole bieten das gleiche Maß an visuellem Interesse wie große Symbole, jedoch ohne potenzielle Gefahr die Aufmerksamkeit ablenken. Stellen Sie sicher, dass die Symbole leicht zu erkennen sind und in ihrer Bedeutung dem hervorzuhebenden Text nahe kommen.


Markieren Sie Text, indem Sie rechts neben dem Absatz Symbole platzieren

Sie müssen sich nicht auf die eintönige Platzierung von Symbolen einlassen. Die Anordnung der Symbole rechts vom Text wird seltener verwendet und ist daher optisch ansprechender. Aber Vorsicht, manchmal sieht diese Anordnung chaotisch aus.


Ändern Sie die Größe und Platzierung von Symbolen

Nutzen Sie Ihre Fantasie! Durch Ändern der Größe und Platzierung der Symbole wird der Inhalt dynamischer und interessanter.


3. Wählen Sie Ihren Stil

Wenn es um Stil geht, müssen Sie Effizienz als Ziel haben. Wenn Ihr Design Einzigartigkeit erfordert, sind originelle Symbole gut dafür, aber Effizienz ist viel wichtiger. Denken Sie daran, dass Symbole dazu gedacht sind, Inhalte und Design zu verbessern und zu ergänzen. Daher ist es besonders wichtig, darauf zu achten, wie Ihre Icons zum Rest Ihrer Website passen. Kaufen Sie keine cool aussehenden Icons von einer Website wie iStockPhoto. Viel wichtiger ist, dass die Icons im gleichen Stil wie der restliche Seiteninhalt sind.

Wichtig ist auch, dass alle Ihre Icons zueinander passen. Das Gruppieren unterschiedlicher Symbole, egal wie cool sie aussehen, ist ein eklatanter Designfehler und ein Zeichen von Unprofessionalität. Nachfolgend finden Sie einige Beispiele, wie Icons effektiv in den Stil einer Website integriert werden können.

Verwendung helle Farben und das hervorragende 3D-Icon-Design ergänzt es perfekt Aussehen Website: GoodBarry



Die Verwendung eines chaotischen Stils für 2D-Symbole sorgt für zusätzliche Tiefe: Take the Walk


Die Wahl eines einzigartigen und einheitlichen Stils macht Ihre Website dynamisch und professionell: Squarespace


Monochromatische Symbole können die Aufmerksamkeit ohne Ablenkung auf den Inhalt lenken: Studio 7 Designs


Nutzen Sie die Kraft, einen einfachen Screenshot mit Farbverlauf in ein einzigartiges Symbol zu verwandeln: Gist


Verwenden Sie kein Symbol, nur weil es cool aussieht. Wählen Sie, was am besten zu Ihrem Website-Stil und Ihrer Marke passt: Treemo


4. Zusätzliche Beispiele

Nachfolgend finden Sie einige Beispiele effektiver Einsatz Symbole

Symbole sparen Platz und sehen frisch aus. Icons sind eine schnelle Antwort auf komplexe Fragen:

  • Wie kann man es schöner machen?
  • Wie können wir das brandmarken?
  • Wie macht es mehr Spaß?

Wir lieben Ikonen. Bis wir anfangen, sie zu verwirren.

Es gibt verschiedene Icons: auf Produkten, in der Architektur, auf Computern, in Listen, auf Schaltflächen, für Web und Anwendungen, für iOS und Android. Symbolleistensymbole, beschriftet und unbeschriftet, stilisiert und standardisiert, farbig und monochrom, in Symbolschriftarten, PNG- oder SVG-Dateien ...

Es gibt viele kostenlose und kostenpflichtige Icon-Sets, Vektoren und Raster, flach und dreidimensional, und wenn Sie die Regeln für die Arbeit damit aufschreiben, benötigen Sie ein dickeres Notizbuch. Es gibt so viele verdammte Ikonen, dass der Teufel Sie leicht davon überzeugen kann, dass sie selbst ein schlechtes Design herausholen.

Aber seien Sie vorsichtig. Wenn „Ikone“ Ihre Antwort auf eine Frage ist, wird Don Norman eines Tages an Ihre Tür klopfen, und wenn Sie sie öffnen, wird er Ihnen tief in die Augen schauen und sagen:

„Unverständliche Symbole sind auf der Benutzeroberfläche verstreut, obwohl die wissenschaftliche Gemeinschaft seit langem gezeigt hat, dass sich Menschen nur an die Bedeutung einer kleinen Anzahl von Symbolen erinnern. Können Sie sich an die Bedeutung all dieser Symbole erinnern? Ich tu nicht."

Mit diesen Worten belehrte Don Norman seinen ehemaligen Arbeitgeber Apple. Beispiele für Apple-Ikonotoxie finden sich in iTunes, Mail und der iOS-Systemsteuerung.

Auf Twitter erschrecken sie die Leute mit iTunes-Ikonen wie Baba Yaga. Hier ist ein tolles Beispiel von Apple Mail für OS X: Wie viele dieser Symbole erkennen Sie ohne Signatur?

Was sehen wir in diesem Beispiel? Nur dass die Icons Platz sparen und frisch aussehen. Der Zweck der Schaltflächen wirft nicht nur für den Designer, der die Symbole auf diesem Panel platziert hat, Fragen auf. Möglicherweise verbergen sich tausende hinter dem Symbol verschiedene Wörter, und das Hauptproblem. Wenn ein Wort tausend Bedeutungen hat, kann nur ein gutes Verständnis des Kontexts Unstimmigkeiten vermeiden. Hier sind die gleichen Symbole, jedoch mit Beschriftungen:

Bildunterschriften erläutern die Symbole. Mit ihnen wird die Schnittstelle komfortabler. Aus diesem Grund behaupten einige herzlose Menschen, dass „das beste Symbol Text ist“. Logischerweise verhindern korrekte Signaturen Verwirrung. Warum verwenden wir also nicht einfach Beschriftungen ohne Symbole?

Funktionell ist ein „Nur-Text“-Design absolut klar (sofern die Informationsarchitekten dieser Aufgabe gewachsen sind), aber etwas geht kaputt, wenn man Bilder aus der Benutzeroberfläche entfernt. Das Leben verlässt ihn. Er hört auf, frisch und fröhlich zu sein. Das betrifft den Designpositivisten nicht. Aber es macht anderen Menschen Sorgen. Wir haben diese Hypothese getestet, indem wir Symbole aus iA Writer entfernt haben. Die Reaktion der Nutzer war ein klares „Nicht!“

Möglicherweise ist es besser, nicht zwischen Text und Symbolen zu wählen, sondern zu verstehen, wann nur Symbole, wann nur Text und wann Symbole mit Beschriftungen verwendet werden sollten. Lass es uns herausfinden...

Nur Symbole

Symbole sind Bilder. Bilder erleichtern die Darstellung alltäglicher Gegenstände. Symbole, die leicht erkennbare Objekte darstellen, die bekannte Konzepte darstellen, benötigen keine Beschriftung. Zum Beispiel Flugzeuge für Flughäfen, menschliche Figuren für Toiletten, Körbe für Orte, an denen Dokumente aufbewahrt werden, die wir bald wegwerfen.

Es ist einfach, materielle Gegenstände darzustellen, aber die Notwendigkeit, eine Handlung bzw. Handlung zu zeigen abstraktes Konzept hat viele Designer leiden lassen. Das Problem besteht darin, dass es sich bei der Mensch-Computer-Interaktion bei den meisten Symbolen um Aktionen und Abstraktionen handelt.

Zeigen Sie echte Action. Ein animiertes Symbol lenkt ab; es ist besser, eine Aktionsmetapher zu verwenden. Im Kontext eines Computerdesktops bedeutet das Druckersymbol „Drucken“, der Papierkorb „Löschen“ und die Schere „Ausschneiden“. Jedes dieser Objekte hat einen bestimmten Zweck, sodass die beabsichtigte Aktion leicht zu verstehen ist.

Bei komplexen Aktionen und Abstraktionen wird dies nicht mehr funktionieren. Und es besteht keine Hoffnung, dass sich in naher Zukunft etwas ändern wird. In 40 Jahren Mensch-Computer-Interaktion haben wir keine universellen Symbole für Grundfunktionen wie Speichern, Kopieren und Einfügen gefunden.

„Ein häufiges Problem bei piktografischen Systemen besteht darin, dass ihre einzige Einschränkung die Anzahl der Objekte aus der umgebenden Welt ist, die im Bild dargestellt werden können.“

Nackte Symbole auf funktionalen Oberflächenelementen beeinträchtigen die Benutzerfreundlichkeit. Der beste Weg Melden Sie eine Funktion – ein Wort, kein Bild. Noch besser, wenn es ein Verb ist.

„Wenn es um den immer unvollkommenen Gedankenaustausch zwischen Menschen geht, ist die Sprache das Beste, was wir Menschen dafür haben. Geschriebene Sprache verleiht Gedanken Langlebigkeit und Genauigkeit (wir korrigieren unsere Sprachmuster selten, aber ich habe diesen Satz mehrmals korrigiert).“

Visuell sind grafische Symbole einfacher und attraktiver als dichte Wörter. Doch je näher sie kommen, desto mehr werden die Sirenen zu Monstern. Wenn Sie versuchen, sie zu lesen und zu verstehen, verwandeln sie sich in kryptische Zeichen aus einer Sprache, die Sie nicht kennen, schnappen sich die Interaktion und beißen Ihnen den Kopf ab. Bloße Symbole verbessern das Erscheinungsbild der Benutzeroberfläche und verringern deren Klarheit. Sie verdecken klare Funktionen und maskieren sie mit einer Schicht dunkler Symbole.

„Ein Symbol ist ein Symbol, das in jeder Sprache gleichermaßen unverständlich ist. Egal welche Sprachen Sie beherrschen, Sie müssen die Bedeutung des Symbols lernen. Auf diese Idee sind nicht nur Menschen gekommen phonetische Sprachen, wobei mehrere Zeichen kombiniert werden können, um ein beliebiges Wort zu bilden. Viele Designer haben mich davon überzeugt, Symbole in der Benutzeroberfläche zu verwenden. Ich fragte sie: „Ist das wirklich die beste Schnittstelle, die wir finden können, oder ist sie nur aus Gewohnheit entstanden?“ Designer stecken einfach in diesem Paradigma fest und bemerken seinen Niedergang nicht.“

Die Icons sehen modisch aus und lösen Probleme mit Platzmangel cool. Natürlich ist Apple nicht der Einzige, der sich der übermäßigen Verwendung nackter Symbole schuldig gemacht hat. Das Materialdesign von Google wird durch Branding vergiftet. Hier ist Gmail zum Vergleich:

Was sehen wir hier? Gmail-Symbole sehen einfach aus, aber sie regen zum Nachdenken über den Zweck der Schaltflächen an. Wenn Sie sich ein wenig konzentrieren und konzentrieren, können Sie es erraten. Nach einer Weile wird Ihnen das Muskelgedächtnis helfen, aber sowohl das Kurzzeit- als auch das Langzeitgedächtnis werden die gleichen Schwierigkeiten haben, diese zu akzeptieren. In einer E-Mail-App sollten Konzentration und Konzentration auf das Verstehen und Schreiben von Text gerichtet sein und nicht auf das Entschlüsseln der Benutzeroberfläche.

Stoppen! Misst Google nicht alles? Sie wissen wahrscheinlich, was sie tun, oder? Dort arbeiten Wissenschaftler. Sie haben den Ansatz von Symbolen ohne Beschriftung gewählt und scheitern nie. Also, Icons haben Recht! Vielleicht, aber was für Google oder Facebook funktioniert, funktioniert möglicherweise nicht für uns. Wie unten erläutert, hat Google möglicherweise einen Grund außerhalb der Naturwissenschaften gefunden. Wie dem auch sei, Google bietet auch eine reine Textoption an.

Nur Text

Bilder können unterschiedlich interpretiert werden. Je nach Kontext wird sogar die allgegenwärtige Lupe sowohl als „Suche“ als auch als „Vergrößerung“ gelesen. Auch die Bedeutung des Wortes hängt vom Kontext ab, wird aber immer gleich gelesen. Was passiert, wenn Symbole durch Text ersetzt werden? Es ist logisch, dass eine solche Schnittstelle besser funktioniert als eine Symbolschnittstelle. In den Gmail-Einstellungen können Sie die Symbolleiste durch eine Textversion ersetzen:

Was ist passiert? Die Bedeutung der Schaltflächen ist nun klar. Aber die Benutzeroberfläche ist weniger menschlich geworden und macht weniger Spaß. Es ähnelt einem Arbeitsgerät, ist kälter geworden und wirkt überraschenderweise komplexer. Wie ist das möglich? Die Textoberfläche ist objektiv komfortabler, wird aber aufgrund ästhetischer Nuancen nicht als solche wahrgenommen.

Text ist eine rationale Entscheidung. Richtig strukturierte und benannte Funktionen sind die Grundlage der Mensch-Computer-Interaktion.

Symbole sind emotionale Wahl. Die richtigen Symbole sorgen für Positivität. Die emotionale Wirkung lässt sich nicht messen, aber das macht sie nicht weniger real.

„Es reicht nicht aus, Produkte zu entwickeln, die funktionieren, klar und einfach zu bedienen sind. Wir müssen Produkte schaffen, die Freude und Aufregung, Freude und Spaß und natürlich Schönheit bringen Menschenleben" - Don Norman im Buch „The Design of Common Things“.

Menschen sind sowohl rationale als auch emotionale Wesen: „Das Gehirn verarbeitet keine Informationen, ruft kein Wissen ab und speichert keine Erinnerungen. Kurz gesagt: Das Gehirn ist kein Computer.“ Wenn es beim Thema Benutzerfreundlichkeit von Symbolen eines bewiesen ist, dann ist es, dass „Symbole mit Beschriftungen eine bessere Leistung erbringen als nur ein Symbol oder nur Text.“

Symbol mit Signatur

Das Icon mit der Signatur ist emotional und verständlich zugleich. Symbole mit Beschriftungen funktionieren immer. Wenn das Symbol unklar ist, wird es in der Bildunterschrift erläutert. Warum also nicht dieses Gewinnerpaar nutzen?

Das Problem ist, dass es ein Kompromiss ist. Es reduziert die emotionale Botschaft von Symbolen und die Einfachheit von klarem Text. Es spart keinen Platz und schmückt nicht das Erscheinungsbild. Es nimmt mehr vertikalen Platz ein und erzeugt mehr visuelles Rauschen als reine Symbole oder reiner Text.

Emotional bevorzugen wir Ikonen. Rational gesehen ist es für uns besser, Symbole durch Text zu ersetzen. Theoretisch ist ein Icon mit einer Signatur eine Win-Win-Option. In der Praxis gibt es keine Allheilmittel im Design.

Es gibt keine Win-Win-Optionen, aber es gibt bessere und schlechtere Kompromisse. Wir arbeiten für die Menschen. Menschen fühlen und denken. Obwohl es besser ist, sich nicht mit Relativismus zu befassen.

Theorie und Praxis

Wie jede Technologie hilft sie dabei, Schnittstellen auf einer rationalen, funktionalen Struktur aufzubauen. Design ist keine Naturwissenschaft. Es ist eine Praxis, die von Wissenschaft und Messung profitiert, aber die Designqualität kann nicht allein durch objektive Messungen beurteilt werden. Benutzertests und -analysen ersetzen keine Designer, testen aber Designannahmen. In einem Produkt steckt mehr, was ein Designer durchdenken kann, und in einem Design steckt mehr, was wir messen können. Dieses „Mehr“ kann nur im Gespräch mit den Menschen, die das Produkt nutzen, erfasst werden.

Die Mensch-Computer-Interaktion basiert auf einer rationalen Grundlage. Wir sind Lebewesen, unser Verhalten ist nicht berechenbar, aber Sie können mit uns reden. Symbole, Farben, Rhythmus, Luft, Typografie und andere schöne Dinge machen die Benutzeroberfläche angenehmer und verbessern dadurch die Interaktion. Er scheint nicht so rational zu sein. Er sieht menschlich aus.

Einfache Regeln

Beeilen Sie sich nicht mit dem Hinzufügen von Symbolen, wenn mit dem Design etwas nicht stimmt oder Sie das Gefühl haben, dass es nicht wie geplant funktioniert. Symbole können eine fehlerhafte Site-Struktur nicht beheben. Fügen Sie sie ganz am Ende hinzu. Spielen Sie nicht mit Symbolen, während Sie an einem Drahtmodell arbeiten. Ein Bild kann mehr als tausend Worte verbergen. Eine gute Informationsarchitektur bringt die richtigen Worte in den richtigen Kontext. Arbeiten Sie den rationalen Teil durch, bevor Sie zum emotionalen Teil übergehen.

Ein Symbol weist auf einen bestimmten Abschnitt oder eine bestimmte Funktion hin. Es stellt ein bestimmtes Wort dar, das eine einfache und verständliche Bedeutung vermittelt. Die Bedeutung einer Nachricht hängt vom Kontext ab. Selbst das schönste Symbol nützt nichts, wenn das gewählte Wort unklar ist oder nicht dem Kontext entspricht. Bevor Sie ein Symbol auswählen, fragen Sie sich: Welches Wort wird es darstellen? Das das richtige Wort? Ist es klar? Wird es in diesem Zusammenhang funktionieren? Ein Symbol kann viele verschiedene Konzepte verbergen. Wörter im Kontext sind nicht so flexibel. Im Gegensatz zu Symbolen unterliegen sie vielen Regeln.

Wenn Ihre Struktur fertig ist und es an der Zeit ist, dass Symbole, Freude und andere Dinge ins Spiel kommen, befolgen Sie eine einfache Regel: Fügen Sie das erforderliche Minimum an Symbolen hinzu, aber nicht weniger.

Behandeln Sie Symbole mit größter Sorgfalt. Es kann Ihre ganze Zeit in Anspruch nehmen, sie zu verbessern. Sie müssen für sich allein erkennbar sein, sie müssen das Konzept, das sie darstellen, klar veranschaulichen und sie müssen im Kontext mit anderen Symbolen und Konzepten funktionieren.

Symbole sind Adjektive und Adverbien im regulären Text. Wenn Sie sie entfernen, wird Ihr Text nicht zu einem literarischen Meisterwerk. Entfernen Sie das Unnötige, suchen Sie nach dem Richtigen, ersetzen Sie vage und prätentiöse Formulierungen durch präzise und prägnante.

Der Aufsatz wurde von iA-Spezialisten verfasst.


Wenn wir einen Computer benutzen, stoßen wir jeden Tag auf Symbole, weil... Sie bilden die Grundlage für grafische Oberflächen, die für moderne Zwecke verwendet werden Software. Diese kleinen Bilder werden zur Darstellung von Dateien (einschließlich Webseiten) und Programmen sowie zur Ausführung von Befehlen verwendet.

Wie verwenden wir Symbole?

Symbole befinden sich praktischerweise auf unserem Desktop oder in Programmen und warten, bis sie (ein- oder zweimal) angeklickt werden. Sie sind leicht zu erkennen, sie repräsentieren bequemer Weg Sie gelangen direkt zur gewünschten Funktionalität, ohne sich durch das Durcheinander von Befehlen und Menüs wühlen zu müssen.

Typischerweise hängt das Design mit dem Zweck des Programms oder der Datei zusammen, mit der das Symbol verknüpft ist. Beispielsweise könnte ein Symbol für ein E-Mail-Programm einen Umschlag darstellen, während ein Symbol für einen Multimedia-Player eine Musiknote oder den allgegenwärtigen dreieckigen Pfeil darstellen könnte, der nach rechts zeigt.

Wie werden Icons gestaltet?

Von ihrer Struktur her haben Symbole Standardgrößen, die normalerweise recht klein sind – von 16 x 16 bis 48 x 48 Pixel (auf Macs – bis zu 128 x 128, in Windows Vista – bis zu 256 x 256). Ein Symbol enthält in der Regel mehrere Bilder, darunter auch transparente Bereiche, sodass der Desktop-Hintergrund hindurch sichtbar ist. Dadurch erscheint das Symbol über dem Desktop oder der Symbolleiste, auf der es sich befindet.

Das Symbol enthält mehrere Bilder unterschiedlicher Größe und Farbe, damit Windows oder Mac OS für eine bestimmte Situation das am besten geeignete Bild verwenden kann. Diese Auswahl hängt vom Modus ab, in dem sich der Computermonitor befindet, und von der Position, an der das Symbol erscheinen soll. Beispielsweise haben in der Windows-Taskleiste angezeigte Symbole normalerweise eine Größe von 16 x 16, während Symbole auf dem Desktop eine Größe von 48 x 48 haben.

Welche Formate werden für Symbole verwendet?

Windows-Symbole haben die Erweiterung „ICO“, während Mac-Symbole die Erweiterung „ICNS“, „RSC“, „RSRC“ oder „BIN“ haben. Ein Symbol (einschließlich aller Variationen) ist in einer Datei enthalten, während Gruppen von Symbolen in Bibliotheken zusammengefasst sind.

Was ist der Unterschied zwischen Windows XP-Symbolen?

Symbole für Windows XP haben satte Farben und glatte Kanten und ergänzen den Stil von Windows XP. Ihre Kanten sind meist leicht abgerundet und die Lichtquelle befindet sich in der oberen linken Ecke, während diffuses Licht andere Teile des Designs beleuchtet.

Farbverläufe, Umrisse und Schatten werden verwendet, um dem Symbol Dimension und Kontrast zu verleihen. Einige Symbole in XP verfügen über eine Panoramaansicht, während Symbole, die für Dokumente verwendet werden oder Symbole oder einzelne Objekte darstellen, einander zugewandt sind. Insgesamt können sie als modern und hochwertig bezeichnet werden.

In XP sind die Symbole rechts neben dem Startmenü 24 x 24 groß und die in Symbolleisten verwendeten Symbole sind 24 x 24 oder 16 x 16 groß. Das System unterstützt 32-Bit-Symbole, bei denen es sich eigentlich um 24-Bit-Bilder mit einem 8-Bit-Alphakanal handelt, wodurch die Kanten der Symbole glatt aussehen und mit dem Hintergrund verschmelzen.

Windows XP-Symbole umfassen drei Farben, um verschiedene Monitoreinstellungen zu unterstützen: 24 Bit mit 8 Bit Alpha, 8 Bit (256 Farben) mit 1 Bit Transparenz und 4 Bit (16 Farben) mit 1 Bit Transparenz.

  • Übersetzung

Vom Übersetzer.
Dies ist eine Übersetzung eines Artikels von Philip Bernard von css-tricks.com. Ich habe mir erlaubt, den Teil des Artikels wegzulassen, der eine Beschreibung der Arbeit mit dem von ihm erstellten Dienst enthält. Wenn Sie Fehler finden, melden Sie diese bitte in einer privaten Nachricht.

Der Artikel enthält die Ergebnisse seiner Forschung darüber, was ein Favicon sein sollte (und was es ersetzt), damit es in verschiedenen Fällen gut angezeigt wird.

Das Favicon wurde 1999 im Internet Explorer 5 () eingeführt und wenige Monate später vom W3C standardisiert. Es war ein kleines Symbol, das die Website darstellte.

Seitdem sind die meisten Desktop-Browser diesem Trend gefolgt und verwenden auf die eine oder andere Weise Favicons. Es ist ganz einfach, nicht wahr? Erstellen Sie ein kleines Bild und fügen Sie es zu einem beliebigen Internetprojekt hinzu, um es „vollständig“ zu machen. Nichts Kompliziertes. Oder nicht?

Lass uns ein Quiz machen!

Was ist die Haupt-Favicon-Datei?

Antwort: favicon.ico. Nur um sicher zu gehen, dies ist kein PNG, das in favicon.ico umbenannt wurde. Obwohl einige Browser diesen Fehler verzeihen, ist ICO ein anderes Format, das mehrere Versionen des Bildes unterstützt.

Frage: Welche Größe sollte favicon.ico haben?

A: 16x16. Standard.
B: 32x32. Wurde das Favicon nicht schon vor einiger Zeit aktualisiert?
C: 64x64.
D: Keines der oben genannten.

Antwort: D.

Das Format favicon.ico wurde ursprünglich von Microsoft konzipiert und von mehreren anderen Herstellern unterstützt. Microsoft empfiehlt die Größen 16x16, 32x32 und 48x48. Ja, ein ICO kann mehrere Bilder enthalten.

Browser zeigen Favicons normalerweise in Tabs an und bei normalen Auflösungen sieht die 16x16-Version gut aus:

16x16 im Chrome-Tab. So weit, ist es gut.

Aber das 16x16-Symbol ist für andere Orte zu klein: die Taskleiste und den Desktop.

16x16 in der Taskleiste.


16x16 auf dem Desktop. Nicht gut.

Wenn ein Symbol mehrere Bilder enthält, ist das Ergebnis viel besser.

16x16, 32x32 und 48x48 favicon.ico in der Taskleiste. Sieht aus wie ein normales Programm.


16x16, 32x32 und 48x48 favicon.ico auf dem Desktop. Perfekt.

Frage: Was ist der Zweck von favicon.png?

Tatsächlich ist eine andere Datei, favicon.png, häufiger anzutreffen. Die Leute fragen oft danach.
Was ist es wirklich?

A: Symbol für Browser, die favicon.ico nicht unterstützen. Wie etwa Firefox vielleicht?
B: Symbol mit hoher Auflösung. Sie wissen schon, mit all diesen neuen Bildschirmen mit hoher Pixeldichte.
C: Ein Artefakt aus der Vergangenheit. Dies sind nun neue Symbole, zum Beispiel das Apple Touch-Symbol.
D: Alles zusammen.

Antwort: D.
Seit der Einführung von HTML5 ist favicon.ico nicht mehr sehr nützlich. Das Attribut wurde präsentiert Größen, wodurch Sie mehrere deklarieren können verschiedene Versionen das gleiche Symbol, und dies können PNG-Dateien sein:

Was sollen wir also verkünden?

Seien wir ehrlich. Obwohl fast alle Desktop-Browser favicon.ico unterstützen, ist diese Datei veraltet. Ja, Sie können diese Datei weiterhin verwenden und alles wird wie vorgesehen funktionieren. Aber im Ernst, das ist ein veraltetes Format. Es wird nirgendwo außer im Internet verwendet. PNG wird viel besser unterstützt.

Favicon.ico – für ältere Versionen des IE. Für andere Browser und neueste Versionen IE verwendet PNG-Symbole. Na und Größen muss ermittelt werden? Wir werden es bald herausfinden.

Frage: Welches Format ist zur Unterstützung mobiler Plattformen erforderlich?

Laut SmartInsights werden mehr als 26 % des Webverkehrs über Smartphones und Tablets generiert. Das ist die Zukunft. Was braucht es, um diese Welt zu unterstützen?

A: favicon.ico. Es hat vor 15 Jahren funktioniert, und es funktioniert auch heute noch.
B: PNG-Symbole. Du hast gesagt, du würdest darüber reden.
C: Apple Touch-Symbol. Kappe.
D: Hier gibt es noch keine richtige Antwort.

Antwort: D. Benötigen Sie PNG-Symbole. Und Apple Touch-Symbol. Und Kacheln für Windows 8. Und eine Datei namens browserconfig.xml.

Mobile Plattformen sind viel heterogener als normale Desktop-Browser. Bildschirmgrößen und Auflösungen variieren stark und es gibt keine Dominante Betriebssystem, wie zum Beispiel Windows, wie es zu Zeiten des Aufkommens des Internets der Fall war.
Folgerung: Denken Sie nicht, dass ein mobiles Favicon ein einziges universelles Bild sein oder eine universelle Deklaration im HTML-Code haben kann.

Frage: Welche Größe sollten PNG-Symbole haben?

A: 96x96 für Google TV
B: 196x196 für Android Chrome
C: 228x228 für Opera Coast
D: Alles oben Genannte

Antwort: D und noch mehr. Zum Beispiel 160x160 für alte Version Die Kurzwahl von Opera (schon längst nicht mehr verfügbar) oder 128 x 128 für den Chrome Web Store, alles hängt stark von der Plattform ab, die Sie unterstützen möchten.

Frage: Wie groß ist das Apple Touch-Symbol?

Apple Touch-Symbol, das von iOS für Lesezeichen und Websites auf dem Startbildschirm verwendet wird. 57x57 fällt mir ein, Bravo. Das ist richtig. Es ist erst sieben Jahre her, als das erste iPhone auf den Markt kam.

Antwort: Bis zu 180x180.

Nach dem Erscheinen des ersten iPhone gab es drei wichtige Veröffentlichungen:

  • iPad. Mit einem viel größeren Bildschirm.
  • Retina-Bildschirme. Mit doppelter Pixeldichte.
  • iOS7. Das flache Design ist beim iPhone/iPad anders.
Insgesamt gibt es 9 Kombinationen.
Gerät Bildschirm iOS-Version Symbolgröße
iPhone Klassiker 6 und darunter 57x57
7 60x60
Retina 6 und darunter 114x114
7 120x120
6Plus 8 und höher 180x180
iPad Klassiker 6 und darunter 72x72
7 76x76
Retina 6 und darunter 144x144
7 152x152



Ein altes Apple Touch-Symbol im Format 57 x 57 auf einem glänzenden Retina-iPad. Wolkig.


Großes Apple Touch-Symbol im Format 152 x 152 auf dem Retina-iPad. Sorgfältig.

Wenn Sie falsch geantwortet haben, seien Sie nicht verärgert. Von den 5.000 beliebten Websites, die apple-touch-icon.png bereitstellen, machen es weniger als 4 % richtig.

Einige mögen argumentieren, dass nicht alle 9 Bilder wirklich benötigt werden. Allerdings sollte zumindest das Hauptsymbol von Apple Touch 152 x 152 groß sein. Ein Retina-iPad mit iOS 7 findet, was Sie brauchen, und jüngere Geräte können das Bild verkleinern.

Frage: Ist es notwendig, das Apple Touch-Symbol in HTML zu deklarieren?

A: Ich weiß es nicht. Wir müssen etwas beantworten!
B: Ja. Wie findet iOS sie sonst?
C: Nein. Apple bietet Empfehlungen, also keine iOS-Gerät trage sie immer noch.
D: Nein, aber...

Antwort: D... aber einige andere Plattformen verwenden auch das Apple Touch-Symbol, es ist besser, sie zu deklarieren.

So seltsam es auch klingen mag, iOS-Geräte sind nicht die einzigen, die nach dem Apple Touch-Symbol suchen. Da sie beliebter und verbreiteter sind als andere hochauflösende PNG-Symbole, werden sie von einigen Browsern wie Android Chrome verwendet. Daher ist es besser, sie zu deklarieren, damit ein Besucher mit einem kompatiblen Gerät oder Browser eines davon verwenden kann.

Frage: Wie deklariere ich eine Kachel für Windows 8-Tablets?

A: Windows 8-Tablet? Was ist das?
B: favicon.ico. Steve Ballmers Vermächtnis.
C: Meta-Tags. Zwei msapplication-TileColor Und msapplication-TileImage.
D: browserconfig.xml.

Antwort: C für Windows 8 und IE 10, D für Windows 8.1 und IE 11. Antwort A ist auch einigermaßen richtig.

Die Anzeige für Windows 8.0 sieht in etwa so aus:

Windows 8.1 und IE 11 erwarten mehrere Image-Versionen, die in browserconfig.xml deklariert sind. Zum Beispiel:
#2b5797
Die neue Metro-Schnittstelle führt mehrere neue Designprinzipien ein, beispielsweise die „weißen Silhouetten“, die von den meisten vorinstallierten Programmen verwendet werden.


Website-Kacheln in Windows 8.

Frage: Wie groß ist die quadratische 150x150-Logo-Kachel?

A: 150x150. Kannst du nicht lesen?
Sich kümmern.

Antwort: B, 270x270.

„Chefredakteur des GetGoodRank-Blogs, Webanalyst, Blogger.
Wie entwerfe ich Icons richtig und wende sie auf einer Website an? Wir reden darüber einfache Regeln Benutzerfreundlichkeit von Symbolen und bietet außerdem eine einfache Checkliste zum Testen.“

Ein Symbol ist ein schematisches Element einer grafischen Oberfläche, das eine Anwendung, Funktion oder einen thematischen Abschnitt einer Website/Anwendung kennzeichnet. Die Symbole sind einfach, prägnant und effektiv. Wird verwendet, um die grafische Oberfläche einer Anwendung oder Website zu vereinfachen und die Kommunikation mit dem Benutzer zu vereinfachen und zu beschleunigen ( menschliches Bewusstsein verarbeitet und „versteht“ Grafiken um ein Vielfaches schneller als Text). Symbole werden nach ihrer Funktion klassifiziert:

  • Navigationssymbole- Wird verwendet, um eine Funktion anzuzeigen: Navigationspfeile nach oben und unten, um sich entlang einer langen Seite zu bewegen, Warenkorb, um zum Warenkorb zu gelangen, Lupe, um die Suchleiste zu aktivieren.
  • Informationssymbole- Geben Sie das Thema des Abschnitts an. Beispielsweise weisen gekreuzte Werkzeuge häufig auf einen Abschnitt mit technischen Informationen hin, ein Zahnrad auf einen Abschnitt mit Einstellungen, eine Maschine auf Lieferinformationen, die Zahlen 24/7 auf einen 24-Stunden-Arbeitsplan usw.
  • Call-to-Action-Symbole- wird oft verwendet, um offensichtliche Handlungen anzuzeigen. Beispielsweise weist auf einer Anwendungs-Download-Seite ein dicker Pfeil nach unten auf einen Aufruf hin, Software herunterzuladen, auf einer Produktseite bedeutet ein Pluszeichen einen Aufruf, ein Produkt in den Warenkorb zu legen usw.

Regeln zur Benutzerfreundlichkeit von Symbolen

Nicht alle Symbole sind für Benutzer gleichermaßen verständlich, insbesondere wenn die Website einen individuellen Stil verwendet und von allgemein anerkannten Standards abweicht. Damit Symbole eine direkte Funktion zur Vereinfachung des Designs und der Kommunikation mit dem Benutzer erfüllen, beachten Sie die folgenden Regeln:

1. Begleittext- Verschiedene Websites verwenden sogar Standardsymbole für unterschiedliche Zwecke. So kann eine Standardlupe das Durchsuchen einer Website oder das Vergrößern/Vergrößern eines Bildes bedeuten. Grafische Symbole können auf zwei Arten interpretiert werden. Um die Aufgabe des Benutzers zu vereinfachen, sollten Symbole von Text begleitet werden. Dies gilt vor allem für Navigationssymbole. Text und Grafiken funktionieren paarweise viel besser als einzeln.

2. Einheitlicher Stil- Symbole müssen im gleichen Stil erstellt werden. Es ist besser, schematische Bilder mit einem Minimum an Details zu verwenden. Das Symbol sollte im gesamten Designkonzept leicht erkennbar und für den Benutzer leicht verständlich sein. Icons, die unterschiedliche Aufgaben auf einer Website erfüllen, können in unterschiedlichen Konzepten erstellt werden. Bei der Verwendung verschiedener Grafikstile sollten Sie jedoch eine übermäßige Vielfalt vermeiden. Denken Sie daran, dass das Symbol dazu gedacht ist, die Interaktion des Benutzers mit der Website zu vereinfachen und nicht umgekehrt, um ihn zu zwingen, die in den Symbolen verborgenen Funktionen zu studieren.

3. Klickrate- Symbole, für die eine Aktion verfügbar ist, sollten die Anklickbarkeit visuell demonstrieren: Hervorheben beim Bewegen des Cursors, Ändern der Farbe, Vergrößern. Dadurch wird dem Benutzer klar, dass das Symbol funktional und nicht nur ein GUI-Element ist. Beschränken Sie die Animation auf ein Minimum.

4. Testen Sie 5 Sekunden- Führen Sie bei der Entwicklung eines individuellen Icon-Konzepts (mit nicht standardmäßigen Icons) einen Test für 5 Sekunden durch. Wenn Sie ein Symbol nicht innerhalb von 5 Sekunden identifizieren und nicht verstehen können, was es auf der Website bedeutet, ist dieses grafische Symbol im Design nicht akzeptabel. Dadurch entstehen zusätzliche Hindernisse auf dem Weg des Benutzers zum Ziel: dem Studium der Informationen auf der Website und der Auswahl eines Produkts/einer Dienstleistung.

5. Auf die Größe kommt es an- Zu kleine Symbole laufen Gefahr, im Design unbemerkt zu bleiben, während zu große Symbole verwirrend sein, andere Elemente dominieren und die Aufmerksamkeit auf sich ziehen können (insbesondere, wenn große Symbole farblich hervorgehoben werden).

So überprüfen Sie die Benutzerfreundlichkeit von Symbolen

Nutzen Sie die folgende Checkliste mit Fragen, um die Benutzerfreundlichkeit von Icons auf Ihrer Website zu überprüfen:

  • Ist es leicht, ein Symbol auf der Website oder der Anwendungsoberfläche zu finden?
  • Wie harmonisch wirkt das Icon im Interface? Verstößt es nicht gegen das gesamte Designkonzept?
  • Befindet sich das Symbol an der Stelle, die der Benutzer erwartet?
  • Lenkt das Symbol vom Hauptinhalt der Seite ab?
  • Ist dem Benutzer die Bedeutung des Symbols klar?
  • Wie sieht das Symbol auf der mobilen Version der Website aus? Ist die Interaktion über den Touchscreen einfach?
  • Ist dieses Symbol mit anderen, nicht benachbarten Aktionen verknüpft? Führt dies nicht zu zusätzlichen Schwierigkeiten bei der Nutzung der Website? Führt das Symbol zu fehlerhaften Aktionen?
  • Ist in diesem Zusammenhang ein Symbol erforderlich, um anzuzeigen, womit es verbunden ist? Kann man darauf verzichten?


 

Es könnte nützlich sein zu lesen: