Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
なぜなに
Windows Universal App たん
WinJS 4 編 じゃなかった
~ 迫りくる Windows 10 のリリースに備えて ~
れいさにゃん
Microsoft MVP – Microsoft Azure
Windows 8 とは何だったのか
新しいコンピューティングの提案
・タッチインターフェースに最適化した全く新
しい UI を定義
・タッチインターフェースに重点
(Windows 8.1 でマウスでの操作性を改善)
Windows 8 の
インターフェースデザイン
・単体でみたとき決して悪くなく、むしろ完成
度は素晴らしい。
・行き過ぎた独自性の追求により他のプラッ
トフォームとギャップが生じてしまった。
Windows 10 での方向修正
協調性 → ユニバーサル化
・行き過ぎた独自性を見直し、他プラットフォー
ムとの協調性を重視。
・ひとつのデバイスに特化するより、すべてのデ
バイスで共通の操作性を基本とする。
無かったことになるもの
水平スクロール ×
従来の垂直スクロールが基本にもどります
画像の引用元: http://blog.instin.com/post/58985277707/designing-for-windows-8-metro
アプリバー ×
レガシーストアアプリ※はタイトルバーのハンバーガーボタンか、
上からスワイプすると出せます(全画面時)
画像の引用元:Yabumi /Webnium
レガシーストアアプリ※はタイトルバーのハンバーガーボタンか、
上からスワイプすると出せます(全画面時)
アプリバー ×
画像の引用元:Yabumi /Webnium
すぐできる!おすすめ改修
・コントロールを常に表示させておくことが基本なので
...
チャーム ×
レガシーストアアプリ※が使用する共有チャーム等は
タイトルバーのハンバーガーボタンで出せます
画像の引用元: http://telecompk.net/2012/08/27/review-windows-8-is-it-worth...
チャーム ×
レガシーストアアプリ※が使用する共有チャーム等は
タイトルバーのハンバーガーボタンで出せます
画像の引用元: http://telecompk.net/2012/08/27/review-windows-8-is-it-worth...
などなど
新生アプリバー
コマンドバー(新アプリバー)
基本的に常に見える状態に
画像の引用元: https://msdn.microsoft.com/ja-jp/library/windows/apps/hh465302.aspx
共有ソースは要ボタン配置
共有ソース
チャームは無くなったのです。
共有するためのボタンを配置しましょう。
画像の引用元: http://blog.instin.com/post/58985277707/designing-for-windows-8-metro
ユニバーサルアプリ
3つの基本構成要素
画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design
① コンテンツ要素
これがないと審査におちます
画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design
② コマンド要素
コンテンツに対するコマンドを
ボタンやコマンドバーで実行できるようにします
画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design
③ ナビゲーション要素
表示するコンテンツを選択するための要素です
画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design
ナビゲーションは大きく分けて5パターン
これらのパターンはあくまで参考です
ハブ
ハンバーガー
ピボット
マスター/詳細
タブ
http://design.windows.com
実は WinJS では
ほとんど未実装
なぜ Windows 10 は
垂直スクロールなのか
水平スクロールの問題
既存インターフェースとの齟齬
・そもそも水平スクロールできないマウスがある
・垂直スクロールを水平スクロールに変換してた
→混乱の元
・ウェブアプリや他プラットフォームに合わせる
ハンバーガーボタンについて
ハンバーガーボタン問題。
・ハンバーガーボタンは元々表示領域の狭い場
合のための UI である
・表示できる余裕がある場合は展開しておくと
UX が向上する
http://design.windows.com
イカのせいで WinJS のこと
すっかりわすれてました
未解決疑問集
Azure 新Portal の
水平スクロールはどうなるの?
Microsoft Edge のバグは
RTMには治ってるの?
なぜなに Windows Universal App (パイロット版)
なぜなに Windows Universal App (パイロット版)
Prochain SlideShare
Chargement dans…5
×

なぜなに Windows Universal App (パイロット版)

July 4, 2015
Microsoft SGT

