Mais conteúdo relacionado
Semelhante a Smartphone Design Convention: Android UI/UX Design (12)
Smartphone Design Convention: Android UI/UX Design
- 2. 自己紹介
• 佐藤伸哉 (@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
- 13. パターンで考える
Copyright © 2012 Secret Lab, Inc. All rights reserved. 13
- 14. そもそもパターンって何?
• パターン・ランゲージ
• ポストモダン建築家のクリストファー・アレグザンダ
ーが提唱した知識記述の方法
• 建物や街の形態の中に繰り返し現れる法則性を「パタ
ーン」と呼び、それを「ランゲージ(言語)」として
記述して、共有する方法を考案
『パタン・ランゲージ:環境設計の手引』
(Christopher Alexander, 鹿島出版会, 1984)
※原書は1977年
Copyright © 2012 Secret Lab, Inc. All rights reserved. 14
- 16. 一般的なアプリの階層構造
• Android Designより
トップレベル・ビュー
通常、様々な姿でアプリがサ
ポートしている内容を表示でき
る。同じデータを違ったデザイ
ンで表示する場合もあればまっ
たく異なる機能を提供している
場合がある
カテゴリー・ビュー
データの詳細を表示する画面
詳細または編集ビュー
データを再生または編集する
画面
Copyright © 2012 Secret Lab, Inc. All rights reserved. 16
- 17. 階層構造のより分かり易い考え方
ホーム
各情報への入口
(機能・サービス)
各情報
各情報の詳細
情報の補足
(編集・加工)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 17
- 18. 階層構造のより分かり易い考え方
トップレベル ホーム
各情報への入口
(機能・サービス)
カテゴリー
コンテンツ 各情報
各情報の詳細
情報の補足
(編集・加工)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 18
- 19. 階層構造のより分かり易い考え方
トップレベル ホーム
各情報への入口
(機能・サービス)
カテゴリー
コンテンツ 各情報
各情報の詳細
情報の補足
(編集・加工)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 19
- 20. 階層構造のより分かり易い考え方
トップレベル ホーム
0階層
各情報への入口
(機能・サービス)
カテゴリー 第1階層
(トップレベルの選択階層)
コンテンツ 各情報
第2階層
(選択された情報の階層
=カテゴリーレベルの選択)
各情報の詳細
コンテンツ
情報の補足
(編集・加工)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 20
- 21. 階層構造のより分かり易い考え方
トップレベル ホーム
0階層
各情報への入口
(機能・サービス)
カテゴリー 第1階層
(トップレベルの選択階層)
コンテンツ 各情報
第2階層
(選択された情報の階層
=カテゴリーレベルの選択)
各情報の詳細
コンテンツ
情報の補足
(編集・加工)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 21
- 28. 基本的なパターン
• トップレベルの定番パターン
ABC
:
:
ABC
<
ABC
Tab Nav. Pull-down Nav. Drawer Nav.
(Scrollable Tab) (Spinners)
(Drawer)
Copyright © 2012 Secret Lab, Inc. All rights reserved. 28
- 33. 基本的なパターン、13選
ホーム/トップ
コンテンツページ
詳細ページ
Copyright © 2012 Secret Lab, Inc. All rights reserved. 33
- 34. Android Design
Copyright © 2012 Secret Lab, Inc. All rights reserved. 34
- 35. Android Design
Copyright © 2012 Secret Lab, Inc. All rights reserved. 35
- 36. Design / Patterns
• UIパターン、デザインパターンについて
• http://developer.android.com/design/patterns/
Copyright © 2012 Secret Lab, Inc. All rights reserved. 36
- 41. Thank You
Nobuya Sato
Experience Designer
nobsato@secret-lab.jp
http://twitter.com/nobsato
http://about.me/nobsato
http://slideshare.com/nobsato
Copyright © 2012 Secret Lab, Inc. All rights reserved. 41