Share via


健康/フィットネス アプリ

健康/フィットネス アプリ アイデア ブックでは、Windows 8.1 用の架空の健康/フィットネス アプリについて説明します。このトピックのシナリオを確認し、アプリでの Microsoft デザイン言語の使い方を見ることで、独自の健康/フィットネス アプリのデザインに関するインスピレーションを得ることができます。

健康/フィットネス アプリ シナリオ

このトピックで説明している健康/フィットネス アプリでは、Microsoft デザイン機能を使って魅力的な健康/フィットネス エクスペリエンスをユーザーに届けます。

ライブ タイル 共有ターゲット 検索
ユーザーがスタート画面の健康/フィットネス アプリのライブ タイルをタップする ユーザーがメールでデータを共有する ユーザーがバスの中でアプリを検索する

 

ユーザーにインスピレーションを与えてアプリに引き込む

また、ライブ タイルを使ってユーザーをアプリに引き込むことができます。サイズ変更されたビューを使うと、ユーザーは適切なコンテキストで関連タスクを行うことができます。このシナリオを読むと、どのようにしてユーザーに関連するコンテンツを健康/フィットネス アプリに表示することができるかがわかります。

ライブ タイルを使っているユーザーの大きい画像

スタート画面をチェックした Jill は、ライブ タイル更新に気付きました。プロテイン摂取量が、設定した目標値を下回っていることが示されていました。

スタート画面とライブ タイルの画像

Jill がライブ タイルをクリックすると、アプリのホーム ページが開きました。自分の食事内容が気になったので、Food Tracker というハブを選びました。

アプリを起動するユーザーの画像

Jill は Food Tracker を使って食事療法の進捗を確認しましたが、食事のバランスを良くするためのアイデアが必要です。

ユーザーが食事内容を追跡できるアプリの画像

Jill は、Food Tracker を参照しながら新しいレシピのアイデアを見つけることができるように、Get Healthy というアプリをサイズ変更し、サイドに寄せました。

サイズ変更されたビューの画像

 

ライブ タイルと狭いウィンドウの要約

最初のシナリオは次のとおりです。

  • ライブ タイルを使うと、日常生活のコンテキストでユーザーがアクションを起こすきっかけを作ることができます。
  • 狭い幅でもアプリが適切に機能すれば、ユーザーに気に入ってもらえます。

ライブ タイルと狭いウィンドウについて詳しくは、次の情報をご覧ください。

アプリの最適なナビゲーション パターンの選択については、「ナビゲーション パターン」をご覧ください。

フラット ナビゲーション パターンの実際の使い方については、「アプリの機能の概要」シリーズをご覧ください。

共有ターゲット

Microsoft デザイン言語を使うと、アプリのコンテンツを別の Windows ストア アプリに接続できます。

Matt は、自分の健康情報を整理しています。すると、依頼した予防接種記録が記載されているメールが医師から送られてきました。

メールを使っているユーザーの画像

Matt は保存したいメール内容を選択し、右からスワイプして共有チャームを選択しました。

メールの画像

共有チャームから Get Healthy アプリを選択した Matt は、メールのコンテンツを Get Healthy アプリと共有することができます。

共有チャームの画像

 

共有ターゲットの要約

2 番目のシナリオは次のとおりです。

  • アプリを共有ソースにしてコンテンツ、リンク、またはその他の種類の構造化データを送ることができます。
  • コンテンツを共有ターゲットにしてコンテンツ、リンク、またはその他の種類の構造化データを受け取ることができます。

共有コントラクトについて詳しくは、次の情報をご覧ください。

検索

ユーザーは、状況に合っておりアクション可能なときに、アプリを検索できます。

David は、健康ブログでオメガ 3 サプリに関する記事を読んでいます。どのアプリでも、右側から検索チャームを開くことができます。

記事を参照しているユーザーの画像'

David は新しいアプリを起動することなく、検索コントラクトを有効にしたアプリを検索できます。David は Get Healthy アプリを選択しました。

検索結果の画像

これで David は、新しいアプリ内で関連する記事を読むことができます。左からスワイプすることで、元のアプリにすばやく切り替えることもできます。

記事を読んでいるユーザーの画像

 

検索の要約

2 番目のシナリオは次のとおりです。

  • ユーザーは、最も状況に合っておりアクション可能なときに、アプリを検索できます。

検索コントラクトについて詳しくは、次の情報をご覧ください。

関連トピック

Windows ストア アプリの紹介

Windows ストア アプリの UX ガイドライン

ライブ タイルのガイダンス

ライブ タイルのサンプル

ウィンドウ サイズのガイダンス

狭いレイアウトのガイダンス

共有のガイダンス

共有ソースのサンプル

共有ターゲットのサンプル

検索のサンプル

検索のガイダンス