ABC2014 Spring: UI/UX Design Trends 2014
-
Upload
nobuya-sato -
Category
Design
-
view
1.394 -
download
4
description
Transcript of ABC2014 Spring: UI/UX Design Trends 2014
デザイン/開発トラック
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
スキューモーフィズムの例。 この車の模様は木目調である
8 http://www.flatvsrealism.com/�
9
Kitapps�
10
Android Design, Jelly Bean�
11
Android Design, KitKat�
12
Android 4.4 KitKat�Android 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 [email protected]
http://twitter.com/nobsato
http://google.com/+nobsato
http://slideshare.com/nobsato