(Japanese only)

9/10/2012 15:30追記: 「Android アプリ UI/UX デザイン ことはじめ」ライブ放送をご視聴いただいた方、ありがとうございました。 下記にアウトライン/まとめを掲載いたします

動画 [JP 日本語] Android アプリ UI/UX デザイン ことはじめ
概要 http://goo.gl/l6PwH
Google Developers Live ページ
https://developers.google.com/live/shows/ahNzfmdvb2dsZS1kZXZlbG9wZXJzcg4LEgVFdmVudBiI1NgDDA/


Here's an outline of today's broadcast.  本日の放送のアウトラインは下記のとおりです。

--------------------------
Android アプリ UI/UX デザイン ことはじめ

グーグル株式会社  Android デベロッパーリレーションズ デベロッパーアドボケイト
松内 良介  Ryosuke Matsuuchi

グーグル株式会社  Android コンテンツ開拓担当 日本統括マネージャー
吉嗣 浩隆  Hirotaka Yoshitsugu

9/10/2012

--------------------------------
今日のテーマ: より Android らしい、素敵なユーザー体験を提供するために

(a) 使いやすい Android アプリとは?
Android Design ガイドライン、 今年の Google I/O 2012 からトピック紹介

(b) 推奨事項について

(b-1) Android らしい UI Pattern の活用 (Action Bar, Swipe View, Scrollable Tab)

(b-2) Back ボタンへの適切な対応
ナビゲーションは標準の Back ボタン、 Up (Action Bar) を用いてデザインしてください
ゲームの場合は 独自の世界観を表現するために 別途配慮が必要
Android 標準の習慣と異なるボタンがタイトルバー部分に配置されていると混乱を呼びます
悪い例: 標準 Back ボタンと異なる挙動をする [戻る] ボタン、 文字で表現された [編集] [完了] ボタン、 画面左上をタップすると「一覧リスト」が子供ウィンドウでポップアップするなど

(c) おすすめしない UI/UX

(c-1) やたらに Web のように縦スクロールを強制しない
- 悪い例: 画面を下までスクロールしていかないと必要なボタンやメニューが出てこない、など

(c-2) 要件定義の段階の機能リストをそのまま UI/UX に並べてみた、というアプリは残念な状況になることが多いのでご注意ください



--------------------------------
Android OS の UI/UX の進化

2010.05.20 Android 2.2 (Froyo)
2010.12.06 Android 2.3 (Gingerbread)
2011.02.22 Android 3.0 (Honeycomb)
タブレット対応
Android UI/UX の大きな進化
"Holo" theme 導入
Action Bar の標準 API 化
2011.10.18 Android 4.0 (Ice Cream Sandwich)
携帯OS/タブレットOSの統合
2012.06.27 Android 4.1 (Jelly Bean)
全体的なチューニング、画面描画の円滑化、 Nexus 7

現在の分布 : (4+, 3, 2.3, 2.2, 2.1-) = (16.7%, 2.3%, 60.6%, 15.5%, 4.9%)
http://developer.android.com/about/dashboards/index.html





--------------------------------
Android Design ガイドライン (2012.01.12公開)

(a) 2012/1/12 Android Design ガイドライン公開
http://developer.android.com/design/index.html

(b) すべての Android ユーザーにスマートフォン / タブレットらしい、リッチで美しいユーザー体験を楽しんでもらえることが願いです。
Android 関連の Web サイト (SDK ドキュメントを含む) を すべて Android Design ガイドラインに沿ったデザインに変更されました 

(c) Android OS の標準UI/UX、および Google製の Android アプリは基本的に このガイドラインに沿って開発されています
標準ガイドラインから あまりにかけ離れたアプリ体験は、 ユーザーの人が混乱する一因になります

Google Play でユーザーの高評価を獲得して検索結果やランキングで上位に行くためにも、ガイドラインをご活用ください

