Windows8概要(デザイン編)

1,747 views
1,619 views

Published on

2012年9月にWebTouchMeetingで発表したスライドです。デザイナー向け

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,747
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Windows8概要(デザイン編)

  1. 1. Windowsストア アプリケーション概要 -デザイン編-
  2. 2. 自己紹介 株式会社システムフレンド Windows Phone ハンズオン in 広島 EC-CUBE公式エバンジェリスト 眠るシーラカンスと水底のプログラマー http://coelacanth.heteml.jp/blog/
  3. 3. 自己紹介Windows 8アプリ ShopBank トレトレ EC-CUBE大全 現在進行中が一つ・・・
  4. 4. Agenda• Windows8概要• デザイン PhotoShoper XAMLer
  5. 5. Windows 8 概要
  6. 6. Windows 8概要そもそもWindows8知ってる?
  7. 7. Windows 8概要・マウス+キーボード用のUI(クラシックデスクトップ)・タッチ操作用のUI(スタート画面)
  8. 8. Windows 8概要Windowsストア アプリケーション • Metro(暫定)スタイルUI • 新しいランタイム(WinRT) • Windowsストア • 新しい実行環境
  9. 9. Windows8概要
  10. 10. Windows8概要
  11. 11. Windows8概要Windows 8 = ノートPCにもタブレットにもなる デスクトップPCにもタブレットにもなるiOS,Android = デスクトップとタブレットのOSは別デスクトップ、ノートPCの雄らしい展開
  12. 12. Windows8概要・電源オンオフ/アプリの終了・アプリの切り替え・Charm・検索コントラクト・IE10・タイル
  13. 13. Metro(暫定)スタイルUIMetro(暫定)スタイルUI • Immersive • infographic • そぎ落とす、コンテンツが最優先 • レイアウト • 作法に従う→一貫性
  14. 14. Metro(暫定)スタイルUIImmersive没入した、没入できる、どっぷりつかった、実体験のように感じる
  15. 15. Metro(暫定)スタイルUI従来のブラウザ=情報が多く没入できない
  16. 16. Metro(暫定)スタイルUIMetro版IE=情報が少なく没入できる
  17. 17. Metro(暫定)スタイルUIinfographicInformation(情報)とgraphic(図)を組み合わせた用語
  18. 18. Metro(暫定)スタイルUIそぎ落とす、コンテンツが最優先コンテンツこそがエクスペリエンスの中心スクリーン上には、コンテンツに関係のある要素だけを配するユーザーの気を逸らす要素は最小限にユーザーがコンテンツに没頭できること。それがゴール
  19. 19. Metro(暫定)スタイルUIレイアウトカリッとしたグラフィックでスッキリした表現にグループ化や階層化を線とボックスで表現しない通勤ラッシュの車内のように詰め込みすぎない →余白が大切
  20. 20. Metro(暫定)スタイルUI
  21. 21. Metro(暫定)スタイルUI
  22. 22. Metro(暫定)スタイルUI作法に従う→一貫性コンテンツを優先するためにそぎ落としたコンテンツ以外の要素が隠れてしまった=使い難い
  23. 23. Metro(暫定)スタイルUI再びIE10 これらの情報は普段隠れている
  24. 24. デザイン
  25. 25. PhotoShoper• PhotoShopでデザインして納品する人を想定• Windowsストアアプリに力を入れている人は少ない (デザイナー求ム)• その人が知らないといけないことを紹介
  26. 26. PhotoShoper• 画面パターン• タイポグラフィー• Grid• コントロールの種類• ライブタイル
  27. 27. PhotoShoper画面パターン縦持ち横持スナップセマンティックズーム画面サイズは最少が1026×768(それ以下のサイズだとWindowsストアアプリは起動しない)
  28. 28. PhotoShoper画面パターン縦持ち横持スナップセマンティックズーム画面サイズは最少が1026×768(それ以下のサイズだとWindowsストアアプリは起動しない)
  29. 29. PhotoShoperタイポグラフィー
  30. 30. PhotoShoperタイポグラフィー
  31. 31. PhotoShoperグリッドシステム
  32. 32. 42pt20pt 11pt 11pt 9pt 11pt
  33. 33. 42pt 20pt11pt 9pt
  34. 34. PhotoShoperコントロールの種類
  35. 35. PhotoShoperライブタイル
  36. 36. XAMLer• Webサイトを作る場合にPhotoShopファイルから静的なHTMLに 書き出して納品してくれるような人を想定• 存在すると理想。。。でもプログラマーがやること多いね• HTML+CSS+JavaScriptでも作れる
  37. 37. XAMLer• 開発ツールの使い方• HTML+CSSでどのように表現するのか• XAMLでどのように表現するのか
  38. 38. XAMLerBlend for Bisual Studio
  39. 39. XAMLer・HTML⁺JavaScriptはねらい目従来の.NET技術者はC#⁺XAMLが多いまだまだドキュメントが少ない
  40. 40. XAMLer・HTML⁺JavaScriptはねらい目従来の.NET技術者はC#⁺XAMLが多いまだまだドキュメントが少ない
  41. 41. おまけMetro(旧)のデザイン本デザインについて、ストアの基準にについて学べます内容は入門
  42. 42. おまけMSによる開発支援プログラミング3時間+デザイン(スキルがある人なら)数日で完了!!http://msdn.microsoft.com/ja-jp/jj554833.aspx
  43. 43. おまけWindows Phone ハンズオン in 広島http://www.facebook.com/groups/273162962715808/Windows 8はじめました上記スタンプラリーなどの開発を一緒にやる人募集中(プログラマー&デザイナー)
  44. 44. おまけテンプレートや東京のセッション資料が入ったUSBをノベルティをMSからいただきましたので、興味があったら中身を見てWindows8の勉強をしてください。
  45. 45. ご清聴ありがとうございました

×