Verwenden von bedarfsweisen Benutzeroberflächenelementen in der App-Leiste

Entwicklerblog für Windows 8-Apps

Ein Einblick in die Entwicklung von Apps im Metro-Stil – präsentiert vom Windows 8-Entwicklerteam

Verwenden von bedarfsweisen Benutzeroberflächenelementen in der App-Leiste

Rate This
  • Comments 0

Beim Erstellen einer guten App müssen deren Stärken im Vergleich zu anderen Apps verfeinert und hervorgehoben werden. Windows 8 verfügt über Tools wie z. B. Charms und App-Leisten, mit denen Sie problemlos die Stärken Ihrer App hervorheben und alles Ablenkende minimieren können. Erfahren Sie mehr über die Verwendung dieser Tools und Ihrer App, damit Benutzer die Stärken Ihrer App tatsächlich nutzen können.

Konzentration auf die Stärken Ihrer App

Wenn Sie sich im Kino einen Film anschauen, sehen Sie nur das Geschehen auf der großen Leinwand. Der Rest des Kinos ist dunkel. Der Surround-Sound füllt den Saal aus, sodass Sie nur den Ton des Films wahrnehmen. Es wird immer wieder von Filmen gesprochen, die man sich im Kino ansehen muss, da Sie ohne das Kinoerlebnis nicht vollständig in den Film eintauchen können. Die Dialoge klingen besser, und das Bild ist realistischer. Man gewinnt den Eindruck, mitten im Geschehen zu sein. Zumindest bis das Handy des Sitznachbarn klingelt, dass Sie ablenkt und aus der Kinoatmosphäre reißt. Mit jeder weiteren Ablenkung werden Sie Stück für Stück aus dem Filmgenuss gerissen.

Stellen Sie sich jetzt vor, dass Ihre App das Kino ist und deren Inhalte der Film. Bei einem neuen Entwurf geht es in der Hauptsache darum, eine Umgebung zu schaffen, durch die sich die Benutzer in Ihrer App verlieren können. Im Beitrag Erstellen von Apps im Metro-Stil, die sich aus der Masse hervorheben ging es um das Formulieren einer Aussage, die die Stärken Ihrer App beschreibt. Wenn Sie die Stärken Ihrer App kennen und diese herausarbeiten möchten, finden Sie unter Windows 8 Tools, mit denen Sie alles andere, alle Ablenkungen, solange beiseite lassen können, bis der Benutzer diese auswählt. Diesen Ansatz haben wir anhand der Beispiel-App „Food with Friends“ erläutert.

Für „Food with Friends“ wurden folgende Seiten erstellt:

Hierarchie von „Food with Friends“

Abbildung 1: Die Hierarchie von „Food with Friends“

Mithilfe der bereits vorhandenen Möglichkeiten von „Food with Friends“ können Sie auf Vorschläge für ein gemeinsames Abendessen reagieren, herausfinden, welche Restaurants Ihre Freunde besuchen möchten und interessante Restaurants entdecken. Allerdings sind einige Dinge noch nicht möglich. Sie können Ihrer Wunschliste keine Restaurants hinzufügen, die Restaurantliste weder sortieren noch filtern und nicht nach bestimmten Restaurants suchen. Das ist jedoch kein Problem. All diese Funktionen sind wichtig, es handelt sich jedoch nicht um die Stärken Ihrer App. Erinnern wir uns an den letzten Beitrag:

  • Die Stärke von „Food with Friends“ ist die Suche nach einem Restaurant, in das der Benutzer mit seinen Freunden heute Abend essen gehen kann.

Genau das können Sie über die Interaktion mit der bereits vorgestellten Benutzeroberfläche der App erreichen. Diese Stärke wird auf der Canvas optimal verdeutlicht. Würden wir Schaltflächen und Widgets hinzufügen, mit denen Benutzer ihrer Wunschliste Elemente hinzufügen oder Listen sortieren und filtern können, so würde dies lediglich von den Inhalten ablenken, solange diese Befehle nicht erforderlich sind. Mitunter möchten Benutzer jedoch auf diese Befehle zugreifen. Wohin also mit diesen zweitrangigen jedoch gleichwohl wichtigen Befehlen?

