Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

User Interface and Interaction Design for Android

Teresa Deus @ Google DevFest
by

Teresa Futscher

on 10 April 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of User Interface and Interaction Design for Android

Milena Flament
The goal is to create apps that people love to use. Thoughtful UX and aesthetically pleasing visual designs help us get there.
Multiple devices
Smartphones & Tablets
and
Evolution of Android
Android 2.3
Interaction Design
User Interface
1. App icon
2. View Control
3. Action Buttons
4. Action overflow
In app navigation is much more predictable
Do use screen density independent units (dp)
Do
teresa.deus@aptoide.com
Tips and Techniques
Do
and
Don’t

Migrate the global actions
Gingerbread
Use fonts: Droid Sans or Roboto
Use 9-patch drawables
Create high-fidelity mock-ups
General App Structure
New in ICS
www.aptoide.com
Legacy apps on phones with virtual navigation controls
to the action bar & action overflow
Back Button
old
App UI Design Patterns
Google I/O 2013
Android will be at Google I/O
on May 15-17, 2013
which allows a more effective use of spatial relativity to convey meaning.
Consistency
Layouts, Styles, Themes
drawable
Optimize
Include and merge XML
Hierarchy Viewer
Android Tools
Let the framework do the work
and performance
for
Teresa Deus
teresa.deus@aptoide.com
Android 3.0
Honeycomb
Android 4.0
Ice Cream Sandwich
Android 4.1
Jelly Bean
Fight for
Inconsistent hardware buttons
Back
Home
Recents
What’s missing?
How to go to settings page?
menu: easy to find
still available, tag
But it’s time to say goodbye
http://android-developers.blogspot.pt/2012/01/say-goodbye-to-menu-button.html
new
Inconsistent software buttons
http://developer.android.com/design/patterns/compatibility.html
Phones with physical navigation keys
only function: go home
Home button
perform too many functions before ICS
tap
long press
tap
http://developer.android.com/design/media/app_structure_overview.png
1. Top level views
2. Category view
3. Detail/edit view
- Navigation bar
- Action bar
- Multi-pane layouts
- Selection
http://developer.android.com/design/patterns/new.html
Navigation
http://developer.android.com/design/patterns/navigation.html
Up vs. Back
Action Bar
Multi-pane layouts
http://developer.android.com/design/patterns/multi-pane-layouts.html
Show/hide
Expand/collapse
http://www.slideshare.net/AndroidDev/android-ui-design-tips
http://www.androiduipatterns.com
http://developer.android.com/design/patterns/actionbar.html
Do make the large, obvious tap targets
Do create versions of all resources
for high density screens
Do follow Android icon guideline
Don't use bottom tab bars
Don't
Don't use UI elements from other platforms
Don't use labeled back buttons
on action bars
Don't use right-pointing
carets on line items
Try it out!
Improve these interfaces
1. Top level
3. Detail view
http://developer.android.com/design/style/metrics-grids.html
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/design/style/devices-displays.html
http://developer.android.com/design/style/iconography.html
good
bad
Sizes & scale
Style
Proportions
Use non-neutral colors sparingly and with purpose
http://developer.android.com/design/patterns/pure-android.html
Android
iOS
Windows Phone
http://developer.android.com/design/patterns/pure-android.html
Android action bar vs. bottom tabs in iOS
http://developer.android.com/design/patterns/pure-android.html
http://developer.android.com/design/patterns/pure-android.html
smarthphones
tablets
http://developer.android.com/tools/help/draw9patch.html
Mock-up tools:
- balsamiq
- mockup flow
- mockup builder
ViewPager
The workspaces pattern can be implemented with the ViewPager component
allow users to swipe left and right
Publish the app to Google Play
Create promotional material
High Resolution Application Icon
Feature Graphic
https://support.google.com/googleplay/android-developer/answer/1078870?hl=en
Screenshots
512x512, 32-bit PNG with alpha; Max size of 1024KB
180w x 120h, 24 bit PNG or JPEG (no alpha), Full bleed, no border in art
320w x 480h, 480w x 800h, or 480w x 854h, 1280 x 800 or 1280 x 720
File folder: .\sdk\platforms\android-17\data\res\drawable-hdpi
drawable-hdpi
drawable-xhdpi
drawable-mdpi
drawable-ldpi
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:drawable="@drawable/my_button_normal" />

<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="@drawable/my_button_pressed" />

<item
android:state_focused="true"
android:drawable="@drawable/my_button_focused" />

<item
android:state_enabled="false"
android:drawable="@drawable/my_button_disabled" />

</selector>
Define XML components
Use Styles and Themes
<style name="custom_button_style">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:gravity">center</item>
<item name="android:layout_margin">3dp</item>
<item name="android:textSize">15sp</item>
<item name="android:textStyle">bold</item>
<item name="android:background">@drawable/custom_color_button</item>
<item name="android:padding">10dp</item>
<item name="android:textAppearance">@android:style/TextAppearance.Small</item>
</style>
<Button
android:id="@+id/button"
style="@style/custom_button_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/hello_world" />
<include android:id="@+id/refresh_view_layout" layout="@layout/footer_refresh_view" />
Hierarchy Viewer
Pixel Perfect View
Lint
http://developer.android.com/tools/debugging/debugging-ui.html
Pixel Perfect View
Lint
Pay attention to details...
http://android-developers.blogspot.pt/2010/10/improving-app-quality.html
Automated Testing Tool
http://testdroid.com/
https://appthwack.com/
Enchant me. Simplify my life. Make me amazing.
Use of the action bar design pattern across all versions of Android
Holo Everywhere
http://www.holoeverywhere.com/
ActionBarSherlock
http://actionbarsherlock.com/
Don't try to create if already exists
http://www.androidviews.net/
AndroidViews
Full transcript