Developers Summit 2014【13-C-3】Smashing Android UI, Androidデザインの極意
-
Upload
nobuya-sato -
Category
Design
-
view
19 -
download
2
description
Transcript of 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年以来「5年前では実現できなかったアイディアの考案」というテーマで開催。 5つの優秀作品がカンヌ国際クリエイティビティ際で発表され、カンヌへの登録チケットが授与される。
2013 “DESTINY AWAITS”
本日のテーマ
Androidデザインの極意
Copyright © 2014 Secret Lab, Inc. All rights reserved. 9
STORY!からACTION!へ はじめに
10 Copyright © 2014 Secret Lab, Inc. All rights reserved.
Copyright © 2014 Secret Lab, Inc. All rights reserved. 11
Gadgets... Various form factor of Android, in 2010
Gadgets…
Copyright © 2014 Secret Lab, Inc. All rights reserved. 12
Gadgets…
Copyright © 2014 Secret Lab, Inc. All rights reserved. 13
Gadgets…
Copyright © 2014 Secret Lab, Inc. All rights reserved. 14
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が発売!
Copyright © 2014 Secret Lab, Inc. All rights reserved. 16
2008年10月22日、米国でG1が発売!
Copyright © 2014 Secret Lab, Inc. All rights reserved. 17
なんとか11月に入手、無事に深夜にUnlock !!
Copyright © 2014 Secret Lab, Inc. All rights reserved. 18
Android Framework
Copyright © 2014 Secret Lab, Inc. All rights reserved. 19
Android 関係の様々な書籍…
Copyright © 2014 Secret Lab, Inc. All rights reserved. 20
Android デザイン関係の書籍…
Copyright © 2014 Secret Lab, Inc. All rights reserved. 21
Android デザイン関係の書籍…
Copyright © 2014 Secret Lab, Inc. All rights reserved. 22
Android デザイン関係の書籍…
Copyright © 2014 Secret Lab, Inc. All rights reserved. 23
ANDROID // UI PATTERNS
Copyright © 2014 Secret Lab, Inc. All rights reserved. 24
2012年末「SMASHING Android UI」が発売
Copyright © 2014 Secret Lab, Inc. All rights reserved. 25
良質な書籍が無いなら自分で出せばいい…
Copyright © 2014 Secret Lab, Inc. All rights reserved. 26
本日のセッション内容
Androidデザインの極意…
1. スケーラブルなレイアウト レスポンシブUI 2. 繰り返し使えるルールを使う デザインパターン
Copyright © 2014 Secret Lab, Inc. All rights reserved. 27
レスポンシブUI スケーラブルなレイアウト
28 Copyright © 2014 Secret Lab, Inc. All rights reserved.
なぜレスポンシブUIなのか?
Copyright © 2014 Secret Lab, Inc. All rights reserved. 29
なぜレスポンシブなのか?
大きな画面でアプリを表示すると…
Copyright © 2014 Secret Lab, Inc. All rights reserved. 30
なぜレスポンシブなのか?
Copyright © 2014 Secret Lab, Inc. All rights reserved. 31
なぜレスポンシブなのか?
Copyright © 2014 Secret Lab, Inc. All rights reserved. 32
画面を有効に使う
コンテンツの統合 Fragment
Copyright © 2014 Secret Lab, Inc. All rights reserved. 33
画面を有効に使う
コンテンツの統合 Fragmentで複数の画面を表示
Copyright © 2014 Secret Lab, Inc. All rights reserved. 34
画面を有効に使う
コンテンツの統合 CompoundVeiwで表示内容を変更
Copyright © 2014 Secret Lab, Inc. All rights reserved. 35
レスポンシブデザインを理解する
Copyright © 2014 Secret Lab, Inc. All rights reserved. 36
可変領域 可変領域 可変領域
レスポンシブデザインの考え方 例:Webサイト
レスポンシブデザインを理解する
Copyright © 2014 Secret Lab, Inc. All rights reserved. 37
可変領域 可変領域
タブレットでの表示例
可変領域
スマホでの表示例
Androidでのレスポンシブ
Copyright © 2014 Secret Lab, Inc. All rights reserved. 38
一般的なアプリ構造
ランディングページ (リストビュー)
詳細ページ
新規作成
新規作成
詳細表示
新規作成ページ
Androidでのレスポンシブ
Copyright © 2014 Secret Lab, Inc. All rights reserved. 39
ランディングページ (リストビュー)
詳細ページ
Androidでのレスポンシブ
Copyright © 2014 Secret Lab, Inc. All rights reserved. 40
ランディングページ (リストビュー)
詳細ページ
Androidでのレスポンシブ
Copyright © 2014 Secret Lab, Inc. All rights reserved. 41
ランディングページ (リストビュー)
詳細ページ 新規作成ページ?
Androidでのレスポンシブ
Copyright © 2014 Secret Lab, Inc. All rights reserved. 42
ランディングページ (リストビュー)
詳細ページ 新規作成オーバーレイ
Androidでのレスポンシブ、シンプルな構成
Copyright © 2014 Secret Lab, Inc. All rights reserved. 43
アプリの構造はシンプルに
Copyright © 2014 Secret Lab, Inc. All rights reserved. 44
Gmail カレンダー
アプリの構造はシンプルに
Copyright © 2013 Secret Lab, Inc. All rights reserved. 45
ランディングページ (リストビュー)
トップページ (トップレベル)
詳細ページ
ActionBar (ナビゲーション)
デザインパターン 繰り返し使えるルール
46 Copyright © 2013 Secret Lab, Inc. All rights reserved.
DESIGN PATTERNS
Copyright © 2013 Secret Lab, Inc. All rights reserved. 47
ソフトウェアデザインのデザインパターン
• 一般的な問題に対する考えぬかれた解決策の集合知。
• デザイン上の課題を克服する助けになるよう、同じアプローチを形式化するメカニズム
『Design Patterns 』by Gang of Four 邦題『オブジェクト指向における再利用のためのデザインパターン』
(ソフトバンクパブリッシング、1995 年)
Copyright © 2014 Secret Lab, Inc. All rights reserved. 48
パターン・ランゲージ
Copyright © 2014 Secret Lab, Inc. All rights reserved. 49
パタン・ランゲージ―環境設計の手引 by Christopher Alexander
ポストボタン建築家のクリストファー・アレクサンダーが提唱した記憶記述の方法。建築や街の形態の中に繰り返し現れる法則性を「パターン」と予備、それを「ランゲージ(言語)」として記述して共有する方法
UIデザインのデザインパターン
• デザインの構成要素を整理する必要がある場合に使う。
• ユーザーのニーズに基づいて具体的なデザインを組み立てるのに役立つ「ツール」
• デザインしているUIのニーズに合わせて調整が必要。
• 利用すべき状況と利用すべきでない状況がある。
Copyright © 2014 Secret Lab, Inc. All rights reserved. 50
UIデザインのパターン ユーザーアクションのパターン
1. Action Bar
2. Quick Actions
3. Action Drawer
4. Pull-to-Refresh
5. Swipe-to-Dismiss
Copyright © 2014 Secret Lab, Inc. All rights reserved. 51
ナビゲーションとレイアウトのパターン
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
※書籍での流れ
• デザインパターンが解決する問題 ↓
• 解決策 ↓
• 結果 ↓
• 大きな画面への適応 ↓
• 注意点 ↓
• 実装技術
Copyright © 2014 Secret Lab, Inc. All rights reserved. 52
1. Action Bar – Action Barの使用
Copyright © 2014 Secret Lab, Inc. All rights reserved. 53
1. Androidのデザイン言語の特徴的なパターン
2. UIの最上部に配置 3. アプリアイコンとコンテキスト対応のアクションボタンで構成
4. 必要に応じてオーバーフローメニューや他のオプションを追加
1. Action Bar – このパターンが解決する問題
1. コンテキスト対応の重要なアクションの提供
2. 企業のロゴの表示
3. アプリ内での位置感覚
Copyright © 2014 Secret Lab, Inc. All rights reserved. 54
1. Action Bar – 解決策
1. コンテキスト対応の重要なアクションの提供
→ アクションアイテム、アクションオーバーフロ
2. 企業のロゴ
→ 企業・アプリごとのブランディング
3. アプリ内での位置感覚
→ Home/Upボタン(Upアフォーダンス)
Copyright © 2014 Secret Lab, Inc. All rights reserved. 55
アクションアイテム アクション オーバーフロー メニュー
画面タイトルまたは オプションメニュー アプリアイコン
Upインジケーター またはDrawerインジケーター
1. Action Bar – 結果
• 常にもっとも重要なアクションが表示される • 複数のアプリで共通のコンポーネントを提供することで、ユーザーがその機能を期待し、使いやすいと感じるようになる
• 他のアプリからの学習効果 • アプリのメイン機能を使いやすいと感じ、全体のU
Xが向上 Copyright © 2014 Secret Lab, Inc. All rights reserved. 56
1. Action Bar – 追加の機能
• Up/Homeボタン
• ドロップダウンスピナーやタブなどのナビゲーションコントロールのコンテナ
Copyright © 2014 Secret Lab, Inc. All rights reserved. 57
1. Action Bar – 大きな画面への適応
• 簡単に適応 • スペースを活かしてタブナビゲーションを追加したり、ラベル面積を広げる、アクションオーバーフローメニューの一部をメニューバーに移動するなど
• Action BarライブラリやAndroid SDKにより提供されている
Copyright © 2014 Secret Lab, Inc. All rights reserved. 58
1. Action Bar – 注意点
• 指が届く範囲、片手での操作難
• 画面領域の無駄と非表示
• アイコンに基づくアクション
Copyright © 2014 Secret Lab, Inc. All rights reserved. 59
UIデザインのデザインパターン ユーザーアクションのパターン
1. Action Bar
2. Quick Actions
3. Action Drawer
4. Pull-to-Refresh
5. Swipe-to-Dismiss
Copyright © 2014 Secret Lab, Inc. All rights reserved. 60
ナビゲーションとレイアウトのパターン
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
Copyright © 2014 Secret Lab, Inc. All rights reserved. 61
3. Action Drawer
Copyright © 2014 Secret Lab, Inc. All rights reserved. 62
4. Pull-to-Refresh
Copyright © 2014 Secret Lab, Inc. All rights reserved. 63
5. Swipe to Dismiss
Copyright © 2014 Secret Lab, Inc. All rights reserved. 64
6. Stacked Galleries
Copyright © 2014 Secret Lab, Inc. All rights reserved. 65
7. Dashboard
Copyright © 2014 Secret Lab, Inc. All rights reserved. 66
8. Workplace
Copyright © 2014 Secret Lab, Inc. All rights reserved. 67
9. Split View
Copyright © 2014 Secret Lab, Inc. All rights reserved. 68
10. Expand-in-Context
Copyright © 2014 Secret Lab, Inc. All rights reserved. 69
11. Side Navigation
Copyright © 2014 Secret Lab, Inc. All rights reserved. 70
Copyright © 2014 Secret Lab, Inc. All rights reserved. 71
12. Dynamic List
Copyright © 2014 Secret Lab, Inc. All rights reserved. 72
14. Image Placeholder
Copyright © 2014 Secret Lab, Inc. All rights reserved. 73
14. Non-forced Login
15 Drag-to-reorder Handler
Copyright © 2014 Secret Lab, Inc. All rights reserved. 74
アンチ・デザインパターン 使ってはいけないデザインパターン
75 Copyright © 2014 Secret Lab, Inc. All rights reserved.
ANTI-DESIGN PATTERNS
Copyright © 2014 Secret Lab, Inc. All rights reserved. 76
UIデザインのアンチパターン
• よく発生する問題に対して、間違っているにもかかわらず、よく使われてしまっている解決策。
• …とはいえ、特定の例外や制約があって、結局はそのアンチパターンが有効な解決策の場合もある。
Copyright © 2014 Secret Lab, Inc. All rights reserved. 77
UIデザインのアンチパターン
1. スプラッシュ画面 2. チュートリアル画面 3. 確認用ウィンドウ 4. オンスクリーンのBackボタン 5. メニューボタン
6. メニューバーの非表示 7. スワイプオーバーレイQuickアクション 8. Android以外のデザインの適用
Copyright © 2014 Secret Lab, Inc. All rights reserved. 78
ピュア・アンドロイド 純粋なANDROID体験
79 Copyright © 2014 Secret Lab, Inc. All rights reserved.
純粋なAndroid体験
Copyright © 2014 Secret Lab, Inc. All rights reserved. 80
Pure Android 1. 他のプラットフォームの UI 要素を模倣しない 2. プラットフォームに依存の特定のアイコンを流用しない 3. 画面切り替えのナビゲーションを画面下部に置かない 4. 他のアプリへのリンクを直接ハードコードしない 5. アクションバーに戻り先名称を付けたバックボタンを置かない
6. リストアイテムに右向きの “>”(大なり記号)を付けない
最後に まとめ
81 Copyright © 2014 Secret Lab, Inc. All rights reserved.
まとめ • 既存のデザインパターンを利用して効率よく、ユーザーが使いやすいと感じるアプリを作ろう。
• 迷う前にデザインパターンで実装してみる。ほとんどの機能は既存のデザインパターンで解決できる(はず)
• 例外は必ず存在する。それでもアンチパターンを使うことは極力避ける努力をする。
Copyright © 2014 Secret Lab, Inc. All rights reserved. 82
Thank You
Copyright © 2014 Secret Lab, Inc. All rights reserved. 83
Nobuya Sato Experience Designer
http://twitter.com/nobsato
http://about.me/nobsato
http://slideshare.com/nobsato