なぜなに Windows Universal App (パイロット版)

  1. 1. なぜなに Windows Universal App たん WinJS 4 編 じゃなかった ~ 迫りくる Windows 10 のリリースに備えて ~ れいさにゃん Microsoft MVP – Microsoft Azure
  2. 2. Windows 8 とは何だったのか
  3. 3. 新しいコンピューティングの提案 ・タッチインターフェースに最適化した全く新 しい UI を定義 ・タッチインターフェースに重点 (Windows 8.1 でマウスでの操作性を改善)
  4. 4. Windows 8 の インターフェースデザイン ・単体でみたとき決して悪くなく、むしろ完成 度は素晴らしい。 ・行き過ぎた独自性の追求により他のプラッ トフォームとギャップが生じてしまった。
  5. 5. Windows 10 での方向修正
  6. 6. 協調性 → ユニバーサル化 ・行き過ぎた独自性を見直し、他プラットフォー ムとの協調性を重視。 ・ひとつのデバイスに特化するより、すべてのデ バイスで共通の操作性を基本とする。
  7. 7. 無かったことになるもの
  8. 8. 水平スクロール × 従来の垂直スクロールが基本にもどります 画像の引用元: http://blog.instin.com/post/58985277707/designing-for-windows-8-metro
  9. 9. アプリバー × レガシーストアアプリ※はタイトルバーのハンバーガーボタンか、 上からスワイプすると出せます(全画面時) 画像の引用元:Yabumi /Webnium
  10. 10. レガシーストアアプリ※はタイトルバーのハンバーガーボタンか、 上からスワイプすると出せます(全画面時) アプリバー × 画像の引用元:Yabumi /Webnium すぐできる!おすすめ改修 ・コントロールを常に表示させておくことが基本なので ・アプリバーは最初から表示させておく! ↓ エンドユーザーが混乱しない ◎
  11. 11. チャーム × レガシーストアアプリ※が使用する共有チャーム等は タイトルバーのハンバーガーボタンで出せます 画像の引用元: http://telecompk.net/2012/08/27/review-windows-8-is-it-worth-upgrading/
  12. 12. チャーム × レガシーストアアプリ※が使用する共有チャーム等は タイトルバーのハンバーガーボタンで出せます 画像の引用元: http://telecompk.net/2012/08/27/review-windows-8-is-it-worth-upgrading/ 某れ○さ氏のつぶやき チャーム、好きでした・・・ 君のこと絶対に忘れないよ・・・ さよなら・・・
  13. 13. などなど
  14. 14. 新生アプリバー
  15. 15. コマンドバー(新アプリバー) 基本的に常に見える状態に 画像の引用元: https://msdn.microsoft.com/ja-jp/library/windows/apps/hh465302.aspx
  16. 16. 共有ソースは要ボタン配置
  17. 17. 共有ソース チャームは無くなったのです。 共有するためのボタンを配置しましょう。 画像の引用元: http://blog.instin.com/post/58985277707/designing-for-windows-8-metro
  18. 18. ユニバーサルアプリ
  19. 19. 3つの基本構成要素 画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design
  20. 20. ① コンテンツ要素 これがないと審査におちます 画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design
  21. 21. ② コマンド要素 コンテンツに対するコマンドを ボタンやコマンドバーで実行できるようにします 画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design
  22. 22. ③ ナビゲーション要素 表示するコンテンツを選択するための要素です 画像の引用元: http://www.slideshare.net/LucaFino/windows-10-app-design
  23. 23. ナビゲーションは大きく分けて5パターン これらのパターンはあくまで参考です
  24. 24. ハブ
  25. 25. ハンバーガー
  26. 26. ピボット
  27. 27. マスター/詳細
  28. 28. タブ
  29. 29. http://design.windows.com
  30. 30. 実は WinJS では ほとんど未実装
  31. 31. なぜ Windows 10 は 垂直スクロールなのか
  32. 32. 水平スクロールの問題
  33. 33. 既存インターフェースとの齟齬 ・そもそも水平スクロールできないマウスがある ・垂直スクロールを水平スクロールに変換してた →混乱の元 ・ウェブアプリや他プラットフォームに合わせる
  34. 34. ハンバーガーボタンについて
  35. 35. ハンバーガーボタン問題。 ・ハンバーガーボタンは元々表示領域の狭い場 合のための UI である ・表示できる余裕がある場合は展開しておくと UX が向上する
  36. 36. http://design.windows.com
  37. 37. イカのせいで WinJS のこと すっかりわすれてました
  38. 38. 未解決疑問集
  39. 39. Azure 新Portal の 水平スクロールはどうなるの?
  40. 40. Microsoft Edge のバグは RTMには治ってるの?

×