関連ニュース
[ビデオ] Matias Duarte interview: Android Design guidelines announcement.  The Verge.  Jan 12, 2012.
Matias Duarte interview: Android Design guidelines announcement
[ビデオ] On The Verge, Episode 001: Matias Duarte.  The Verge.  Nov 15, 2011.
On The Verge - Matias Duarte - On The Verge, Episode 001
Exclusive: Matias Duarte on the philosophy of Android, and an in-depth look at Ice Cream Sandwich.  The Verge.  Oct 18, 2011.
http://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/


--------------------------------
さまざまなカテゴリの UI/UX デザイン

(a) デザインにおいて重要な考え方は Desktop / Web / モバイル Web / モバイルアプリどれも同じ

(b) それぞれに違った進化を続けている

(c) Web / モバイルWeb の場合は、どのプラットフォームでも ほぼ共通の体験が期待されている
 
(d) アプリの場合は、プラットフォーム (OS) ごとにユーザーが「自然」に感じる UI/UX 表現が異なる
- この意味では 一般のデスクトップアプリに近い

PC/Mac デスクトップ GUI
(1973年ごろから)

C/C++ が主流
アイコン、ボタン、メニュー、マルチウィンドウ、オブジェクト指向UI...
モバイルWeb UI/UX
(1999年ごろから)

WAP, HTML, javascript
絵文字や半角文字(日本)
初期は javascript なし
スマートフォン → 画面が小さい一般 Web UI/UX
近年は HTML5 と合流
一般 Web UI/UX
(1993年ごろから)

HTML, javascript
ハイパーリンク、ナビゲーション、 Dynamic HTML, javascript, AJAX, ぱんくず, サイトマップ, HTML5...
モバイルアプリ
(1999年ごろから)

Java, C/C++, Objective-C...
Web よりも速い応答性
オフライン利用
リッチなアニメーション体験
各 OS に沿った操作感


--------------------------------
Google I/O 2012 トピック紹介: Android Design for Success

発注者「これが希望するブランド表現です」

制作/開発者「(プラットフォームの習慣を無視して) ブランド表現だけを作りました」

残念な結果

Android Design for Success.  Rachel Garb, Jens Nagel, Nate Streu, Matias Duarte.  6/29/2012.
https://developers.google.com/events/io/sessions/gooio2012/112/



--------------------------------
Google I/O 2012 トピック紹介: Navigation in Android

Navigation in Android.  Adam Powell, Richard Fulcher.  6/29/2012.
https://developers.google.com/events/io/sessions/gooio2012/114/

Android で標準的な "Back" (端末標準のボタン) と "Up" (Action Bar 左端ボタン) の違いについて



--------------------------------
Google I/O 2012: Ten Things Game Developers Should Know

Ten Things Game Developers Should Know.  Dan Galpin, Ian Lewis.  6/29/2012.
https://developers.google.com/events/io/sessions/gooio2012/110/

1. Support the New Stuff (新しい端末への対応)
2. Evade pirates, Stop vampires (Google I/O 2011参照)
3. Do not mess with the buttons
とくに Backボタンには適切にご対応ください
Google I/O 2012 - Ten Things Game Developers Should Know
4. Respect the Lifecycle
音楽は Lock screen 時に鳴らさない、電話で中断した後もゲームを引き続き楽しめる
5. Minimize Permissions
これらのパーミッションは避ける: 10. Change Wifi Settings   9. Receive Boot Completed   8. Query Running Tasks   7. Obtain Fine Location   6. Read System Log   5. Directly Call Phone Numbers   4. Read Write Contacts/Calendar   3. Read/Write Bookmarks   2. Display System Level Alerts   1. Send/Receive SMS
6. Be Green.  Battery, Network, Memory は節約してください
APK Expansion Files は解凍コピーは作らずそのまま利用
7. 規約を守りましょう
非標準決済手段、Market in Market, 5-star rating報酬は禁止
Google I/O 2012 - Ten Things Game Developers Should Know
8. In-app Billing を堅牢に利用しましょう
9. Testing: GPUの違いへの対応
10. Play 掲載時注意事項
Feature graphics の準備, 他プラットフォーム宣伝の非推奨, キーワードスパム禁止, 紹介文のローカライズ (EFIGS+CJK)

