O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

The Android Experience

Ad

The Android Experience
24/05/2012
                         Emanuele Di Saverio
                               Guido Parlato

Ad

intro                    ia           signature   gestures   multitask   wrap up




Android evolved into a first-class
des...

Ad

intro                    ia           signature   gestures   multitask   wrap up




Who?
Guido Parlato
Interaction design...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Carregando em…3
×

Confira estes a seguir

1 de 59 Anúncio
1 de 59 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Anúncio
Anúncio

The Android Experience

  1. The Android Experience 24/05/2012 Emanuele Di Saverio Guido Parlato
  2. intro ia signature gestures multitask wrap up Android evolved into a first-class design platform. Today we really have an Android Experience Whymca Mobile Developer Conference 2012
  3. intro ia signature gestures multitask wrap up Who? Guido Parlato Interaction designer @ Interaction Designer and Information Architect specializing in the area of mobile and web interface. @higui Whymca Mobile Developer Conference 2012 3
  4. intro ia signature gestures multitask wrap up Who? Emanuele Di Saverio Senior Design Technologist @ Book Author @ http://www.androidavanzato.it (with Stefano Sanna @gerdavax) @hazam Whymca Mobile Developer Conference 2012 4
  5. frog overview what we do
  6. frog drives innovation for the connected world. 6
  7. A global team Seattle Amsterdam Kiev & Vinnitsa Boston Milano Munich San Francisco New York Austin Shanghai Bangalore Johannesburg
  8. Android Journey
  9. Apr 09 Sep 09 Oct 09 May 10 Dec 10 Feb 11 Oct 11 Over the hills and Far away
  10. http://d.android.com/design Google launched an up-to date, accurate and structured web repository for guidelines about application design
  11. intro ia signature gestures multitask wrap up With ICS has been developed a new system of design guidelines to combine beauty, simplicity and purpose to create an exceptional experience Whymca Mobile Developer Conference 2012
  12. Rule of thumb The thumb has limited range and flexibility, only about a third of the screen is in truly effortless Frequently used buttons should occupy the bottom of the screen for easy tapping, while other controls should be nudged out of harm's way Toolbars and navigation typically land at the bottom edge of phone interfaces Whymca Mobile Developer Conference 2012 12
  13. Rule of thumb Stacking controls in a touch interface should always be avoided, especially at screen bottom For Android, app navigation and controls should float to the top Foursquare Foursquare Whymca Mobile Developer Conference 2012 13
  14. Rule of thumb It is not just a matter of thumb comfort, but also that fingers obscure the screen. The bottom is where hovering hands are least likely to cover content Whymca Mobile Developer Conference 2012 14
  15. Rule of thumb It is not just a matter of thumb comfort, but also that fingers obscure the screen. The bottom is where hovering hands are least likely to cover content Whymca Mobile Developer Conference 2012 14
  16. Rule of thumb It is not just a matter of thumb comfort, but also that fingers obscure the screen. The bottom is where hovering hands are least likely to cover content Whymca Mobile Developer Conference 2012 14
  17. intro ia signature gestures multitask wrap up Almost 6 months ago Action bar Main navigation Filter bar Search bar Filter bar Whymca Mobile Developer Conference 2012 15
  18. intro ia signature gestures multitask wrap up Foursquare Foursquare Before ICS release After ICS release Whymca Mobile Developer Conference 2012 16
  19. intro ia signature gestures multitask wrap up Foursquare Foursquare Before ICS release After ICS release Whymca Mobile Developer Conference 2012 16
  20. intro ia signature gestures multitask wrap up Foursquare Foursquare Before ICS release After ICS release Whymca Mobile Developer Conference 2012 16
  21. intro ia signature gestures multitask wrap up ActionBar • Navigation (tabs and drop down) • Up button • Action items • Option menu • Split action bar (contextualized action items) Whymca Mobile Developer Conference 2012 17
  22. intro ia signature gestures multitask wrap up “The Action Bar is arguably the most important structural element of an Android app.” Android Design site Whymca Mobile Developer Conference 2012
  23. intro ia signature gestures multitask wrap up Good boy you can build neat UI following the rules TED TED Conferences Whymca Mobile Developer Conference 2012 19
  24. intro ia signature gestures multitask wrap up Good boy Pocket you can build neat UI following the rules Read It Later Whymca Mobile Developer Conference 2012 20
  25. intro ia signature gestures multitask wrap up so effective to be ported into iOS applications Whymca Mobile Developer Conference 2012 21
  26. intro ia signature gestures multitask wrap up Style out Action Bar Android has powerful styling Decoupling is good but, every decoupling brings one level on indirectness Styling is a matter of doc research (sometimes source code) Small projects like Action Bar Style Generator can save days of research! http://jeffgilfelt.com/ Whymca Mobile Developer Conference 2012 22
  27. intro ia signature gestures multitask wrap up Style out Action Bar <resources> <style name="Theme.example" parent="android:style/Theme.Holo.Light"> <item name="android:selectableItemBackground">@drawable/selectable_background_example</item> <item name="android:popupMenuStyle">@style/example_PopupMenu</item> <item name="android:dropDownListViewStyle">@style/example_DropDownListView</item> <item name="android:actionBarTabStyle">@style/example_ActionBarTabStyle</item> <item name="android:actionDropDownStyle">@style/example_DropDownNav</item> <item name="android:actionBarStyle">@style/example_ActionBar</item> </style> <style name="example_ActionBar" parent="@android:style/Widget.Holo.Light.ActionBar"> <item name="android:background">@drawable/ab_solid_example</item> <item name="android:backgroundStacked">@drawable/ab_stacked_solid_example</item> <item name="android:backgroundSplit">@drawable/ab_bottom_solid_example</item> </style> <style name="example_PopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow"> <item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item> </style> <style name="example_DropDownListView" parent="android:style/Widget.Holo.ListView.DropDown"> <item name="android:listSelector">@drawable/selectable_background_example</item> </style> <style name="example_ActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBar.TabView"> <item name="android:background">@drawable/tab_indicator_ab_example</item> </style> <style name="example_DropDownNav" parent="android:style/Widget.Holo.Light.Spinner"> <item name="android:background">@drawable/spinner_background_ab_example</item> <item name="android:popupBackground">@drawable/menu_dropdown_panel_example</item> <item name="android:dropDownSelector">@drawable/selectable_background_example</item> </style> </resources> Whymca Mobile Developer Conference 2012 23
  28. intro ia signature gestures multitask wrap up Get in Control ActionBar standard support does a lot of stuff, more importantly does a lot of device-adaptive, platform compliant stuff. It’s possible to take complete control and build a custom title bar, or do whatever. Weigh your options! Build it + Scale it + Update it = $$$ Whymca Mobile Developer Conference 2012 24
  29. intro ia signature gestures multitask wrap up Bad Boy Twist the Action Bar to give personality Astrid Task Flud News Astrid Inc. Flud 25 Whymca Mobile Developer Conference 2012
  30. intro ia signature gestures multitask wrap up Bad Boy Twist the Action Bar to give personality Fancy Kaleidoscope Thingd Inporia Inc Whymca Mobile Developer Conference 2012 26
  31. intro ia signature gestures multitask wrap up Get in Control requestWindowFeature(Window.FEATURE_NO_TITLE); getActionBar().hide(); better yet is to set it up on the app theme <style name="Theme.MyApp" parent="android:Theme.Holo.Light"> <item name="android:windowNoTitle">false</item> </style> At the beginning of each layout <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/app_bkg"> <include layout="@layout/header_layout" /> ... Whymca Mobile Developer Conference 2012 27
  32. Signature Element
  33. intro ia signature gestures multitask wrap up “Creating an identity for your app goes beyond the action bar. Your app communicates its identity through its data, the way that data is arranged, and how people interact with it. ” Android Design site Whymca Mobile Developer Conference 2012
  34. intro ia signature gestures multitask wrap up Foodspotting Skitch Foodspotting Evernote Corp. Whymca Mobile Developer Conference 2012 30
  35. intro ia signature gestures multitask wrap up A Custom View public class CustomView extends View { private Paint mPaint; private RectF mRect; public CustomView(Context context, AttributeSet attrs) { super(context, attrs); mPaint = new Paint(); mPaint.setAntiAlias(true); mRect = new RectF(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension( MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); final Paint paint = mPaint; paint.setStyle(Style.FILL); paint.setColor(Color.RED); final RectF oval = mRect; oval.left = 0; oval.right = getWidth(); oval.top = 0; oval.bottom = getHeight(); canvas.drawArc(mRect, 0, 90, true, paint); }} Whymca Mobile Developer Conference 2012 31
  36. intro ia signature gestures multitask wrap up A Custom Animation private float delta = 0; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); final Paint paint = mPaint; paint.setStyle(Style.FILL); paint.setColor(Color.RED); final RectF oval = mRect; oval.left = 0; oval.right = getWidth(); oval.top = 0; oval.bottom = getHeight(); canvas.drawArc(mRect, 0 + delta, 90, true, paint); } @Override public void onClick(View v) { ValueAnimator va = ValueAnimator.ofFloat(0, 360).setDuration(2000); delta = 0; va.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { delta = (Float) animation.getAnimatedValue(); invalidate(); } }); va.setInterpolator(new DecelerateInterpolator()); va.start(); invalidate(); Whymca Mobile Developer Conference 2012 32
  37. Wide Gestures Unleash your finger
  38. intro ia signature gestures multitask wrap up ICS and swipes IceCreamSandwich uses and sponsors simple gestural control to quickly navigate between detail views or tabs Swipe is a simple way to express “move away” intent Easier than clicking somewhere - target area is whole screen (Fitt’s Law) Easier than free scrolling - the content is paged (Hick’s Law) Whymca Mobile Developer Conference 2012 34
  39. intro ia signature gestures multitask wrap up Whymca Mobile Developer Conference 2012 35
  40. intro ia signature gestures multitask wrap up Swipe made easy Historically, Android developers had an hard time with this Scrolling, inertias, bounce, attraction, paging (and android.widget.Gallery  is not apt for the purpose) Lots of efforts from the community, only few high-quality ones • Google’s ViewPager  +  (Jake Wharton’s ViewPagerIndicators) • Cyril Mottier’s PagedView ViewPager  Included in Compatibility Package v4 and v13 http://goo.gl/JRqfC Whymca Mobile Developer Conference 2012 36
  41. intro ia signature gestures multitask wrap up DIY: a shortcut Opening activities with swipe An easy way to be faithful to the Design Guidelines without sweating too much is detach animation from gestures SwipeDetector component that detects a discrete UP/DOWN/RIGHT/LEFT + Context.startActivity(Intent  i); Context.overridePendingTransition(R.anim.swipe_i n,  0); Whymca Mobile Developer Conference 2012 37
  42. intro ia signature gestures multitask wrap up SwipeDetector public class SwipeDetector implements View.OnTouchListener { .... case MotionEvent.ACTION_DOWN: downX = event.getX(); downY = event.getY(); downT = event.getEventTime(); return true; case MotionEvent.ACTION_UP: if (mListener == null || event.getEventTime() - downT > 1000) return false; final float deltaX = downX - event.getX(); final float deltaY = downY - event.getY(); // swipe vertical? if (Math.abs(deltaY) > yThreshold && Math.abs(deltaX) < whoKnowsThreshold) { // top or down if (deltaY < 0) { mListener.onSwipeDown(); } else { mListener.onSwipeUp(); } return true; } Whymca Mobile Developer Conference 2012 38
  43. intro ia signature gestures multitask wrap up Oldies but goldies Jake Wharton’s DirectionalViewPager SlidingDrawer Whymca Mobile Developer Conference 2012 39
  44. Prepare to multi-task (seriously)
  45. intro ia signature gestures multitask wrap up Android lets people combine applications into new workflows through multitasking, notifications, and sharing across apps. Whymca Mobile Developer Conference 2012 41
  46. Whymca Mobile Developer Conference 2012 X
  47. intro ia signature gestures multitask wrap up Multi-tasking++ Android has always been characterized by the ability to keep multiple app running at once. Even if not really running, system components are “paused” resumed, stopped and restarted , whenever the system feels like. “All apps running at the same time” Whymca Mobile Developer Conference 2012 42
  48. intro ia signature gestures multitask wrap up Do your homework Activities should save and restore their status: Activity.onSaveInstanceState(Bundle  b);                                 Activity.onRestoreInstanceState(Bundle  b); Views should use: Parcelable  View.onSaveInstanceState();                                             View.onRestoreInstanceState(Parcelable  state); When changing configuration (device rotation): Activity.onRetainNonConfigurationInstance()                                   Activity.getLastNonConfigurationInstance()   are deprecated! Use Fragment.setRetainInstance() Whymca Mobile Developer Conference 2012 43
  49. intro ia signature gestures multitask wrap up Fragment (ation?) Lifecycle-aware modularization of UI chunks http://slidesha.re/iHxTqO Whymca Mobile Developer Conference 2012 44
  50. intro ia signature gestures multitask wrap up 1. It’s a lifecycle concept: don’t use it like an <include  />! 2. getLastNonConfigurationInstance() is deprecated setRetainInstance() 3. cannot be nested! 4. in/out animation and back stack together don’t work 5. you can use fragments in ViewPager 6. onCreateDialog() is deprecated android.app.DialogFragment 7. only viable option is with Android Compatibility library Fragment API is fragmented (???) Whymca Mobile Developer Conference 2012 45
  51. Floating windows Enhancing multitasking
  52. intro ia signature gestures multitask wrap up AirCalc MBFG Whymca Mobile Developer Conference 2012 47
  53. OverSkreen MBFG Whymca Mobile Developer Conference 2012 X
  54. intro ia signature gestures multitask wrap up Overlays The key to implement floating, always on top views is exploiting overlays, through the usage of WindowManager system service Android displays views on different layers (+15 layer types) Application usually manage a Window.TYPE_APPLICATION Examples of other window types: Status Bar, Application Dialog, System Dialog, IME Whymca Mobile Developer Conference 2012 48
  55. intro ia signature gestures multitask wrap up public class FloatingButtonService extends Service { public void onCreate() { super.onCreate(); mButton = new Button(this); mButton.setText("Forever Here"); mButton.setOnTouchListener(new OnTouchListener() { ...something... }); WindowManager.LayoutParams params = new WindowManager.LayoutParams( WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.TYPE_SYSTEM_ALERT, LayoutParams.FLAG_NOT_FOCUSABLE | LayoutParams.FLAG_NOT_TOUCH_MODAL, PixelFormat.TRANSLUCENT); params.gravity = Gravity.CENTER; mWm = (WindowManager) getSystemService(WINDOW_SERVICE); mWm.addView(mButton, params); } public void onDestroy() { mWm.removeView(mButton); super.onDestroy(); } Intent serv = new Intent(this, <uses-permission android:name= FloatingButtonService.class); "android.permission.SYSTEM_ALERT_WINDOW" /> startService(serv); Whymca Mobile Developer Conference 2012 49
  56. And so what?
  57. intro ia signature gestures multitask wrap up Android is the service design platform. Capabilities are limitless Headaches are limitless Step your game up. Whymca Mobile Developer Conference 2012
  58. intro ia signature gestures multitask wrap up Links http://d.android.com/design http://code.google.com/p/androidavanzato/ http://slidesha.re/GSalF6 - @gerdavax on NFC http://www.frogdesign.com Whymca Mobile Developer Conference 2012 52
  59. Emanuele Di Saverio emanuele.disaverio@gmail.com @hazam Guido Parlato guido@higui.it @higui © 2011 frog. All rights reserved.

Notas do Editor

  • \n
  • Soltanto oggi, dopo quasi 4 anni dal lancio della piattaforma, possiamo dire di avere una esperienza d&amp;#x2019;uso Android raffinata e di grande qualita&amp;#x2019;.\nTratti fortemente caratteristici, deisgneata adeguatamente e Paragonabile per qualita&amp;#x2019; a quelle che hanno storicamente costituito lo stato\ndell&amp;#x2019;arte delle UX mobile moderna (iPhone, Windows Phone, WebOS)\n
  • \n
  • \n
  • \n
  • la mission di frog e&amp;#x2019; guidare l&amp;#x2019;innovazione per il mondo connesso, progettando e disegnando i servizi e i prodotti del futuro.\nQueste sono alcune foto prese da progetti recenti. \n
  • Frog e&amp;#x2019; distribuita su tutto il globo, e fornisce servizi di consulenza d&amp;#x2019;innovazione multidisciplinare: Design digitale ed industriale, consulenza strategica, tecnologia.Un ambito nel quale siamo molto forti e&amp;#x2019; il mobile, che e&amp;#x2019; anche il nostro focus principale.\n
  • \n
  • jjj\n
  • \n
  • \n
  • \n\nL&amp;#x2019;ergonomia della nostra mano \n\nquindi l&amp;#x2019;euristica pi&amp;#xF9; accreditata afferma che le toolbars e le barre di navigazione debbano trovarsi nella parte bassa dello schermo\n
  • \n
  • \n
  • \n
  • Non potendo quindi suddividere la navigazione in posizioni distinte, in molte applicazioni asi \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Modifiche delle guidelines android\nmodifica degli pattern attraverso delle contaminazioni con IOS (popover)\nreinterpretazione delle linee guida per assecondare le esigenze di navigazione\n
  • Esigenze di design\nprincipalmente legate all&amp;#x2019;architettura e modelli di navigazione \nsperimentazione di nuovi pattern, che si stanno affermando come standard\n\n
  • \n
  • \n
  • \n
  • SIGNATURE INTERACTIONS\n\nAndroid Widget library is fairly complete, most apps should get away with just styling those\nRemember the style.xml!\n\nCraft a &amp;#x201C;signature&amp;#x201D; element that sticks around in the user mind\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Soltanto oggi, dopo quasi 4 anni dal lancio della piattaforma, possiamo dire di avere una esperienza d&amp;#x2019;uso Android raffinata e di grande qualita&amp;#x2019;.\nTratti fortemente caratteristici, deisgneata adeguatamente e Paragonabile per qualita&amp;#x2019; a quelle che hanno storicamente costituito lo stato\ndell&amp;#x2019;arte delle UX mobile moderna (iPhone, Windows Phone, WebOS)\n
  • \n
  • \n

×