Windows 8 verfügt über Standardmethoden für den Zugriff auf die Benutzeroberfläche von Apps. Diese Benutzeroberflächenelemente sind bei Bedarf verfügbar und werden solange ausgeblendet, bis sie der Benutzer benötigt. Wenn Befehle bedarfsweise verfügbar sind, werden die Benutzer nicht durch eine überladene App-Canvas abgelenkt. Mit bei Bedarf verfügbaren Benutzerobeflächenelementen können Sie jedes einzelne Pixel den Stärken der App widmen. Für fast alle Apps werden zwei Mechanismen verwendet, um bedarfsweise verfügbare Benutzeroberflächenelemente anzuzeigen: Charms und App-Leisten. Da sowohl Charms als auch App-Leisten im gesamten Ökosystem verfügbar sind und jeweils mit derselben Standardmethode aufgerufen werden, können Sie sich auf die Inhalte Ihrer App konzentrieren und davon ausgehen, dass die Benutzer diese bei Bedarf aktivieren.

Charms

Charm-Leiste

Abbildung 2: Die Charm-Leiste

Beim Entwerfen von Windows 8 wurde uns klar, dass einige Features in fast allen Apps vorkommen, und dass es sich hierbei um Features handelt, die alle Benutzer von einer guten App erwarten. Aufgrund dieser allgemeinen Verbreitung wurde in allen Apps ein fester Ort für diese Befehle geschaffen: die Charms. Charms dienen für einzelne Apps und das System als Einstiegspunkte für Suchen, Freigaben, Geräteverbindungen und Einstellungen. Sie können überall im System verwendet werden. Daher müssen Sie sich beim Entwickeln Ihrer App keine Gedanken darüber machen, wie Benutzer Ihre Inhalte für andere Apps oder soziale Netzwerke freigeben können, oder wo das Suchfeld anzubringen ist. In diesem Punkt muss sich Ihre App nicht von anderen abheben. Einstellungen können wichtig sein, sie sollten jedoch nicht von den wirklich tollen und interessanten Features ablenken, die Sie entwickelt haben. Mithilfe von Charms verfügen Benutzer über eine Standardmethode für den Zugriff auf diese Features. Und das Beste ist: Charms werden nicht angezeigt, solange sie der Benutzer nicht anfordert. Daher lenken sie nicht von dem ab, was Ihre App von anderen unterscheidet – den Inhalten. Charms werden angezeigt, indem eine Streifbewegung vom rechten Bildschirmrand aus durchgeführt, die Maus in die rechte Ecke gezogen oder die Windows-Taste + C gedrückt wird. Dies gilt im gesamten System.

App- und Navigationsleiste

App-Leiste und Navigationsleiste in der Sports-App

Abbildung 3: App- und Navigationsleiste

Während es sich bei den Charms um eine Standardmethode für den Zugriff auf die Features fast aller Apps handelt, kann über die App- und Navigationsleisten auf die jeweiligen appspezifischen Funktionen zugegriffen werden. Die Navigationsleiste befindet sich in den einzelnen Apps jeweils an unterschiedlichen Stellen. Die Befehle auf der App-Leiste sind abhängig von der jeweiligen App, Seite oder sogar der aktuellen Auswahl. Obwohl sich die App- und Navigationsleisten von App zu App unterscheiden, handelt es sich um leistungsstarke Tools, da sie dem Benutzer von anderen Apps bekannt sind und ihm einen ersten Einblick in die Funktionsmöglichkeiten der App bieten. Benutzer können in allen Apps auf Ihre bedarfsweise Benutzeroberfläche zugreifen, indem sie vom oberen oder unteren Bildschirmrand eine Streifbewegung durchführen, mit der rechten Maustaste auf eine beliebige Stelle der App klicken oder auf der Tastatur die Windows-Taste + Z drücken. Dies gilt für alle Apps mit App- oder Navigationsleisten.

Bei der bedarfsmäßigen Standardbenutzeroberfläche unter Windows 8 handelt es sich um Elemente, mithilfe derer Benutzer die Inhalte Ihrer App erkunden können, ohne sich zuerst mit der Funktionsweise der Benutzeroberfläche befassen zu müssen. Dies funktioniert, da diese für alle Apps und das gesamte Windows-System konsistent und vorhersagbar ist. Im Rest dieses Beitrags geht es um das Entwickeln und Erstellen von geeigneten App-Leisten. In zukünftigen Beiträgen werden einige weitere Funktionen des Systems ausführlicher behandelt, z. B. die einzelnen Charms, mit denen Sie sich auf die Stärken der App konzentrieren und die Vorteile des Windows 8-Apps-Ökosystems nutzen können.

