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

More Related Content

PDF
ABC2014 Winter: Material Design
PDF
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
PDF
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
PDF
ABC2016 Spring: Mobile App UX & Design Sprint
PDF
スマホサービスにおける、UIデザインのノウハウと実例
PDF
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
PDF
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
PDF
UXデザインをゆるく学ぶ意味
ABC2014 Winter: Material Design
Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
Developers Summit 2013【15-E-3】モバイルファースト再考(Rethinking Mobile First)
ABC2016 Spring: Mobile App UX & Design Sprint
スマホサービスにおける、UIデザインのノウハウと実例
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UXデザインをゆるく学ぶ意味

What's hot (20)

PDF
確実に良くするUI/UX設計
PDF
IoTとUXデザイン
PDF
インターフェイスという名の付く会社が考えるUX
PDF
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
PDF
Prott's design
PDF
ネイティブアプリにおける、UI/インタラクションのトレンド
PDF
UIも大事だよ。という話。@Opt Group Tech Day
PDF
UIは「習うより慣れろ」
PDF
バスキュールに学ぶ、クライアントもユーザーもハッピーになるスマホアプリ企画設計のキモ 先生:大塚 晃
KEY
テックヒルズ
PDF
風呂場で考えるUIデザイナーの未来
PDF
ユーザーの心に刺ささるためには - UX実践編 -
PDF
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
PDF
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
PDF
流行に乗っていいの?フラットデザインの落とし穴
PDF
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
PDF
ニコニコ超デザイン-Metro考察編-
PDF
クックパッドデザイナーが実践するユーザーファースト
PDF
UX / UIデザインって何?
PDF
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
確実に良くするUI/UX設計
IoTとUXデザイン
インターフェイスという名の付く会社が考えるUX
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Prott's design
ネイティブアプリにおける、UI/インタラクションのトレンド
UIも大事だよ。という話。@Opt Group Tech Day
UIは「習うより慣れろ」
バスキュールに学ぶ、クライアントもユーザーもハッピーになるスマホアプリ企画設計のキモ 先生:大塚 晃
テックヒルズ
風呂場で考えるUIデザイナーの未来
ユーザーの心に刺ささるためには - UX実践編 -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
ライブ UI プロトタイピング に向けたマルチ言語環境 SOMETHINGit
流行に乗っていいの?フラットデザインの落とし穴
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
ニコニコ超デザイン-Metro考察編-
クックパッドデザイナーが実践するユーザーファースト
UX / UIデザインって何?
Developers Summit 2013【14-E-4】デザインをするときにデザイナーが考えること〜デザイナーの頭の中〜
Ad

Similar to ABC2014 Spring: UI/UX Design Trends 2014 (20)

PDF
福井で「しあわせデザイナー」になるために
PPTX
モバイルファーストで考える最新トレンドと アダプティブデザイン
PDF
画面じゃなくて体験をデザインしよう!事業サイドとデザイナーで認識を一致させるカスタマージャーニーマップ作成ワークショップ
PDF
次の5年のUIを考える
PPTX
PPTX
Ssi 20150519
PPTX
UXを損ねる静的コンテンツ配信アンチパターン7選
PPTX
2017年1月24日開催「App Talk Night」発表資料
PDF
AppPotモバイルアプリ開発『内製化』
PDF
20160201事業説明 ux測研
PPTX
デザイナーが複業でデザイナーしてる話
PPTX
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
PPTX
if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」
PDF
はじめてのLeanUXから学んだ実体験
PPTX
意味をデザインするを考える
PDF
【オープンセミナー岡山2014】 明日からできるデザイン脳
PDF
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が 失敗するのか?
PDF
時間のムダをゼロにする、リーダーの時間の使い方 先生:芝本秀徳
PDF
Cookpad Techconf@kimura 2016/01/23
PDF
キャラコミュ 20160622
福井で「しあわせデザイナー」になるために
モバイルファーストで考える最新トレンドと アダプティブデザイン
画面じゃなくて体験をデザインしよう!事業サイドとデザイナーで認識を一致させるカスタマージャーニーマップ作成ワークショップ
次の5年のUIを考える
Ssi 20150519
UXを損ねる静的コンテンツ配信アンチパターン7選
2017年1月24日開催「App Talk Night」発表資料
AppPotモバイルアプリ開発『内製化』
20160201事業説明 ux測研
デザイナーが複業でデザイナーしてる話
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
if-up 2019 | A4. 「進化し続けるプロダクトを作るための開発チーム」
はじめてのLeanUXから学んだ実体験
意味をデザインするを考える
【オープンセミナー岡山2014】 明日からできるデザイン脳
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が 失敗するのか?
時間のムダをゼロにする、リーダーの時間の使い方 先生:芝本秀徳
Cookpad Techconf@kimura 2016/01/23
キャラコミュ 20160622
Ad

More from Nobuya Sato (20)

PDF
Google I/O 19 Extended in Kyushu: Design Update
PDF
ABC2018 Autumn: Android PIe UI Design
PDF
ABC2018 Spring: CxD: Conversation Designの理解
PDF
Google I/O 18 Extended in Shinshu: Material Design Update
PDF
Google I/O 17 Recap in Shikoku: Design Sprint Workshop
PDF
Design-JP Vol.02: Lighting Talk: Interaction Idea?
PDF
IA CAMP 2015: As Yet Untitled
PDF
Smartphone Design Convention: Android UI/UX Design
PDF
Find Your Ability: IA for a novice Web Creator
PDF
What’s New on Android Design (for 4.1)
PDF
勘違いだらけのAndroid UIデザイン
PDF
Google I/O 2012 Tokyo Report: Vietnam Carb and Android Design Sessions
PDF
ABC2012 Spring: Android Design for Dummies
PDF
ABC2011 Summer: Android UI and UX for the Tablets
PDF
Android Design Club #1: Introduction to Design
PDF
IA Workshop, Introduction to Information Architecture (2002)
PDF
CSS Nite LP, Disk 7: Seesion3
PDF
CSS Nite In Ginza, Vol.36
PDF
IA Cocktail Hour Tokyo: Introducing IAI
PDF
Webken 03: Project Design for Optimaizing User Experience
Google I/O 19 Extended in Kyushu: Design Update
ABC2018 Autumn: Android PIe UI Design
ABC2018 Spring: CxD: Conversation Designの理解
Google I/O 18 Extended in Shinshu: Material Design Update
Google I/O 17 Recap in Shikoku: Design Sprint Workshop
Design-JP Vol.02: Lighting Talk: Interaction Idea?
IA CAMP 2015: As Yet Untitled
Smartphone Design Convention: Android UI/UX Design
Find Your Ability: IA for a novice Web Creator
What’s New on Android Design (for 4.1)
勘違いだらけのAndroid UIデザイン
Google I/O 2012 Tokyo Report: Vietnam Carb and Android Design Sessions
ABC2012 Spring: Android Design for Dummies
ABC2011 Summer: Android UI and UX for the Tablets
Android Design Club #1: Introduction to Design
IA Workshop, Introduction to Information Architecture (2002)
CSS Nite LP, Disk 7: Seesion3
CSS Nite In Ginza, Vol.36
IA Cocktail Hour Tokyo: Introducing IAI
Webken 03: Project Design for Optimaizing User Experience

ABC2014 Spring: UI/UX Design Trends 2014