android ui design trends
DESCRIPTION
Ponencia ofrecida por Antonio Leiva en DroidconMAD 2013. Sinopsis: En la actualidad, debido a la agresiva competencia en el mundo de las aplicaciones Android, diseñar una interfaz intuitiva y visualmente atractiva para los usuarios no es una opción si queremos tener alguna oportunidad de éxito. En esta charla repasaremos cuáles son los patrones de diseño de interfaces más utilizados y trataremos algunos otros emergentes, así como las pautas para implementarlos de la forma más sencilla.TRANSCRIPT
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
Android UI Design Trends
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
http://limecreativelabs.com http://goo.gl/iEUPpH
http://gigigo.com
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
ICE CREAM SANDWICH (HOLO)
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
Android UI/UX http://androiduiux.com/free-design-resources/ Android UI Patterns http://www.androiduipatterns.com/ Android Design in Action http://goo.gl/EQpcGd
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
KEY IDEAS ABOUT DESIGN
Screen fragmentation
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
KEY IDEAS ABOUT DESIGN
Modular structures
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
KEY IDEAS ABOUT DESIGN
Modular structures
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
KEY IDEAS ABOUT DESIGN
Modular structures
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
KEY IDEAS ABOUT DESIGN
Design patterns
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
KEY IDEAS ABOUT DESIGN
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
PLAY MUSIC (OLD DESIGN)
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
PLAY MUSIC (CURRENT DESIGN)
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
PLAY MUSIC (CURRENT DESIGN)
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
DESIGN PATTERNS
Action Bar Navigation Drawer
Popup Menu
Sliding up panel
Cards UI
Pin progress
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
ACTION BAR
•Native (11+): http://developer.android.com/guide/topics/ui/actionbar.html •ActionBarCompat (7+): http://antonioleiva.com/actionbarcompat-how-to-use/ •ActionBarSherlock: http://actionbarsherlock.com/
1. App Icon 2. View Control
3. Action Buttons 4. Overflow menu
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
ACTION BAR
Fading Action Bar
https://github.com/ManuelPeinado/FadingActionBar
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
ACTION BAR
Glass Action Bar
https://github.com/ManuelPeinado/GlassActionBar
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
ACTION BAR
Not Boring Action Bar
http://flavienlaurent.com/blog/2013/11/20/making-your-action-bar-not-boring/
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
NAVIGATION DRAWER
http://developer.android.com/training/implementing-navigation/nav-drawer.html
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
SLIDING PANE
http://www.limecreativelabs.com/sliding-pane-layout/
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
SLIDING UP PANEL
https://github.com/umano/AndroidSlidingUpPanel
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
YOUTUBE SLIDING VIDEO
http://flavienlaurent.com/blog/2013/08/28/each-navigation-drawer-hides-a-viewdraghelper/
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
PIN PROGRESS
https://code.google.com/p/romannurik-code/source/browse/misc/pinprogress/
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
CARDS UI
CardsLib: https://github.com/gabrielemariotti/cardslib CardsUI: https://github.com/Androguide/cardsui-for-android
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
POPUP MENU
http://developer.android.com/design/patterns/selection.html
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
POPUP MENU
PopupMenu (11+): http://developer.android.com/reference/android/widget/PopupMenu.html PopupWindow (1+): http://developer.android.com/reference/android/widget/PopupWindow.html PopupMenuCompat: https://github.com/Taig/PopupMenuCompat
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
TAB STRIP
https://github.com/astuetz/PagerSlidingTabStrip
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
SWIPE TO DISMISS
SwipeListView: https://github.com/47deg/android-swipelistview
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
UNDO
EnhancedListView (with undo): https://github.com/timroes/EnhancedListView
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
PULL TO REFRESH
https://github.com/chrisbanes/ActionBar-PullToRefresh
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
• Designing awesome apps is easy using common design patterns
– They are proved to work
– Well known by users
• Good design is essential for an app to succeed
• It’s really easy to replicate most used patterns
– Included in SDK
– Tons of libraries ready to use
http://gplus.to/antonioleiva [email protected] Antonio Leiva Gordillo @lime_cl
Antonio Leiva Gordillo
Android Developer at Gigigo
http://www.limecreativelabs.com http://www.antonioleiva.com
http://gplus.to/antonioleiva
@lime_cl
http://es.linkedin.com/in/antoniolg