Bestandteile einer App-Leiste

Zunächst müssen Sie sich mit den Bestandteilen der App-Leiste befassen. Wie bereits angesprochen, handelt es sich um Features, die lediglich bedarfsweise zur Verfügung stehen, da sie für die Kernszenarien der App unerheblich sind. Hierzu sollte in der Regel ermittelt werden, ob diese während der gesamten Lebensdauer der App häufig verwendet werden. Betrachten Sie beispielsweise die App-Leiste der SkyDrive-App in der Release Preview:

App-Leiste der SkyDrive-App

Abbildung 4: Die App-Leiste der SkyDrive-App

Die Stärke der SkyDrive-App liegt darin, Benutzern überall Zugriff auf eine große Menge an Inhalten zu bieten. Daher steht auf der Canvas das Durchsuchen dieser Inhalte im Vordergrund. Natürlich ist auch das Hinzufügen von Dateien ein wichtiger Bestandteil der App. Wie sollte sonst diese große Sammlung entstehen? Allerdings wird diese Funktion nicht ständig benötigt. Daher eignet sich die Schaltfläche „Hinzufügen“ hervorragend für eine bedarfsweise Verfügbarkeit. Auf diese Weise steht jedes Pixel der App-Canvas für das Durchsuchen der Sammlung zur Verfügung, sofern nicht gerade neue Dateien hinzugefügt werden sollen. In einem solchen Fall wissen die Benutzer genau, wie Sie den Befehl „Hinzufügen“ einblenden können, da dies auf dieselbe Weise erfolgt, wie bei jeder appspezifisch ausgeblendeten Benutzeroberfläche im System.

Erstellen einer App-Leiste

Das Steuerelement „AppBar“ eignet sich in WinJS und XAML am besten zum Erstellen bedarfsweiser Benutzeroberflächen. Sie können damit sowohl App-Leisten im unteren Bildschirmbereich als auch Navigationsleisten im oberen Bereich erstellen (wobei wir uns hier auf erstere konzentrieren).

Das Wichtigste an einer guten App-Leiste ist, alle verfügbaren App-Befehle bei Bedarf mithilfe der Standardgesten (Streifen von oben/unten, rechter Mausklick oder Drücken von Windows-Taste + Z) anzuzeigen. Mit dem Steuerelement „AppBar“ erhalten Sie dieses Verhalten kostenlos. Zudem wird das Erstellen einer in das Gesamterscheinungsbild passenden App-Leiste deutlich vereinfacht.

Wenn beispielsweise eine App-Leiste für die Hubseite von „Food with Friends“ erstellt werden soll, muss in der Standardeinstellung lediglich der Befehl zum Erstellen eines neuen Plans für den Abend verfügbar sein. Die App-Leiste würde also folgendermaßen aussehen:

App-Leiste von „Food with Friends“ auf der HubseiteAbbildung 5: App-Leiste von „Food with Friends“

HTML

Standard-App-Leisten können in HTML problemlos erstellt werden. Erstellen Sie einfach ein „AppBar“-Steuerelement, in das Sie „ AppBarCommand“-Steuerelemente mit entsprechenden Eigenschaften integrieren. Dies wird mithilfe der AppBarIcons-Nummerierung weiter vereinfacht. Hierbei handelt es sich um eine Liste vorab erstellter Symbole, die sofort verwendet werden können und dem neuen Stil entsprechen.

<div id="foodWithFriendsAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',
label:'New plan',
icon:'add',
section:'global',
tooltip:'Create a new plan'}"
>
</button>
</div>

XAML

Um eine „AppBar“ in XAML zu erstellen, instanziieren Sie ein „AppBar“-Element, und legen Sie dieses je nach Anzeigeort der „AppBar“ als „BottomAppBar“- oder „TopAppBar“-Eigenschaft des Seitenobjekts fest. Anschließend fügen Sie der App-Leiste Schaltflächen mit Stilen aus den Visual Studio-Standardprojektvorlagen für Windows Store-Apps hinzu. In XAML legen Sie das Schaltflächenlayout der App-Leiste fest, indem Sie die Schaltflächen im gewünschten Layoutpanel platzieren.

<Page.BottomAppBar>
<AppBar>
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource AddAppBarButtonStyle}"
AutomationProperites.Name="New plan"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

Steuerelemente für die App-Leiste

