ショッピング アプリ
ショッピング アプリ アイデア ブックでは、Windows 8.1 用の架空のショッピング アプリについて説明します。このトピックのシナリオを確認し、アプリでの Microsoft デザイン言語の使い方を見ることで、独自のショッピング アプリのデザインに関するインスピレーションを得ることができます。
利用できるサンプル コード: Tallan Inc. により、ショッピング アプリ アイデア ブックに基づいて優れたサンプル アプリが作成されました。サンプル アプリをダウンロードして、このアイデア ブックで説明している機能の実装例などを確認することができます。Tallan によるサンプル ショッピング アプリはこちらからダウンロードできます。
ショッピング アプリ シナリオ
このトピックで説明しているショッピング アプリでは、Microsoft デザイン機能を使って魅力的なショッピング エクスペリエンスをユーザーに届けます。
| ライブ タイルと閲覧 | 検索とウィンドウのサイズ変更 | 共有 |
.png "ライブ タイルと閲覧の画像") |
.png "検索の画像") |
.png "共有の画像") |
ユーザーをアプリのコンテキストに引き込む
Microsoft デザイン言語を使って、楽しく簡単かつ強力でカジュアルな閲覧エクスペリエンスを構築できます。また、ライブ タイルを使ってユーザーをアプリに引き込むことができます。このシナリオに従うと、どのようにしてショッピング アプリを魅力的なものにすることができるかがわかります。
.png "ライブ タイルと閲覧の画像")
Matt Berg は会社から帰宅するバスの中で Windows 8.1 タブレットを使っています。
|
ライブ タイルの "新着:" という表示によって、新しい注目の秋服の情報が届いていることが Matt に通知されます。Matt は興味を持ち、タイルをクリックしてアプリを開きます。
|
Matt は新しいジャケットが欲しいと思い、"Over the Shoulder" (肩越し) カテゴリをクリックします。
|
カテゴリ表示は横方向で、すべてのオプションの詳細ビューが同じキャンバスに表示されます。コンテンツ階層を移動することなく閲覧できます。
|
ピンチ操作によってセマンティック ズームをアクティブ化し、商品の一覧での表示や移動をすばやく行うことができます。
|
"ジャケット" のセクションをクリックした後、Matt はあるジャケットを選んで項目ビューで確認し、ショッピング カートに追加しました。
|
ジャケットと、先にショッピング カートに追加してあったシャツを購入して、Matt のショッピングは完了しました。
|
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
ライブ タイルと閲覧のシナリオの要約
このシナリオでは、次の設計要素を活用する使用事例を確認します。
- ライブ タイルでユーザーに関連性のある情報を表示して、ユーザーをアプリに呼び戻します。
- クロムを使わず、アプリのコンテンツに集中できるようにして、ユーザーが関心を持つエクスペリエンスに没入できるようにします。
ライブ タイルとセマンティック ズームについて詳しくは、次の情報をご覧ください。
- ライブ タイルのガイダンス
- ライブ タイルのサンプル
- セマンティック ズームのガイダンス
- セマンティック ズームのサンプル (C#/VB/C++)
- セマンティック ズームのサンプル (JavaScript)
アプリの最適なナビゲーション パターンの選択については、「ナビゲーション パターン」をご覧ください。
フラット ナビゲーション パターンの実際の使い方については、「アプリの機能の概要」シリーズをご覧ください。
ユーザーを積極的な利用に導く
Microsoft デザイン言語を使って、ショッピングの準備ができたユーザーを積極的な利用に導くことができます。これには、検索ボックスを追加する、検索コントラクトを実装し、ユーザーのマルチタスクを実現する、狭い幅にサイズ変更されたときに適切に機能するアプリを設計するなどの方法があります。
.png "ライブ タイルと閲覧の画像")
Jon Rodman は Windows 8.1 タブレットを使ってスタイルのブログを閲覧しています。
|
Internet Explorer やその他のアプリで、Jon は画面右側から現れる検索チャームを使って、似たようなジャケットを検索できます。
|
|
"Head to Toe" アプリを選ぶと、"Jacket" という言葉の検索結果が表示されます。
|
Jon はフィルターを使って検索結果を値段で絞り込みます。そして商品を選びます。
|
選んだ商品をブログにあったジャケットと比較できるように、Jon はアプリを左端にサイズ変更します。選んだジャケットが気に入り、Jon はジャケットをカートに追加します。
|
まだ狭い幅で表示されているときに、Jon は購入手続きを完了することにしました。
|
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
ユーザーを積極的な利用に導く方法の要約
このシナリオでは、次の設計要素を活用する使用事例を確認します。
- 検索コントラクトにより、お客様に買い物をする意志がある場合、アプリがターゲット候補のリストに加えられます。
- 狭い幅でも適切に機能するアプリを使って、お客様はコンテンツを閲覧し、他のアプリや Web サイトと比較できます。
検索とウィンドウ サイズについて詳しくは、次の情報をご覧ください。
共有によるつながり
Microsoft デザイン言語を使ってユーザーを他のアプリ、連絡先、またはソーシャル ネットワークに接続できます。
.png "ライブ タイルと閲覧の画像")
David Hamilton は新しいジャケットを買ったばかりです。注文した後、このニュースを共有するように促されました。
|
David は共有コントラクトを使って特売コードを友人と共有しました。
|
.png "ライブ タイルと閲覧の画像")
.png "ライブ タイルと閲覧の画像")
共有によるユーザーのつながりの要約
このシナリオでは、次の設計要素を活用する使用事例を確認します。
- コンテンツを共有ソースにして Windows 8.1 で他のアプリ、メール、ソーシャル ネットワークに接続できます。
- アプリを共有ターゲットにしてコンテンツ、リンク、またはその他の種類の構造化データを受け取ることができます。
共有について詳しくは、次の情報をご覧ください。