Android DesignAndroidのUI/UX デザイン   Android UI/UX Design       Nobuya Sato    Experience Designer     December 21st., 2012 ...
自己紹介•  佐藤伸哉 (@nobsato)•  UXデザイン、デザイン戦略、IA –  1994年からWebデザイン –  Webエージェンシーて、主に大規模な企業サイトの    情報設計や企業のグローバル戦略を実行 –  Sonyのデザイン...
コーヒーの話(C) コーヒーショップ 豆の木                   Copyright © 2012 Secret Lab, Inc. All rights reserved.   3
Copyright © 2012 Secret Lab, Inc. All rights reserved.   4
Copyright © 2012 Secret Lab, Inc. All rights reserved.   5
Copyright © 2012 Secret Lab, Inc. All rights reserved.   6
Copyright © 2012 Secret Lab, Inc. All rights reserved.   7
Copyright © 2012 Secret Lab, Inc. All rights reserved.   8
Copyright © 2012 Secret Lab, Inc. All rights reserved.   9
Copyright © 2012 Secret Lab, Inc. All rights reserved.   10
Copyright © 2012 Secret Lab, Inc. All rights reserved.   11
本日のセッションの内容•  UIパターンを知り、AndroidらしいUIを作る。           Copyright © 2012 Secret Lab, Inc. All rights reserved.   12
パターンで考える      Copyright © 2012 Secret Lab, Inc. All rights reserved.   13
そもそもパターンって何?•  パターン・ランゲージ•  ポストモダン建築家のクリストファー・アレグザンダ   ーが提唱した知識記述の方法•  建物や街の形態の中に繰り返し現れる法則性を「パタ   ーン」と呼び、それを「ランゲージ(言語)」として...
一般的なアプリの階層構造•  Android Designより                Copyright © 2012 Secret Lab, Inc. All rights reserved.   15
一般的なアプリの階層構造•  Android Designより                                                                         トップレベル・ビュー        ...
階層構造のより分かり易い考え方                                                                  ホーム                                      ...
階層構造のより分かり易い考え方                        トップレベル                                    ホーム                                      ...
階層構造のより分かり易い考え方                        トップレベル                                    ホーム                                      ...
階層構造のより分かり易い考え方                        トップレベル                                           ホーム                               ...
階層構造のより分かり易い考え方                        トップレベル                                           ホーム                               ...
具体的に実装した例•  Google Maps                 Copyright © 2012 Secret Lab, Inc. All rights reserved.   22
階層構造を使い易くするコツはAction Bar!      とTab (Swipe View)        Copyright © 2012 Secret Lab, Inc. All rights reserved.   23
Action Barについてさらに詳しくは•  http://developer.android.com/guide/topics/ui/actionbar.html                     Copyright © 2012 S...
大切なのでもう一度、Action Bar を実装しよう!          Copyright © 2012 Secret Lab, Inc. All rights reserved.   25
画面の基本的なパターンを知る•  トップレベル、カテゴリーレベル、それぞれの定番?         Copyright © 2012 Secret Lab, Inc. All rights reserved.   26
基本的なパターン=画面の構成•  Androidの基本画面の考え方は実はシンプル                                                                   トップのナビゲーション    ...
基本的なパターン•  トップレベルの定番パターン ABC	              :	                    :	                  ABC	                                 ...
基本的なパターン•  コンテンツレベル、情報の表示の定番パターン.1 ABC	          :	                :	                  ABC	                               ...
基本的なパターン•  コンテンツレベル、情報の表示の定番パターン.2   ABC	           :	                   :	                  ABC	                         ...
基本的なパターン•  コンテンツレベル、情報のアクションの定番パターン<	   ABC	           :	                      :	           <	    ABC	                    ...
基本的なパターン•  コンテンツレベル、情報の可能/編集の定番パターン ABC	           :	                 :	                  ABC	                            ...
基本的なパターン、13選                                                                 ホーム/トップ                                      ...
Android Design                 Copyright © 2012 Secret Lab, Inc. All rights reserved.   34
Android Design                 Copyright © 2012 Secret Lab, Inc. All rights reserved.   35
Design / Patterns•  UIパターン、デザインパターンについて•  http://developer.android.com/design/patterns/                   Copyright © 2012...
まとめ•  アプリの構造、提供したい機能をしっかり考える•  まずは定番の画面パターンの基本を知り、それを自身   のサービスやアプリに当てはめてみる。そこから正し   い画面に展開していく         Copyright © 2012 S...
アプリの使い易さを良くするコツ•  情報をどう見せるかがとても重要      (C) Mark Challinor	•  最初から開発に走らず、しっかりとペーパープロトで   動線やレイアウトの検証を行う                    ...
39
http://www.mobileorchestra.com 	Copyright © 2012 Secret Lab, Inc. All rights reserved.   40
Thank YouNobuya SatoExperience Designernobsato@secret-lab.jphttp://twitter.com/nobsatohttp://about.me/nobsatohttp://slides...
Upcoming SlideShare
Loading in...5
×