In der Regel enthalten App-Leisten mehrere unterschiedliche Befehlsarten: Schaltflächen, Umschaltflächen und Flyouts (in JS). Sehen Sie sich beispielsweise in der Release Preview die einzelnen Typen in der App-Leiste der Mail-App an:

App-Leiste der Mail-App mit Standardschaltflächen, Umschaltflächen und Flyouts Mit der Schaltfläche „More“ wird ein Menü gestartet, mit der Schaltfläche „Font“ wird ein Flyout geöffnet, und bei der Schaltfläche „Underline“ handelt es sich um eine Umschaltfläche

Abbildung 6: App-Leiste der Mail-App

Die App-Leiste der Mail-App verfügt über Standardschaltflächen (z. B. „Paste“), Umschaltflächen (z. B. „Bold“, „Italic“ und „Underline“), Schaltflächen zum Öffnen von Menüs (z. B. „More“) und benutzerdefinierte Flyouts (z. B. „Font“, „Font color“ und „Highlight“). Informationen zum Erstellen dieser Schaltflächentypen in JS finden Sie unter AppBarCommand-Objekt. Verwenden Sie in XAML die Stile der Projektvorlagen und für Flyouts die Popup-Klasse mit leichtem Ausblenden.

Einbinden der App-Leiste in den Kontext

Das Bereitstellen einer bei Bedarf verfügbaren Benutzeroberfläche funktioniert nur, wenn die Benutzer genau wissen, wo diese zu finden ist. Wenn sie die gesamte App oder sämtliche Benutzeroberflächenelemente nach versteckten Befehlen durchsuchen müssen, werden sie Ihre App kaum genießen können. Daher werden auf einer guten App-Leiste stets alle jeweils verfügbaren Befehle angezeigt. Abhängig von folgenden Aspekten gibt es Unterschiede bei den relevanten Befehlen: der aktuellen Seite oder Auswahl sowie allen anderen Bedingungen, die den Zustand der App ändern. In diesen Fällen sollten alle relevanten, alle global verfügbaren (und daher funktionierenden) und alle kontextspezifischen Befehle angezeigt werden. Wenn Sie beispielsweise mit der rechten Maustaste auf die Startseite klicken, wird auf der App-Leiste lediglich die Schaltfläche „Alle Apps“ angezeigt:

App-Leiste der Startseite

Abbildung 7: App-Leiste der Startseite

Wenn Sie mit der rechten Maustaste eine Kachel auswählen, befindet sich die Schaltfläche „Alle Apps“ an der normalen Position der App-Leiste, auf der linken Seite werden jedoch zudem kachelspezifische Befehle angezeigt:

App-Leiste der Startseite mit kachelspezifischen Befehlen

Abbildung 8: App-Leiste der Startseite mit kachelspezifischen Befehlen

Wenn alle relevanten Befehle angezeigt werden, können Benutzer mit der rechten Maustaste auf eine beliebige Stelle des Bildschirms klicken und so auf alle bedarfsweisen Benutzeroberflächenelemente zugreifen, ohne dass die Gefahr besteht, mit dem Rechtsklick versehentlich eine Kachel auszuwählen. Indem die nicht immer angezeigten Befehle auf der linken (oder bei Rechts-nach-Links-Sprachen der rechten) Seite angeordnet werden, sorgen Sie für einen vorhersagbaren Ort, an dem sich die Auswahloptionen für Benutzer befinden. Die Benutzer können sich darauf verlassen, dass durch Klicken mit der rechten Maustaste auf eine beliebigen Stelle alle verfügbaren Befehle sowie alle auswahlspezifischen Optionen auf der linken Seite angezeigt werden.

Das Anordnen der Kontextbefehle auf der linken Seite hat ergonomische Gründe. Studien haben ergeben, dass die meisten Benutzer (und sogar Linkshänder) Touch-Geräte mit der rechten Hand bedienen. Wenn auswahlbasierte Befehle auf der rechten Seite angezeigt würden, würden bei der Auswahl von Elementen die aktuell angezeigten neuen Befehle durch den rechten Arm verdeckt. Entsprechend sorgt das Anordnen stets verfügbarer Befehle auf der rechten Seite dafür, dass auf diese mit der rechten Hand zugegriffen werden kann. Dies ist optimal, da die meisten Benutzer Touch-Geräte mit der rechten Hand bedienen. Wenn also die nicht immer angezeigten Befehle links und die für einen bestimmten Bildschirm stets angezeigten rechts angeordnet werden, verfügen die Benutzer über eine effizientere Touch-Bedienung.

