Download - Windows Phone アプリ デザインの考え方
![Page 1: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/1.jpg)
![Page 2: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/2.jpg)
Windows Phone アプリデザインの考え方
株式会社アゼスト
UX コンサルタント
後藤雄介D4-203
![Page 3: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/3.jpg)
セッションの目的Windows Phone のデザイン・設計の流れを理解する
セッションのゴールWindows Phone 開発に興味を持っていただく
Windows Phone の開発者仲間を増やす
セッションの目的とゴールSession Objectives and Takeaways
![Page 4: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/4.jpg)
WP アプリも通常のアプリ制作と同じ。
下記のステップで考える。1. 課題
2. 要件
3. プロトタイピング
4. 設計
5. 実装
アプリデザインのあらすじ
![Page 5: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/5.jpg)
要件モバイルとしての要件、コンセプト立て。
プロトタイピングスケッチ、動作モックで形にする。
設計現実としての仕様やお作法に落とし込む。
キモはここの 3 つ
![Page 6: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/6.jpg)
モバイルとしての要件、コンセプト立て。
要件
![Page 7: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/7.jpg)
4W1H
何をするアプリ?
誰のためのアプリ?
どんな場面で使うアプリ?
どんな表示のアプリ?
どこにハマるアプリ?
携帯だからこそのコンセプト
出典 : Windows Phone Application Conceptualization (MSDN)
![Page 8: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/8.jpg)
アプリがユーザーに何を提供してくれるか。
機能主軸で詰め込みすぎない。人主軸で。
深い階層、小さなボタンにはどうせアクセスできない、しない。
目的をシンプルに、重要で必須のタスクは何か。それだけじゃだめなのか。
簡単にタイトル、説明ができ、誰でも理解できるもの。
簡単に理解されないアプリはダウンロードもされない。
何をするアプリ?
![Page 9: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/9.jpg)
WP を持つすべての人をターゲットと捉える。
極力、ユーザーを限定して考えない。年齢、性別、職業、リテラシー、ライフスタイル
誰でも理解して使うことができることが前提。
ペルソナもいいけれど・・・理想のユーザーだけを思い描かない。
初めから特定の人だけをターゲットで大丈夫?
誰のためのアプリ?
![Page 10: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/10.jpg)
モバイルとは何か。
外出、移動しながら使う。どこかへ向かって歩きながら、ちょっと立ち止まりながら
電車の車内や駅のホームで使う。不安定な足場、片手は塞がっている。
周りに人が多い、のぞき見られるかもしれない。
ほんのちょっとの空き時間に使う。信号待ち、エレベーター内、十数秒程度で目的を達成したい。
どんな場面で使うアプリ?
![Page 11: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/11.jpg)
誰も説明書は読まない。
余計な要素を排する。説明書を読まないと理解できない要素や手順は無くす。
説明不要な UI を考える。シンプルに、必要な要素、情報が提示されること。
ユーザーは触りながら覚えていく。
どんな表示のアプリ?
![Page 12: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/12.jpg)
ユーザーはどこに価値を見出すか。
競合アプリに対する優位性は何か。マーケットプレイスからダウンロードされるだけの理由は?
別のアイデアや、他のサービス連携も模索してみる。
ただし、コンシューマ向けの場合のみ。
どこにハマるアプリ?
![Page 13: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/13.jpg)
見える形にしてみる。
スケッチ
動作モック紙モックという手もあり。
プロトタイピング
出典 : Windows Phone Prototype Key Aspects of Yuour Designon (MSDN)
![Page 14: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/14.jpg)
情報構造と大まかな見た目をまとめる。
紙とペン、ホワイトボードで十分。
ステップごとに分けて。1. 代表的な画面の大まかな機能と見た目を書き出す。
2. 画面間をつなぐ「待ち画面」の見た目を書き出す。
3. 特殊画面があれば、その機能と見た目を書き出す。
4. 主要なタスクの導線を結ぶ。
5. その他のユーザー操作の導線を結ぶ。
スケッチ
![Page 15: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/15.jpg)
実際に動くものを作ってみる。
粒度設定を慎重に何をどこまで評価することを目的とするのか。
捨てモックか、何かを引き継ぐのか。
特に、お客様ありきの場合は、この辺を明確に。
イテレーション何回か回しながら、最終形態に近づけていくのも有効。
Expression Blend の Skech Flow が便利
プロトタイプ
![Page 16: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/16.jpg)
現実としての仕様やお作法に落とし込む。
画面設計
![Page 17: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/17.jpg)
Metro に即した UI デザインのガイド
初期版が日本語に訳されている。第 2版が MSDN に掲載されている。
ガイドに従うことで「WP標準」に出来る。個々の画面デザインに悩むことはない。
まずは UI デザインガイド
![Page 18: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/18.jpg)
詳細は、 UI デザインガイドへ。ここでは下記の項目に言及してみる。
ナビゲーション
情報構造
アプリケーションバー
UIパーツ
タイトル
テーマ
画面の向き
考え方
![Page 19: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/19.jpg)
画面間の移動画面間を進むときはアプリ内のボタンから。
画面間を戻るときはバックボタン(←)。
いつでもトップに戻れる安心感をバックボタンを連打すればトップへ戻れるように。
ループとなってしまう画面構造は不可。
終了は、明示的な「終了」操作で。バックボタンで終了も出来るが、分かりにくい。
ナビゲーション
![Page 20: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/20.jpg)
パノラマ、ピボットの使い方を考える。
並列のデータセット、メニューセットを提供。横方向は、並列のグループを表す。
個々の要素は、縦スクロールで。縦方向は、そのグループ内での選択肢を表す。
縦横操作で、 2次元のデータに素早くアクセス可能!
パノラマとピボットの違いパノラマは背景付。横に並ぶグループは別種でも OK 。
ピボットの方は、ほぼ同種の情報のフィルタリングなど。
画面内の情報構造
![Page 21: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/21.jpg)
画面内に配置するボタンと異なる役割。
その画面全体の操作送信や確定、キャンセルなど。
画面内の個々の要素に対するものは配置しない。
有効無効の切り替えを。使えないときは無効に。
アプリケーションバーのメニュー画面の副次的なシナリオの操作メニュー。
アプリケーションバー
![Page 22: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/22.jpg)
用意されているコントロールで。Metro準拠、見た目と挙動の一貫性が容易に保てる。
足りなければサードパーティ製という手もあり。
サポートされていないコントロールもある。タッチ操作にそぐわないもの、 API都合のもの等。
コンボボックスやデータグリッド、ファイル保存など。
Frame 、 Page などは、 Phone専用が用意されている。
UIパーツ
![Page 23: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/23.jpg)
画面タイトルは重要。モバイルではどこで中断しているかわからない。
どのコンテクストの途中か瞬時に分かること。
背景画像も、ユーザーへのアプリケーションのアイデンティティとなる。
タイトルと併せ、ユーザーが現在位置を瞬時に理解。
タイトル・背景画像
![Page 24: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/24.jpg)
テーマによる一貫性と互換性の保持。個々にプロパティを設定する必要がない。
テーマによって規定されるのは色のみ。フォント、コントロールは変わらない。
テーマとアプリ独自の色がお互いに邪魔しないように。
テーマ
![Page 25: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/25.jpg)
縦横対応は当たり前。縦横に対応した画面を前提とした設計とすべき。縦横それぞれの画面構成を作らない。
アプリケーションバーは、自動的に縦横に応じて変化してくれる。
ただし、バーの位置は固定。
時計回り・反時計回りによって、 2 タイプの横画面がある。
縦横を任意に切り替えることはできない。
ただし、縦画面固定の方が望ましければ、固定とする。
画面の向き
![Page 26: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/26.jpg)
セッションの目的Windows Phone アプリのデザインをどう進めるか?
アプリのコンセプトが UX のキモ。まずはそこを固める。
画面の見た目、動きは独自性の前にまず原則を意識。
このセッションで持ち帰っていただきたいモノ設計・デザイン前に UXガイドライン に目を通そう
プロトタイピング してから作ろう
セッションのまとめSession wrap up
![Page 27: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/27.jpg)
リファレンス
UI デザイン /操作ガイドhttp://blogs.msdn.com/b/shintak/archive/2010/12/10/10102734.aspx
User Experience Design Guidelines for Windows Phonehttp://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx
Design Resources for Windows Phone http://msdn.microsoft.com/en-us/library/ff637515(v=VS.92).aspx
![Page 28: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/28.jpg)
Windows Phone Arch のご紹介Introduction of WP Arch
Windows Phone 開発者のコミュニティです。
勉強会、情報共有会を各地で開催しています。
ご興味のある方は http://wp-arch.net/ へ。
![Page 29: Windows Phone アプリ デザインの考え方](https://reader031.vdocuments.site/reader031/viewer/2022020220/56812a9c550346895d8e59e0/html5/thumbnails/29.jpg)
ご清聴ありがとうございました
D4-203