View live notes and ask questions about this session    on Google Wave:    View live notes and ask    questions about this...
Android UI Design PatternsRichard Fulcher, Chris Nesladek,Jim Palmer, Christian RobertsonMay 19, 2010
‣   Android: State of the UI‣   Application UI design patterns‣   Making Android apps look good‣   Building a great Androi...
State of the UIChart title or subtitle placeholder‣   Since last I/O    Donut + Eclair launched, now Froyo    New devices ...
Design philosophy‣   Clear vs. “simple”‣   Content vs. chrome‣   Consistent yet engaging (elegant variation)‣   Enhanced b...
‣   Android: State of the UI‣   Application UI design patterns‣   Making Android apps look good‣   Building a great Androi...
UI Design Patterns‣   Like a software design pattern, a UI design pattern    describes a general solution to a recurring p...
5 UI Design Patterns‣   Dashboard‣   Action Bar‣   Search Bar‣   Quick Actions‣   Companion Widget9
DashboardExamples             MSN             19%                    Google                     48%            Yahoo      ...
Dashboard“What can I do with this app? What’s new?”‣    A quick intro to an app, revealing capabilities and     proactivel...
DashboardRecommendations‣    DO highlight what’s new‣    DO focus on 3-6 most important choices‣    DO be flavorful12
Action BarExamples              MSN              19%                     Google                      48%             Yahoo...
Action Bar“How can I do <common action> quickly?”‣    Dedicated real estate at top of the screen to support     navigation...
Action BarRecommendations‣    DO use to bring key actions onscreen‣    DO help to convey a sense of place‣    DO use consi...
Quick ActionsExamples                 MSN                 19%                        Google                         48%   ...
Quick Actions“What can I do with this thing?”‣    Action popup triggered from distinct visual target‣    Minimally disrupt...
Quick ActionsRecommendations‣    DO use when items have competing internal targets‣    DO present only the for most import...
Search BarExamples              MSN              19%                     Google                      48%             Yahoo...
Search Bar“How can I find something?”‣    Consistent pop-in search form anchored to top of screen‣    Replaces action bar ...
Search BarRecommendations‣    DO use for simple searches‣    DO present rich suggestions‣    DO use the same behavior21
Companion WidgetExample                    MSN                    19%                           Google                    ...
Companion Widget“Can I make this app a fun part of my Home screen?”‣    Supports the app by displaying its content and    ...
Companion WidgetRecommendations‣    DO provide value above a simple app icon (content)‣    DO handoff to the full app for ...
A blueprint for building a great Android app                             Dashboard                             Unique deta...
‣    Android: State of the UI‣    Application UI design patterns‣    Making Android apps look good‣    Building a great An...
Enabling Device Diversity‣    New devices mean:     A. More choices for users     B. Some new screen sizes to consider...27
Multiple screen sizes         3.7 Inches     3.2 Inches         480 x 800      320 x 480          252DPI         180DPI28 ...
Autoscaling        HDPI   MDPI29
Multi-Resolution Assets Workflow30
Multi-Resolution Assets Workflow31
Multi-Resolution Assets Workflow32
Multi-Resolution Assets Workflow33
New Android Icons     Tactile •  Rendered • Forward Facing • Top-lit        Synecdoche • Diverse shapes, materials34
How to make an Android app iconIntroducing icon templateshttp://developer.android.com/guide/practices/ui_guidelines/icon_d...
How to make an Android app iconIntroducing icon templateshttp://developer.android.com/guide/practices/ui_guidelines/icon_d...
‣    Android: State of the UI‣    Application UI design patterns‣    Making Android apps look good‣    Building a great An...
for AndroidCase study38   Google Confidential
View live notes and ask questions about this session on Google Wave: View live notes and ask questions about this session ...
Android android-ui-design-patterns
Android android-ui-design-patterns
Upcoming SlideShare
Loading in...5
×

Android android-ui-design-patterns

