Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意

Smashing Android UI
Androidデザインの極意
Session:【13-C-3】
Nobuya Sato
Experience Designer
February 13th., 2014
Twitter: #devsumiC

自己紹介
•  佐藤伸哉 (@nobsato)
•  UXデザイン、デザイン戦略、情報設計
–  神戸芸術工科大学でプロダクトデザインを専攻、
その後、1994からCD-ROMやゲーム、Webデザイン
–  主に大規模な企業サイトの情報設計や企業のグロ
ーバル戦略を実行
–  Sonyでニューモバイル戦略やグループ横断のプラ
ットフォーム戦略、タブレット戦略を担当
–  UXとデザイン戦略の会社、Secret Lab, Inc.を設立
–  現在、欧米大手クリエイティブエージェンシー
AKQAの東京オフィスの立ち上げに参画
Copyright © 2014 Secret Lab, Inc. All rights reserved.

2

Future Lions

2013 “DESTINY AWAITS

AKQAによる全世界の学生
を対象にしたコンペ。
2005年以来「５年前では
実現できなかったアイディ
アの考案」というテーマで
開催。
５つの優秀作品がカンヌ国
際クリエイティビティ際で
発表され、カンヌへの登録
チケットが授与される。
8

本日のテーマ

Androidデザインの極意


9

はじめに

STORY!からACTION!へ


10

Various form factor of Android,
in 2010

Gadgets...


11

Gadgets…


12

Gadgets…


13

Gadgets…

Inside of HTC EVO 4G


14

When travel around the world…


From Left to Right:
15
Samsung Instinct, HTC G1, NTT DoCoMo So9051, Palm Pre

2008年10月22日、米国でG1が発売！


16

2008年10月22日、米国でG1が発売！


17

なんとか11月に入手、無事に深夜にUnlock !!


18

Android Framework


19

Android 関係の様々な書籍…


20

Android デザイン関係の書籍…


21



22



23

ANDROID // UI PATTERNS


24

2012年末「SMASHING Android UI」が発売


25

良質な書籍が無いなら自分で出せばいい…


26

本日のセッション内容

Androidデザインの極意…

1.  スケーラブルなレイアウト
レスポンシブUI
2.  繰り返し使えるルールを使う
デザインパターン


27

スケーラブルなレイアウト

レスポンシブUI


28

なぜレスポンシブUIなのか？


29

なぜレスポンシブなのか？

大きな画面でアプリを表示すると…


30



31



32

画面を有効に使う

コンテンツの統合
Fragment


33


Fragmentで複数の画面を表示


34


CompoundVeiwで表示内容を変更


35

レスポンシブデザインを理解する
レスポンシブデザインの考え方
例：Webサイト

可変領域

可変領域


可変領域

36

レスポンシブデザインを理解する
タブレットでの表示例

可変領域

スマホでの表示例

可変領域


可変領域

37

Androidでのレスポンシブ
一般的なアプリ構造
詳細表示

新規作成

ランディングページ
（リストビュー）
新規作成ページ

新規作成

詳細ページ


38


詳細ページ


39


詳細ページ


40

新規作成ページ？

詳細ページ


41

詳細ページ
新規作成オーバーレイ


42

Androidでのレスポンシブ、シンプルな構成


43

アプリの構造はシンプルに
Gmail

カレンダー


44

アプリの構造はシンプルに
ActionBar
（ナビゲーション）

トップページ
（トップレベル）


詳細ページ


45

繰り返し使えるルール

デザインパターン


46

DESIGN PATTERNS


47

ソフトウェアデザインのデザインパターン
•  一般的な問題に対する考えぬかれた解決策の集合知。
•  デザイン上の課題を克服する助けになるよう、同じア
プローチを形式化するメカニズム

『Design Patterns 』by Gang of Four
邦題『オブジェクト指向における再利用のためのデザインパターン』
(ソフトバンクパブリッシング、1995 年)


48

パターン・ランゲージ
ポストボタン建築家のクリストファー・アレクサンダーが提唱した記
憶記述の方法。建築や街の形態の中に繰り返し現れる法則性を「パ
ターン」と予備、それを「ランゲージ（言語）」として記述して共有
する方法

パタン・ランゲージ―環境設計の手引
by Christopher Alexander

49

UIデザインのデザインパターン
•  デザインの構成要素を整理する必要がある場合に使う。
•  ユーザーのニーズに基づいて具体的なデザインを組み
立てるのに役立つ「ツール」
•  デザインしているUIのニーズに合わせて調整が必要。
•  利用すべき状況と利用すべきでない状況がある。


50

UIデザインのパターン
ユーザーアクションのパターン

ナビゲーションとレイアウトのパターン

1.  Action Bar

6.  Stacked Galleries

2.  Quick Actions

7.  Dashboard

3.  Action Drawer

8.  Workspace

4.  Pull-to-Refresh

9.  Split View

5.  Swipe-to-Dismiss

10. Expand-in-Context
11. Side Navigation

データのデザインパターン

12. Dynamic List

14. Non-Forced Login

13. Image Placeholder