Smartphone Design Convention: Android UI/UX Design

4,246

Published on

スマホデザイン会議「AndroidにおけるUI/UX」発表資料(2012年12月21日)
http://everevo.com/event/2900

Published in: Technology
0 Comments
41 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,246
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
111
Comments
0
Likes
41
Embeds 0
No embeds

No notes for slide

Smartphone Design Convention: Android UI/UX Design

  1. 1. Android DesignAndroidのUI/UX デザイン Android UI/UX Design Nobuya Sato Experience Designer December 21st., 2012 Twitter: #sdkaigi
  2. 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. 3. コーヒーの話(C) コーヒーショップ 豆の木 Copyright © 2012 Secret Lab, Inc. All rights reserved. 3
  4. 4. Copyright © 2012 Secret Lab, Inc. All rights reserved. 4
  5. 5. Copyright © 2012 Secret Lab, Inc. All rights reserved. 5
  6. 6. Copyright © 2012 Secret Lab, Inc. All rights reserved. 6
  7. 7. Copyright © 2012 Secret Lab, Inc. All rights reserved. 7
  8. 8. Copyright © 2012 Secret Lab, Inc. All rights reserved. 8
  9. 9. Copyright © 2012 Secret Lab, Inc. All rights reserved. 9
  10. 10. Copyright © 2012 Secret Lab, Inc. All rights reserved. 10
  11. 11. Copyright © 2012 Secret Lab, Inc. All rights reserved. 11
  12. 12. 本日のセッションの内容•  UIパターンを知り、AndroidらしいUIを作る。 Copyright © 2012 Secret Lab, Inc. All rights reserved. 12
  13. 13. パターンで考える Copyright © 2012 Secret Lab, Inc. All rights reserved. 13
  14. 14. そもそもパターンって何?•  パターン・ランゲージ•  ポストモダン建築家のクリストファー・アレグザンダ ーが提唱した知識記述の方法•  建物や街の形態の中に繰り返し現れる法則性を「パタ ーン」と呼び、それを「ランゲージ(言語)」として 記述して、共有する方法を考案 『パタン・ランゲージ:環境設計の手引』 (Christopher Alexander, 鹿島出版会, 1984)  ※原書は1977年 Copyright © 2012 Secret Lab, Inc. All rights reserved. 14
  15. 15. 一般的なアプリの階層構造•  Android Designより Copyright © 2012 Secret Lab, Inc. All rights reserved. 15
  16. 16. 一般的なアプリの階層構造•  Android Designより トップレベル・ビュー 通常、様々な姿でアプリがサ ポートしている内容を表示でき る。同じデータを違ったデザイ ンで表示する場合もあればまっ たく異なる機能を提供している 場合がある カテゴリー・ビュー データの詳細を表示する画面 詳細または編集ビュー データを再生または編集する 画面 Copyright © 2012 Secret Lab, Inc. All rights reserved. 16
  17. 17. 階層構造のより分かり易い考え方 ホーム 各情報への入口 (機能・サービス) 各情報 各情報の詳細 情報の補足 (編集・加工) Copyright © 2012 Secret Lab, Inc. All rights reserved. 17
  18. 18. 階層構造のより分かり易い考え方 トップレベル ホーム 各情報への入口 (機能・サービス) カテゴリー コンテンツ 各情報 各情報の詳細 情報の補足 (編集・加工) Copyright © 2012 Secret Lab, Inc. All rights reserved. 18
  19. 19. 階層構造のより分かり易い考え方 トップレベル ホーム 各情報への入口 (機能・サービス) カテゴリー コンテンツ 各情報 各情報の詳細 情報の補足 (編集・加工) Copyright © 2012 Secret Lab, Inc. All rights reserved. 19
  20. 20. 階層構造のより分かり易い考え方 トップレベル ホーム 0階層 各情報への入口 (機能・サービス) カテゴリー 第1階層 (トップレベルの選択階層) コンテンツ 各情報 第2階層 (選択された情報の階層   =カテゴリーレベルの選択) 各情報の詳細 コンテンツ 情報の補足 (編集・加工) Copyright © 2012 Secret Lab, Inc. All rights reserved. 20
  21. 21. 階層構造のより分かり易い考え方 トップレベル ホーム 0階層 各情報への入口 (機能・サービス) カテゴリー 第1階層 (トップレベルの選択階層) コンテンツ 各情報 第2階層 (選択された情報の階層   =カテゴリーレベルの選択) 各情報の詳細 コンテンツ 情報の補足 (編集・加工) Copyright © 2012 Secret Lab, Inc. All rights reserved. 21
  22. 22. 具体的に実装した例•  Google Maps Copyright © 2012 Secret Lab, Inc. All rights reserved. 22
  23. 23. 階層構造を使い易くするコツはAction Bar! とTab (Swipe View) Copyright © 2012 Secret Lab, Inc. All rights reserved. 23
  24. 24. Action Barについてさらに詳しくは•  http://developer.android.com/guide/topics/ui/actionbar.html Copyright © 2012 Secret Lab, Inc. All rights reserved. 24
  25. 25. 大切なのでもう一度、Action Bar を実装しよう! Copyright © 2012 Secret Lab, Inc. All rights reserved. 25
  26. 26. 画面の基本的なパターンを知る•  トップレベル、カテゴリーレベル、それぞれの定番? Copyright © 2012 Secret Lab, Inc. All rights reserved. 26
  27. 27. 基本的なパターン=画面の構成•  Androidの基本画面の考え方は実はシンプル トップのナビゲーション (第一階層) コンテンツ ・情報の表示 ・情報の編集/加工 Copyright © 2012 Secret Lab, Inc. All rights reserved. 27
  28. 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. 29. 基本的なパターン•  コンテンツレベル、情報の表示の定番パターン.1 ABC : : ABC : : ABC : : Visual View Content View Content detail View Copyright © 2012 Secret Lab, Inc. All rights reserved. 29
  30. 30. 基本的なパターン•  コンテンツレベル、情報の表示の定番パターン.2 ABC : : ABC : : ABC : : Thumb-Nail List View Simple List View Split View Copyright © 2012 Secret Lab, Inc. All rights reserved. 30
  31. 31. 基本的なパターン•  コンテンツレベル、情報のアクションの定番パターン< ABC : : < ABC : : Bottom Action Pull-down Action Copyright © 2012 Secret Lab, Inc. All rights reserved. 31
  32. 32. 基本的なパターン•  コンテンツレベル、情報の可能/編集の定番パターン ABC : : ABC : : Edit First Edit Last Copyright © 2012 Secret Lab, Inc. All rights reserved. 32
  33. 33. 基本的なパターン、13選 ホーム/トップ コンテンツページ 詳細ページ Copyright © 2012 Secret Lab, Inc. All rights reserved. 33
  34. 34. Android Design Copyright © 2012 Secret Lab, Inc. All rights reserved. 34
  35. 35. Android Design Copyright © 2012 Secret Lab, Inc. All rights reserved. 35
  36. 36. Design / Patterns•  UIパターン、デザインパターンについて•  http://developer.android.com/design/patterns/ Copyright © 2012 Secret Lab, Inc. All rights reserved. 36
  37. 37. まとめ•  アプリの構造、提供したい機能をしっかり考える•  まずは定番の画面パターンの基本を知り、それを自身 のサービスやアプリに当てはめてみる。そこから正し い画面に展開していく Copyright © 2012 Secret Lab, Inc. All rights reserved. 37
  38. 38. アプリの使い易さを良くするコツ•  情報をどう見せるかがとても重要 (C) Mark Challinor •  最初から開発に走らず、しっかりとペーパープロトで 動線やレイアウトの検証を行う Copyright © 2012 Secret Lab, Inc. All rights reserved. 38
  39. 39. 39
  40. 40. http://www.mobileorchestra.com Copyright © 2012 Secret Lab, Inc. All rights reserved. 40
  41. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×