Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
User Interface
Design Tips

July 2010
Why should I care about UI?

Better UI

  Perceived quality + polish

     Better ratings

       Better app ranking

    ...
Agenda – Android UI design tips

1.  Do’s and don’ts
2.  Design philosophy and considerations
3.  UI framework features yo...
Do’s and don’ts
  DON’T simply port         DON’T create rigid,
   your UI from other         absolute-positioned
   platforms          ...
  DO create versions of      DO support D-pad &
   all resources for high      trackball navigation
   density screens
 ...
DO work with visual and
interaction designer(s)



                          7
Design philosophy
and considerations
Android design philosophy

  Clear vs. “simple”
  Content vs. chrome
  Consistent yet engaging
  –  Elegant variation

...
Principles of good interface design*

1.  Focus on the user
2.  Make the right things visible
3.  Show proper feedback
4. ...
1. Focus on the user

  Know your users
  –  Age, skill level, culture, disabilities, etc.
  –  What they want to do with...
2. Make the right things visible

  The most common operations should be
   immediately visible and available


  Second...
3. Show proper feedback

  Have at least 4 states (<selector>) for
   all interactive UI elements:


      default   disa...
4. Be predictable

  Do what the user expects
  –  Properly interact with the activity stack
  –  Show information and ac...
If complex instructions
are required, rethink
your design.

                          15
5. Be fault tolerant

  Constrain possible operations to only
   those that make sense
  –  Disable UI elements when appr...
“If an error is possible,
someone will make it.”
                    – Donald Norman, author,
               The Design of...
Design considerations

  Physical screen size
  Screen density
  Portrait & landscape orientations
  Primary UI intera...
Design considerations

  Awareness about the ways in which
   devices can vary is very important
  Read through the CDD ...
UI framework features you
should definitely be using
<RelativeLayout>


                   21
Resource qualifiers

                        One .apk contains all
                         resources
                   ...
9-patch drawables – foo.9.png




  Similar to CSS3 border-image
  Border pixels indicate stretchable regions
  Make bo...
Selector (state list) drawables


    foo.xml:


<selector>
    <item android:drawable="@drawable/foo_disabled"
          ...
Selector (state list) drawables


  foo_default.png   foo_disabled.png   foo_focused.png   foo_pressed.png




  foo_defau...
Layer drawables – XML + PNGs




                   +                    +   Drawable.setColorFilter(

                   ...
Layer drawables – XML + PNGs




           =
               Rendered output
               (resizable w/ 9-patch)




   ...
New UI design patterns
New UI design patterns

Borrowed from the
Android UI design patterns
talk at Google I/O 2010

 http://code.google.com/even...
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         30
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         31
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         32
New UI design patterns

  Dashboard
  Action Bar
  Quick Actions




                         33
Dashboard
“What can I do with this app?”
“What’s new?”




                                 34
Dashboard – Recommendations

  Focus on 3-6 most important app
   sections
  Highlight what’s new
  Be flavorful – it’s...
Action Bar
“How can I do <common action> quickly?”




                                          36
Action Bar – Recommendations

  Bring key, app-wide actions onscreen
  Help to convey a sense of place
  Use consistent...
Quick Actions
“What can I do with <this object>?”




                                      38
Icons and guidelines
New Android icon style




Tactile • Rendered • Forward Facing • Top-lit
  Synecdoche • Diverse shapes, materials
Icon guidelines

Guidelines and templates are available at:

  http://developer.android.com/guide/practices/
  ui_guidelin...
Questions?
Copyrights and Trademarks

  Android, Google are registered
   trademarks of Google Inc.
  All other trademarks and copy...
Upcoming SlideShare
Loading in …5
×

Icons and guidelines Android UI Design Tips

339,745 views

Published on

Icons and guidelines

Published in: Technology
  • Sex in your area for one night is there tinyurl.com/hotsexinarea Copy and paste link in your browser to visit a site)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Get BIGGER and LONGER Without Surgery, Forget Surgery, Pills And Extenders, DON'T Do This To Make It Bigger. ★★★ https://tinyurl.com/ydaetwbk
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • HOW TO UNLOCK HER LEGS! (SNEAK PEAK), learn more... ★★★ https://tinyurl.com/y52uv4vq
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Girls for sex are waiting for you https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Meetings for sex in your area are there: https://bit.ly/2TQ8UAY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×