15. Drag-to-Reorder Handle


51

※書籍での流れ
•  デザインパターンが解決する問題
↓
•  解決策
↓
•  結果
↓
•  大きな画面への適応
↓
•  注意点
↓
•  実装技術

52

1. Action Bar – Action Barの使用

1.  Androidのデザイン言語の
特徴的なパターン
2.  UIの最上部に配置
3.  アプリアイコンとコンテ
キスト対応のアクション
ボタンで構成
4.  必要に応じてオーバーフ
ローメニューや他のオプ
ションを追加

53

1. Action Bar – このパターンが解決する問題

1.  コンテキスト対応の重要なア
クションの提供
2.  企業のロゴの表示
3.  アプリ内での位置感覚


54

1. Action Bar – 解決策
1.  コンテキスト対応の重要なアクションの提供
→ アクションアイテム、アクションオーバーフロ
2.  企業のロゴ
→ 企業・アプリごとのブランディング
3.  アプリ内での位置感覚
→ Home/Upボタン（Upアフォーダンス）
アプリアイコン

画面タイトルまたは
オプションメニュー

アクションアイテム

アクション
オーバーフロー
メニュー

Upインジケーター
またはDrawerインジケーター

55

1. Action Bar – 結果

• 
• 

• 
• 

常にもっとも重要なアクションが表示される
複数のアプリで共通のコンポーネントを提供するこ
とで、ユーザーがその機能を期待し、使いやすいと
感じるようになる
他のアプリからの学習効果
アプリのメイン機能を使いやすいと感じ、全体のU
Xが向上

56

1. Action Bar – 追加の機能
• 

Up/Homeボタン

• 

ドロップダウンスピナーやタブ
などのナビゲーションコントロ
ールのコンテナ


57

1. Action Bar – 大きな画面への適応

• 
• 

• 

簡単に適応
スペースを活かしてタブナビゲーションを追加し
たり、ラベル面積を広げる、アクションオーバーフ
ローメニューの一部をメニューバーに移動するなど
Action BarライブラリやAndroid SDKにより提供され
ている

58

1. Action Bar – 注意点
• 

指が届く範囲、片手での操作難

• 

画面領域の無駄と非表示

• 

アイコンに基づくアクション


59

UIデザインのデザインパターン
ユーザーアクションのパターン

ナビゲーションとレイアウトのパターン

1.  Action Bar

6.  Stacked Galleries

2.  Quick Actions

7.  Dashboard

3.  Action Drawer

8.  Workspace

4.  Pull-to-Refresh

9.  Split View

5.  Swipe-to-Dismiss

10. Expand-in-Context
11. Side Navigation

データのデザインパターン

12. Dynamic List

14. Non-Forced Login

13. Image Placeholder

15. Drag-to-Reorder Handle


60

2. Quick Actions


61

3. Action Drawer


62

4. Pull-to-Refresh


63

5. Swipe to Dismiss


64

6. Stacked Galleries


65

7. Dashboard


66

8. Workplace


67

9. Split View


68

10. Expand-in-Context


69

11. Side Navigation


70

12. Dynamic List


71

14. Image Placeholder


72

14. Non-forced Login


73

15 Drag-to-reorder Handler


74

使ってはいけないデザインパターン

アンチ・デザインパターン


75

ANTI-DESIGN PATTERNS


76

UIデザインのアンチパターン
•  よく発生する問題に対して、間違っているにもかかわ
らず、よく使われてしまっている解決策。
•  …とはいえ、特定の例外や制約があって、結局はその
アンチパターンが有効な解決策の場合もある。


77

UIデザインのアンチパターン
1.  スプラッシュ画面
2.  チュートリアル画面
3.  確認用ウィンドウ
4.  オンスクリーンのBackボタン
5.  メニューボタン
6.  メニューバーの非表示
7.  スワイプオーバーレイQuickアクション
8.  Android以外のデザインの適用


78

純粋なANDROID体験

ピュア・アンドロイド


79

純粋なAndroid体験

Pure Android
1.  他のプラットフォームの UI 要素を模倣しない
2.  プラットフォームに依存の特定のアイコンを流用しない
3.  画面切り替えのナビゲーションを画面下部に置かない
4.  他のアプリへのリンクを直接ハードコードしない
5.  アクションバーに戻り先名称を付けたバックボタン
を置かない
6.  リストアイテムに右向きの “>”(大なり記号)を付けない


80

まとめ

最後に


81

まとめ
•  既存のデザインパターンを利用して効率よく、ユーザ
ーが使いやすいと感じるアプリを作ろう。
•  迷う前にデザインパターンで実装してみる。ほとんど
の機能は既存のデザインパターンで解決できる（はず）
•  例外は必ず存在する。それでもアンチパターンを使う
ことは極力避ける努力をする。


82

Thank You

Nobuya Sato
Experience Designer
nobsato@secret-lab.jp
http://twitter.com/nobsato
http://about.me/nobsato
http://slideshare.com/nobsato

83

Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意

Similar to Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意 (20)

More from Nobuya Sato

More from Nobuya Sato (19)

Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意