Windows Dev Center

Shopping-Apps

In der Ideensammlung zu Shopping-Apps wird eine fiktionale Shopping-App für Windows 8.1 beschrieben. Die Szenarien in diesem Thema sind als Inspiration für eigene Shopping-Apps gedacht und sollen zeigen, wie die Microsoft-Designsprache in der App genutzt wird.

Beispielcode verfügbar: Tallan Inc. hat basierend auf der Ideensammlung zu Shopping-Apps eine großartige Beispiel-App erstellt. Sie können diese Beispiel-App herunterladen, um eine reale Implementierung der in dieser Ideensammlung beschriebenen Features sowie weiterer Features zu sehen. Laden Sie die Beispiel-Shopping-App von Tallan hier herunter.

Shopping-App-Szenarios

Die in diesem Thema beschriebene Shopping-App verwendet Microsoft-Designfeatures zum Erstellen eines ansprechenden Shoppingerlebnisses für die Benutzer.

Live-Kacheln und DurchsuchenSuche und Ändern der FenstergrößeTeilen
Abbildung für Live-Kacheln und DurchsuchenAbbildung der SucheAbbildung für das Freigeben

 

Benutzer für den Inhalt der App begeistern

Mithilfe der Microsoft-Designsprache können Sie eine bekannte Oberfläche für das Durchsuchen erstellen, die angenehm, einfach und leistungsstark ist. Außerdem können Sie mit Live-Kacheln die Benutzer für Ihre App interessieren. Sie erfahren in diesem Szenario, wie Sie Ihre Shopping-App interessant machen.

Abbildung für Live-Kacheln und Durchsuchen

Matt Berg verwendet sein Windows 8.1-Tablet im Bus, wenn er von zu Hause ins Büro fährt.

Abbildung für Live-Kacheln und Durchsuchen

Eine Live-Kachel mit der Bezeichnung "Just Arrived:" informiert Matt über das Eintreffen der neuen Herbstkollektion. Matt interessiert sich dafür und klickt deshalb auf die Kachel, um die App zu starten.

Abbildung für Live-Kacheln und Durchsuchen

Matt braucht eine neue Jacke und klickt aus diesem Grund auf die Kategorie "Over the Shoulder".

Abbildung für Live-Kacheln und Durchsuchen

Die Kategorieansicht erfolgt im Querformat, wobei alle Optionen ebenfalls auf der Canvas dargestellt werden. Matt kann daher die Artikel durchsuchen, ohne eine Hierarchie durchsuchen zu müssen.

Abbildung für Live-Kacheln und Durchsuchen

Durch Zusammendrücken aktiviert Matt den semantischen Zoom, mit dem er schnell die Artikelliste anzeigen und durchblättern kann.

Abbildung für Live-Kacheln und Durchsuchen

Nach dem Klicken auf den Bereich "Jackets" wählt Matt eine Jacke aus, um die Artikelansicht anzuzeigen, und fügt sie anschließend in seinem Einkaufswagen hinzu.

Abbildung für Live-Kacheln und Durchsuchen

Matt schließt den Einkauf ab, indem er die Jacke zusammen mit einem Hemd bezahlt, das er bereits früher in den Einkaufswagen gelegt hatte.

Abbildung für Live-Kacheln und Durchsuchen

 

Zusammenfassung von Live-Kacheln und Szenario für das Durchsuchen

In diesem Szenario werden Anwendungsfälle gezeigt, die folgende Designelemente nutzen:

  • Live-Kacheln ziehen die Aufmerksamkeit von Benutzern auf die App, indem sie für den Benutzer relevante Informationen anzeigen.
  • Ihre Inhalte werden in Ihrer App ohne irgendwelche Effekte hervorgehoben, sodass die Benutzer genau die Oberfläche vorfinden, die Sie sich wünschen.

Weitere Informationen zu Live-Kacheln und zum semantischen Zoom finden Sie in folgenden Themen:

Informationen zum Auswählen des besten Navigationsmusters für Ihre App finden Sie unter Navigationsmuster.

Sehen Sie das flache Navigationsmuster in unserer Serie App-Features von A bis Z in Aktion.

Fördern der Benutzerbindung

