ABC2014 Spring: UI/UX Design Trends 2014

2,579 views

Published on

Android Bazaar and Conference 2014 Spring: デザイントラック「UI/UXデザイントレンド 2014」発表資料(2014年3月21日、秋葉原ダイビル+UDX)
http://www.android-group.jp/conference/abc2014s/conference/design/

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

No Downloads
Views
Total views
2,579
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
35
Comments
0
Likes
29
Embeds 0
No embeds

No notes for slide

ABC2014 Spring: UI/UX Design Trends 2014

  1. 1. デザイン/開発トラック UI/UX デザイントレンド 2014 UI/UX Design Trends 2014 Nobuya Sato Experience Designer March 21st., 2014 – ABC2014 Spring Twitter: #abc2014s Copyright © 2014 Secret Lab, Inc. All rights reserved.
  2. 2. 自己紹介 •  佐藤 伸哉 (@nobsato) •  UXデザイン、デザイン戦略、IA –  神戸芸術工科大学卒、1994からWebのデザイン、主に大規模 な企業サイトの情報設計や企業のグローバル戦略を実行 –  SONYでグループ横断のAndroidプラットフォーム UX戦略、 タブレット戦略を担当 –  米Seesmicで日本語化やAndroidやWP7のアプリ開発 –  UXとデザイン戦略の会社、Secret Lab, Inc.を設立 –  現在、米AKQAの東京オフィスの立ち上げに参画 2
  3. 3. 本日のトピック •  デザイントレンド •  ANDROID UI •  ANDROID WEAR UI 3
  4. 4. デザイントレンド 過去から現在まで 4
  5. 5. 5
  6. 6. スキューモーフィズムから  フラットデザインへ 6
  7. 7. スキューモーフィズムとは •  「スキューモーフィズム(skeuomorphism)とは、他の物質に似せるた めに行うデザインや装飾のことで、たとえば、紙製のカレンダーのよう な外見に似せたカレンダーのソフトウェアのデザインなどがあては まる。」(出展:Wikipedia) 7 スキューモーフィズムの例。 この車の模様は木目調である
  8. 8. 8http://www.flatvsrealism.com/
  9. 9. 9 Kitapps
  10. 10. 10 Android Design, Jelly Bean
  11. 11. 11 Android Design, KitKat
  12. 12. 12 Android 4.4 KitKatAndroid 4.1 Jelly Bean
  13. 13. ANDROID UI  トレンドの変遷 13
  14. 14. 2011 Design Trends 14 HTC Sensation / Sense UI
  15. 15. 2011 Design Trends 15 • 色調が強い背景 • 派手な色 • 白いテキスト • リアル/立体的なアイコン • スキューモUI
  16. 16. 2011 Design Trends 16 HTC Sense UI
  17. 17. 2011 Design Trends 17 au INFOBAR / iida UI
  18. 18. 2012 Design Trends 18 EZ Weather
  19. 19. 2012 Design Trends 19 • 黒/ダークな背景 • ダークでマットな色 • 水色/白いテキスト • リアルなアイコン • グリッドスタイル • ボーダレスUI
  20. 20. 2012 Design Trends 20 Eye In Sky Weather app / cLock Weather Widget UCCW skin
  21. 21. 2012 Design Trends 21 •  リアルなアイコン •  グリッドスタイル •  ボーダレスUI •  黒/ダークな背景 •  ダークでマットな色 •  水色/白いテキスト Google Music
  22. 22. 2013 Design Trends 22 Google Now
  23. 23. 2013 Design Trends 23 • 白/明るい背景 • ビビットな色 • グレー/黒いテキスト • シンプルなアイコンやイラスト • カードスタイル • ボーダレスUI
  24. 24. 2013 Design Trends 24 Google Now
  25. 25. 2013 Design Trends 25 •  白/明るい背景 •  ビビットな色 •  グレー/黒いテキス •  •  カードスタイル •  ボーダレスUI Google Play Music
  26. 26. 2014 Design Trends 26 Yahoo! Weather
  27. 27. 2014 Design Trends 27 •  / 背景 • 半透明/ぼかし/グラデーション • 白/大きなテキスト • シンプルなアイコン • カードスタイル • UI…?(後ほど)
  28. 28. 2014 Design Trends 28 Glass Action Bar https://github.com/ManuelPeinado/GlassActionBar Fading Action Bar https://github.com/ManuelPeinado/FadingActionBar
  29. 29. 2014 Design Trends 29 Android Wear UI
  30. 30. 2014 Design Trends 30 muzei Live Wallpaper
  31. 31. 2014 Design Trends 31 •  / 背景 • 半透明/ぼかし/グラデ • 白/大きなテキスト • シンプルなアイコン • カードスタイル •  UI
  32. 32. 32 Android Wear UI
  33. 33. 33 2014 Design Trends Android.com/Wear
  34. 34. 34 2014 Design Trends 1.  より大きなテキスト 2.  写真・ビジュアルリッチな背景 3.  半透明 4.  グラデーション 5.  トーンを落としたマットな色 6.  サークル UI
  35. 35. Thank You Copyright © 2014 Secret Lab, Inc. All rights reserved. 36 Nobuya Sato Experience Designer nobsato@secret-lab.jp http://twitter.com/nobsato http://google.com/+nobsato http://slideshare.com/nobsato

×