So sieht die Standard-App-Leiste der Hubseite von „Food with Friends“ aus, wenn keine Elemente ausgewählt wurden:

App-Leiste der Hubseite von „Food with Friends“, wenn auf der Seite nichts ausgewählt wurde

Abbildung 9: App-Leiste der Hubseite von „Food with Friends“, wenn nichts ausgewählt wurde

Wenn Sie ein Restaurant auswählen, können Sie dieses der Wunschliste hinzufügen oder aus dieser entfernen. Daher wird beim
Auswählen eines Restaurants in der App-Leiste eine Umschaltfläche für die Wunschliste angezeigt:

App-Leiste der Hubseite von „Food with Friends“, wenn ein Ereignis ausgewählt wurde

Abbildung 10: App-Leiste der Hubseite von „Food with Friends“, wenn ein Ereignis ausgewählt wurde

Wie bei der Startseite werden die je nach Auswahl nicht immer angezeigten Befehle auf der linken Seite angezeigt, um diese vom stets vorhandenen Befehl „New plan“ zu trennen.

Im Folgenden erfahren Sie, wie Sie Befehle auf den beiden Seiten der App-Leiste platzieren und ein- bzw. ausblenden können.

HTML

Um einen Befehl auf der linken Seite anzuzeigen, muss dieser im Auswahlabschnitt platziert werden. Um ihn in der Standardeinstellung auszublenden, muss die Eigenschaft „hidden“ auf „true“ festgelegt werden. Mit der Eigenschaft „extraclass“ können Sie einfach auf einen Befehlssatz im Code verweisen, um so die bei der Auswahl eines Ereignisses gemeinsam angezeigten Befehle in einem Cluster anzuordnen.

<div id="foodWithFriendsAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdAdd',
label:'New plan',
icon:'add',
section:'global'"
>
</button>

<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdWishlist',
label:'Wishlist',
icon:'favorite',
section:'selection',
hidden:'true',
extraClass:'restaurantSelection'}"
>
</button>
</div>

Um Befehle auf der App-Leiste dynamisch ein- und auszublenden, rufen Sie einfach Folgendes auf:

var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.showCommands(restaurantSelectionCommands);

Alle für die App-Leiste verfügbaren Symbole finden Sie unter AppBarIcon-Nummerierung. Eine vollständige Liste der „AppBarCommand“-Eigenschaften finden Sie unter WinJS.UI.AppBarCommand-Objekt.

XAML

In der Standardeinstellung wird das Schaltflächenlayout durch die XAML-AppBar nicht verwaltet. Um das beschriebene Layout mit Befehlsabschnitten auf der linken und rechten Seite umzusetzen, müssen Sie daher die erforderlichen Layoutpanels für die Schaltflächen bereitstellen. In unserem Fall verwenden wir ein Grid mit zwei Spalten, die jeweils die Hälfte der App-Leiste beinhalten. Anschließend werden zwei jeweils links und rechts ausgerichtete StackPanels für die Schaltflächen hinzugefügt.

XAML-AppBar-Schaltflächen können einfach ein- und ausgeblendet werden, indem Sie jeweils die „Visibility“-Eigenschaft festlegen. Dies führt jedoch nicht zu einem animierten Ein- und Ausblenden der Schaltflächen. Um eine HTML-AppBar mit animiertem Ein- und Ausblenden von Schaltflächen zu erhalten, müssen Sie für jedes einzelne Panel der Eigenschaft „ChildrenTransitions“ „AddDeleteThemeTransition“ hinzufügen. Um diese Übergangsanimationen auszulösen, müssen Sie die Schaltflächen von der AppBar entfernen und hinzufügen.

<Page.BottomAppBar>
<AppBar x:Name="BottomAppBar1" IsSticky="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="LeftPanel" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
<StackPanel x:Name="RightPanel" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<Button x:Name="New" Style="{StaticResource AddAppBarButtonStyle}" AutomationProperties.Name="New" Tag="New"/>
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