Sie können die Microsoft-Designsprache zum Ansprechen von Benutzern verwenden, wenn sie kaufbereit sind. Fügen Sie dazu ein Suchfeld hinzu, implementieren Sie den Vertrag "Suche", und aktivieren Sie das Multitasking für Benutzer. Ferner können Sie dazu Apps entwickeln, die auch beim Ändern der Größe auf eine schmale Breite tadellos funktionieren.

Abbildung für Live-Kacheln und Durchsuchen

Jon Rodman verwendet sein Windows 8.1-Tablet für das Lesen eines Mode-Blogs.

Abbildung für Live-Kacheln und Durchsuchen

In Internet Explorer oder jeder anderen App kann Jon den Charm "Suchen" von rechts einblenden und nach einer ähnlichen Jacke suchen.

Abbildung für Live-Kacheln und Durchsuchen

Abbildung für Live-Kacheln und Durchsuchen

Jon wählt die App "Head to Toe" aus, die seine Suchergebnisse für den Begriff "Jacket" anzeigt.

Abbildung für Live-Kacheln und Durchsuchen

Jon grenzt die Suchergebnisse mit einem Preisfilter ein. Danach wählt er einen Artikel aus.

Abbildung für Live-Kacheln und Durchsuchen

Jon ändert die Größe der App am linken Rand, damit er den Artikel mit der Jacke aus dem Blog vergleichen kann. Da er mit seiner Wahl zufrieden ist, fügt er die Jacke in seinem Einkaufswagen hinzu.

Abbildung für Live-Kacheln und Durchsuchen

Noch in der schmalen Breite entscheidet sich Jon für den Abschluss seines Einkaufs.

Abbildung für Live-Kacheln und Durchsuchen

 

Zusammenfassung zum Fördern der Benutzerbindung

In diesem Szenario werden Anwendungsfälle gezeigt, die folgende Designelemente nutzen:

  • Der Vertrag für die "Suche" macht Ihre App zu einem möglichen Ziel, wenn Ihre Kunden einkaufen möchten.
  • Eine mit schmaler Breite gut funktionierende App erlaubt den Kunden das Durchsuchen und Vergleichen Ihrer Inhalte mit anderen Apps und Websites.

Weitere Informationen zur Suche und zu Fenstergrößen finden Sie in folgenden Themen:

Herstellen von Verbindungen durch das Freigeben

Sie können Ihren Benutzern mithilfe der Microsoft-Designsprache erlauben, Verbindungen mit anderen Apps, Kontakten oder sozialen Netzwerken herzustellen.

Abbildung für Live-Kacheln und Durchsuchen

David Hamilton hat sich gerade eine neue Jacke gekauft. Nach dem Absenden seiner Bestellung möchte er diese Neuigkeit anderen mitteilen.

Abbildung für Live-Kacheln und Durchsuchen

David verwendet den Vertrag für "Freigabe", um den Aktionscode mit seinen Freunden zu teilen.

Abbildung für Live-Kacheln und Durchsuchen

 

Zusammenfassung zum Herstellen von Verbindungen zwischen Benutzern durch das Freigeben

In diesem Szenario werden Anwendungsfälle gezeigt, die folgende Designelemente nutzen:

  • Sie können Ihre Inhalte zu einer Freigabequelle machen, woraufhin Windows 8.1 Verbindungen mit anderen Apps, E-Mail-Kontakten und sozialen Netzwerken ermöglicht.
  • Sie können Ihre App aber auch als Freigabeziel festlegen und damit Inhalte, Links oder andere strukturierte Daten empfangen.

Weitere Informationen zu Freigaben finden Sie in folgenden Themen:

Verwandte Themen

Die erste Begegnung mit Windows Store-Apps
Richtlinien für die UX von Windows Store-Apps
Beispiel für eine Shopping-App
Beispiel für Live-Kacheln
Richtlinien zu Live-Kacheln
Beispiel für semantischen Zoom (C#/VB/C++)
Beispiel für semantischen Zoom (JavaScript)
Richtlinien zum semantischen Zoom
Beispiel für die Suche
Richtlinien zur Suche
Leitfaden zur Fenstergröße
Leitfaden zu schmalen Layouts
Beispiel zur Freigabequelle
Beispiel zum Freigabeziel
Richtlinien zu Freigaben

 

 

Anzeigen:
© 2015 Microsoft