Ränder

 

Ränder sind ein leistungsstarkes und ästhetisches Interaktionstool, das ein wesentlicher Bestandteil von Windows ist. Das Design von Rändern basiert auf dem Prinzip mehr mit weniger erreichen. Die Ränder bieten Ihnen eine Fülle von Optionen, mit weniger mehr zu erreichen. Sie können Elemente von der Canvas verschieben, wenn sie nicht direkt mit dem momentan angezeigten Inhalt zusammenhängen. Sie bieten Benutzern zuverlässige, intuitive Methoden zur Navigation, die sich auf jedem Gerät natürlich anfühlen.

Ränder in Windows

App-Leisten

 

Die obere App-Leiste wird auch als Navigationsleiste bezeichnet, da sich dort normalerweise die Navigationssteuerelemente von Apps befinden.

Die untere App-Leiste wird auch als Befehlsleiste bezeichnet, da dort in der Regel die Befehle von Apps untergebracht sind.

Für das Design der App-Leisten sind Sie zuständig. Die Leisten interagieren nicht mit dem System. Sie können anstelle von oder zusätzlich zu Navigationssteuerelementen und Befehlen auch andere im Kontext relevante Informationen in der oberen oder unteren App-Leiste platzieren. Bei einer Shopping-App könnten Sie z. B. den Inhalt des Einkaufswagens des Benutzers in der oberen App-Leiste anzeigen. Durch diese Anordnung kann sich der Benutzer auf das Einkaufen konzentrieren, aber auch schnell auf den Einkaufswagen zugreifen und zur Kasse gehen. Bei einer Musik-App könnten Sie Mediensteuerelemente wie "Wiedergabe", "Pause" und "Vorspulen" in der unteren App-Leiste unterbringen. Diese Steuerelemente sind ausgeblendet, bis der Benutzer einen Song auswählt und die Steuerelemente im Kontext relevant werden.

 

Charms

 

Die Charms sind wohl der bekannteste Verwendungszweck von Rändern. Die Charms initiieren Systeminteraktionen. Der Benutzer ruft die Charms auf, indem er eine Streifbewegung vom rechten Bildschirmrand ausführt oder mit dem Mauszeiger auf die obere oder untere rechte Ecke des Bildschirms zeigt. Weitere Informationen finden Sie unter Charms und Verträge.

 

Linker Rand

 

Der linke Rand ist das Befehlscenter des Benutzers. Über diesen Rand kann er die zuletzt verwendeten Apps anzeigen, zwischen Apps wechseln und mehrere Apps nebeneinander auf dem Bildschirm anordnen.

Innovation mit Rändern

Versuchen Sie, in Ihrem App-Design neue und innovative Möglichkeiten zur Verwendung der Ränder zu finden. Sie können auch gar keine App-Leiste implementieren oder sie nur minimal nutzen. Bei Xbox Music befinden sich z. B. die meisten Befehle auf der Canvas und nur sehr wenige Steuerelemente in der App-Leiste.

Die Standardsteuerelemente und die typische Platzierung sind nur ein Ausgangspunkt. Überlegen Sie, wie Sie Ränder in Ihrer App kreativ nutzen können.

Beispiele für Ränder

Im folgenden Beispiel verwendet die App die obere App-Leiste zum Anzeigen verwandter Videos und die untere App-Leiste für Befehle, die mit dem momentan wiedergegebenen Video zusammenhängen.

 

 

Bei der NatureSpace-App ist die untere App-Leiste sehr dezent. Sie erstreckt sich nicht über die gesamte Breite der Canvas und bietet trotzdem eine Befehlsoberfläche, über die der Benutzer den aktuellen Titel steuern kann.

 

 

App-Leisten müssen nicht wie die Leisten in den Standardvorlagen aussehen. Sie können sie ganz speziell auf Ihre Marke zuschneiden. In diesem Beispiel von Disney sieht die App-Leiste so aus, als würde sie zum Bilderbuch gehören.

 

 

Verwandte Themen

Navigationsmuster

Befehlsmuster