[Windows Phone 7 UIガイドを読み解く] 第29回 ～UIガイド要点 前編～
[Windows Phone 7 UIガイドを読み解く ] 第29回 ～UIガイド要点 前編～
2か月にわたり連載していた「Windows Phone 7 UIガイドを読み解く」のまとめとして、今回と次回の2回に分けて要点を説明します。
今回はその前編として、第1回～第15回の要点をまとめました。
[ オリジナルのドキュメントの入手先 ]
https://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx
[ スタート画面 ]
スタート画面に表示されている四角いアイコンのことを、タイルと呼びます。
アプリケーション側で、タイルに自分のアプリケーションを登録する方法はありません。タイルに表示させるには、ユーザーの操作が必要です。
[ ステータスバー ]
ステータスバーは、画面の上端(縦画面の場合)に表示されています。通常は時計しか表示されていませんが、ダブルタップするとその他の情報を表示できます。
アプリケーション側でステータスバーを非表示することは推奨されません。
[ アプリケーションバー ]
アプリケーションバーは、画面の下端(縦画面の場合)に表示されます。
アプリケーションバーに登録できるアイコンボタンは、 4つまでです。
アプリケーション側で、アプリケーションバーを非表示にすることもできます。
バーの透明度も変えることができます。
バーの高さは72ピクセルに固定されており、変更できません。
[ アプリケーションバーメニュー ]
アプリケーションバーの右上に表示されている ... を上にフリックすると、アプリケーションバーメニューが表示されます。
アプリケーションバーメニューに表示できるメニューの数は、最大5つです。
[ 電話機の傾きによる画面の向き ]
画面の向きは、ポートレイト(縦方向)、ランドスケープ ライト(90度右に倒した横方向)、ランドスケープ レフト(90度左に倒した横方向)の3種類があります。
デフォルトの画面はポートレイトです。スタート画面は、常にポートレイトとして表示されます。
電話機の向きや傾きにより、画面の向きが変わります。
アプリケーション側で、ポートレイトからランドスケープにするなどの、画面の向きを変える方法はありません。
現在どのモードで表示されているかの取得はできます。
[ プッシュ通知サービス ]
プッシュ通知サービスには、タイルによる通知、トーストによる通知、直接の通知(Raw notification)の3種類があります。
[ ナビゲーション、ページ、フレームの概念 ]
アプリケーションの最上位のコンテナがフレームです。
1つのアプリケーションには、1つのフレームのみ用意できます。
フレーム内に表示するページの数に制限はありません。
遷移した画面は、[戻る]ボタンをクリックすることで元のページに戻ります。
[ ページのタイトル ]
Visual Studioで作成するプロジェクトには、デフォルトでページのタイトルが用意されます。
タイトルをつけないこともできます。
コンテンツの部分がスクロールしても、タイトルの部分はスクロールしません。
タイトルの部分をタップしても、何も起きません。ただし、ピボットの場合はタイトル部分をタップすると、そのページを表示します。
[ テーマ ]
画面の背景色とアクセントの色をテーマと呼び、ユーザーが好きなテーマを選択できます。
背景色はdarkとlightの2つから選択できます。
アクセントの色は、10色から選べます。電話機固有の色が1色追加されていることもあります。
Windows Phone 7のエミュレーターでも、テーマを変えることができます。
[ システムとシステムのアプリケーションの設定 ]
システムの設定やシステムアプリケーションの設定の変更を行うには、アプリケーションの一覧にあるSettingsのアイコンをタップします。
システムやシステムアプリケーションの設定を変更した場合、その変更は直ちに反映されます。
アプリケーションを開発する際、そのアプリケーションの設定画面はアプリケーション自身で用意する必要があります。
作成したアプリケーションの設定画面を、システムとシステムアプリケーションの設定の画面に登録することはできません。
[ アプリケーションの設定 ]
何らかの設定する項目があるアプリケーションでは、設定用のページを用意します。
アプリケーションの設定を変更する際は、変更を即座に反映するように実装します。すなわち、[更新]ボタン、[OK]ボタンや、その他の確認用のダイアログなどを必要とする実装をしないようにします。
アプリケーションの設定はなるべくシンプルにし、最大2ページ(2スクリーン)に収まるようにします
次回は、UIガイドの要点の後半を説明します。
[注意事項]
この記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元に書いています。個人的な意見や見解も含んでいます。
記事中のページは、印刷後のページ(左上または右上に表示されている数字)です。
画像は、断りのない限りオリジナルのドキュメントから引用しています。UIが日本語の画像と、実機の写真を使っている画像は、独自に用意したものです。
英語の得意な方は、オリジナルのドキュメントもご参照ください。
[オリジナルのドキュメント]
オリジナルのドキュメントは、下記Webサイトよりダウンロードできます。
https://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx
このページの最初のほうにある、「UI Design and Interaction.....」というリンクをクリックすると、ダウンロードが始まります。
バージョンが少し古いドキュメントの日本語版は、下記よりダウンロードできます。
XPS 形式、3.80 MB | PDF 形式、3.29 MB
[Windows Phone 7 UIガイドを読み解く]
第1回～第15回の一覧
第16回 : ～タッチによる入力～
第17回 : ～タッチ方法 ( ゼスチャー ) の種類～
第18回 : ～ハードウェアの周囲についているもの～
第19回 : ～搭載されているセンサー～
第20回 : ～出力方法の種類～
第21回 : ～アプリケーションインターフェイスとなるコントロール～
第22回 : ～境界線、ボタン、キャンバス～
第23回 : ～チェックボックス～
第24回 : ～グリッド、ハイパーリンク、イメージ～
第25回 : ～リストボックス、メディア エレメント、パスワード ボックス、進行状況バー～
第26回 : ～パノラマ～
第27回 : ～ピボット～
第28回 : ～ラジオボタン、スクロール ビューワー、スライダー、スタック パネル、テキスト ブロック、テキスト ボックス～
マイクロソフト
田中達彦