旅行アプリ
旅行アプリ アイデア ブックでは、Windows 8.1 用の架空の旅行アプリについて説明します。このトピックのシナリオを確認し、アプリでの Microsoft デザイン言語の使い方を見ることで、独自の旅行アプリのデザインに関するインスピレーションを得ることができます。
旅行アプリ シナリオ
このトピックで説明している旅行アプリでは、Microsoft デザイン機能を使って魅力的な旅行エクスペリエンスをユーザーに届けます。
| 着想を与える | 予約する | チェックインする |
.png "ライブ タイルと閲覧の画像") |
.png "旅行アプリの画像") |
.png "トースト通知の画像") |
ユーザーに着想を与えて引き込む
ライブ タイルを使ってユーザーをアプリに引き込み、共有コントラクトを使ってコンテンツを他のユーザーに簡単に広めることができるようになります。このシナリオに従うと、どのようにして旅行アプリを魅力的なものにすることができるかがわかります。
.png "ライブ タイルと閲覧の大きい画像")
Ben は、Wigtip Destinations アプリのライブ タイルにオプトインしていて、海辺での休暇の提案が目に留まりました。
|
アプリを起動した後、Ben は海岸情報の提案をクリックします。
|
Ben は Contoso Beaches の提案を選んで詳しく見ます。
|
Ben は提案の雰囲気が気に入ったので、友達と共有することにしました。
|
![ライブ タイルがある [スタート] メニューの画像](images/jj659082.travel_01_live_tile(ja-jp,win.10).png "ライブ タイルがある [スタート] メニューの画像")
.png "提案付きの旅行アプリの画像")
.png "旅行の提案の画像")
.png "旅行の提案と共有チャームの画像")
ライブ タイルと共有の要約
最初のシナリオは次のとおりです。
- ライブ タイルでユーザーに関連性のある情報 (提案をオプトインする機能を含む) を表示して、ユーザーをアプリに呼び戻します。
- コンテンツを共有ソースにして Windows 8.1 で他のアプリ、電子メール、ソーシャル ネットワークに接続できます。
ライブ タイルと共有について詳しくは、次の情報をご覧ください。
旅行の予約
アプリ バーとセマンティック ズームを使うと、コンテンツが見やすくなる一方、ユーザーに一貫した方法を提供してアプリ内を移動させることができます。
.png "旅行を予約する画像")
Ben は Wingtip Destinations アプリを起動し、旅行する都市を入力します。アプリにはユーザーの現在の位置が既にわかっています。
|
カレンダーはタッチとマウスの両方で簡単に使うことができます。
|
アプリ バーを使うと、さまざまな方法でフライト オプションの表示、フィルター処理、並べ替えをすることができます。
|
Ben はコストが心配なため、価格による結果を表示することにします。
|
Ben はセマンティック ズームを使って別のデータを表示します。
|
Ben は、計画の表示、旅客情報の入力、座席の選択、支払明細の入力を一度に行います。ここで、この旅行をしばらく保存したり、チケットを予約したりすることができます。
|
Ben は旅行を予約して購入手続きを完了することにしました。
|
.png "目的地が入った地図の画像")
.png "カレンダー ページの画像")
.png "アプリ バーとフライト オプションの画像")
.png "旅行のオプションと価格の画像")
.png "縮小表示したフライト オプションの価格の画像")
.png "旅行アプリの旅行ダッシュボードの画像")
.png "旅行アプリの計画ページの画像")
旅行を予約する方法の要約
2 番目のシナリオは次のとおりです。
- コマンドとナビゲーションがアプリ バーに配置された状態でコンテンツが最前部に表示されます。
- セマンティック ズームを使うと、ユーザーはさまざまな方法でデータを表示できます。
- 位置情報を使って位置情報認識アプリを作ることができます。
アプリの最適なナビゲーション パターンの選択については、「ナビゲーション パターン」をご覧ください。
フラット ナビゲーション パターンの実際の使い方については、「アプリの機能の概要」シリーズをご覧ください。
アプリ バー、セマンティック ズーム、位置情報認識アプリについて詳しくは、次の情報をご覧ください。
- AppBar のガイダンス
- AppBar のサンプル (HTML)
- AppBar のサンプル (XAML)
- セマンティック ズームのガイダンス
- セマンティック ズームのサンプル (C#/VB/C++)
- セマンティック ズームのサンプル (JavaScript)
- 位置情報認識アプリケーションのガイドライン
- 位置情報のサンプル
通知と印刷
Windows 8.1 エコシステムを使ってユーザーと通信することができます。
.png "トースト通知の画像")
Ben が仕事に没頭していると、チェックインする時間だと知らせるトースト通知が Wingtip Destinations から届きます。
|
Ben はトースト通知をクリックし、チェックイン ページにディープ リンクします。チェックインして搭乗券を印刷します。
|
.png "トースト通知の画像")
.png "旅行アプリのチェックイン ページの画像")
通知と印刷の要約
3 つ目のシナリオは次のとおりです。
- トースト通知は、アプリにディープ リンクしてユーザーがコンテンツに再び関心を持つ機会を与えます。
- アプリの Windows エコシステム全体 (プリンターなどのデバイスを含む) を活用することができます。
トースト通知と印刷について詳しくは、次の情報をご覧ください。
可能性を調べる
Windows 8.1 には、アプリを魅力的なものにする新しい機能が数多くあります。
たとえば、検索ボックスを追加するとアプリのコンテンツを検索できるようになり、検索コントラクトを追加するとアプリのコンテンツを他のアプリから検索できるようになります。詳しくは、「検索のサンプル」と「検索のガイダンス」をご覧ください。
.png "検索方法の画像")