private void AddEventSelectionCommands(object sender, RoutedEventArgs e)
{
Button inButton = new Button();
Button vetoButton = new Button();
Button mehButton = new Button();

inButton.Style = App.Current.Resources["AcceptAppBarButtonStyle"] as Style;
inButton.AutomationProperties.Name = "In";
vetoButton.Style = App.Current.Resources["CancelAppBarButtonStyle"] as Style;
vetoButton.AutomationProperties.Name = "Veto";
mehButton.Style = App.Current.Resources["HelpAppBarButtonStyle"] as Style;
mehButton.AutomationProperties.Name = "Meh";

// Make it the second item
LeftPanel.Children.Insert(1, inButton);
LeftPanel.Children.Insert(2, vetoButton);
LeftPanel.Children.Insert(3, mehButton);
}

Bei Bedarf verfügbar

Eine kontextbasierte App-Leiste sollte nur dann angezeigt werden, wenn der Benutzer dies wünscht. Wenn Sie beispielsweise auf der Startseite eine Kachel auswählen (Streifen der Kachel mit dem Finger nach unten, rechter Mausklick auf die Kachel oder Drücken von STRG + Leertaste auf der Kachel), wird die App-Leiste automatisch für die Dauer der Auswahl angezeigt. Wenn ein Benutzer eine Kachel auswählt, möchte er diese verwenden. Auf der App-Leiste werden Aktionen durchgeführt, daher muss sie angezeigt werden. Entsprechend wird beim Schreiben einer E-Mail und beim Auswählen von Text die Mail-App-Leiste mit den Befehlen zum Kopieren/Einfügen und Formatieren angezeigt. Benutzer wählen gewöhnlich Text aus, weil sie diesen verwenden möchten.

In der Regel verfügt die App-Leiste über ein leichtes Ausblenden. Das bedeutet, die App-Leiste wird ausgeblendet, wenn der Benutzer auf einen Punkt außerhalb der Leiste tippt. Wenn die App-Leiste programmgesteuert angezeigt wird (wie z. B. bei der Auswahl), muss das leichte Ausblenden deaktiviert werden, um diese zu fixieren. Auf diese Weise können Benutzer ihre Auswahl ändern oder mehrere Auswahloptionen treffen, ohne die App-Leiste zwischenzeitlich auszublenden. Nach dem Aufheben der Auswahl muss das einfache Ausblenden erneut aktiviert werden.

HTML

Dies ist der Code für den Umgang mit ausgewählten Objekten:

var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.showCommands(restaurantSelectionCommands);
appbar.sticky = true;
appbar.show();

When the selection is cleared, you would write the inverse code:
var restaurantSelectionCommands = document.querySelectorAll(".restaurantSelection");
appbar.hideCommands(restaurantSelectionCommands);
appbar.sticky = false;
appbar.hide();

Unter Beispiel eines HTML-AppBar-Steuerelements finden Sie ein funktionierendes Beispiel für das auswahlbasierte Anzeigen und Ausblenden einer App-Leiste mit Kontextbefehlen.

XAML

In XAML verfügen Sie über einen „SelectionChanged“-Handler für die Liste, mit dem ermittelt wird, ob ein Element ausgewählt oder verworfen wurde. Wenn ein Element ausgewählt wurde, rufen Sie die Methode zum Anzeigen der Befehle auf, legen Sie für die AppBar die Eigenschaft „IsSticky“ auf „true“ fest, und zeigen Sie anschließend die AppBar an. Wenn eine Auswahl aufgehoben wurde, rufen Sie die Methode zum Ausblenden der Befehle auf, legen die Eigenschaft „IsStricky“ wieder auf „false“ fest, und schließen Sie die AppBar.

private void RestaurantList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListView lv = sender as ListView;
if (lv.SelectedItem != null)
{
ShowRestaurantCommands();
BottomAppBar.IsSticky = true;
BottomAppBar.IsOpen = true;
}
else
{
HideRestaurantCommands();
BottomAppBar.IsSticky = false;
BottomAppBar.IsOpen = false;
}
}

Befehlslayout

Im nächsten Schritt wird das Befehlslayout ermittelt. Zur Platzierung von Befehlen eignet sich am besten die linke und rechte Seite des Bildschirms. Bei der Touch-Bedienung gilt dies, da Tablets in der Regel an den Seiten gehalten werden. Daher können Benutzer bei seitlich angeordneten Befehlen ihre Hände an Ort und Stelle belassen und mit den Daumen auf die Befehle zugreifen. Bei der Mausbedienung gilt Fitts' Gesetz. Der Cursor lässt sich einfacher und schneller in die unteren Ecken bewegen als an alle anderen Punkte auf dem Bildschirm. Je näher die Befehle an den Rändern platziert werden, desto einfacher kann auf sie zugegriffen werden.

