SlideShare a Scribd company logo
1 of 13
Android Styles and Design
        Patterns



                                          易舒华
                                        Eashwar Raghunathan
                                           www.eashwar.in




   “If an error is possible, some one will make it”
3 Themes in Android




Hollow light     Hollow dark   Hollow Light with dark action bar.
Gestures are Pre-Defined




Touch                       Long press                                    Swipe
Triggers the default        Enters data selection mode. Allows you to     Scrolls overflowing
functionality for a given   select one or more items in a view and act    content, or navigates
item.                       upon the data using a contextual action       between views in the
Action                      bar. Avoid using long press for showing       same hierarchy.
Press, lift                 contextual menus. Action: Press, wait, lift   Action
                                                                          Press, move, lift
Navigation between the same Activity
Navigation with Back and Up


    BACK            UP
Back vs Up
Touch feed back
Grid rules




Single list item or a element
Button architecture
General layout

                     8dp between
                     Two elements




                 All elements are 48 dp
Colour

Note: red and green may be indistinguishable to color-blind users.



    Sounds funny,
    But we follow the rules,

        “If an error is
    possible, some one will
    make it”
Help notes
Keep it brief -- character limit (including spaces

Keep it simple -- short words, active verbs, and common nouns.

Be friendly -- Talk directly to the reader using second person ("you"). Make the user feel
safe, happy and energized.

Put the most important thing first -- The first two words (around 11 characters, including
spaces) should include at least a taste of the most important information in the string. If
they don't, start over.
Describe only what's necessary, and no more. Don't try to explain subtle differences.
They will be lost on most users.
Avoid repetition. If a significant term gets repeated within a screen or block of text, find a
way to use it just once.
谢谢
         Thank you
Usability and Design Lab, Beijing
                      We know user better…




           易舒华
          Eashwar Raghunathan
             www.eashwar.in

More Related Content

Similar to Android design style(Google)

Windows 8 touch guidance
Windows 8 touch guidanceWindows 8 touch guidance
Windows 8 touch guidanceDaniel Alonso
 
Gur summit poster with cover
Gur summit poster with coverGur summit poster with cover
Gur summit poster with coverJennifer Zamora
 
Deep learning tutorial 9/2019
Deep learning tutorial 9/2019Deep learning tutorial 9/2019
Deep learning tutorial 9/2019Amr Rashed
 
Deep Learning Tutorial
Deep Learning TutorialDeep Learning Tutorial
Deep Learning TutorialAmr Rashed
 
Design perception-principles
Design perception-principlesDesign perception-principles
Design perception-principlespcald50
 
20 Principles: UI Design
20 Principles: UI Design20 Principles: UI Design
20 Principles: UI DesignMoodLabs
 
UI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface DesignUI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface DesignMoodLabs
 
Antipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experienceAntipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experienceinteractionpatterns.org
 
Mobile Apps Design Principles
Mobile Apps Design PrinciplesMobile Apps Design Principles
Mobile Apps Design PrinciplesMohamad Sani
 
Summary of Material Design Guidelines
Summary of Material Design GuidelinesSummary of Material Design Guidelines
Summary of Material Design GuidelinesAmit Kumar Tiwari
 
Design in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil AcharyaDesign in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil AcharyaMobileNepal
 
TopicLens and More!
TopicLens and More!TopicLens and More!
TopicLens and More!johnodonovan
 
Edward Tufte -- Highlights from Presenting Data and Information one day couse
Edward Tufte -- Highlights from Presenting Data and Information one day couseEdward Tufte -- Highlights from Presenting Data and Information one day couse
Edward Tufte -- Highlights from Presenting Data and Information one day cousesheviche
 
Human Factors (Every User has a Mind!)
Human Factors (Every User has a Mind!)Human Factors (Every User has a Mind!)
Human Factors (Every User has a Mind!)Hamed Abdi
 
Semantic interaction design guest talk v6
Semantic interaction design guest talk v6Semantic interaction design guest talk v6
Semantic interaction design guest talk v6Liana Ye
 
The Mind and Consciousness As an Interface
The Mind and Consciousness As an InterfaceThe Mind and Consciousness As an Interface
The Mind and Consciousness As an Interfacenicolas nova
 

Similar to Android design style(Google) (20)

Windows 8 touch guidance
Windows 8 touch guidanceWindows 8 touch guidance
Windows 8 touch guidance
 
Gur summit poster with cover
Gur summit poster with coverGur summit poster with cover
Gur summit poster with cover
 
Deep learning tutorial 9/2019
Deep learning tutorial 9/2019Deep learning tutorial 9/2019
Deep learning tutorial 9/2019
 
Deep Learning Tutorial
Deep Learning TutorialDeep Learning Tutorial
Deep Learning Tutorial
 
Design perception-principles
Design perception-principlesDesign perception-principles
Design perception-principles
 
20 Principles: UI Design
20 Principles: UI Design20 Principles: UI Design
20 Principles: UI Design
 
UI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface DesignUI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface Design
 
Usability 101
Usability 101Usability 101
Usability 101
 
Antipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experienceAntipatterns - Designing for the poor web experience
Antipatterns - Designing for the poor web experience
 
Adhyayan
AdhyayanAdhyayan
Adhyayan
 
Mobile Apps Design Principles
Mobile Apps Design PrinciplesMobile Apps Design Principles
Mobile Apps Design Principles
 
Summary of Material Design Guidelines
Summary of Material Design GuidelinesSummary of Material Design Guidelines
Summary of Material Design Guidelines
 
Design in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil AcharyaDesign in UI: Visuals and Aesthetics - Swapnil Acharya
Design in UI: Visuals and Aesthetics - Swapnil Acharya
 
TopicLens and More!
TopicLens and More!TopicLens and More!
TopicLens and More!
 
Edward Tufte -- Highlights from Presenting Data and Information one day couse
Edward Tufte -- Highlights from Presenting Data and Information one day couseEdward Tufte -- Highlights from Presenting Data and Information one day couse
Edward Tufte -- Highlights from Presenting Data and Information one day couse
 
Human Factors (Every User has a Mind!)
Human Factors (Every User has a Mind!)Human Factors (Every User has a Mind!)
Human Factors (Every User has a Mind!)
 
ScienceBehindUX
ScienceBehindUXScienceBehindUX
ScienceBehindUX
 
Semantic interaction design guest talk v6
Semantic interaction design guest talk v6Semantic interaction design guest talk v6
Semantic interaction design guest talk v6
 
The Mind and Consciousness As an Interface
The Mind and Consciousness As an InterfaceThe Mind and Consciousness As an Interface
The Mind and Consciousness As an Interface
 
AAC Systems
AAC SystemsAAC Systems
AAC Systems
 

Recently uploaded

TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxtrose8
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...gajnagarg
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxbalqisyamutia
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...nirzagarg
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipNitya salvi
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxShoaibRajper1
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxNikhil Raut
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Nitya salvi
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfamanda2495
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxMdBokhtiyarHossainNi
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证eqaqen
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableNitya salvi
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationZenSeloveres
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxbalqisyamutia
 
BLOCK CHAIN PROJECT block chain project
BLOCK CHAIN  PROJECT block chain projectBLOCK CHAIN  PROJECT block chain project
BLOCK CHAIN PROJECT block chain projectujraj8767
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...gajnagarg
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahimamgadibrahim92
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...gajnagarg
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证ehyxf
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789CristineGraceAcuyan
 

Recently uploaded (20)

TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for FriendshipRaebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
Raebareli Girl Whatsapp Number 📞 8617370543 | Girls Number for Friendship
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Eye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docxEye-Catching Web Design Crafting User Interfaces .docx
Eye-Catching Web Design Crafting User Interfaces .docx
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
BLOCK CHAIN PROJECT block chain project
BLOCK CHAIN  PROJECT block chain projectBLOCK CHAIN  PROJECT block chain project
BLOCK CHAIN PROJECT block chain project
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 

Android design style(Google)

  • 1. Android Styles and Design Patterns 易舒华 Eashwar Raghunathan www.eashwar.in “If an error is possible, some one will make it”
  • 2. 3 Themes in Android Hollow light Hollow dark Hollow Light with dark action bar.
  • 3. Gestures are Pre-Defined Touch Long press Swipe Triggers the default Enters data selection mode. Allows you to Scrolls overflowing functionality for a given select one or more items in a view and act content, or navigates item. upon the data using a contextual action between views in the Action bar. Avoid using long press for showing same hierarchy. Press, lift contextual menus. Action: Press, wait, lift Action Press, move, lift
  • 4. Navigation between the same Activity
  • 5. Navigation with Back and Up BACK UP
  • 8. Grid rules Single list item or a element
  • 10. General layout 8dp between Two elements All elements are 48 dp
  • 11. Colour Note: red and green may be indistinguishable to color-blind users. Sounds funny, But we follow the rules, “If an error is possible, some one will make it”
  • 12. Help notes Keep it brief -- character limit (including spaces Keep it simple -- short words, active verbs, and common nouns. Be friendly -- Talk directly to the reader using second person ("you"). Make the user feel safe, happy and energized. Put the most important thing first -- The first two words (around 11 characters, including spaces) should include at least a taste of the most important information in the string. If they don't, start over. Describe only what's necessary, and no more. Don't try to explain subtle differences. They will be lost on most users. Avoid repetition. If a significant term gets repeated within a screen or block of text, find a way to use it just once.
  • 13. 谢谢 Thank you Usability and Design Lab, Beijing We know user better… 易舒华 Eashwar Raghunathan www.eashwar.in