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

3

4

Nike+ Training Club

WWF Together

5

6

Nike+ Kinect Training

Future Lions

7

8

Future Lions

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

2013 “DESTINY AWAITS”

本日のテーマ

Androidデザインの極意


STORY!からACTION!へはじめに

10 Copyright © 2014 Secret Lab, Inc. All rights reserved.


Gadgets... Various form factor of Android, in 2010

Gadgets…


Gadgets…


Gadgets…


Inside of HTC EVO 4G

When travel around the world…

Copyright © 2014 Secret Lab, Inc. All rights reserved. 15 From Left to Right: Samsung Instinct, HTC G1, NTT DoCoMo So9051, Palm Pre

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


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


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


Android Framework


Android 関係の様々な書籍…


Android デザイン関係の書籍…






ANDROID // UI PATTERNS


2012年末「SMASHING Android UI」が発売


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


本日のセッション内容

Androidデザインの極意…

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


レスポンシブUI スケーラブルなレイアウト


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


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

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






画面を有効に使う

コンテンツの統合 Fragment



コンテンツの統合 Fragmentで複数の画面を表示



コンテンツの統合 CompoundVeiwで表示内容を変更


レスポンシブデザインを理解する


可変領域可変領域可変領域

レスポンシブデザインの考え方例：Webサイト

レスポンシブデザインを理解する


可変領域可変領域

タブレットでの表示例

可変領域

スマホでの表示例

Androidでのレスポンシブ


一般的なアプリ構造

ランディングページ（リストビュー）

詳細ページ

新規作成

新規作成

詳細表示

新規作成ページ




詳細ページ




詳細ページ




詳細ページ新規作成ページ？




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

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


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


Gmail カレンダー

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



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

詳細ページ

ActionBar （ナビゲーション）

デザインパターン繰り返し使えるルール


DESIGN PATTERNS


ソフトウェアデザインのデザインパターン

•  一般的な問題に対する考えぬかれた解決策の集合知。

•  デザイン上の課題を克服する助けになるよう、同じアプローチを形式化するメカニズム

『Design Patterns 』by Gang of Four 　邦題『オブジェクト指向における再利用のためのデザインパターン』

　(ソフトバンクパブリッシング、1995 年)


パターン・ランゲージ


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

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

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

•  デザインの構成要素を整理する必要がある場合に使う。

•  ユーザーのニーズに基づいて具体的なデザインを組み立てるのに役立つ「ツール」

•  デザインしているUIのニーズに合わせて調整が必要。

•  利用すべき状況と利用すべきでない状況がある。


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

1.  Action Bar

2.  Quick Actions

3.  Action Drawer

4.  Pull-to-Refresh

5.  Swipe-to-Dismiss


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

6.  Stacked Galleries

7.  Dashboard

8.  Workspace

9.  Split View

10. Expand-in-Context

11. Side Navigation

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

12. Dynamic List

13. Image Placeholder

14. Non-Forced Login

15. Drag-to-Reorder Handle

※書籍での流れ

•  デザインパターンが解決する問題 ↓

•  解決策 ↓

•  結果 ↓

•  大きな画面への適応 ↓

•  注意点 ↓

•  実装技術


1. Action Bar – Action Barの使用


1.  Androidのデザイン言語の特徴的なパターン

2.  UIの最上部に配置 3.  アプリアイコンとコンテキスト対応のアクションボタンで構成

4.  必要に応じてオーバーフローメニューや他のオプションを追加

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

1.  コンテキスト対応の重要なアクションの提供

2.  企業のロゴの表示

3.  アプリ内での位置感覚


1. Action Bar – 解決策

1.  コンテキスト対応の重要なアクションの提供

→ アクションアイテム、アクションオーバーフロ

2.  企業のロゴ

　→ 企業・アプリごとのブランディング

3.  アプリ内での位置感覚

→ Home/Upボタン（Upアフォーダンス）


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

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

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

1. Action Bar – 結果

•  常にもっとも重要なアクションが表示される •  複数のアプリで共通のコンポーネントを提供することで、ユーザーがその機能を期待し、使いやすいと感じるようになる

•  他のアプリからの学習効果 •  アプリのメイン機能を使いやすいと感じ、全体のU

Xが向上 Copyright © 2014 Secret Lab, Inc. All rights reserved. 56

1. Action Bar – 追加の機能

•  Up/Homeボタン

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


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

•  簡単に適応 •  スペースを活かしてタブナビゲーションを追加したり、ラベル面積を広げる、アクションオーバーフローメニューの一部をメニューバーに移動するなど

•  Action BarライブラリやAndroid SDKにより提供されている


1. Action Bar – 注意点

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

•  画面領域の無駄と非表示

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


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

1.  Action Bar

2.  Quick Actions

3.  Action Drawer

4.  Pull-to-Refresh

5.  Swipe-to-Dismiss


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

6.  Stacked Galleries

7.  Dashboard

8.  Workspace

9.  Split View

10. Expand-in-Context

11. Side Navigation

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

12. Dynamic List

13. Image Placeholder

14. Non-Forced Login

15. Drag-to-Reorder Handle

2. Quick Actions


3. Action Drawer


4. Pull-to-Refresh


5. Swipe to Dismiss


6. Stacked Galleries


7. Dashboard


8. Workplace


9. Split View


10. Expand-in-Context


11. Side Navigation



12. Dynamic List


14. Image Placeholder


14. Non-forced Login

15 Drag-to-reorder Handler


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


ANTI-DESIGN PATTERNS


UIデザインのアンチパターン

•  よく発生する問題に対して、間違っているにもかかわらず、よく使われてしまっている解決策。

•  …とはいえ、特定の例外や制約があって、結局はそのアンチパターンが有効な解決策の場合もある。


UIデザインのアンチパターン

1.  スプラッシュ画面 2.  チュートリアル画面 3.  確認用ウィンドウ 4.  オンスクリーンのBackボタン 5.  メニューボタン

6.  メニューバーの非表示 7.  スワイプオーバーレイQuickアクション 8.  Android以外のデザインの適用


ピュア・アンドロイド純粋なANDROID体験


純粋なAndroid体験


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

6.  リストアイテムに右向きの “>”(大なり記号)を付けない

最後にまとめ


まとめ •  既存のデザインパターンを利用して効率よく、ユーザーが使いやすいと感じるアプリを作ろう。

•  迷う前にデザインパターンで実装してみる。ほとんどの機能は既存のデザインパターンで解決できる（はず）

•  例外は必ず存在する。それでもアンチパターンを使うことは極力避ける努力をする。


Thank You


Nobuya Sato Experience Designer

[email protected]

http://twitter.com/nobsato

http://about.me/nobsato

http://slideshare.com/nobsato