Nun stellt sich lediglich die Frage, welche Befehle wo platziert und wie diese auf die beiden Seiten verteilt werden sollen. Eine ausführliche Beschreibung finden Sie unter Befehlsdesign für Apps im Metro-Stil. Kurz gesagt sollten wie beim Entwurf aller Elemente von App-Leisten auch beim Anordnen der Befehle vorhersagbare Stellen ausgewählt werden. Ordnen Sie die Befehle zunächst anhand der am häufigsten verwendeten Bildschirme und Befehle an – und sorgen Sie für eine tolle App. Als allgemeine Regel empfiehlt sich, die am häufigsten verwendeten Befehle möglichst Nahe an den Rändern zu platzieren, oder dem Beispiel ähnlicher Befehle in anderen beliebten Apps zu folgen. Auf diese Weise können Benutzer bereits vor dem Verwenden Ihrer App deren Funktionsweise vorhersagen. Belassen Sie bei allen folgenden Bildschirmen gemeinsame Befehle an derselben Stelle, und ordnen Sie die übrigen Befehle rund um diese an. Wenn ein Befehl über eine feste Platzierung verfügt, ändern Sie diese nicht. Auf diese Weise können sich Benutzer die Stellen der Befehle merken und Ihre App ganz selbstverständlich verwenden, sodass sie sich ganz auf die Hauptinhalte Ihrer App konzentrieren können.

Häufig werden Befehle auswahl- oder kontextbasiert ein- und ausgeblendet. So verfügt „Food with Friends“ auf der Restaurantlistenseite beispielsweise über einige Befehle, die nur relevant sind, wenn die Restaurants als Liste angezeigt werden (z. B. „Sort“). Andere Befehle sind nur in der Kartenansicht verfügbar (z. B. das Ausrichten am aktuellen Kartenstandort). Platzieren Sie in solchen Fällen Befehle, die in beiden Kontexten angezeigt werden, näher an den Rändern, damit diese bei einem Kontextwechsel durch den Benutzer nicht an eine andere Stelle verschoben werden.

In „Food with Friends“ können die Benutzer auf der Seite „All Restaurants“ zwischen der Listen- und der Kartenansicht umschalten. Mit der Ansicht wechselt auch die Auswahl an angezeigten Befehlen. Daher gewinnt die Platzierung erheblich an Bedeutung:

Seite „All Restaurants“ von „Food with Friends“ in der Listenansicht. Die von der aktuellen Ansicht abhängigen Befehle befinden sich in der Nähe der Befehle zum Umschalten der Ansicht. „New plan“ ist der feste Befehl, der entsprechend auf der rechten Seite angezeigt wird.

Abbildung 11: Seite „All Restaurants“ von „Food with Friends“ in der Listenansicht

  Seite „All Restaurants“ von „Food with Friends“ in der Kartenansicht. Die von der aktuellen Ansicht abhängigen Befehle befinden sich in der Nähe der Befehle zum Umschalten der Ansicht. „New plan“ ist der feste Befehl, der entsprechend auf der rechten Seite angezeigt wird.

Abbildung 12: Seite „All Restaurants“ in der Kartenansicht 

Beachten Sie, dass sich der Filterbefehl in der Listenansicht links von „Sort“ un in der Kartenansicht rechts neben der Schaltfläche „Map view“ befindet. Wenn Sie nun zwischen den beiden Ansichten umschalten, verbleiben alle gemeinsamen Befehle an ihrer angestammten Stelle, sodass die App-Leiste konsistent und vorhersagbar bleibt.

Umschalten von Ansichten

In der Regel wird die Anordnung der App-Befehle zunächst im Querformat vorgenommen. Es muss jedoch auch berücksichtigt werden, wie die App-Leiste im Hochformat und bei angedockter App aussieht. In der Standardeinstellung wird die WinJS-App-Leiste automatisch so an die verfügbare Breite angepasst, dass bis zu zehn Befehle untergebracht werden können. Im Hochformat werden die Befehlsbezeichnungen verworfen, und in der Andockansicht werden die Schaltflächen in zwei Zeilen angeordnet. Dies erfolgt automatisch. Es handelt sich um eine hervorragende Funktion, wenn die Inhalte der App für verschiedene Ansichten konsistent sind.

