Windows8 の UX

2,193 views
2,113 views

Published on

2012 年 10 月 27 日に技術ひろば.net でセッションさせていただいた内容です。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,193
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Windows8 の UX

  1. 1. Windows 8 の UX
  2. 2. 自己紹介池原 大然(いけはら だいぜん)インフラジスティックス・ジャパン株式会社マーケティング & デベロッパー エバンジェリスト(何でも屋)最近は毎日 Expression Web とかFireworks とかで作業してます。VS もね!Microsoft MVP for Development PlatformsClient App Dev 2010/04 – 2013/03新米パパ Blog
  3. 3. INFRAGISTICS 【名】 ɪnfrəˈdʒɪstɪks : インフラジスティックス1. ニュージャージーに本社を置く UI コントロールを中心としたソフ トウェア製品を開発・販売するグローバルカンパニー2. Infrastructure(基礎構造)+ logistics(後方支援)3. バイク乗りが社長の東京・原宿の会社【日本】4. インフラさん【俗称】
  4. 4. NETADVANTAGE
  5. 5. Presented by @kenazuma(シャチョー)
  6. 6. http://bit.ly/S1vnEs
  7. 7. Windows 8 のWindows ストア アプリ
  8. 8. Mac iOS Android Windows
  9. 9. http://msdn.microsoft.com/ja-jp/jj556277
  10. 10. http://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh694083.aspx
  11. 11. Windows 8 の UX の さわり
  12. 12. タッチ ファースト
  13. 13. 長押しして学ぶ まずはタップしてみる スライドしてドラッグ スワイプして選択 ピンチしてズーム 縁からスワイプ ローテートして回転 してUIを呼び出し
  14. 14. Low consequenceHigh consequence
  15. 15. タッチ ファースト ≠タッチ オンリー
  16. 16. インタラクション タッチ マウス 物理キーボード選択 スクロールと逆方向への 右クリック スペースキー スワイプアプリバーの表示 上端/下端からのスワ 右クリック Windows + Z イプコンテクストメニュー タップ アンド ホールド 右クリック コンテクストメニューキー起動 タップ 左クリック Enterキー短い距離のスクロール スライド スクロールバーのサム、矢印ボタン、 矢印キー スクロールホイール長い距離のスクロール スライド+慣性運動 スクロールバーの領域内クリック、 Page up 及び サムの移動、スクロールホイール down
  17. 17. インタラクション タッチ マウス 物理キーボード再配置/ 開始点を超えるまで マウスダウンと移動 カット&ペーストドラッグアンドドロップ スクロールと逆方向に スワイプズーム ピンチ Scroll wheel (2D canvas) Ctrl & +/- スクロールホイールあるいはCtrl +スクロールホイールロテート ロテート shift+ctrl+スクロールホイール Ctrl & ,/.キャレットを置く/テキスト タップ/タップしてキャ クリック/ダブルクリック/ダウンと 矢印キー/Shift+矢印を選択する レットをドラッグする 移動 キー/ctrl + 矢印キーより多くの情報を表示/ ホールド ホバーして開始時間が過ぎる状 フォーカスを移動させて開学ぶ 態を待つ 始時間が過ぎる状態を待 つインタラクションフィード タッチビジュアライゼー カーソル動作と変化 フォーカスレクタングルバック ションフォーカス移動 N/A N/A 矢印キー/タブ
  18. 18. アクション キーコマンド戻る 戻るボタン/テキストふーるどにいない状態でバックスペース/Alt+左進む Alt+右上がる Alt+上キャンセル/あるモードから抜ける Escリストアイテムのブラウジング 矢印キーリストアイテム中の次のグループへ移動する Control + 矢印キーセマンティックズーム Control と + / -コレクションの中で名前を持つ項目にジャンプする 名前をタイピング遠くへジャンプ Page Up / Down (水平方向でも動作するべき)
  19. 19. アクション キーコマンド次のタブ Control + Tab前のタブ Control + Shift + TabN個めのタブ Control + N (数字の 1-9)アプリバーを開く Win + Zコンテキストメニュー コンテクストメニューキーフライアウトを開く Enterナビゲート/起動 Enter選択 スペース複数選択 Shift + 矢印キー
  20. 20. アクション キーコマンドピン止め Control + Shift + !コマンドラベルの表示 N/Aバスケットのクリアー N/Aコンテクストメニューの起動 コマンドボタン保存 Control + S検索 Control + F印刷 Control + P (ShowPrintUIAsync APIを呼び出す)コピー Control + Cカット Control + X新規アイテム Control + Nペースト Control + Vアドレスを開く Control-L or Alt-Dロテート Control ,/.
  21. 21. Action Key Command再生 / 一時停止 Control + P (Only in media focused apps. If app supports print, Control + P should always print instead)次のアイテム Control + F (Conflicts with Find)前のアイテム Control + B巻き戻し Control + Shift + B早送り Control + Shift + F停止 N/A
  22. 22. コマンド
  23. 23. チャームアプリバー
  24. 24. ワイド (2x1) 正方形(1x1)
  25. 25. Contoso TravelFeatured destinations Last minute deals My Trips City GuideFeatured Destinations Last Minute Deals My TripsTop Destinations for 2012 Barcelona, Spain 7 night Alaska CruiseFeatured destinations Last Minute Deals My TripsBarcelona, Spain 7 Night Alaska Cruise Chicago (3/11 – 3/19) Weather Attractions 7 days Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Suites Today 54/43 Mostly Sunny Upgrade from an inside cabin and save Upgrade from an inside cabin and save $43/night/person! $43/night/person! Picture windows with ocean and port views Picture windows with ocean and port view From $2,099 — only $150/night/person based on double occupancy From $2,099 — only $150/night/person do Today 54/43 Mostly Sunny
  26. 26. エンタープライズ利用 を 考えてみる
  27. 27. 向き、不向き & デプロイ
  28. 28. コンテンツを参照するアプリケーションはマッチしやすい - タッチ対応しやすい
  29. 29. 入力系アプリキーボード、マウスを前提とした機能が多い• 入力ではなく、選択させる• 入力補助を検討する - 地図で選んだ座標から住所を取得• タブレットではすっぱりあきらめる?
  30. 30. UI の面積が相対的に大きくなりがち1 画面あたりのオブジェクト量が制限• 1画面あたりの情報量を制限する• 別の「見せ方」を検討する - アプリ内タイル表示など
  31. 31. 制約から解き放つ!
  32. 32. 審査を通さずにデプロイするため、認定要件をスルーできる→ 自由度が高まる
  33. 33. 原則を無視すると他にも影響がでてしまうユーザーの混乱を招くおそれもある誰が幸せになるんだろう?
  34. 34. インフラジスティックスが 得意なこと
  35. 35. NetAdvantage for Windows UI XAML & HTML コントロール • Grid • Chart 特にデータ視覚化パターンを実装した UI に 注力
  36. 36. コードの共通化
  37. 37. • •• • API共通化に よる学習・開発 コストの削減 単独 APIセット共有 共通部分 Silverlight Windows Phone WPF jQuery
  38. 38. Windows Phone jQuery iOS WPF WinRT(XAML) WinRT(HTML)Silverlight Core Data Visualization API Cross Platform Shared Code Strategy
  39. 39. ロードマップ 2012 Q4 2013 H1 2013 H2 ベータ版公開 v1 リリース v2 リリース
  40. 40. まとめ
  41. 41. まとめ••• ••
  42. 42. リソース  http://bit.ly/w8rec1  http://bit.ly/w8rec2   http://t.co/zD2C8DGq  http://www.ustream.tv/recorded/25924087  http://samples.jp.infragistics.com/  http://blogs.jp.infragistics.com/blogs/

×