Jaa

[Windows Phone 7 UIガイドを読み解く] 第16回 ～タッチによる入力～

  • Artikkeli

[Windows Phone 7 UIガイドを読み解く ] 第16回 ～タッチによる入力～

[Touch Input] (72ページ - 77ページ )
Windows Phone 7は、画面をタッチすることで様々な入力や操作を行います。
ハードウェアキーボードがついている機種もありますが、ハードウェアキーボードはオプションですので、基本的な操作は画面上で行います。

ユーザーが画面をタッチしたときは、アプリケーション側はそのタッチに対応する反応を即座に行う必要があります。
例えば、画面上に写真が表示されていて、その写真をユーザーがフリック(指でシュッと動かすような操作)した場合は、フリックが終わってから写真を動かすのではなく、フリックを検知したタイミングで写真を動かします。
ユーザーの動作とそれに対するアプリケーションの反応の間にタイムラグが生じてしまうと、ユーザーの思考を妨げてしまうことがあるので、注意しましょう。

タッチの種類には、1つの指で操作を行うシングルタッチと、複数の指を同時に動かすマルチタッチがあります。
基本的な操作は、なるべくシングルタッチで対応するようにします。
開発者が独自に作ったコントロールがある場合は、そのコントロールをタッチしたときの動きを、Windows Phone 7のコントロールと同じような動きにするようにします。

タッチに対応したUIには、以下の3つのコンポーネントがあります。

1. タッチ ターゲット (Touch target)
実際にタッチしたときに反応する範囲です。タッチターゲットは見ることができません。

2. タッチ エレメント (Touch element)
目に見える部分です。

3. タッチ コントロール (Touch control)
タッチ ターゲットとタッチ エレメントを合わせて、タッチコントロールと呼びます。

この説明だけでは分かりにくいので、下のボタンの図を見てください。

この星印がついたボタンを上記の3つのコンポーネントに分けて説明すると、このようになります。

赤い四角の部分が、タッチしたときに反応する範囲です。
この四角は、実際には見ることができません。
星印のボタンの形は丸ですが、赤い四角の内側であれば丸の外側をタッチしてもボタンを押したことになります。
これがタッチ ターゲットです。

白い丸とその中の星印で示されるボタンの部分が、タッチエレメントです。
ユーザーには、タッチ エレメントの部分のみが見えています。

赤い四角と白いボタンの部分を合わせて、タッチコントロールと呼びます。

タッチ ターゲットは、少なくとも9mm四方または34ピクセル四方の大きさがあることを推奨しています。
例外的に小さくする場合も、タッチ コントロールとして7mm四方または26ピクセル以上の大きさが必要です。
スクリーン上に表示されるキーボードと、Internet Explorer上に表示されるハイパーリンクは、この規定の例外です。

タッチ コントロールとタッチ コントロールの間は、少なくとも2mmまたは8ピクセル以上離す必要があります。

タッチ ターゲットとタッチ エレメントの大きさの基準として、タッチエレメントはタッチ ターゲットよりも小さく、かつ、タッチ エレメントはタッチ ターゲットの60%以上の大きさでなければなりません。

[注意事項]
この記事は、UI Design and Interaction Guide for Windows Phone 7 Version 2.0というドキュメントを元に書いています。個人的な意見や見解も含んでいます。
記事中のページは、印刷後のページ(左上または右上に表示されている数字)です。
画像は、断りのない限りオリジナルのドキュメントから引用しています。
英語の得意な方は、オリジナルのドキュメントもご参照ください。

[オリジナルのドキュメント]
オリジナルのドキュメントは、下記Webサイトよりダウンロードできます。
https://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx
このページの最初のほうにある、「UI Design and Interaction.....」というリンクをクリックすると、ダウンロードが始まります。

[Windows Phone 7 UIガイドを読み解く]
第1回 : ～ WP7のデザイン哲学～
第2回 : ～スタート画面～
第3回 : ～ステータスバー～
第4回 : ～アプリケーションバー～
第5回 : ～アプリケーションバー メニュー～
第6回 : ～電話機の傾きによる画面の向き～
第7回 : ～プッシュ通知サービス～
第8回 : ～タイルによる通知～
第9回 : ～トーストによる通知～
第10回 : ～直接の通知～
第11回 : ～ナビゲーション、フレーム、ページの概念～
第12回 : ～ページのタイトル～
第13回 : ～ WP7のテーマ～
第14回 : ～システムとシステムアプリケーションの設定～
第15回 : ～アプリケーションの設定～
第16回 : ～タッチによる入力～

マイクロソフト
田中達彦