Fast track to Android design

download

of 34

  • date post

    28-Jan-2015
  • Category

    Technology

  • view

    111
  • download

    4

Embed Size (px)

description

Visual guide to Android UI related concepts (density bucket, density independent unit - dp, dp resolutions). Suggestion for such considerations, as supporting multiple screens and number of layouts to use. Advices to avoid common pitfalls.

Transcript of Fast track to Android design

  • 1. Fast-track to Android design:the missing parts- What screens are there?- How to cope with this variety?- Tactics for pixel perfection- Technical design@MaksimGolivkin@AndrodAalto Community

2. MotivationOfficial handsets: 165+Official tablets: 45+OpenSignalMaps report 3997 devicesWhy does it matters?56% smartphones world wide run Android42% smartphones run Android in US 3. Concepts of the platform 4. Generalized sizesGeneralized size DiagonalInterpretationSmall2 3.4legacy phonesNormal 3 4.7 phonesLarge4.2 7.3tweener tabletsExtra Large7 tablets 5. Popular* screens Phone Generalized size s small normal large extra large 240x3202.3% 240x400 240x4230.7% 320x48026.2% 480x6402%480x800480x854 57.8% 2.3% Tweener 600x1024tabletsResolution 720x1280 800x12800.9% 1024x768 1280x768 7%Tablets 1280x800 *Not all the px resolutions are present! See phones and tablets database Data was collected in 7-days ending on May 1, 2012 6. Phone* screensGeneralized sizeMostly Legacy smallnormal240x3202.3%240x400240x4230.7%320x480 26.2%480x640 2% The trendResolution480x800480x854 57.8% 600x1024 720x1280 800x12800.9% 4.3% in small phones 85.6% in normal phones *Not all the pixel resolutions are present! See phones database Data was collected in 7-days ending on May 1, 2012 7. Tablet* screensGeneralized size Tweeners largeextra largeResolution480x800480x854 2.3% 600x1024 1024x768 The trend 1280x768 7% 1280x800*Not all the pixel resolutions are present! See tablets database.Data was collected in 7-days ending on May 1, 2012 8. Screen density Screen density is physical characteristic of the screen technology, which determines screen size and resolution Screen density can be estimated using following formula: pixel _ width 2 + pixel _ height 2screen _ density = diagonal _ in _ inches Density is expressed in db density independent pixels. 9. Physical size of dppixel is the same42 dp heightSamsung Galaxy AceAsus Nexus 7 320x480 px1280x720 pxmdpi density bucket hdpi density bucket 10. Density bucketsDevices are grouped into density bucketsaccording to the physical screen density.Density bucket is hard-coded, but can beestimated based on the following heuristics.Density bucket Screen density rangeldpi (low)100 ~ 140 dpmdpi (medium) 140 ~ 200 dphdpi (high) 200 ~ 280 dpxhdpi (extra high)280 ~ 340 dpSee phones and tablets database to find outabout the density of relevant device. 11. Devices in one density bucket3.7 4.2 Nexus One Samsung Galaxy S2 320x533 dp320x533 dp 12. Devices in one density bucket3 3.510.1Sony Xperia X8 Samsung Galaxy Ace Asus Transformer Prime 320x480 dp 320x480 dp 1280x800 dp 13. Awkward moment Generalized size smallnormal large extra large 240x320 px320x426 dp 240x400 px 320x533 dp 240x432 px 320x576 dp 320x480 px 320x480 dp 480x640 px240x320 dp 640x1067 dp 480x800 px 320x533 dp480x800 dp 640x1138 dp480x854 px320x568 dp480x854 dp 600x1024 px413x683 dp 600x1024 dpResolutions640x960 px320x480 dp 720x1280 px360x640 dp 800x1280 px400x640 dp 1024x768 px 1024x768 dp 1280x768 px 1280x768 dp 1280x800 px 1280x800 dp*Not all the pixel resolutions are present 14. Dp resolutions800x1280 px 5.310.1Samsung Galaxy Note Asus Transformer Prime400x640 dp 800x1280 dp 15. Only 12 dp resolutions (so far) Generalized Density Resolution*size bucket (dp)smallldpi 320x426legacy phonessmallhdpi 240x320legacy phonesnormal ldpi 320x533legacy phones320x576normal mdpi 320x480phonesnormal hdpi 320x533phones320x568normalxhdpi 320x480new phones360x640400x640largeldpi640x1067tweener tablets 640x1138largemdpi 480x800tweener tablets480x854 600x1024extra largemdpi1024x768tablets 1280x768 1280x800 16. Handling many screens 17. One application- multiple layoutsIt is obvious that due to larger screens and differentresolutions, tablets require their own UI, which takesadvantage of larger screen real estate.Of course, looking at the market share of small phonesand tweener tablets (4.3% and 4%) they are lesssignificant.However, the longer side of most devices is 30%-60%bigger than the shorter side. Thus, landscape orientationmay need a separate layout.Wider layouts can be reused for landscape orientation ofsmaller devices. 18. Orientation is just anotherscreen resolution.400x640 dp in portrait 320x420 dp in portrait 320x420 in landscape320x400 dp in portrait 19. Two useful patternsstretching layoutcentering layout Margins 320x480 dp stretches to 320x480 is centered in 400x640 400x640 dpPlan for resizable elements and/or margins. 20. Choose switching points240dp 320dp360dp 400dp 426dp 480dp533dp 568dp 578dp 640dpsmall size portrait small size landscapenormal size landscapenormal size portraitlarge size portraitBy listing all the possible layout widths (both orientations),we see how do they cluster.Choose switching points, when do youa) introduce new layoutb) start/stop growing marginsc) start/stop growing element size 21. One layout and manymany adjustments Home base240dp 320dp360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dpsmall size portrait small size landscape normal size landscapenormal size portrait large size portraitresized elementsmargins addednew layout 22. How many layoutenough?Every additional layout adds significant effort,but improves user experience.Options worth considering:- portrait only on the handset- landscape only on the tabletUse market research to understand, what your targetcustomers are using. 23. 2 layouts - richer UI Home base240dp 320dp360dp 400dp 426dp 480dp 533dp 568dp 578dp 640dpsmall size portrait small size landscape normal size landscapenormal size portrait large size portraitresized elements & marginsnew layout Make advantage from more screen real estate! 24. Tablet layouts on3.2 and afterStarting Android 3.2 it is possible to target screens usingwidth, height and smallest width (shortest screendimension, ignoring orientation).Very useful!SmallestGeneralized DensityOrientation width size bucket768 dp extra largemdpiportrait768 dp extra largemdpiportrait800 dp extra largemdpiportrait 1024 dp extra largemdpilandscape 1280 dp extra largemdpilandscape 1280 dp extra largemdpilandscape 25. Before 3.2: a bit more tricky!For Android prior 3.2 you could only target screengroups using generalized size, density bucket and screenorientation combination.Still possible to target smallest width.Short side Short side Generalized Density Orientation min max size bucket240 dp(same) small hdpi portrait320 dp(same) small ldpi portrait320 dp(same) normalhdpi portrait320 dp(same) normalldpi portrait320 dp(same) normalmdpi portrait320 dp(same) small hdpi landscape426 dp(same) small ldpi landscape480 dp600 dp large mdpi portrait480 dp(same) normalmdpi landscape533 dp568 dp normalhdpi landscape533 dp(same) normalldpi landscape640 dp576 dp large ldpi portrait 26. Designing layout:the processProcess for designing a layout in dp:1. Research market and decide on the screen groups2. Find smallest dp resolution for every screen group3. Design for the smallest db resolution on a canvas equal to biggest pixel resolution4. Enhance it for bigger resolutions from the group5. Make sure that sizes of reused elements translate into all pixel densities groups without a reminder.Pixel perfect rule: If you support ldpi, dp sizes have to be dividable by 4. If you dont, sizes have to be dividable by 2. 27. Random advices 28. Phone dp width is increasing Until recently, all Android phones had 320dp width and 5-7 tablets sometimes had 480dp.majoritya fewGalaxy Note5-7 tabletsPhones (short edge) 320 dp360 dp 400 dp 480 dpAt the moment, number of phones with screenwidth = 360 dp is growing fast. However, these phonesare running Android 4.0, so they can be addressed usingtablet layouts 29. Simple scaling or SVGisnt the best solution!Smaller icons need to be redrawn to look better!Below there are icons for pictures folder in Mac OS X.Here is an article going into detail: About those vector icons 30. Rhythm Android is using 48dp rhythm size which translates to physical area comfortable to touch. Spaces between elements are recommended to be at least 8dp. 31. Standard sizesDensity bucket ldpi mdpi hdpi xhdpiLauncher 36x36 px 48x48 px 72x72 px96x96 px 24x24 px 32x32 px 48x48 px64x64 pxAction bar(18x18)(24x24)(36x36) 48x48 12x12 px 16x16 px 24x24 px32x32 pxContextual (9x9) px(12x12)(18x18) 24x24Icons 18x18 px 24x24 px 36x36 px48x48 pxNotification(16x16)(22x22)(33x33) (44x44)Except for the icons, platform doesnt have many standardelements.For instance, action bar is 48-60dp depending on resolutionand screen orientation. 32. File namesGraphics artifact filenames:- CANT have spaces or dashes- MUST be in small letters- MUST start with a letterYour coder will love you for this! 33. Maybe If the screen has only few field, consider making it into dialog. Transparent list and image backgrounds on lists can hinder performance/result in memory problems. Instead of launching progress dialog, consider animating interface elements, such as action bar items. Design with different font size for devices of different size. 34. FIN & Good luck!Contributors:- Maksim Golivkin, Android developer- Joonas Kukkonen, Elisa- Janne Toivola, Futurice- Antonio Guadagno, Exaget- Victoria Fedirko, Freelance designerInspiration:- iOS App Designer Guide to Developer Love, Lemon Labs Looking for an Android developer?www.golivkin.eu A freelancer? maksim@golivkin.eu