Jérôme Van Der Linden
Android Lint Sonar Plugin
http://android-holo-colors.comQuality Tools For Android
jeromevdl @jeromevdl +jerome van der linden �2
�4
Disclaimer : I’m not an Android FanBoy… :-)
Have you ever heard / said ?
�5
Like iOS !Respect the design
(ed. iPhone PSD)
Androïd and iOS the same* idem as iPad
This is not the good icon, take the iPhone one
* In France an android is « androïde » with a diaeresis
Have you ever heard / said ?
�5
Like iOS !Respect the design
(ed. iPhone PSD)
Androïd and iOS the same* idem as iPad
This is not the good icon, take the iPhone one
* In France an android is « androïde » with a diaeresis
�6
Marketing Designers
ex-iOS Developers !
This is for you !
�7
Android is not a second class system anymore ! !
You cannot just say : « OK now that iPhone app is created, let’s replicate it on Android »
!Users are demanding and want Android apps
!They will remind you if you forget…
?
�8
?
�8
!
�9
!
�9
Screen resolutions*
320x480 640x9601136x960
320x480 240x320480x800 540x960
720x1280
1080x1920
768x1024768x1280
480x854
480x600768x1152
960x1280
A 640x960 PSD is not enough. Think dp, not px !
�10
ldpi mdpihdpixhdpi
xxhdpi
* phones only
Screen ratios48
0 960
320
540 100 �11
Think relative ! Pixel Perfect is not
possible.
Back to basics - tabs
�12Tabs go on top
http://developer.android.com/design/patterns/pure-android.html
Back to basics - back button
�13
No back button on your app The system (or the device)
provides one
http://developer.android.com/design/patterns/navigation.html
Back to basics - up button
�14
1
Back to basics - up button
�14
Up button is not a back button : goes 1 level up in
navigation hierarchy
http://developer.android.com/design/patterns/navigation.html#up-vs-back
1
2
Back to basics - up button
�14
Up button is not a back button : goes 1 level up in
navigation hierarchy
http://developer.android.com/design/patterns/navigation.html#up-vs-back
?
1
2
Back to basics : app icons
�15http://developer.android.com/design/style/iconography.html#launcher
Back to basics : app icons
�15
No rounded square, no rule! Feel free :-)
http://developer.android.com/design/style/iconography.html#launcher
Back to basics : system icons
�16http://developer.android.com/design/style/iconography.html
Use platform icons to let users recognize them.
http://developer.android.com/design/downloads/index.html#action-bar-icon-pack
Back to basics : share / open with
�17
Do not limit the sharing options to Twitter and Facebook
Use the system sharing Intent (ACTION_SEND) or ACTION_VIEW with appropriate mimetype
Back to basics : share / open with
�17
Do not limit the sharing options to Twitter and Facebook
Use the system sharing Intent (ACTION_SEND) or ACTION_VIEW with appropriate mimetype
Back to basics : splashscreen
�18
Back to basics : splashscreen
�18
Avoid splash screens !http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/
Avoid hidden features
�19
Swipe in UITableView cell
Prefer a visible arrow
Avoid long press and others hidden features,
prefer a clickable element
ActionBar : use it…
�20
iOS Navigation Bar
… but use it well ! ActionBar is contextual to the screen and is part of Android (do not reinvent the wheel)
Android ActionBar
Icon and/or Title on the left Actions on the right
No f*cking back button
http://developer.android.com/guide/topics/ui/actionbar.html
ActionBar : and use it again…
�21http://developer.android.com/guide/topics/ui/actionbar.html#SplitBar
Do not leave the screen to manipulate your data :
sort, filter, modify, delete
http://developer.android.com/guide/topics/ui/actionbar.html#Dropdown
ActionBar : and again !
�22
ActionBar : and again !
�22
ActionBar : and again !
�22
Search in the same screen … in the ActionBar !
http://developer.android.com/training/search/setup.html
Left menu is standard
�23https://developer.android.com/design/patterns/navigation-drawer.html
Navigation Drawer is now a standard component.
�24
But Android is sad like the Estonian Flag…
Holo Dark
Holo Light
#33b5e5
ActionBar : customize it
�25
ActionBar : customize it
�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html
ActionBar : customize it
�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html
ActionBar : customize it
�25http://jgilfelt.github.io/android-actionbarstylegeneratorhttps://developer.android.com/training/basics/actionbar/styling.html https://github.com/ManuelPeinado/FadingActionBar
And the rest ? Customize too !
�26http://developer.android.com/design/style/branding.html http://android-holo-colors.com/
Android is not only blue
Adopt your branding : colors, icons, fonts
Innovate !
�27
Expedia
Grand St.
Yahoo! Weather
Timely
And go Further !
�28
Widgets are typical Android feature. Provide fast and easily any information.
Good or Bad ?
�30
Good or Bad ?
�30
Good or Bad ?
�31
Good or Bad ?
�31
Good or Bad ?
�32
Good or Bad ?
�32
Good or Bad ?
�33
Good or Bad ?
�33
Good or Bad ?
�34
Good or Bad ?
�34
Good or Bad ?
�35
Good or Bad ?
�35
Conclusion
�36
Android is not a second class system anymore ! Users are demanding with app UI and UX, Android UI and UX !!!!!!!!Two solutions : 1/ Respect Android guidelines / do NOT clone iOS screens 2/ Innovate ! but respect 1/ :-)
Be inspired• Pattrn • Eye In Sky Weather • Pocket • Timer • Grand st. • Pinterest • Press (reader) • NYTimes • Expedia • Flipboard • TED • Timely • Circa • Etsy • airbnb • The Whole Pantry • Runtastic Heart Rate PRO • Tumblr • Umano • Yahoo! Weather
�37
Resources
�38
http://www.androiduipatterns.com/
http://developer.android.com/guide/topics/ui/index.html
http://developer.android.com/design/index.html
Android Design in Action on Youtube
�39jeromevdl @jeromevdl +jerome van der linden