windows8 の ux
DESCRIPTION
2012 年 10 月 27 日に技術ひろば.net でセッションさせていただいた内容です。TRANSCRIPT
Windows 8 の UX
池原 大然(いけはら だいぜん)インフラジスティックス・ジャパン株式会社
マーケティング & デベロッパー エバンジェリスト(何でも屋)
最近は毎日 Expression Web とかFireworks とかで作業してます。VS もね!
Microsoft MVP for Development Platforms
Client App Dev 2010/04 – 2013/03
新米パパ
自己紹介
Blog
INFRAGISTICS 【名】
ɪnfrəˈdʒɪstɪks : インフラジスティックス
1. ニュージャージーに本社を置く UI コントロールを中心としたソフトウェア製品を開発・販売するグローバルカンパニー
2. Infrastructure(基礎構造)+ logistics(後方支援)
3. バイク乗りが社長の東京・原宿の会社【日本】
4. インフラさん【俗称】
NETADVANTAGE
Presented
by
@kenazuma(シャチョー)
http://bit.ly/S1vnEs
Windows 8 の
Windows ストア アプリ
WindowsAndroidiOSMac
http://msdn.microsoft.com/ja-jp/jj556277
http://msdn.microsoft.com/ja-jp/library/windows/apps/xaml/hh694083.aspx
Windows 8 の UX の
さわり
タッチ ファースト
長押しして学ぶ スワイプして選択スライドしてドラッグまずはタップしてみる
ピンチしてズーム ローテートして回転縁からスワイプしてUIを呼び出し
Low consequence
High consequence
タッチ ファースト≠
タッチ オンリー
インタラクション タッチ マウス 物理キーボード
選択 スクロールと逆方向へのスワイプ
右クリック スペースキー
アプリバーの表示 上端/下端からのスワイプ
右クリック Windows + Z
コンテクストメニュー タップ アンド ホールド 右クリック コンテクストメニューキー
起動 タップ 左クリック Enterキー
短い距離のスクロール スライド スクロールバーのサム、矢印ボタン、スクロールホイール
矢印キー
長い距離のスクロール スライド+慣性運動 スクロールバーの領域内クリック、サムの移動、スクロールホイール
Page up 及びdown
インタラクション タッチ マウス 物理キーボード
再配置/ドラッグアンドドロップ
開始点を超えるまでスクロールと逆方向にスワイプ
マウスダウンと移動 カット&ペースト
ズーム ピンチ Scroll wheel (2D canvas)スクロールホイールあるいはCtrl+スクロールホイール
Ctrl & +/-
ロテート ロテート shift+ctrl+スクロールホイール Ctrl & ,/.
キャレットを置く/テキストを選択する
タップ/タップしてキャレットをドラッグする
クリック/ダブルクリック/ダウンと移動
矢印キー/Shift+矢印キー/ctrl + 矢印キー
より多くの情報を表示/学ぶ
ホールド ホバーして開始時間が過ぎる状態を待つ
フォーカスを移動させて開始時間が過ぎる状態を待つ
インタラクションフィードバック
タッチビジュアライゼーション
カーソル動作と変化 フォーカスレクタングル
フォーカス移動 N/A N/A 矢印キー/タブ
アクション キーコマンド
戻る 戻るボタン/テキストふーるどにいない状態でバックスペース/Alt+左
進む Alt+右
上がる Alt+上
キャンセル/あるモードから抜ける Esc
リストアイテムのブラウジング 矢印キー
リストアイテム中の次のグループへ移動する Control + 矢印キー
セマンティックズーム Control と + / -
コレクションの中で名前を持つ項目にジャンプする 名前をタイピング
遠くへジャンプ Page Up / Down (水平方向でも動作するべき)
アクション キーコマンド
次のタブ Control + Tab
前のタブ Control + Shift + TabN個めのタブ Control + N (数字の 1-9)
アプリバーを開く Win + Z
コンテキストメニュー コンテクストメニューキーフライアウトを開く Enter
ナビゲート/起動 Enter
選択 スペース
複数選択 Shift + 矢印キー
アクション キーコマンド
ピン止め 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 ,/.
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
コマンド
チャーム
アプリバー
ワイド (2x1) 正方形(1x1)
Contoso Travel Featured destinations Last minute deals
7 night Alaska Cruise
Last Minute Deals
Featured destinations Barcelona, Spain
Last Minute Deals 7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy
Suites
Upgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do
My Trips Weather7 days
Chicago (3/11 – 3/19)
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Today54/43 Mostly Sunny
Attractions
My Trips Featured Destinations Top Destinations for 2012
Barcelona, Spain
My Trips City Guide City Guide
エンタープライズ利用を
考えてみる
向き、不向き&
デプロイ
コンテンツを参照するアプリケーションはマッチしやすい - タッチ対応しやすい
入力系アプリ
キーボード、マウスを前提とした機能が多い• 入力ではなく、選択させる• 入力補助を検討する - 地図で選んだ座標から住所を取得• タブレットではすっぱりあきらめる?
UI の面積が相対的に大きくなりがち1 画面あたりのオブジェクト量が制限• 1画面あたりの情報量を制限する• 別の「見せ方」を検討する - アプリ内タイル表示など
制約から解き放つ!
審査を通さずにデプロイするため、認定要件をスルーできる→ 自由度が高まる
原則を無視すると他にも影響がでてしまうユーザーの混乱を招くおそれもある誰が幸せになるんだろう?
インフラジスティックスが得意なこと
NetAdvantage for Windows UI
XAML & HTML コントロール
• Grid
• Chart
特にデータ視覚化パターンを実装した UI に
注力
コードの共通化
•
•
•
•
単独 APIセット共有
共通部分 Silverlight Windows Phone WPF jQuery
API共通化による学習・開発コストの削減
Core Data
Visualization
API
Silverlight
WPF
jQuery
Windows
Phone
iOS
WinRT(XAML)
WinRT(HTML)
Cross Platform Shared Code Strategy
ロードマップ
2012 Q4
ベータ版公開
2013 H1
v1 リリース
2013 H2
v2 リリース
まとめ
まとめ
•
•
•
•
•
リソース
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/