Your SlideShare is downloading. ×
0
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Smartphone Design Convention: Android UI/UX Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Smartphone Design Convention: Android UI/UX Design

4,145

Published on

スマホデザイン会議「AndroidにおけるUI/UX」発表資料(2012年12月21日) …

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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×