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の東京オフィスの立ち上げに参画

Nike+ Training Club

WWF Together

Nike+ Kinect Training

Future Lions

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

2013 “DESTINY AWAITS”

本日のテーマ

Androidデザインの極意

STORY!からACTION!へはじめに

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

Gadgets…

Inside of HTC EVO 4G

When travel around the world…

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

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

nobsato@secret-lab.jp

http://twitter.com/nobsato

http://about.me/nobsato

http://slideshare.com/nobsato

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

Design

Smashing Exams

Kelly Reemtsen: Smashing

Kasza smashing the_jars

Best o Smashing

Smashing Metrics

Smashing Fashing

Alph Smashing Security

Smashing Pumpkins

Smashing Fun Magazine 4

Smashing pumpkins - data.bnf.fr · Smashing pumpkins : œuvres (104 ressources dans data.bnf.fr) Œuvres audiovisuelles (y compris radio) (8) Oceania (2013) avec Smashing pumpkins

Smashing thestack

App smashing

THE SMASHING V062013 AUGUST - Amazon Web Servicesmightydeals.s3.amazonaws.com/dealimages/smashing/Smashing-Li… · Customer Support 3. The Psychology Of Human Behavior On The Web

Best of Smashing Magazine - To Smashing 05 Years

Smashing Pumpkins- 1979

Smashing Web Apps

Smashing the Stack

Smashing Node.js

Smashing pumkins

Hedengren/Smashing WordPress