Haupt / Rat

So erstellen Sie eine benutzerdefinierte Benutzeroberfläche

Benutzerdefinierte UI-Steuerelemente sind bekanntermaßen schwierig zu implementieren und können sich auf verschiedenen Geräten inkonsistent verhalten. Das Ausführen von benutzerdefinierten Designs erfordert ziemlich genaue Kenntnisse über Layout und Positionierung mit CSS, Browserunterstützung und einem ausgeprägten Verständnis von JavaScript.

Das alles in eine nervöse Benutzeroberfläche zu packen, kann mühsam, mühsam und anstrengend sein. In diesem Artikel werde ich einen UI-Ansatz für eine interaktive Webdokumentation demonstrieren, eine DIY-Code-Ethik für diese UI festlegen und hoffentlich demonstrieren, wie JS, CSS und HTML kombiniert werden können, um eine originelle Oberfläche zu erstellen.

Als Beispiel verwende ich eine Originalschnittstelle, die ich für eine Webdokumentation namens entwickelt habe Nach Norden ausgerichtet . Die Hauptinteraktion von Facing North besteht aus einem rotierenden Menü, das eingeblendet wird, wenn der Bildschirm berührt oder die Maus während der Videowiedergabe bewegt wird, und nach einigen Sekunden wieder ausgeblendet wird. Facing North besteht aus 18 Videos, die durch Ziehen des Kompasses in beide Richtungen per Maus oder Berührung angezeigt werden können. Der Kompass wird mit dem Cursor oder Finger verfolgt, sodass der Benutzer das Video auswählen kann, das er abspielen möchte.

Der Ansatz: HTML und CSS

Das Erstellen benutzerdefinierter UI-Steuerelemente erfordert genaue Kenntnisse der CSS-Layouts und der Positionierung. Wenn Sie sich auf Layout, Animationen und Pseudoklassen konzentrieren, erhalten Sie effektive, reaktionsschnelle Benutzeroberflächen. Hier ist der HTML-Code für das Kompassmenü Facing North:

Das .container-Element fügt die transparente schwarze Überlagerung hinzu und kann mit vh und vw dimensioniert werden. Safari unter iOS weist derzeit einige Supportprobleme auf. Daher ist es am besten, das CSS mit JavaScript neu zu berechnen oder% widths zu verwenden. Das Design umfasst einen horizontalen 'Bereich' über den mittleren Bildschirm, der mit einem CSS-Pseudoelement erreicht werden kann.

Das .compass-Element wird durch einen weißen, kreisförmigen Rand hervorgehoben. Der Kompass muss klein genug sein, um auf den Bildschirm zu passen, er muss absolut zentriert auf dem Behälter sitzen und muss perfekt kreisförmig sein. Es ist möglich, ein quadratisches Box-Modell zu pflegen, indem Sie ein :: after-Pseudoelement mit einer Auffülloberseite von 100% verwenden.

Bildschirmelemente

Dieses Bild kennzeichnet die verschiedenen Elemente des Bildschirms

.orbiter und .kompasselemente

Dies zeigt die Position der .orbiter und der .kompass-Elemente

Die .orbiter-Elemente sind einfach Tags, die den Kompass umkreisen. Diese werden in unserem JavaScript erstellt, und mithilfe einiger Berechnungen können wir sicherstellen, dass sich eine beliebige Anzahl von Orbitern gleichmäßig verteilt. Das .north-Indikatorelement befindet sich oben auf dem Kompass und bezeichnet Norden. Das Hauptproblem in der Benutzeroberfläche sind die Transformationen, die auf jedes .orbiter-Element angewendet werden. Dies wird im JavaScript behandelt.

Der Kleber: JavaScript

Es gibt einige Hauptkomponenten des JavaScript für die Kompass-Benutzeroberfläche von Facing North:

Ein Prototyp (JavaScript-Klasse) zur Verarbeitung der Logik für die gesamte Kompass-Benutzeroberfläche
Ein Prototyp (JavaScript-Klasse) zur Verarbeitung der Logik für jeden Orbiter
Polyfills (zur Unterstützung älterer Browser)

Das JavaScript initialisiert den Onload mit:

window.onload = app;     function app() {         rAFPolyfill();         window.vendorPrefix = getVendorPrefix();         var compass = new Compass(18, document.querySelector('.compass'));     }

In app () wird eine Polyfill für requestAnimation Frame () hinzugefügt, wir erstellen eine neue Instanz der Compass-Klasse, und getVendorPrefix () wird aufgerufen, um CSS-Präfixe des Browsers abzurufen - zum Beispiel -webkit-, -ms oder -moz-. Der Rest des JavaScript wird über den Konstruktor new Compass () ausgeführt, der num-Orbiter zum Erstellen und Verteilen auf der Kompass-Benutzeroberfläche sowie einen Verweis auf das DOM-Element der Kompass-Benutzeroberfläche benötigt.

