Your SlideShare is downloading. ×
0
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
OSのフラットデザインを考えてみる
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

OSのフラットデザインを考えてみる

6,046

Published on

CSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7) …

CSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)
http://cssnite.jp/lp/lp31/

iOS 7を機に“フラットデザイン”への注目が集まっています。次期Android 4.4 - KitKatでもUIがフラットデザインになると噂されています。Yahoo! Japanのトップページもいつの間にかアイコンが平面的にデザインし直されていました。

いまなぜフラットデザインなのか?

日本では未発売に終わった携帯音楽プレイヤー“Zune”から始まり、Windows Phone、Xbox、Windows 8へとUIを刷新してきた元祖フラットデザイン(注:MSは自社のUIに” フラットデザイン”という言葉を使ったことはありません)のマイクロソフトのUXエバンジェリストが総括してみます。

Published in: Design
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,046
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
61
Comments
0
Likes
19
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. OS のフラットデザインを考えてみる 春日井良隆 日本マイクロソフト株式会社 UX エバンジェリスト
  • 2. iOS iOS7 iOS6
  • 3. iOS iOS7 iOS6
  • 4. Android 4.4
  • 5. Google Chrome
  • 6. Internet Explorer
  • 7. Yahoo! Japan
  • 8. Zune (2006)
  • 9. Windows Phone (2010)
  • 10. Xbox360 (2011)
  • 11. Windows 8 (2012)
  • 12. Windows 8.1 (2013)
  • 13. IE11 (2013)
  • 14. UI
  • 15. CLI - Command Line Interface
  • 16. GUI - Graphical User Interface
  • 17. GUI - Graphical User Interface
  • 18. Skeuomorphism
  • 19. Skeuomorphism
  • 20. Skeuomorphism
  • 21. Skeuomorphism http://memo.goodpatch.co/2013/04/about-save-icon/
  • 22. フラットデザイン (と呼ばれる) UIに見られる共通項 1. 不必要な装飾の排除 2. 抽象化、象徴化 3. タイポグラフィ トレンド ? メタファーの変化 ? 飽き?
  • 23. GUI - Graphical User Interface
  • 24. Swiss Design
  • 25. devices
  • 26. • Kindleの絵
  • 27. スキューバーダイビングとシュノーケル
  • 28. Content before Chrome
  • 29. モバイルの利用状況のデザインヒント 1. 余分なものを削ぎ落とす 2. ちら見しやすいようにデザインする 3. 階層を深くしない 4. 自然な形で接点を見せる 5. 途中で操作を止めても同じところから再開できるようにする 6. 時間軸を使って情報を整理する
  • 30. iOS 7 Design Resources iOS 7 embodies the following themes : Deference, Clarity, Depth Defer to Content • Take advantage of the whole screen. • Reconsider visual indicators of physicality and realism. • Let translucent UI elements hint at the content behind them. Provide Clarity • • • • Use plenty of negative space. Let color simplify the UI. Ensure legibility by using the system fonts. Embrace borderless buttons. Use Depth to Communicate https://developer.apple.com/library/ios/design/
  • 31. Android Design Principles 1. Enchant me 2. Simplify My Life 3. Make Me Amazing http://developer.android.com/design/get-started/principles.html
  • 32. Windows 8 design principles 削ぎ落とす 1. Do more with less とことんこだわる 2. Pride in craftsmanship 3. Be fast and fluid 軽快であれ、滑らかであれ 4. Authentically digital 5. Win as one デジタルの本質を採り入れる 一体感を与える http://msdn.microsoft.com/library/windows/apps/hh770552
  • 33. 次におこなうのは、その膨らんだ原稿から「なくても いいところ」を省く作業だ。余分な贅肉を片端からふ るい落としていく。 文章量は自然に落ち着くべきところに落ち着く。これ 以上は増やせないし、これ以上は削れないという地点 に到達する。エゴが削り取られ、余分な修飾が振い落 とされ、見え透いた論理が奥の部屋に引き下がる。 村上 春樹
  • 34. 完璧だと思えるのは、付け足すものがなく なった時ではなく、もう何も取り去るものが なくなったときである。 谷昇 「ル・マンジュ・トゥー」オーナーシェフ
  • 35. Resources
  • 36. Flat UI
  • 37. Pixel Fabric
  • 38. Pinterest
  • 39. UI/UX Flat design
  • 40. Font
  • 41. Color
  • 42. Color
  • 43. COLOURlovers
  • 44. Adobe Kuler
  • 45. Inforgraphic
  • 46. 黄金比 1 1.61803398874989484820458683436
  • 47. グリッドシステム Copyright © 2008-2012 Antonio Carusone, unless otherwise noted

×