Smartphone Design Convention: Android UI/UX Design

Android Design
AndroidのUI/UX デザイン
Android UI/UX Design

Nobuya Sato
Experience Designer
December 21st., 2012

Twitter: #sdkaigi

自己紹介
•  佐藤伸哉 (@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

コーヒーの話

(C) コーヒーショップ豆の木

本日のセッションの内容
•  UIパターンを知り、AndroidらしいUIを作る。


パターンで考える


そもそもパターンって何？
•  パターン・ランゲージ
•  ポストモダン建築家のクリストファー・アレグザンダ
ーが提唱した知識記述の方法
•  建物や街の形態の中に繰り返し現れる法則性を「パタ
ーン」と呼び、それを「ランゲージ（言語）」として
記述して、共有する方法を考案

『パタン・ランゲージ：環境設計の手引』
（Christopher Alexander, 鹿島出版会, 1984）
※原書は1977年


一般的なアプリの階層構造
•  Android Designより


一般的なアプリの階層構造
•  Android Designより
トップレベル・ビュー
通常、様々な姿でアプリがサ
ポートしている内容を表示でき
る。同じデータを違ったデザイ
ンで表示する場合もあればまっ
たく異なる機能を提供している
場合がある

カテゴリー・ビュー
データの詳細を表示する画面

詳細または編集ビュー
データを再生または編集する
画面


階層構造のより分かり易い考え方

ホーム

各情報への入口
（機能・サービス）

各情報

各情報の詳細

情報の補足
（編集・加工）


トップレベルホーム

カテゴリー

コンテンツ各情報

各情報の詳細

情報の補足



カテゴリー


各情報の詳細

情報の補足


0階層

カテゴリー第1階層
（トップレベルの選択階層）

第2階層
（選択された情報の階層
＝カテゴリーレベルの選択）

各情報の詳細
コンテンツ

情報の補足

具体的に実装した例
•  Google Maps


階層構造を使い易くするコツはAction Bar！

とTab (Swipe View)


Action Barについてさらに詳しくは
•  http://developer.android.com/guide/topics/ui/actionbar.html


大切なのでもう一度、
Action Bar を実装しよう！


画面の基本的なパターンを知る
•  トップレベル、カテゴリーレベル、それぞれの定番？


基本的なパターン＝画面の構成
•  Androidの基本画面の考え方は実はシンプル

トップのナビゲーション
（第一階層）

コンテンツ
・情報の表示
・情報の編集/加工


基本的なパターン
•  トップレベルの定番パターン

ABC
:
:
ABC
<
ABC

Tab Nav. Pull-down Nav. Drawer Nav.
(Scrollable Tab) (Spinners)
(Drawer)


•  コンテンツレベル、情報の表示の定番パターン.1

ABC
:
:
ABC
:
:
ABC
:
:

Visual View Content View
Content detail View


•  コンテンツレベル、情報の表示の定番パターン.2

ABC
:
:
ABC
:
:
ABC
:
:

Thumb-Nail List View Simple List View
Split View


•  コンテンツレベル、情報のアクションの定番パターン

<
ABC
:
:
<
ABC
:
:

Bottom Action Pull-down Action


•  コンテンツレベル、情報の可能／編集の定番パターン

ABC
:
:
ABC
:
:

Edit First Edit Last


基本的なパターン、13選
ホーム/トップ

コンテンツページ

詳細ページ


Android Design


Design / Patterns
•  UIパターン、デザインパターンについて
•  http://developer.android.com/design/patterns/


まとめ
•  アプリの構造、提供したい機能をしっかり考える

•  まずは定番の画面パターンの基本を知り、それを自身
のサービスやアプリに当てはめてみる。そこから正し
い画面に展開していく


アプリの使い易さを良くするコツ
•  情報をどう見せるかがとても重要

(C) Mark Challinor

•  最初から開発に走らず、しっかりとペーパープロトで
動線やレイアウトの検証を行う


http://www.mobileorchestra.com


Thank You

Nobuya Sato
Experience Designer
nobsato@secret-lab.jp
http://twitter.com/nobsato

http://about.me/nobsato
http://slideshare.com/nobsato


Smartphone Design Convention: Android UI/UX Design

Recommended

Recommended

More Related Content

Similar to Smartphone Design Convention: Android UI/UX Design

Similar to Smartphone Design Convention: Android UI/UX Design (12)

More from Nobuya Sato

More from Nobuya Sato (17)

Recently uploaded

Recently uploaded (9)

Smartphone Design Convention: Android UI/UX Design