11. 素晴らしいゲームを作りましょう



--------------------------------
Action Bar

(a) 画面上部への表示が基本
Navigation (遷移機能) : Top / Left
Action (実行機能) : Bottom / Right

(b) 必要に応じて Tab と組み合わる
画面最下部での Tab 表現は非推奨
推奨: 画面上部の Tab + Swipe View
(例: Google Play の Scrollable Tabs表現)

(c) 選択時 : Contextual Action Bar

1. App icon / Up button
2. View control
3. Action Buttons
4. Action Overflow

1. Main Action Bar
2. Top Bar
3. Bottom Bar


--------------------------------
Back と Up

(a) Android では標準的に "Back" (時系列で「戻る」) と "Up" (論理階層を上がる) という 2 種類の navigation が定義されている。
Up は通常 Action Bar の左端のボタンとして表現

(b) Back 操作は 全端末に搭載されている標準の Back ボタンを用いて行うのが基本。
アプリ内の UI に冗長な "Back" ボタンを配置することは非推奨。

The Up button is used to navigate within an app based on the hierarchical relationships between screens. For instance, if screen A displays a list of items, and selecting an item leads to screen B (which presents that item in more detail), then screen B should offer an Up button that returns to screen A.
If a screen is the topmost one in an app (that is, the app's home), it should not present an Up button.
The system Back button is used to navigate, in reverse chronological order, through the history of screens the user has recently worked with. It is generally based on the temporal relationships between screens, rather than the app's hierarchy.
Android Design.  Jan 2012.
http://developer.android.com/design/patterns/navigation.html


--------------------------------
Fragment を用いた各種画面サイズへの対応

(a) Fragment という仕組みを用いると、Tablet 対応の開発コストが (アプリを書きなおすのに比べて) 低くなります
(b) ひきつづき各社から続々 優れた Tablet 端末が登場予定ですので、 Tablet でもカッコいいアプリのご提供を是非おねがいします。

リストの表現
(a) 枠線は 極力減らし、スペースの適切な配置により 美しく表現すること。
(b) 右矢印の繰り返しは冗長なのでできるだけ避ける。


Use section dividers to organize the content of your list into groups and facilitate scanning.
Android Design.  Jan 2012.
http://developer.android.com/design/style/metrics-grids.html

Don't use right-pointing carets on line items.
Android Design.  Jan 2012.
http://developer.android.com/design/patterns/pure-android.html


--------------------------------
アプリ内のボタン、アイコン表現

(a) アプリ内では App icon (Action Bar左端) 以外のアイコンは、陰影、グラデーションをつけないフラットなデザインが基本
標準的なアイコン画像の素材は Android Design サイトからダウンロードできますので自由にご利用ください。
他プラットフォームからアイコン画像をコピーしてくるのはご遠慮ください。

(b) アイコンの周囲に不要な枠線はつけずにスペースを活用してください

(c) ボタン表現もグラデーションは利用しないフラットな表現が基本

ホーム画面アイコン、ウィジェットの aesthetics (美観)
(a) ホーム画面アイコンやウィジェットは、壁紙がどんな色でも見やすいようにデザインすること。

(b) ホーム画面アイコンは若干の奥行きを持たせて表現するのが基本。 

(c) 見やすさと美観と奥行きを同時に実現するために、半透明の Shadow 表現が一般的に利用される。 
アルファチャンネルを含むフルカラー透過 PNG 画像を作成して利用

Android apps are sleek and aesthetically pleasing on multiple levels. Transitions are fast and clear; layout and typography are crisp and meaningful. App icons are works of art in their own right.
Android Design.  Jan 2012.
http://developer.android.com/design/get-started/creative-vision.html

Shadow なし
Shadow あり
Offset なし
Shadow あり
Offset あり
Shadow あり
Offset なし
(透明度高め)
Shadow あり
Offset あり
(透明度高め)
Google 製 Android アプリの多くの Launcher アイコンでは、若干の奥行き感が表現されている。 壁紙の色が暗くても明るくても美しく見えるように半透明の Shadow が活用されている。

Make sure that your launcher icon is clearly visible on any type of background.
Three-dimensional, front view, with a slight perspective as if viewed from above, so that users perceive some depth.
Android Design.  Jan 2012.
http://developer.android.com/design/style/iconography.html


--------------------------------
背景色と Theme

(a) Android では明色系の Theme (Holo Light) と暗色系の Theme (Holo Dark) が標準的に定義されている。
アプリ内でのブランド表現においてはこれをベースとした配色を推奨

(b) 一般に、ドキュメント表現に比較して機能表現の比重が高くなるほど、一貫した Theme (配色) への準拠が期待される。

Themes are Android's mechanism for applying a consistent style to an app or activity. The style specifies the visual properties of the elements that make up your user interface, such as color, height, padding and font size. 
Android Design.  Jan 2012.
http://developer.android.com/design/style/themes.html

機能表現
(Theme へ準拠)
ドキュメント表現
(Theme から離れるのも可)

設定画面
メール本文
Menu
Action Bar
Tab
遷移途中の解説 (チュートリアル)
Web ページ
静的ヘルプ
Holo Light
Holo Dark
Holo Light
+ Dark Action Bar


--------------------------------
左右方向の Swipe View (フリック操作の UI) の表現

Whenever a user touches an actionable area in your app, provide a visual response. This lets the user know which object was touched and that your app is "listening".
Android Design.  Jan 2012.
http://developer.android.com/design/style/touch-feedback.html

Use swipe to quickly navigate between detail views or tabs.
Transition between the views as the user performs the swipe gesture. Do not wait for the gesture to complete and then transition between views.
If you used buttons in the past for previous/next navigation, replace them with the swipe gesture.
Android Design.  Jan 2012.
http://developer.android.com/design/patterns/swipe-views.html

(a) Home 画面は指を触れて左右に動かそうとすると現在のスクロール位置を示す 発光バーが画面下部に表示される (指を離してしばらくすると消える)
(b) Google Play では タブ表示の左右を fade out (徐々に薄れていく) 表示することで そこが Swipe View (左右に swipe できる UI) であることを表現している
- "Scrollable Tabs" 表現
(c) 素早い左右の画面切り替えのために、Action Bar 直下の Tab 表現 + Swipe View (左右フリック操作) のサポート
Bottom Tab Bar は非推奨
- Navigation を画面上部/左側、 Action を画面右側/下部で行うという原則に反する
- Back / Home ボタンと押し間違える
- 画面サイズの変化に対応しにくい


--------------------------------
アプリのホーム画面: Hero Moments

ホーム画面は あなたのアプリの最も素敵な瞬間を見せる場所。 画面が小さいからといって、アイコンを並べるだけのホーム画面は寂しい (例: 旧バージョン Google+ アプリ)

トレンド: Action Bar の App icon をタッチするとメニューと最新情報が切り替わるイディオムが最近 よく使われるようになっています



--------------------------------
Notification について

(a) 通知がうるさくて邪魔なのは NG です
広告目的で利用するのは慎重に...

(b) Notification area は本当に必要なときだけ利用してください (人が話しかけている、自分の設定した予定がある、など)

(c) 通知目的で "OK" ボタンしかない Dialog を利用するのは避けてください (Dialog は本当にユーザーの選択が必要なときのみ)

(d) 通知エリアを利用しなくても Toast で十分なときもあります


--------------------------------
まとめ & 質疑応答

(a) モバイル Webと異なり、モバイルアプリでは 各プラットフォームの習慣を尊重した UI/UX が期待される場面が多いことをご理解ください

(b) ユーザーを混乱させずに「素敵なアプリ!」と感じてもらえるように、 Android プラットフォームの UI/UX の基本を押さえた、 便利・楽しい・素敵なアプリを 是非 ご提供ください

(c) Google が提供している Android Design ガイドライン、アイコン素材、 公演ビデオなどを 是非ご活用・ご参照ください
Shared publiclyView activity