Share
Der Artikel ist zwar die weltweit bekannteste Schnittstelle für berührungsgesteuerte Schnittstellen, aber er konzentriert sich auf die traditionellere Eingabemethode der Maus. Ich werde einen Ansatz der progressiven Verbesserung für die Handhabung von Interaktionsdesign vorschlagen. genauer gesagt eine Übersicht über das CSS Mauszeiger Regel.
Mobile Design-Strategie wird von Tag zu Tag wichtiger. Das Streben der Community in responsives Webdesign prägt und definiert das Design von Benutzerinteraktionen und Steuerelementen, da diese zunehmend für die Berührungseingabe optimiert werden. Die bewährte, präzise Eingabemethode der Maus verschwindet jedoch nicht so schnell. Diese Tatsache, zusammen mit der universellen Natur des Webs, unterstützt, dass traditionelle und Touch-Input-Optimierungen beim Webinterface-Design vollständig unterstützt werden sollten.
Die meiste Software, von Desktop-Anwendungen über Betriebssysteme bis hin zu einfachen Websites, verwendet eine Vielzahl nützlicher GUI-Zeiger. Diese Zeiger unterstützen die Interaktion der Benutzeroberfläche, indem sie dem Benutzer vorschlagen, welche Aufgabe er an diesem bestimmten Punkt in den Bildschirmkoordinaten der Anwendung ausführen kann.
Möchten Sie Text eingeben oder bearbeiten? Sie wissen, dass Sie es können, wenn Sie einen "I-Beam" -Cursor sehen. Möchten Sie die Größe eines Fensters ändern? Sie wissen (und in welche Richtung), wenn Sie einen Cursor zur Größenänderung sehen. Im obigen Beispiel können Sie sehen, wie der Größenänderungscursor visuell die möglichen Richtungen anzeigt, in denen die Fenstergröße geändert werden kann.
Durch die Manipulation der Cursor-Grafik im Kontext der Steuerfunktion der Benutzeroberfläche weisen Sie den Benutzer an, wann, wo und wie er die Software manipulieren kann.
Ein wirklich gutes Beispiel für die Verwendung der Cursor-Funktion zur Kommunikation ist in der Creative Suite von Adobe zu finden.
Die Werkzeugsymbole in der Adobe-Suite spiegeln grafisch ihre angeborene Funktionalität wider. Wenn ein bestimmtes Werkzeug ausgewählt wird, ähnelt der Cursor in vielen Fällen dem Symbol des Werkzeugs. Dieses einfache UI-Paradigma ist sehr leistungsfähig bei der visuellen Kommunikation des Zwecks und der Funktion jedes Tools im umfangreichen Tool-Set der Anwendung.
Die etablierteren Eingabemethoden wie Maus, Stift und Tastatur bieten eine zusätzliche Form der visuellen Rückmeldung, die Touch-Geräten (noch) nicht zur Verfügung stehen: hover. Hover-Interaktionen ermöglichen Benutzern das Erkennen und Erfahren der Anwendung über zugehörige Hover-Oberflächenelemente. Diese Elemente helfen dem Benutzer mitzuteilen, welche Objekte interaktiv sind und wie sie manipuliert werden können.
Das Wesen des Webs erfordert Universalität und Zugänglichkeit. Diese Art der allumfassenden, inputagnostischen Herangehensweise stellt eine einzigartige Designherausforderung dar
Hover-Interaktionen (z. B. QuickInfos) wurden jedoch zur Lösung von Benutzeroberflächenproblemen speziell für die Maus entwickelt. Sie sind nicht funktionsfähig, wenn sie auf Touchscreen-Geräten implementiert werden. Da die Art des Webs Universalität und Zugänglichkeit erfordert, müssen Webanwendungen so konzipiert sein, dass sie sowohl für Touch- als auch für Nicht-Touch-Geräte funktionieren. Dieser allumfassende, input-agnostische Ansatz stellt eine einzigartige Designherausforderung dar. Benutzeroberflächen müssen sowohl berührungslose als auch berührungslose Geräte berücksichtigen.
Diese web-zentrierte Designherausforderung, eine Reihe von Eingabemethoden zu umfassen, erfordert einen Ansatz der schrittweisen Verbesserung (der seit einiger Zeit befürwortet wird)..
Auch wenn der Internetverkehr zunehmend von mobilen Geräten (und damit von Touchscreen-Geräten) übernommen wird, so das CSS Mauszeiger Die Regel ist alles andere als veraltet. Sie können eine Website oder eine Anwendungsbenutzeroberfläche mit einem input-agnositc-Ansatz entwerfen, der für verschiedene Geräte geeignet ist. Unabhängig davon, ob diese Geräte mit einem Touchscreen oder einer Maus gesteuert werden, fungiert die CSS-Cursor-Regel als zusätzliche (wenn auch nicht zwingende) Verbesserung der Benutzeroberfläche bei der visuellen Rückmeldung für unterstützte Geräte.
Wie erwähnt, können CSS-Cursor verwendet werden, um dem Benutzer Hinweise zu geben, welche Funktion die Maus ausführen kann. Es gibt verschiedene Cursor-Typen, aus denen Sie wählen können, die in den Browser oder das Betriebssystem des Computers des Benutzers integriert sind (eine Liste davon finden Sie auf quirksmode.org). Die eingebauten Cursor sind nett, aber Sie müssen beachten, dass sie exklusiv für den Browser / das Betriebssystem des Benutzers sind. Daher können die Steuerelemente von Computer zu Browser unterschiedlich sein. Hier ein Beispiel, wie Sie den Cursor ändern können:
.elementClass Cursor: Verschieben;
Wenn Sie einen Cursor benötigen, der nicht standardmäßig enthalten ist oder nicht von allen Browsern unterstützt wird, haben Sie die Möglichkeit, ein benutzerdefiniertes Cursorbild hinzuzufügen. Dies kann ähnlich wie definiert werden Schriftfamilie Regel, wo Sie Fallbacks bereitstellen, falls der benutzerdefinierte Cursor nicht geladen wird.
Accentsconagua
.elementClass Cursor: URL ('Pfad / zu / Cursor.png'), verschieben; Sie können sogar die Position des Cursors definieren (die Stelle, an der Klicks registriert werden). Dies sind X- und Y-Werte, die relativ zum Standardpunkt von '0, 0' sind. oben links in Ihrem benutzerdefinierten Cursorbild. Im folgenden Beispiel bewegen wir den Cursor um 10 Pixel von links und 5 Pixel von oben.
.elementClass Cursor: URL ('Pfad / zu / Cursor.png') 10 5, verschieben; Leider ist die browserübergreifende Unterstützung für benutzerdefinierte Cursor nicht so einfach wie die oben definierten Regeln. Es gibt ein paar Probleme, damit Cursor in Browsern richtig funktionieren.
Internet Explorer 7 und 8 unterstützen nur .CUR-Dateien. CUR-Dateien sind wie ICO-Dateien, außer dass Sie den 'Hotspot' des Cursors über die Datei selbst definieren können. Sie müssen eine .CUR-Datei bereitstellen, wenn Sie IE 7 und 8 unterstützen möchten.
Das Erstellen einer eigenen .CUR-Datei würde den Rahmen dieses Artikels sprengen. Sie können jedoch versuchen, dieses Photoshop-Plugin als einen guten Start anzusehen.
Alle Browser interpretieren die URL des benutzerdefinierten Cursors relativ zur Position des Stylesheets (gemäß den Empfehlungen des W3C). Internet Explorer (7-9) interpretiert die URL jedoch relativ zum HTML-Stamm.
Nehmen wir an, ich beginne ein neues Projekt. Es enthält die "index.html" im Stammverzeichnis sowie Ordner für Bilder, Stylesheets und benutzerdefinierte Cursor. Es würde so aussehen:
Wie Sie sehen, sind meine Stylesheets und benutzerdefinierten Cursor vollständig voneinander getrennt.
In diesem Fall müsste ich die Cursorregel mit Fallbacks schreiben, um moderne Browser mit .PNG-Cursors sowie IE mit .CUR-Dateien zu unterstützen:
.elementClass cursor: url (… /cursors/cursor.png), / * Modern - relativ zum Dokument * / url (Cursor / Cursor.cur), / * IE - relativ zum Stammverzeichnis * / default; / * Eingebauter Fallback * /
Alternativ können Sie absolute Pfade in der CSS verwenden, obwohl Sie immer noch Fallbacks für alle .CUR-Dateien angeben müssen:
.elementClass Cursor: URL (/cursors/cursor.png), / * Modern * / url (/cursors/cursor.cur), / * IE * / default; / * Eingebauter Fallback * /
Weitere Informationen zu den detaillierten Details und zum Aufhängen der Implementierung von browserübergreifenden CSS-Cursorn finden Sie unter useragentman.com. Wenn Sie Touch-Geräte unterstützen, können CSS-Cursor eine progressive Verbesserung darstellen. Das bedeutet, dass der IE nicht unbedingt unterstützt werden muss (da Benutzer auf Touchscreens den benutzerdefinierten Cursor nicht sehen können.).
Wenn Sie CSS-Cursor als einen Aspekt der fortschreitenden Verbesserung implementieren, kann es hilfreich sein, genau zu sehen, wie jeder eingebaute Cursor in Browsern und Plattformen angezeigt wird. Auf diese Weise können Sie fundierte Entscheidungen zur Gestaltung Ihrer Benutzeroberfläche treffen. Hier finden Sie eine gute Referenz, um zu sehen, wie die Cursor in verschiedenen Betriebssystemen aussehen:
Geprüfte Browser
Geprüfte Browser
Geprüfte Browser
Wie Sie sehen, gibt es verschiedene Unterschiede, die das Design Ihrer Benutzeroberfläche beeinflussen können. Sehen Sie sich die vollständige Tabelle an, um Cursor über Browser und Plattformen hinweg zu vergleichen.
Wie Sie sehen, ist die Cursorregel in CSS ein zusätzliches Werkzeug, das Sie zur Unterstützung der Benutzerinteraktion mit Ihrer Website oder Anwendung verwenden können. Sie haben jedoch wahrscheinlich bemerkt, wie unterschiedlich und unterschiedlich der Cursor sein kann, je nach Browser und Betriebssystem des Benutzers.
Diese bemerkenswerten Unterschiede bei den Cursorn haben neben der zunehmenden Verwendung von Touchscreen-Geräten die Ablehnung der Mauszeiger Eine zusätzliche Rolle bei der Unterstützung der Interaktion mit der Benutzeroberfläche, aber das macht sie nicht obsolet. Es ist viel besser, den Cursor als fortschreitende Verbesserung zu verwenden, als ihn völlig zu ignorieren. Und jetzt, wo Sie wissen, wie man es benutzt, können Sie etwas Großartiges schaffen!
