Windows8 の UX

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/