1.
Android DesignAndroidのUI/UX デザイン Android UI/UX Design Nobuya Sato Experience Designer December 21st., 2012 Twitter: #sdkaigi

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

3.
コーヒーの話(C) コーヒーショップ 豆の木 Copyright © 2012 Secret Lab, Inc. All rights reserved. 3

4.
Copyright © 2012 Secret Lab, Inc. All rights reserved. 4

5.
Copyright © 2012 Secret Lab, Inc. All rights reserved. 5

6.
Copyright © 2012 Secret Lab, Inc. All rights reserved. 6

7.
Copyright © 2012 Secret Lab, Inc. All rights reserved. 7

8.
Copyright © 2012 Secret Lab, Inc. All rights reserved. 8

9.
Copyright © 2012 Secret Lab, Inc. All rights reserved. 9

10.
Copyright © 2012 Secret Lab, Inc. All rights reserved. 10

11.
Copyright © 2012 Secret Lab, Inc. All rights reserved. 11

12.
本日のセッションの内容• UIパターンを知り、AndroidらしいUIを作る。 Copyright © 2012 Secret Lab, Inc. All rights reserved. 12

13.
パターンで考える Copyright © 2012 Secret Lab, Inc. All rights reserved. 13

14.
そもそもパターンって何？• パターン・ランゲージ• ポストモダン建築家のクリストファー・アレグザンダ ーが提唱した知識記述の方法• 建物や街の形態の中に繰り返し現れる法則性を「パタ ーン」と呼び、それを「ランゲージ（言語）」として 記述して、共有する方法を考案 『パタン・ランゲージ：環境設計の手引』 （Christopher Alexander, 鹿島出版会, 1984） ※原書は1977年 Copyright © 2012 Secret Lab, Inc. All rights reserved. 14

15.
一般的なアプリの階層構造• Android Designより Copyright © 2012 Secret Lab, Inc. All rights reserved. 15

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

22.
具体的に実装した例• Google Maps Copyright © 2012 Secret Lab, Inc. All rights reserved. 22

23.
階層構造を使い易くするコツはAction Bar！ とTab (Swipe View) Copyright © 2012 Secret Lab, Inc. All rights reserved. 23

24.
Action Barについてさらに詳しくは• http://developer.android.com/guide/topics/ui/actionbar.html Copyright © 2012 Secret Lab, Inc. All rights reserved. 24

25.
大切なのでもう一度、Action Bar を実装しよう！ Copyright © 2012 Secret Lab, Inc. All rights reserved. 25

26.
画面の基本的なパターンを知る• トップレベル、カテゴリーレベル、それぞれの定番？ Copyright © 2012 Secret Lab, Inc. All rights reserved. 26

27.
基本的なパターン＝画面の構成• Androidの基本画面の考え方は実はシンプル トップのナビゲーション （第一階層） コンテンツ ・情報の表示 ・情報の編集/加工 Copyright © 2012 Secret Lab, Inc. All rights reserved. 27

28.
基本的なパターン• トップレベルの定番パターン ABC : : ABC < ABC Tab Nav. Pull-down Nav. Drawer Nav. (Scrollable Tab) (Spinners) (Drawer) Copyright © 2012 Secret Lab, Inc. All rights reserved. 28

29.
基本的なパターン• コンテンツレベル、情報の表示の定番パターン.1 ABC : : ABC : : ABC : : Visual View Content View Content detail View Copyright © 2012 Secret Lab, Inc. All rights reserved. 29

30.
基本的なパターン• コンテンツレベル、情報の表示の定番パターン.2 ABC : : ABC : : ABC : : Thumb-Nail List View Simple List View Split View Copyright © 2012 Secret Lab, Inc. All rights reserved. 30

31.
基本的なパターン• コンテンツレベル、情報のアクションの定番パターン< ABC : : < ABC : : Bottom Action Pull-down Action Copyright © 2012 Secret Lab, Inc. All rights reserved. 31

32.
基本的なパターン• コンテンツレベル、情報の可能／編集の定番パターン ABC : : ABC : : Edit First Edit Last Copyright © 2012 Secret Lab, Inc. All rights reserved. 32

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

37.
まとめ• アプリの構造、提供したい機能をしっかり考える• まずは定番の画面パターンの基本を知り、それを自身 のサービスやアプリに当てはめてみる。そこから正し い画面に展開していく Copyright © 2012 Secret Lab, Inc. All rights reserved. 37

38.
アプリの使い易さを良くするコツ• 情報をどう見せるかがとても重要 (C) Mark Challinor • 最初から開発に走らず、しっかりとペーパープロトで 動線やレイアウトの検証を行う Copyright © 2012 Secret Lab, Inc. All rights reserved. 38

39.
39

40.
http://www.mobileorchestra.com Copyright © 2012 Secret Lab, Inc. All rights reserved. 40

41.
Thank YouNobuya SatoExperience Designernobsato@secret-lab.jphttp://twitter.com/nobsatohttp://about.me/nobsatohttp://slideshare.com/nobsato Copyright © 2012 Secret Lab, Inc. All rights reserved. 41