Windows8 の UX
1 like1,489 views
2012 年 10 月 27 日に技術ひろば.net でセッションさせていただいた内容です。
Windows8 の UX
- 1. Windows 8 の UX
- 2. 自己紹介 池原 大然（いけはら だいぜん） インフラジスティックス・ジャパン株式会社 マーケティング & デベロッパー エバンジェリスト（何でも屋） 最近は毎日 Expression Web とかFireworks とかで 作業してます。VS もね! Microsoft MVP for Development Platforms Client App Dev 2010/04 – 2013/03 新米パパ Blog
- 3. INFRAGISTICS 【名】 ɪnfrəˈdʒɪstɪks ： インフラジスティックス 1. ニュージャージーに本社を置く UI コントロールを中心としたソフ トウェア製品を開発・販売するグローバルカンパニー 2. Infrastructure（基礎構造）+ logistics（後方支援） 3. バイク乗りが社長の東京・原宿の会社【日本】 4. インフラさん【俗称】
- 4. NETADVANTAGE
- 6. Presented by @kenazuma （シャチョー）
- 8. Windows 8 の Windows ストア アプリ
- 15. Mac iOS Android Windows
- 19. Windows 8 の UX の さわり
- 20. タッチ ファースト
- 21. 長押しして学ぶ まずはタップしてみる スライドしてドラッグ スワイプして選択 ピンチしてズーム 縁からスワイプ ローテートして回転 してUIを呼び出し
- 25. タッチ ファースト ≠ タッチ オンリー
- 26. インタラクション タッチ マウス 物理キーボード 選択 スクロールと逆方向への 右クリック スペースキー スワイプ アプリバーの表示 上端／下端からのスワ 右クリック Windows + Z イプ コンテクストメニュー タップ アンド ホールド 右クリック コンテクストメニューキー 起動 タップ 左クリック Enterキー 短い距離のスクロール スライド スクロールバーのサム、矢印ボタン、 矢印キー スクロールホイール 長い距離のスクロール スライド＋慣性運動 スクロールバーの領域内クリック、 Page up 及び サムの移動、スクロールホイール down
- 27. インタラクション タッチ マウス 物理キーボード 再配置／ 開始点を超えるまで マウスダウンと移動 カット＆ペースト ドラッグアンドドロップ スクロールと逆方向に スワイプ ズーム ピンチ Scroll wheel (2D canvas) Ctrl & +/- スクロールホイールあるいはCtrl ＋スクロールホイール ロテート ロテート shift+ctrl+スクロールホイール Ctrl & ,/. キャレットを置く／テキスト タップ／タップしてキャ クリック／ダブルクリック／ダウンと 矢印キー／Shift+矢印 を選択する レットをドラッグする 移動 キー／ctrl + 矢印キー より多くの情報を表示／ ホールド ホバーして開始時間が過ぎる状 フォーカスを移動させて開 学ぶ 態を待つ 始時間が過ぎる状態を待 つ インタラクションフィード タッチビジュアライゼー カーソル動作と変化 フォーカスレクタングル バック ション フォーカス移動 N/A N/A 矢印キー／タブ
- 28. アクション キーコマンド 戻る 戻るボタン／テキストふーるどにいない状態でバックスペース／Alt+左 進む Alt+右 上がる Alt+上 キャンセル／あるモードから抜ける Esc リストアイテムのブラウジング 矢印キー リストアイテム中の次のグループへ移動する Control + 矢印キー セマンティックズーム Control と + / - コレクションの中で名前を持つ項目にジャンプする 名前をタイピング 遠くへジャンプ Page Up / Down （水平方向でも動作するべき）
- 29. アクション キーコマンド 次のタブ Control + Tab 前のタブ Control + Shift + Tab N個めのタブ Control + N (数字の 1-9) アプリバーを開く Win + Z コンテキストメニュー コンテクストメニューキー フライアウトを開く Enter ナビゲート／起動 Enter 選択 スペース 複数選択 Shift + 矢印キー
- 30. アクション キーコマンド ピン止め 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 ,/.
- 31. 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
- 32. コマンド
- 34. チャーム アプリバー
- 38. ワイド (2x1) 正方形(1x1)
- 44. Contoso Travel Featured destinations Last minute deals My Trips City Guide Featured Destinations Last Minute Deals My Trips Top Destinations for 2012 Barcelona, Spain 7 night Alaska Cruise Featured destinations Last Minute Deals My Trips Barcelona, 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
- 46. エンタープライズ利用 を 考えてみる
- 47. 向き、不向き & デプロイ
- 49. 入力系アプリ キーボード、マウスを前提とした機能が多い • 入力ではなく、選択させる • 入力補助を検討する - 地図で選んだ座標から住所を取得 • タブレットではすっぱりあきらめる?
- 50. UI の面積が相対的に大きくなりがち 1 画面あたりのオブジェクト量が制限 • 1画面あたりの情報量を制限する • 別の「見せ方」を検討する - アプリ内タイル表示など
- 51. 制約から 解き放つ!
- 54. インフラジスティックスが 得意なこと
- 55. NetAdvantage for Windows UI XAML & HTML コントロール • Grid • Chart 特にデータ視覚化パターンを実装した UI に 注力
- 56. コードの共通化
- 57. • • • • API共通化に よる学習・開発 コストの削減 単独 APIセット共有 共通部分 Silverlight Windows Phone WPF jQuery
- 58. Windows Phone jQuery iOS WPF WinRT(XAML) WinRT(HTML) Silverlight Core Data Visualization API Cross Platform Shared Code Strategy
- 59. ロードマップ 2012 Q4 2013 H1 2013 H2 ベータ版公開 v1 リリース v2 リリース
- 60. まとめ
- 61. まとめ • • • • •
- 62. リソース 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/