Bei der XAML-App-Leiste und dem benutzerdefinierten Layout der WinJS-App-Leiste können Sie die Inhalte und das Layout der Befehle vollständig steuern. Daher müssen Sie beim Hochformat und bei Andockansichten insbesondere darauf achten, dass alle Befehle eingepasst und optimal dargestellt werden. In solchen Fällen können Sie beispielsweise alle Schaltflächenbezeichnungen verwerfen, Befehle in Menüs gruppieren oder jeweils irrelevante Befehle ausblenden.

Die Optionen der Listen- und Kartenansicht werden in der Andockansicht in einem Menü vereint

Abbildung 13: Angedockte Kartenansicht „All Restaurants“

Die App „Food with Friends“ bietet ein Beispiel für das Anpassen der App-Leiste zur optimalen Darstellung in der Andockansicht, ohne dass auf relevante Befehle verzichtet werden muss. In diesem Fall wurden die Umschaltflächen für die Karten- und Listenansicht in einem einzelnen Menü zusammengefasst, um die Anzahl der Schaltflächen auf fünf zu begrenzen (die alle in einer Zeile angezeigt werden können).

            

Verwirklichen Sie Ihre Ideen

Mit dem Steuerelement „AppBar“ können Sie problemlos eine grundlegende App-Leiste erstellen. Zudem erleichtert es die Anpassung für eine optimale Übereinstimmung mit dem Stil Ihrer App. Häufig werden Farbe, Symbol oder Stil der Schaltfläche geändert. Werden Sie kreativ! Die App-Leiste sollte eine natürliche Erweiterung Ihrer App darstellen. Geben Sie Ihr daher dasselbe persönliche Erscheinungsbild wie dem Rest Ihrer App. Entsprechende Beispiele finden Sie im Beispiel eines HTML-AppBar-Steuerelements und im Beispiel eines XAML-AppBar-Steuerelements.

Abhängig von den vorhandenen Befehlen können Sie die bedarfsweise Benutzeroberfläche sogar auf eine vollkommen andere Art als mit einer App-Leiste anzeigen. Ihrer Kreativität sind keine Grenzen gesetzt! Wenn Sie sich hierfür entscheiden, sollten Sie die Benutzererwartung berücksichtigen, dass ausgeblendete Benutzeroberflächenelemente über die Standardgesten angezeigt werden (Streifen vom oberen oder unteren Bildschirmrand, Rechtsklick oder Drücken der Windows-Taste + Z), und dass sich diese Elemente in der Regel durch Tippen auf einen Punkt außerhalb der Benutzeroberfläche ausblenden lassen. Weitere Informationen zu den Standardereignissen einer bedarfsweisen Benutzeroberfläche finden Sie unter EdgeGesture-Klasse.

So einfach ist das!

Bei dem neuen Design geht es in erster Linie um die Konzentration auf die Stärken Ihrer App. Stellen Sie die Aspekte in den Vordergrund, die Ihre App hervorheben, und reduzieren Sie alle ablenkenden Elemente. Diese sollten nur bei Bedarf verfügbar sein. Dies kann auf einfache Weise mit der App-Leiste erreicht werden. Wenn Sie zudem die üblichen Konventionen zum Platzieren von Befehlen und zum Einbinden der App-Leiste befolgen, können sich Benutzer ganz auf die Stärken ihrer App konzentrieren, anstatt sich den Kopf über die Befehlsanordnung zu zerbrechen. Durch die Tools und Konventionen von Windows 8 können sich Benutzer auf die Stärken Ihrer App konzentrieren und deren Funktionen uneingeschränkt nutzen.

Weitere Informationen zu den Mustern für bedarfsweise Benutzeroberflächen finden Sie unter http://design.windows.com und Richtlinien und Prüfliste für App-Leisten. Weitere Experimente mit dem AppBar-Steuerelement in JS können Sie mit dem Beispiel eines HTML-AppBar-Steuerelements und dem Beispiel eines XAML-AppBar-Steuerelements durchführen. Beachten Sie zudem das WinJS.UI.AppBar-Objekt und die Windows.UI.Xaml.Controls.AppBar-Klasse.

Viel Spaß beim Erstellen Ihrer App!

– Jon Gordner, Lead Program Manager, Windows

  • Loading...
Leave a Comment
  • Please add 5 and 2 and type the answer here:
  • Post