Smartphone Design Convention: Android UI/UX Design

5,400 views

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
5,400
On SlideShare
0
From Embeds
0
Number of Embeds
130
Actions
Shares
0
Downloads
114
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

×