Der Kompasskonstruktor ist ganz einfach:

function Compass(num, compassElement) {     this.rotation = 0;     this.orbiters = this.addOrbiters(num, compassElement);     this.compassElement = compassElement;     this.rotate();     this.handleInteractionEvents(); }

Der größte Teil der Animation und Interaktion wird von handleInteractionEvents () ausgeführt. addOrbiters () erstellt nur num Orbiter () -Objekte und speichert sie in einem Array:

Compass.prototype.addOrbiters = function(num, compass) {     var i = num,         orbiters = [];      while (typeof i === 'number' && i--) {         orbiters.push(new Orbiter(compass, i));     }      return orbiters; }

Der Orbiter () -Konstruktor in der Live-Version ruft JSON-Daten von einem Server ab. Das Folgende ist nur ein erfundenes Beispiel für diesen Artikel, das Tags mit JavaScript erstellt:

function Orbiter(compass, index) {     var img = document.createElement('img');     img.className = 'orbiter';     img.src = './images/screen' + (index % 4 + 1) + '.png';     this.img = img;     compass.appendChild(img); }

Compass.rotate () ist die Funktion, mit der die Position jedes Orbiter () während der Interaktion animiert wird:

Compass.prototype.rotate = function(delta) {     var self = this;     for (var i = 0, len = self.orbiters.length; i < len; i++)  0, ~~(360 / self.orbiters.length));      }

Orbiter.rotate () hat hier einige bemerkenswerte Dinge zu beachten:

i: die Stelle an Ort und Stelle (eine ganze Zahl zwischen 0 und 17, wenn 18 Orbiter () -Objekte vorhanden sind)
self.compassElement.offsetWidth: Der Durchmesser des Kompasses in Pixel
Delta || 0: Die aktuelle Drehung (in Grad zwischen 0 und 359), um jeden Orbiter () einzustellen. Orbiter () s mit einem i größer als 0 werden weiter gedreht, um eine gleichmäßige Verteilung zu gewährleisten
~~ (360 / self.orbiters.length): Die Grade, um die jeder Orbiter () verteilt werden soll. Für 18 Orbiter ist dies beispielsweise 360/18 oder 20 °. ~~ rundet eine Dezimalzahl auf die nächste Ganzzahl

Den Code Orbiter.setTransform () finden Sie online unter GitHub Repo .

Der Rest des Compass () -Konstruktors umfasst das Initialisieren von Touch- und Mouse-Ereignishandlern:

Compass.prototype.handleInteractionEvents = function() {     var self = this;      function onTouchAndMouseStart(e) { ... }     function onTouchAndMouseEnd(e) { ... }     function handleDrag(e) { ... }      $.on('mousedown touchstart', onTouchAndMouseStart, this.compassElement);     $.on('mouseup touchend', onTouchAndMouseEnd, window); }

Beachten Sie die drei Funktionen zur Behandlung von Berührungs- und Mausereignissen:

onTouchAndMouseStart (): Wird beim Mousedown oder Touchstart ausgelöst, wenn die Interaktion mit der Kompass-Benutzeroberfläche beginnt
onTouchAndMouseEnd (): Wird beim Mouseup oder Touchend ausgelöst, wenn die Interaktion gestoppt wurde und die Animation der Kompass-Benutzeroberfläche beendet wird
handleDrag (): Wird beim Bewegen mit der Maus oder beim Berühren ausgelöst, wenn die Kompass-Benutzeroberfläche gezogen wird, und animiert die Kompass-Benutzeroberfläche, mit der Maus oder dem Finger des Benutzers zu verfolgen

Der Code für diese Handler, onTouchAndMouseStart (), handleDrag () und onTouchAndMouseEnd (), ist online im Github-Repo verfügbar.

Abschließende Gedanken

Durch einen strategischen Ansatz haben wir ein wiederverwendbares Schnittstellenmuster erstellt. Es war nicht viel zusätzlicher Code erforderlich, um zwei separate Ereignistypen (Maus und Berührung) zu verarbeiten. Wenn Sie so viele Animationen wie möglich über CSS erstellen, können Sie das Rendering optimieren. Die Drag-Ereignisse wurden nur behandelt, wenn die Startereignisse stattfanden, um die CPU-Ressourcen zu optimieren. Für einen detaillierten Blick besuchen Sie die GitHub Repo .

Das Endprodukt profitiert von einer DIY-Code-Ethik. Ohne die Erforschung, Erforschung und das Prototyping der „harten Teile“ (sprich: die mathematischen und UI-Ansätze) wäre es mir nicht gelungen, diese Arbeit so reibungslos zu gestalten wie ich. Die Mathematik war sowohl der schwierigste als auch der lohnendste Teil der Benutzeroberfläche.

Wörter: Matt Keas

Dieser Artikel erschien ursprünglich in Ausgabe 262 von Netzmagazin .

So was? Lese das!