Your SlideShare is downloading. ×
Windows8概要(デザイン編)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Windows8概要(デザイン編)

1,500
views

Published on

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

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


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

No Downloads
Views
Total Views
1,500
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×