Recomendados
Más contenido relacionado
Similar a Honeycomb UI Patterns
Similar a Honeycomb UI Patterns (20)
Más de Pulkit Arora
Último
Último (20)
Honeycomb UI Patterns
- 1. Honeycomb UI Patterns Nick Butcher Android Developer Advocate @crafty
- 2. Optimised for tablet
- 3. Optimised for tablet portable
- 4. Optimised for tablet portable consumption
- 5. Optimised for tablet portable personal consumption
- 6. Optimised for tablet portable personal focused consumption
- 7. Optimised for tablet portable personal fun focused consumption
- 9. Activity Fragments Activity Fragment
- 10. Action Bar Consistent application status and control
- 11. Action Bar Consistent application status and control
- 12. Action Bar Consistent application status and control Icon / Logo
- 13. Action Bar Consistent application status and control Icon / Logo Navigation
- 14. Action Bar Consistent application status and control Icon / Logo Navigation Actions
- 15. Action Bar Icon types Icon
- 16. Action Bar Icon types Icon Icon + Up
- 17. Action Bar Icon types Icon Logo Icon + Up
- 18. Action Bar Navigation types Label
- 19. Action Bar Navigation types Label Drop down
- 20. Action Bar Navigation types Label Tabs Drop down
- 36. Other great resources http://j.mp/ androiddesigntips http://j.mp/ gddandroidux http://j.mp/ androiduiutils http://j.mp/ androidassetstudio
- 37. Other great resources http://j.mp/ android design tips http://j.mp/ gddandroidux http://j.mp/ androiduiutils http://j.mp/ androidassetstudio
- 38. Other great resources http://j.mp/ android design tips http://j.mp/ gdd android ux http://j.mp/ androiduiutils http://j.mp/ androidassetstudio
- 39. Other great resources http://j.mp/ android design tips http://j.mp/ gdd android ux http://j.mp/ android ui utils http://j.mp/ androidassetstudio
- 40. Other great resources http://j.mp/ android design tips http://j.mp/ gdd android ux http://j.mp/ android ui utils http://j.mp/ android asset studio
- 42. Honeycomb UI Patterns Nick Butcher Android Developer Advocate @crafty
Notas del editor
- ...but doesn't go everywhere. Mostly used around the house Fits somewhere between phone & laptop
- Excellent for consuming content - (long form) reading / browsing - photos - video Not going to write a novel: - Phone = sentances - Laptop = pages -> Tablet = paragraphs
- Might hand to someone else, but experience is deeply personal. My data, my login...
- One primary task at a time Common actions immediately visible
- Not a work laptop replacement Primarily used at home in the evenings Large real estate gives ample opportunity for delightful interactions
- Not much chrome around controls Demo: - Create calendar appointment - Books - YouTube homescreen
- Allows multi-pane experience - Avoid excessively long spans Can dynamically add / replace Fragments can interact
- Highly encouraged to use this - We are training uses that this is where you go to nav / perform action Can completely customise / remove as appropriate
- Your application's Icon
- Navigation affordance Similar to masthead on web
- More branded experience
- Give sense of place
- For navigation between siblings in view hierarchy Can also mention can use for filtering / have multiple drop downs e.g. gallery
- Must be unambiguous what the action will act upon e.g. if an 'edit' action could apply to more than one fragment then the action should be within the fragment
- Consistent way of acting upon selections
- Goes back to the sharable/fun principles: you pass it around and it just follows you
- For immersive content - does not distract / draw attention
- Builds on phone notifications but more consistent with the platform Incoming notifications appear then fade Invoked from clock Stack up
- Gives ability to quickly interact with new info / ongoing tasks Demo: - Music
- Demo - Adding widget to homescreen - Gmail & Calender list widgets - Bookmarks grid - YouTube, Books stacks - News apps love this kind of widget for showing headlines
- Gives the ability to animate ANYTHING Subtle animations can help make the UX more immersive New View properties to work with animations Can define custom evaluators to control how animated values are applied Demo: - Romain's photo viewer - My fragment animation demo
- Not new... but larger screen gives greater opportunity for use e.g. multiplayer games Gesturaly language is still emerging. Pinch & rotate are well established. Maps introduced tilt. What else will emerge as standards?
- So annoying when a legacy app is locked to portrait!! Apps using tilt sensors need to work with Landscape default devices Ideally provide optimized layouts for both orientations - Fragments are you friend :)
- e.g. gmail labels & message list view
- e.g. gmail message detail view Useful as a signal that rotating means user wants to concentrate on content (e.g. long form reading). MUST provide a way to bring pane a back - i.e. the up arrow. Don't force users to rotate back to reclaim.
- e.g. gtalk Works well when list a has strong iconography - e.g. News sections Arrow at top of collapsed pane a expands to show fill details, and allows re-collapsing.
- e.g. YouTube video detail
- Grab indications: - change opacity - jump up 20dp Recede: - Labels in gmail grey out Destructive: - e.g. hightlight the grabbed item in red Demo: - Gmail moving message - Remove widget from homescreen
- Mostly for designers not familiar with Android basics
- Great design tips and covers Android basics such ae: - Resource framework - RelativeLayout - 9 Patches - State list drawables - Layer drawables - Dashboard + Action Bar pattern
- Roman's awesome talk on wider Android UX
- Prototyping tools
- Make pixel perfect icons ;)
- Just because it's cool... Also speaks to the opportunity out there... look at the change when Droid is launched. This is the point that tablets are at now.
- kthnxbai