Design guidelines for android developers
-
Upload
qandil-tariq -
Category
Technology
-
view
1.064 -
download
4
Transcript of Design guidelines for android developers
Boutique product development companyIt is amazing what you can accomplish when you have a client-centric team to deliver outstanding products.
Boutique product development companyIt is amazing what you can accomplish when you have a client-centric team to deliver outstanding products.
Design Guidelines for Android Developers Qandil Tariq | Software Engineer Lala Rukh | Software Engineer
Design PrinciplesDesign Guidelines for Android Developers
Agenda
StyleDevices And Display
Supporting Multiple Screens
Multi-pane layouts
Themes and styles
Touch Feedback
Metrics and Grids
Iconography
Branding
Writing Style
9-patch Images
Android utilities
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
Android powers millions of phones, tablets, and other devices in a wide variety of screen sizes and form factors
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
Problem: How to handle multiple devices
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
Solutions
The ideal solution is to design the user interface of your application so that it appears correctly on the widest possible range of devices
Create apps that gracefully scale from large tablets to smaller phones
How to achieve this
The best way to achieve this is to design the user interface using layout managers that do not rely on absolute positioning
Qandil Tariq | Software Engineer
Design PrinciplesSupporting Multiple Screens
Terms and conceptsScreen size
Actual physical size, measured as the screen's diagonal. For simplicity, Android groups all actual screen sizes into four generalized sizes:
Small
Normal
Large
Extra large
Qandil Tariq | Software Engineer
Design PrinciplesSupporting Multiple Screens
Terms and conceptsScreen density
The quantity of pixels within a physical area of the screen
Usually referred to as dpi (dots per inch). For example, a "low" density screen has fewer pixels within a given physical area, compared to a "normal" or "high" density screen.
Android groups all actual screen densities into four generalized densities:
Low
Medium
High
Extra high
Qandil Tariq | Software Engineer
Design PrinciplesSupporting Multiple Screens
Terms and concepts
Orientation
The orientation of the screen from the user's point of view.
There are two types of orientation:
Portrait
Landscape
Resolution
The total number of physical pixels on a screen.
Applications do not work directly with resolution; applications should be concerned only with screen size and density, as specified by the generalized size and density groups.
Qandil Tariq | Software Engineer
Design PrinciplesSupporting Multiple Screens
Density-independent pixel (dp)A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen
px = dp * (dpi / 160).
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
Android qualifiers that allow you to provide special resources for different screen configurations.Link : https://developer.android.com/guide/practices/screens_support.html
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
Relation between screen size and dpi.
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
Screen Sizes and Densities in market
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
Be flexible Stretch and compress your layouts
Optimize layout Create compound views that combine multiple views
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
Assets for all Provide resources for different screen densities (DPI) to ensure that your app looks great on any device.
Almost every application should provide alternative resources to support specific device configurations.
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
Alternative layouts Provide alternative layouts for some of the different screen sizes
The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra large screen should go in layout-xlarge/
Qandil Tariq | Software Engineer
Design PrinciplesDevices and Displays
What is the strategy
One approach is to work in the base standard (normal size and MDPI) and scale it up or down for the other buckets
Another approach is to start with the device with the largest screen size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.
Qandil Tariq | Software Engineer
Design PrinciplesSupporting Multiple Screens
Best Practices
Use wrap_content, fill_parent, or the dp unit for layout dimensions
Do not use hard-coded pixel values in your application code
Do not use AbsoluteLayout
Use size and density-specific resources
Qandil Tariq | Software Engineer
Design PrinciplesMulti-pane layouts
Combining Multiple Views Into OneOn smaller devices your content is typically divided into a master grid or list view and a detail view. Touching an item in the master view opens a different screen showing that item's detail information.
But Tablets have more screen real estate than phones, you can use panels to combine the related list and detail views into a single compound view.
This uses the additional space more efficiently and makes navigating the app easier.
Qandil Tariq | Software Engineer
Design PrinciplesMulti-pane layouts
Compound Views and Orientation ChangesScreens should strive to have the same functionality regardless of orientation.
If you use a compound view in one orientation, try not to split it up when the user rotates the screen.
There are several techniques you can use to adjust the layout after orientation change while keeping functional parity intact.
Qandil Tariq | Software Engineer
Design PrinciplesThemes and styles
Themes are Android's mechanism for applying a consistent style to an app or activity.
Pick the system theme that best matches the needs and design
aesthetics for your app.
Applying themes will go a long way in helping you to build apps that fit right into the general visual language of Android
Benefits:
It increase code re use ability.
It generalized the main theme of app in one place.
You can specify the color,font or any property related to some view at one place and use it on may places.
Qandil Tariq | Software Engineer
Design PrinciplesThemes and styles
Android gmail theme:
Qandil Tariq | Software Engineer
Design PrinciplesThemes And Styles
Styles in Android share a similar philosophy to cascading style sheets in web design
They allow you to separate the design from the content.
AThemeis a style applied to an entireor application, rather than an individual
Styles support inheritance.
Qandil Tariq | Software Engineer
Design PrinciplesThemes And Styles
A style is a collection of properties that specify the look and format for a or window.
Color
Height
Padding
Font size
Qandil Tariq | Software Engineer
Design PrinciplesTouch Feedback
Be responsive to touches in a gentle way
Let user know the app is "listening"
Make it subtle
Why its necessary?
Try to feel users their actions are very important for app.
Qandil Tariq | Software Engineer
Design PrinciplesTouch Feedback
Benefits of feedback:
Communication
When your objects react to more complex gestures, help users understand what the outcome will be.
Qandil Tariq | Software Engineer
Design PrinciplesTouch Feedback
Benefits of feedback:
Boundaries
When users try to scroll past the beginning or end of a scrollable area, communicate the boundary with a visual cue.
Qandil Tariq | Software Engineer
Design PrinciplesMetrics and Grids
48dp Rhythm
Touchable UI components are generally laid out along 48dp units.
On average, 48dp translate to a physical size of about 9mm (with some variability).
Qandil Tariq | Software Engineer
Design PrinciplesMetrics and Grids
48dp Rhythm Mind the gapsSpacing between each UI element is 8dp.
Qandil Tariq | Software Engineer
Design PrinciplesMetrics and Grids
Why 48dp?
If you design your elements to be at least 48dp high and wide you can guarantee that:
your targets will never be smaller than the minimum recommended target size of 7mm regardless of what screen they are displayed on.
you strike a good compromise between overall information density on the one hand, and targetability of UI elements on the other.
Qandil Tariq | Software Engineer
Design PrinciplesIconography
Icons can convey intended message better than text
Design icons for every density range
Taking MDPI as baseline:
LDPI is MDPI x 0.75.
HDPI is MDPI x 1.5.
XHDPI is MDPI x 2.
XXHDPI is MDPI x 3.
Lala Rukh | Software Engineer
Design PrinciplesIconography
Launcher
Should be descriptive, explanatory about your app
On Mobile Device 48x48 dp (MDPI)
Google Play Store tile size 512x512dp
Lala Rukh | Software Engineer
Design PrinciplesIconography
Action Bar
One of the most important design elements for Android app
Provides quick access to more frequent actions
Supports consistent navigation and view switching withins app
A dedicated space to give your app an identity
General structure:
App Icon
View Control
Action Buttons
Action Overflow
Lala Rukh | Software Engineer
Design PrinciplesIconography
Action Bar
Use contractions. Pictographic, flat, not too detailed
Size for phone 32x32 dp (MDPI)
Icons matching with theme
Lala Rukh | Software Engineer
Design PrinciplesIconography
Small Contextual Icons
Neutral, flat, simple
Use neutral colors
Size 16X16 dp (MDPI)
Lala Rukh | Software Engineer
Design PrinciplesIconography
Notification Icons
Flat and simple
Must be entirely white
Pictographic
Size 24x24 dp (MDPI)
Lala Rukh | Software Engineer
Design PrinciplesIconography
Design Tips
Use vector shapes when possible
Start with large artboards
When scaling, redraw bitmap layers as needed
Use common naming conventions for icon assets
Lala Rukh | Software Engineer
Design PrinciplesYour Branding
Color
Use color for branding
High contrast color for emphasis
Lala Rukh | Software Engineer
Design PrinciplesYour Branding
Logo
Using your logo for branding
Lala Rukh | Software Engineer
Design PrinciplesYour Branding
Icons
Use personalized icons if your brand have them already
Lala Rukh | Software Engineer
Design PrinciplesWriting StyleKeep it brief
Put the most important thing first
Lala Rukh | Software Engineer
Design PrinciplesWriting StyleBe friendly
Focus on user's concern, not technical details
Lala Rukh | Software Engineer
Design PrinciplesWriting StyleDescribe only what's necessary, and no more
Avoid repetition
If a significant term gets repeated within a screen or block of text, find a way to use it just once.
Lala Rukh | Software Engineer
Design PrinciplesWriting StyleWords to avoid
Lala Rukh | Software Engineer
Design Principles9-patch Images
name.9.png
1 pixel wide guides
Scale up
Lala Rukh | Software Engineer
Design PrinciplesAndroid Asset Studio
Launcher Icons
Action Bar and Tab Icons
Notification Icons
Generic icons
Android Action Bar Style Generator
Android Holo Color Generator
Lala Rukh | Software Engineer
Design PrinciplesQuestions
Qandil Tariq & Lala Rukh
Design PrinciplesThank You
Qandil Tariq & Lala Rukh
Design PrinciplesReferences
Qandil Tariq & Lala Rukh
http://developer.android.com/design/index.html
http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
http://radleymarx.com/blog/simple-guide-to-9-patch/
http://developer.android.com/training/multiscreen/screensizes.html