Daizen Ikehara, profile picture
Uploaded byDaizen Ikehara
1,490 views

Windows8 の UX

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

Embed presentation

Download to read offline
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 ストア アプリ
Mac iOS Android Windows
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 + Tab N個めのタブ 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 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
エンタープライズ利用 を 考えてみる
向き、不向き & デプロイ
コンテンツを参照するアプリケーションは マッチしやすい - タッチ対応しやすい
入力系アプリ キーボード、マウスを前提とした機能が多い • 入力ではなく、選択させる • 入力補助を検討する - 地図で選んだ座標から住所を取得 • タブレットではすっぱりあきらめる?
UI の面積が相対的に大きくなりがち 1 画面あたりのオブジェクト量が制限 • 1画面あたりの情報量を制限する • 別の「見せ方」を検討する - アプリ内タイル表示など
制約から 解き放つ!
審査を通さずにデプロイするため、 認定要件をスルーできる → 自由度が高まる
原則を無視すると他にも影響がでてしまう ユーザーの混乱を招くおそれもある 誰が幸せになるんだろう？
インフラジスティックスが 得意なこと
NetAdvantage for Windows UI XAML & HTML コントロール • Grid • Chart 特にデータ視覚化パターンを実装した UI に 注力
コードの共通化
• • • • API共通化に よる学習・開発 コストの削減 単独 APIセット共有 共通部分 Silverlight Windows Phone WPF jQuery
Windows Phone jQuery iOS WPF WinRT(XAML) WinRT(HTML) Silverlight Core Data Visualization API Cross Platform Shared Code Strategy
ロードマップ 2012 Q4 2013 H1 2013 H2 ベータ版公開 v1 リリース 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/
Windows8 の UX

More Related Content

PDF
Realconnectイベント告知・ルーム作成マニュアル
byreal-connect
 
PDF
Metroスタイルで花開くか？ XAMLベースのUIフレームワーク
byYuya Yamaki
 
PPTX
Arts Alive Presentation FINAL
byJulie Kendig
 
PPTX
sarah Place based project learning
byjscarlson
 
PDF
Shopsial TVSS week 4
byshopsial
 
PDF
Sumários Desenvolvidos de Filosofia do Direito
bynelson0802
 
PPTX
Everything Out Organizing Style Personality Preference
byCena Block
 
DOCX
Marcus-final essay
byNidia Favela
 
Realconnectイベント告知・ルーム作成マニュアル
byreal-connect
 
Metroスタイルで花開くか？ XAMLベースのUIフレームワーク
byYuya Yamaki
 
Arts Alive Presentation FINAL
byJulie Kendig
 
sarah Place based project learning
byjscarlson
 
Shopsial TVSS week 4
byshopsial
 
Sumários Desenvolvidos de Filosofia do Direito
bynelson0802
 
Everything Out Organizing Style Personality Preference
byCena Block
 
Marcus-final essay
byNidia Favela
 

Viewers also liked

PDF
MCT MALABANAN SEPTIC TANK SERVICES
byMyla Torres
 
PPT
DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!
byDaddyGO
 
DOCX
วิเคราะห์แผน เรื่อง หน่วยการวัดความยาว
byan510140238
 
PPT
Dave Roth - Context is king
byUX Ukraine
 
PPTX
English Iv! Ultima
byAmparo Romero
 
PDF
Découvrire l'architecture
byLamine Badman
 
PPSX
AS TAREFAS DO NADAL
bycursobarouta
 
PPTX
Web 2
bykhurt3310
 
PPSX
Creative and Fun Photographs by John Wilhelm
bymaditabalnco
 
PPT
Twr 1 Q 2009 Outlook
bypjcohen
 
PDF
The Lithuanian Economy - No 5, August 5, 2011
bySwedbank
 
PPT
Dolphin,lidia
bynordprocmskh
 
PPT
Innovation Day Post Event Report Conceptia (2)
byCherian Joseph
 
PPTX
Greeting
byacikalias
 
PPT
Slides for October 5, 2014
byCommunity United Methodist Church Oakdale CA
 
MCT MALABANAN SEPTIC TANK SERVICES
byMyla Torres
 
DEBRECENI VAGY? ILYET, MÉG NEM LÁTTÁL! NÉZD MEG ÉS ADD TOVÁBB!
byDaddyGO
 
วิเคราะห์แผน เรื่อง หน่วยการวัดความยาว
byan510140238
 
Dave Roth - Context is king
byUX Ukraine
 
English Iv! Ultima
byAmparo Romero
 
Découvrire l'architecture
byLamine Badman
 
AS TAREFAS DO NADAL
bycursobarouta
 
Web 2
bykhurt3310
 
