smartphone design convention: android ui/ux design
Post on 14-Dec-2014
3.984 Views
Preview:
DESCRIPTION
TRANSCRIPT
Nobuya Sato Experience Designer December 21st., 2012
Twitter: #sdkaigi
Android Design
AndroidのUI/UX デザイン Android UI/UX Design
自己紹介 • 佐藤伸哉 (@nobsato) • UXデザイン、デザイン戦略、IA
– 1994年からWebデザイン
– Webエージェンシーて、主に大規模な企業サイトの情報設計や企業のグローバル戦略を実行
– Sonyのデザイン部門てグループ横断のAndroidのプラットフォーム戦略やタブレット戦略
– 米Seesmicて日本語化やAndroidやWP7のアプリ開発
– UXとデザイン戦略の会社、Secret Lab, Inc.を設立
– 現在、米AKQAでUE統括ディレクターとして東京オフィスの立ち上げに参画
Copyright © 2012 Secret Lab, Inc. All rights reserved. 2
コーヒーの話
Copyright © 2012 Secret Lab, Inc. All rights reserved. 3 (C) コーヒーショップ 豆の木
Copyright © 2012 Secret Lab, Inc. All rights reserved. 4
Copyright © 2012 Secret Lab, Inc. All rights reserved. 5
Copyright © 2012 Secret Lab, Inc. All rights reserved. 6
Copyright © 2012 Secret Lab, Inc. All rights reserved. 7
Copyright © 2012 Secret Lab, Inc. All rights reserved. 8
Copyright © 2012 Secret Lab, Inc. All rights reserved. 9
Copyright © 2012 Secret Lab, Inc. All rights reserved. 10
Copyright © 2012 Secret Lab, Inc. All rights reserved. 11
本日のセッションの内容 • UIパターンを知り、AndroidらしいUIを作る。
Copyright © 2012 Secret Lab, Inc. All rights reserved. 12
パターンで考える
Copyright © 2012 Secret Lab, Inc. All rights reserved. 13
そもそもパターンって何? • パターン・ランゲージ • ポストモダン建築家のクリストファー・アレグザンダーが提唱した知識記述の方法
• 建物や街の形態の中に繰り返し現れる法則性を「パターン」と呼び、それを「ランゲージ(言語)」として記述して、共有する方法を考案
Copyright © 2012 Secret Lab, Inc. All rights reserved. 14
『パタン・ランゲージ:環境設計の手引』 (Christopher Alexander, 鹿島出版会, 1984) ※原書は1977年
• Android Designより
一般的なアプリの階層構造
Copyright © 2012 Secret Lab, Inc. All rights reserved. 15
• Android Designより
一般的なアプリの階層構造
Copyright © 2012 Secret Lab, Inc. All rights reserved. 16
カテゴリー・ビュー データの詳細を表示する画面
トップレベル・ビュー 通常、様々な姿でアプリがサポートしている内容を表示できる。同じデータを違ったデザインで表示する場合もあればまったく異なる機能を提供している場合がある
詳細または編集ビュー データを再生または編集する画面
階層構造のより分かり易い考え方
Copyright © 2012 Secret Lab, Inc. All rights reserved. 17
各情報への入口 (機能・サービス)
ホーム
各情報
各情報の詳細
情報の補足 (編集・加工)
階層構造のより分かり易い考え方
Copyright © 2012 Secret Lab, Inc. All rights reserved. 18
各情報への入口 (機能・サービス)
ホーム
各情報
各情報の詳細
情報の補足 (編集・加工)
トップレベル
カテゴリー
コンテンツ
階層構造のより分かり易い考え方
Copyright © 2012 Secret Lab, Inc. All rights reserved. 19
各情報への入口 (機能・サービス)
ホーム
各情報
各情報の詳細
情報の補足 (編集・加工)
トップレベル
カテゴリー
コンテンツ
階層構造のより分かり易い考え方
Copyright © 2012 Secret Lab, Inc. All rights reserved. 20
各情報への入口 (機能・サービス)
ホーム
各情報
各情報の詳細
情報の補足 (編集・加工)
トップレベル
カテゴリー
コンテンツ
第1階層 (トップレベルの選択階層)
0階層
第2階層 (選択された情報の階層
=カテゴリーレベルの選択)
コンテンツ
階層構造のより分かり易い考え方
Copyright © 2012 Secret Lab, Inc. All rights reserved. 21
各情報への入口 (機能・サービス)
ホーム
各情報
各情報の詳細
情報の補足 (編集・加工)
トップレベル
カテゴリー
コンテンツ
0階層
第1階層 (トップレベルの選択階層)
第2階層 (選択された情報の階層
=カテゴリーレベルの選択)
コンテンツ
具体的に実装した例 • Google Maps
Copyright © 2012 Secret Lab, Inc. All rights reserved. 22
階層構造を使い易くするコツはAction Bar!
Copyright © 2012 Secret Lab, Inc. All rights reserved. 23
とTab (Swipe View)
Action Barについてさらに詳しくは • http://developer.android.com/guide/topics/ui/actionbar.html
Copyright © 2012 Secret Lab, Inc. All rights reserved. 24
大切なのでもう一度、 Action Bar を実装しよう!
Copyright © 2012 Secret Lab, Inc. All rights reserved. 25
画面の基本的なパターンを知る • トップレベル、カテゴリーレベル、それぞれの定番?
Copyright © 2012 Secret Lab, Inc. All rights reserved. 26
基本的なパターン=画面の構成 • Androidの基本画面の考え方は実はシンプル
Copyright © 2012 Secret Lab, Inc. All rights reserved. 27
トップのナビゲーション (第一階層)
コンテンツ ・情報の表示
・情報の編集/加工
基本的なパターン • トップレベルの定番パターン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 28
ABC : : ABC ABC <
Tab Nav. (Scrollable Tab)
Pull-down Nav. (Spinners)
Drawer Nav. (Drawer)
基本的なパターン • コンテンツレベル、情報の表示の定番パターン.1
Copyright © 2012 Secret Lab, Inc. All rights reserved. 29
ABC : :
Visual View Content View Content detail View
ABC : : ABC : :
基本的なパターン • コンテンツレベル、情報の表示の定番パターン.2
Copyright © 2012 Secret Lab, Inc. All rights reserved. 30
ABC : :
Thumb-Nail List View Simple List View Split View
ABC : : ABC : :
基本的なパターン • コンテンツレベル、情報のアクションの定番パターン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 31
ABC : : < ABC : : <
Bottom Action Pull-down Action
基本的なパターン • コンテンツレベル、情報の可能/編集の定番パターン
Copyright © 2012 Secret Lab, Inc. All rights reserved. 32
ABC : :
Edit First Edit Last
ABC : :
基本的なパターン、13選
Copyright © 2012 Secret Lab, Inc. All rights reserved. 33
ホーム/トップ
コンテンツページ
詳細ページ
Android Design
Copyright © 2012 Secret Lab, Inc. All rights reserved. 34
Android Design
Copyright © 2012 Secret Lab, Inc. All rights reserved. 35
Design / Patterns • UIパターン、デザインパターンについて • http://developer.android.com/design/patterns/
Copyright © 2012 Secret Lab, Inc. All rights reserved. 36
まとめ • アプリの構造、提供したい機能をしっかり考える
• まずは定番の画面パターンの基本を知り、それを自身のサービスやアプリに当てはめてみる。そこから正しい画面に展開していく
Copyright © 2012 Secret Lab, Inc. All rights reserved. 37
アプリの使い易さを良くするコツ • 情報をどう見せるかがとても重要
• 最初から開発に走らず、しっかりとペーパープロトで動線やレイアウトの検証を行う
Copyright © 2012 Secret Lab, Inc. All rights reserved. 38
(C) Mark Challinor
39
Copyright © 2012 Secret Lab, Inc. All rights reserved. 40
http://www.mobileorchestra.com
Thank You
Copyright © 2012 Secret Lab, Inc. All rights reserved. 41
Nobuya Sato Experience Designer nobsato@secret-lab.jp http://twitter.com/nobsato http://about.me/nobsato http://slideshare.com/nobsato
top related