デザイン／開発トラック

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 nobsato@secret-lab.jp

http://twitter.com/nobsato

http://google.com/+nobsato

http://slideshare.com/nobsato