smartphone design convention: android ui/ux design

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) コーヒーショップ　豆の木

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


パターンで考える


そもそもパターンって何？ •  パターン・ランゲージ •  ポストモダン建築家のクリストファー・アレグザンダーが提唱した知識記述の方法

•  建物や街の形態の中に繰り返し現れる法則性を「パターン」と呼び、それを「ランゲージ（言語）」として記述して、共有する方法を考案


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

•  Android Designより

一般的なアプリの階層構造


•  Android Designより

一般的なアプリの階層構造


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

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

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

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


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

ホーム

各情報

各情報の詳細

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




ホーム

各情報

各情報の詳細


トップレベル

カテゴリー

コンテンツ




ホーム

各情報

各情報の詳細


トップレベル

カテゴリー

コンテンツ

第1階層（トップレベルの選択階層）

0階層

第2階層（選択された情報の階層

　　＝カテゴリーレベルの選択）

コンテンツ




ホーム

各情報

各情報の詳細


トップレベル

カテゴリー

コンテンツ

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. (Scrollable Tab)

Pull-down Nav. (Spinners)

Drawer Nav. (Drawer)

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


ABC : :

Visual View Content View Content detail View

ABC : : ABC : :

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


ABC : :

Thumb-Nail List View Simple List View Split View

ABC : : ABC : :

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


ABC : : < ABC : : <

Bottom Action Pull-down Action

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


ABC : :

Edit First Edit Last

ABC : :

基本的なパターン、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 [email protected] http://twitter.com/nobsato http://about.me/nobsato http://slideshare.com/nobsato

smartphone design convention: android ui/ux design

Technology