Creative and Fun Photographs by John Wilhelm
bymaditabalnco
 
Twr 1 Q 2009 Outlook
bypjcohen
 
The Lithuanian Economy - No 5, August 5, 2011
bySwedbank
 
Dolphin,lidia
bynordprocmskh
 
Innovation Day Post Event Report Conceptia (2)
byCherian Joseph
 
Greeting
byacikalias
 
Slides for October 5, 2014
byCommunity United Methodist Church Oakdale CA
 

More from Daizen Ikehara

PDF
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
byDaizen Ikehara
 
PDF
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
byDaizen Ikehara
 
PDF
Communications Platform as a Service (CPaaS) 入門
byDaizen Ikehara
 
PDF
DevRel Meetupのおかげで転職した話
byDaizen Ikehara
 
PDF
エンジニア？のキャリアと英語を考える
byDaizen Ikehara
 
PDF
開発者向けカンファレンス出展に向けて考えるべきこと
byDaizen Ikehara
 
PDF
オンラインIDEで爆速オンボーディングと、サンプルコード共有
byDaizen Ikehara
 
PDF
コントロールベンダー視点での Command line interface (CLI)
byDaizen Ikehara
 
PDF
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
byDaizen Ikehara
 
PDF
ベストタイムは 23 時? グローバル開発チームとの付き合い方
byDaizen Ikehara
 
PDF
Knockout.js を利用したインタラクティブ web アプリケーション開発
byDaizen Ikehara
 
PDF
手戻り ゼロ を目指して
byDaizen Ikehara
 
PDF
Ignite ui 2012 最新情報 jQuery UI 編
byDaizen Ikehara
 
PDF
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
byDaizen Ikehara
 
PDF
Netadvantage 2012 volume2 最新情報 Reporting 編
byDaizen Ikehara
 
PDF
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
byDaizen Ikehara
 
PDF
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
byDaizen Ikehara
 
PDF
IgChart 入門編
byDaizen Ikehara
 
PDF
IgGrid 入門編
byDaizen Ikehara
 
PDF
高速レポート アプリケーション開発
byDaizen Ikehara
 
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
byDaizen Ikehara
 
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
byDaizen Ikehara
 
Communications Platform as a Service (CPaaS) 入門
byDaizen Ikehara
 
DevRel Meetupのおかげで転職した話
byDaizen Ikehara
 
エンジニア？のキャリアと英語を考える
byDaizen Ikehara
 
開発者向けカンファレンス出展に向けて考えるべきこと
byDaizen Ikehara
 
オンラインIDEで爆速オンボーディングと、サンプルコード共有
byDaizen Ikehara
 
コントロールベンダー視点での Command line interface (CLI)
byDaizen Ikehara
 
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
byDaizen Ikehara
 
ベストタイムは 23 時? グローバル開発チームとの付き合い方
byDaizen Ikehara
 
Knockout.js を利用したインタラクティブ web アプリケーション開発
byDaizen Ikehara
 
手戻り ゼロ を目指して
byDaizen Ikehara
 
Ignite ui 2012 最新情報 jQuery UI 編
byDaizen Ikehara
 
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
byDaizen Ikehara
 
Netadvantage 2012 volume2 最新情報 Reporting 編
byDaizen Ikehara
 
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
byDaizen Ikehara
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
byDaizen Ikehara
 
IgChart 入門編
byDaizen Ikehara
 
IgGrid 入門編
byDaizen Ikehara
 
高速レポート アプリケーション開発
byDaizen Ikehara
 

Windows8 の UX

  • 1.
  • 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.
  • 6.
    Presented by @kenazuma （シャチョー）
  • 7.
  • 8.
    Windows 8 の Windowsストア アプリ
  • 15.
    Mac iOS Android Windows
  • 17.
  • 18.
  • 19.
    Windows 8 のUX の さわり
  • 20.
  • 21.
    長押しして学ぶ まずはタップしてみる スライドしてドラッグ スワイプして選択 ピンチしてズーム 縁からスワイプ ローテートして回転 してUIを呼び出し
  • 22.
  • 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.
    向き、不向き & デプロイ
  • 48.
  • 49.
    入力系アプリ キーボード、マウスを前提とした機能が多い • 入力ではなく、選択させる • 入力補助を検討する - 地図で選んだ座標から住所を取得 • タブレットではすっぱりあきらめる?
  • 50.
    UI の面積が相対的に大きくなりがち 1 画面あたりのオブジェクト量が制限 • 1画面あたりの情報量を制限する • 別の「見せ方」を検討する - アプリ内タイル表示など
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
    NetAdvantage for WindowsUI 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.
    ロードマップ 2012Q4 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/