Download - Adaptive Design for Android
Adaptive Design For Android
Ni Yan (User Experience and Interface Designer) Jingran Wang (Android Developer)
Before Start
• Better communications between developers and designers about Density-‐Independent Pixel
http://www.google.com/design/spec/layout/units-‐measurements.html
iOS
• Fragmentation – Use dp in design – Layout – Design animation adaptive to different versions
Android
• Less Fragmentation – Use px in design – Auto Layout (Recommend) – Better performance for animations
iOS
• Navigation UI – Top Action Bar – No Bottom Tab Bar (Recommend)
– Navigational Drawer
Android
• Navigation UI – Navigation Bar – Bottom Tab Bar are common
– Sometimes have drawer
http://developer.android.com/design/patterns/pure-‐android.html
Pure Android
Work Flow
Design Sketch
Mockup Prototype
Evaluate
• Collect design Requirements
• Persona & Scenarios • Sketch a lot • Balsamiq
• HTML, CSS, JS, etc. • AI, PS, AE, Sketch, etc • Interaction map • Use flows • Axture, InVision, Pixate,
Keynote, etc.
• User Feedback • Design review meetings:
managers, developers,marketing copy review
Mockup Design
• Choose a type of device for phone, small tablet, and bigger tablet to start with.
• Start design with mdpi (1dp = 1px) or xhdpi (1dp = 2px)
800*1280px 600*960px 384*742px
http://www.emirweb.com/ScreenDeviceStatistics.php
Android Device Screen Sizes
ldpi 1dp = 0.75px
mdpi 1dp = 1px
hdpi 1dp = 1.5px
xhdpi 1dp = 2px
xxhdpi 1dp = 3px
xxxhdpi 1dp = 4px
Phone 36*36 48*48 72*72 96*96 144*144 192*192
Small tablet 48*48 64*64 96*96 128*128 192*192 256*256
Big tablet 64*64 72*72 108*108 144*144 216*216 288*288
Table of Image Sizes
• iOS -‐ pdf images, @1x
• Android -‐ png images (Could generate from pdf files)
Android and PDF
• PdfRenderer in API 21 (5.0) • Various PDF libraries for rendering pages • Difficult to use for ImageView
Android and SVG
• Currently no official support for SVG • libsvg-‐android (GPL v3) • svg-‐android (Apache 2.0) (2011) • Github forks of svg-‐android • (Might need software rendering layer)
MipMap
• Use for launcher icons • Density-‐independent. • Only useful if you use density stripping(APK splitting)
• android{splits{density{enable true}}}
A Few More Things…
• Scrolling area for different screens sizes • Action bar size will change • Really small phones • Different experience in portrait & landscape
Spec
• Specify layout Based on top, middle or bottom • Better work on different screen sizes at once.
Android Design Resources
• Android Developers’ site • Material Design • Android Design in Action • GDC Videos / Design • Google+ Community
Learn from iOS
• WWDC videos • iOS Human Interface Guidelines
Questions?
@niyandesign https://plus.google.com/+JingranWang87
http://www.slideshare.net/niyan524/adaptive-‐47948494