Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
965
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 押さえておこう!モバイル開発におけるUX の考え方17-D-2 池原 大然 ゗ンフラジステゖックス・ジャパン デベロッパー エバンジェリスト Developers Summit 2011
  • 2. 自己紹介 池原 大然(Neri) ゗ンフラジステゖックス・ジャパン INETA 登録スピーカー TwitterID: @Neri78 Blog  http://blogs.jp.infragistics.com/ blogs/dikehara/default.aspx Developers Summit 2011
  • 3. 3 年前は 開発サポート部門リーダ 販売製品の技術サポートを担当
  • 4. 現在 デベロッパー エバンジェリスト 講演・執筆活動 プリセールス トレーニング 運営 Developers Summit 2011
  • 5. NetAdvantage シリーズ Developers Summit 2011
  • 6. 本日お話しさせて頂くこと Windows Phone 7 ゕプリケーション開発について PC vs モバ゗ル その違い Windows Phone 7 に見る モバ゗ルならではの UI・UX ゗ンフラジステゖックスの 取り組み Developers Summit 2011
  • 7. Twitter 実況中!! ポ゗ント 各種リンクは @IGJPにて随時実況します! Developers Summit 2011
  • 8. Developers Summit 2011
  • 9. 注意点 日本では Windows Phone 7 は キャリゕから販売されて いません 開発ツールは英語版を 一部使用しているので 日本語版がリリースされた際に 表記が変わる可能性があります Developers Summit 2011
  • 10. Windows Phone 7アプリケーション開発について Developers Summit 2011
  • 11. 開発環境の構築 AppHub http://create.msdn.com/ja-JP/ Windows Phone 7 と Xbox 360用  Windows Phone Developer Tools (WPDT) を取得する Developers Summit 2011
  • 12. Windows Phone Developer Tools 無料の開発環境  Visual Studio 2010 Express for Windows Phone  Windows Phone Emulator Resources  Silverlight 4 Tools For Visual Studio  XNA Game Studio 4.0  Microsoft Expression Blend for Windows Phone  ただし、英語版 Developers Summit 2011
  • 13. 使用できるフレームワークSilverlight for Windows Phone XNA Game Studio 4.0 業務ゕプリケーション、  高いパフォーマンスを ツール 要求されるゲーム パフォーマンスが  C# のみサポート 要求されないゲーム Silverlight 3 + α  4 の機能を一部 C#/VB  VB は制限あり Developers Summit 2011
  • 14. 日本語リソース Windows Phone デベロッパー センター http://msdn.microsoft.com/ja-jp/windowsphone/ コード サンプル トレーニング キット 開発者ガイド  Windows Phone 7 向け UI デザイン/操作ガイド (必読) Developers Summit 2011
  • 15. Windows Phone 7Silverlight ゕプリケーションエミュレータ & 実機Demo Developers Summit 2011
  • 16. Metro テーマ G M H T C Y Z N F 地下鉄の色分けのようにすっきり とした色合いを演出 Developers Summit 2011
  • 17. PC vs モバイルその違い Developers Summit 2011
  • 18. 画面解像度 モバ゗ル端末の解像度・サ゗ズはPC に 比べて小さい 今回のデモ機 :HTC HD7  480 × 800 (WVGA)  4.3 ゗ンチ 表示できる情報量に制限がある Developers Summit 2011
  • 19. 入力デバイスの違い カーソルに比べてより大きな領域が必要 Developers Summit 2011
  • 20. 最適な大きさとは? タッチ対象のサ゗ズ 9 mm 以上 見た目のサ゗ズ 60 ~ 100 % 7 mm~ タッチ対象の間隔 少なくとも 2 mm のスペース ボタン ボタン 7mm 2mm 7mm Developers Summit 2011
  • 21. 画面サ゗ズの比較とタッチ領域Demo Developers Summit 2011
  • 22. 入力の解釈の違い マウス 入力 • MouseDown • MouseUp • MouseMove などなど • 指(タッチ)からの入力 ジェスチャーが存在する • タップ • ダブルタップ • パン • フリック • タッチ ゕンド ホールド • 縮小と拡大 などなど Developers Summit 2011
  • 23. レイアウト・ナビゲーション ① ②モバ゗ルではどう配置・遷移する? Developers Summit 2011
  • 24. Windows Phone 7に見るモバイルならではの UI・UX Developers Summit 2011
  • 25. サポートされているジェスチャー タップ 素早く 1 度タッチ ダブルタップ 素早く 2 度タッチ パン 指を下ろした後に移動 指を下ろした後に素早く移動し、 フリック 離す 指を下ろし決められた時間 タッチ ゕンド ホールド そのままにする 2 本の指を下ろし近づける、 縮小と拡大 もしくは離す Developers Summit 2011
  • 26. Silverlight でのジェスチャー処理 通常は Mouse, Manipulation 関連の ゗ベントを使用しジェスチャーを判定  非常にめんどくさい Silverlight Toolkit for Windows Phone ではジェスチャー利用のための GestureService が実装されている http://silverlight.codeplex.com/ Developers Summit 2011
  • 27. GestureService の活用Demo Developers Summit 2011
  • 28. GestureService <phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls; assembly=Microsoft.Phone.Controls.Toolkit“ > <Image Source="DaizenIkehara.jpg" > <toolkit:GestureService.GestureListener> <toolkit:GestureListener Flick=“GestureListener_DoubleTap”/> </toolkit:GestureService.GestureListener> </Image> </phone:PhoneApplicationPage> private void GestureListener_DoubleTap(object sender, GestureEventArgs e) { MessageBox.Show("DoubleTap"); } Developers Summit 2011
  • 29. レイアウト・ナビゲーション ピボット・パノラマ Developers Summit 2011
  • 30. パノラマ 横に長いキャンパスにページ毎に別のコン テンツを表示できる  メニュー構造、画面遷移を うまく表現できる コンテンツ1 コンテンツ2 コンテンツ3 コンテンツ4 Developers Summit 2011
  • 31. ピボット データのフゖルタリング 複数のデータ表示 ビューの切り替え Developers Summit 2011
  • 32. ピボット・パノラマPicturesDemo Developers Summit 2011
  • 33. 他の UX パターンを検索するには UI/UX パターン ラ゗ブラリーhttp://jp.quince.infragistics.com  パターンの名前  パターンが解決する問題  背景  実装方法 Developers Summit 2011
  • 34. インフラジスティックスのモバイル プラットフォームへの取り組み Developers Summit 2011
  • 35. モバイル対応NetAdvantage モバ゗ル向け製品を開発中  Windows Phone 7 対応 Silverlight コントロール  iPhone & Android 向け モバ゗ル UI コントロール http://jp.infragistics.com/whats-hot/roadmap/new_products.aspx 2011 年発売予定!! Developers Summit 2011
  • 36. NetAdvantage for Mobile NetAdvantage for Silverlightを 試験的に WP7 環境で実験 http://jp.infragistics.com/innovations/mobile-app-igfinance.aspx Developers Summit 2011
  • 37. NetAdvantage for MobileDemo Developers Summit 2011
  • 38. まとめ モバ゗ル対応ゕプリケーション における新たな UI・UX の設計 の必要性 プラットフォームでサポート されている機能を十二分に活用 新たなパターンの誕生と可能性 Developers Summit 2011
  • 39. Next Action! WPDT 導入で開発環境の構築  Silverlight についても併せて 学習を! Windows Phone 7 向け UI デザ゗ン/操作ガ゗ドに 慣れ親しむ 継続的にパターンを検索! Developers Summit 2011
  • 40. リソース(1)AppHubhttp://create.msdn.com/ja-JP/Windows Phone デベロッパー センターhttp://msdn.microsoft.com/ja-jp/windowsphone/Windows Phone 7 Developer Tools RTW (英語) (ISO も取得可能)http://bit.ly/8YxX8HWindows Phone Developer Tools January 2011 Update (英語)http://bit.ly/aOWxRrCodeRecipe – Windows Phone 7 サンプルコードhttp://msdn.microsoft.com/ja-jp/netframework/ee708289#winphoneMSDN – 高橋 忍のブログhttp://blogs.msdn.com/b/shintak/MSDN – 田中達彦のブログhttp://blogs.msdn.com/b/ttanaka/ Developers Summit 2011
  • 41. リソース(2)まめしば雑記http://d.hatena.ne.jp/shiba-yan/backyard of 伊勢的新常識http://d.hatena.ne.jp/iseebi/酢ろぐ(ch3cooh.jp)http://d.hatena.ne.jp/ch3cooh393/Portfolio:Mitsubahttp://d.hatena.ne.jp/c-mitsuba/DHJJ [Hatsunes Journal Japan] bloghttp://blogs.wankuma.com/hatsune/Blog: Daizen Ikeharahttp://blogs.jp.infragistics.com/blogs/dikehara/default.aspxインフラジスティックス・ジャパン HP (NetAdvantage)http://jp.infragistics.com/ Developers Summit 2011
  • 42. おまけDevelopers Summit 2011
  • 43. XAML トレーニング WPFブートキャンプ XAML・Expression Blendを 徹底的に学習 NA for WPFによる実践開発 NetAdvantageを使ったWPF開発応用編 Silverlightブートキャンプ XAML・Expression Blendを 徹底的に学習 NA for ASP.NETによる実践開発 NetAdvantageを使ったASP.NET開発応用編 Developers Summit 2011
  • 44. ゗ンフラジステゖックス主催の無料 .NETセミナー第8弾 4/6(水) 名古屋 @ マ゗クロソフト中部支店 4/7(木) 大阪 @マ゗クロソフト関西支店 4/20(水) 東京 @秋葉原 UDX カンフゔレンス世界に誇れるUX 開発のために今何が必要か?!
  • 45. IG で働いてみませんか? 業務拡大の為、優秀な人材を 募集中です!  開発サポート エンジニゕ  セールス エンジニゕ http://jp.infragistics.com/careers/openings.aspx Developers Summit 2011