2,219

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,219
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
105
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Android android-ui-design-patterns

  1. 1. View live notes and ask questions about this session on Google Wave: View live notes and ask questions about this session on Google Wave:http://bit.ly/cPEAgd#android52
  2. 2. Android UI Design PatternsRichard Fulcher, Chris Nesladek,Jim Palmer, Christian RobertsonMay 19, 2010
  3. 3. ‣ Android: State of the UI‣ Application UI design patterns‣ Making Android apps look good‣ Building a great Android app4
  4. 4. State of the UIChart title or subtitle placeholder‣ Since last I/O Donut + Eclair launched, now Froyo New devices and screen sizes Wealth of new apps and widgets Continuing, with your help, to improve the platform5
  5. 5. Design philosophy‣ Clear vs. “simple”‣ Content vs. chrome‣ Consistent yet engaging (elegant variation)‣ Enhanced by cloud “Mere knowledge of the truth will not give you the art of persuasion.” – Socrates6
  6. 6. ‣ Android: State of the UI‣ Application UI design patterns‣ Making Android apps look good‣ Building a great Android app7
  7. 7. UI Design Patterns‣ Like a software design pattern, a UI design pattern describes a general solution to a recurring problem‣ Patterns emerge as a natural by-product of the design process‣ For each pattern: Title Example Problem Recommendations8
  8. 8. 5 UI Design Patterns‣ Dashboard‣ Action Bar‣ Search Bar‣ Quick Actions‣ Companion Widget9
  9. 9. DashboardExamples MSN 19% Google 48% Yahoo 33%10
  10. 10. Dashboard“What can I do with this app? What’s new?”‣ A quick intro to an app, revealing capabilities and proactively highlighting new content‣ Full-screen‣ Can be organized by: Features Categories Accounts11
  11. 11. DashboardRecommendations‣ DO highlight what’s new‣ DO focus on 3-6 most important choices‣ DO be flavorful12
  12. 12. Action BarExamples MSN 19% Google 48% Yahoo 33%13
  13. 13. Action Bar“How can I do <common action> quickly?”‣ Dedicated real estate at top of the screen to support navigation and frequently used operations‣ Replaces title bar‣ Best for actions common across your app Search Refresh Compose (new)‣ Can provide a quick link back to dashboard (or other app home)14
  14. 14. Action BarRecommendations‣ DO use to bring key actions onscreen‣ DO help to convey a sense of place‣ DO use consistently within your app‣ DON’T use for contextual actions15
  15. 15. Quick ActionsExamples MSN 19% Google 48% Yahoo 33%16
  16. 16. Quick Actions“What can I do with this thing?”‣ Action popup triggered from distinct visual target‣ Minimally disruptive to screen context‣ Actions are straightforward‣ Fast & fun17
  17. 17. Quick ActionsRecommendations‣ DO use when items have competing internal targets‣ DO present only the for most important and obvious actions‣ DO use when the item doesn’t have a meaningful detail view‣ DON’T use in contexts which support multiple selection18
  18. 18. Search BarExamples MSN 19% Google 48% Yahoo 33%19
  19. 19. Search Bar“How can I find something?”‣ Consistent pop-in search form anchored to top of screen‣ Replaces action bar (if present)‣ Support suggestions‣ Can use corpora selector to alter search mode Alternately, can offer suggestions for primary search mode, and additional items for triggering other modes20
  20. 20. Search BarRecommendations‣ DO use for simple searches‣ DO present rich suggestions‣ DO use the same behavior21
  21. 21. Companion WidgetExample MSN 19% Google 48% Yahoo 33%22
  22. 22. Companion Widget“Can I make this app a fun part of my Home screen?”‣ Supports the app by displaying its content and capabilities on the Home screen‣ Makes Home feel more custom, personalized23
  23. 23. Companion WidgetRecommendations‣ DO provide value above a simple app icon (content)‣ DO handoff to the full app for real tasks‣ DO be space efficient‣ DON’T just provide a larger app launcher24
  24. 24. A blueprint for building a great Android app Dashboard Unique detail Widget App Search Dashboard Common action 1 Common action 2 Intents App home Search Activity Activity Action bar Activity Common action 1 Common action 225
  25. 25. ‣ Android: State of the UI‣ Application UI design patterns‣ Making Android apps look good‣ Building a great Android app26
  26. 26. Enabling Device Diversity‣ New devices mean: A. More choices for users B. Some new screen sizes to consider...27
  27. 27. Multiple screen sizes 3.7 Inches 3.2 Inches 480 x 800 320 x 480 252DPI 180DPI28 HDPI MDPI
  28. 28. Autoscaling HDPI MDPI29
  29. 29. Multi-Resolution Assets Workflow30
  30. 30. Multi-Resolution Assets Workflow31
  31. 31. Multi-Resolution Assets Workflow32
  32. 32. Multi-Resolution Assets Workflow33
  33. 33. New Android Icons Tactile •  Rendered • Forward Facing • Top-lit Synecdoche • Diverse shapes, materials34
  34. 34. How to make an Android app iconIntroducing icon templateshttp://developer.android.com/guide/practices/ui_guidelines/icon_design.html35
  35. 35. How to make an Android app iconIntroducing icon templateshttp://developer.android.com/guide/practices/ui_guidelines/icon_design.html36
  36. 36. ‣ Android: State of the UI‣ Application UI design patterns‣ Making Android apps look good‣ Building a great Android app37
  37. 37. for AndroidCase study38 Google Confidential
  38. 38. View live notes and ask questions about this session on Google Wave: View live notes and ask questions about this session on Google Wave:http://bit.ly/cPEAgd#android539
  1. A particular slide catching your eye?

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

×