Guidelines for Android App Mobile Design - Silicon Valley Infomedia Ltd.

1
(No Transcript)
2
Introduction

• Android offers an outstanding platform for mobile
  design and goes a long way in creating an
  effective app that offers a brilliant experience
  across many devices of diverse combinations of
  aspect ratio, pixel density and screen size. The
  diversity of Android throws a number of
  challenges to the designer and here we bring to
  you some crucial guidelines in terms of pixels,
  user experience, layouts, styles and themes that
  need to be considered for creation of successful
  Android apps.

3
Steps

• Pixels
• User Experience
• Layouts, Themes and Styles

4
Pixels

• An apps perceived quality is largely dependent
  on the visual design, which also enhances the
  usability. Most of the developers are well-versed
  with the UI patterns, but only a handful has the
  requisite visual design skills. You need to
  concentrate on the following in order to deliver
  an experience that is aesthetically pleasing.

Use Fonts
Use Fonts
Nice Scaling
State Friendly
Utilize 9-patch Drawables
5

• Use Fonts Roboto and Droid Sans are the two
  major fonts of Android. However, any fonts can be
  roped in for an application in TTF format.
• Nice Scaling The Android platform comes with
  diverse screen densities, with no definite
  resolutions for targeting but a measurement
  format for layouts widgets and graphics that is
  somewhat density independent. So, it is always
  advisable to optimize the graphics for a varying
  range of screen densities. Make sure to test the
  designs across low-end devices and optimize
  resources that do not scale well.

6

• State Friendly Significant confirmations of
  selections and clicks are provided by the touch
  states. During customization of the widgets like
  buttons, the creation of drawables with respect
  to all required states such as disabled, pressed,
  focused and default is crucial. The size is also
  a significant factor. Touch targets should
  usually be minimum 45 density pixels in height
  and width.
• Utilize 9-patch Drawables These facilitate
  stretching and scaling of PNGs in a pre-defined
  manner. Markings alongside the top-left edge
  outline the stretchable regions. Optionally, the
  padded content region can be defined through
  markings alongside the bottom-right edgings.
  9-patches are crucial for creation and
  customization of UI widgets.

7
User Experience

• As is the case with any other platform, Android
  App Development has conventions and patterns.
  These help in formation of expectations regarding
  the behavior of an unfamiliar app.

Use of UI patterns
Design Responsively
Design of User Flows
Optimization of First Use
Comprehension of Mobile Interactions
8

• Use of UI patterns UI patterns should be
  considered as tools rather than constraints,
  because they provide recognizable hints regarding
  interaction and navigation, maintaining platform
  consistency. Some of the common Android patterns
  are the action bar, the dashboard pattern, the
  workspaces pattern and the ribbon menu. These are
  the most effective tools for carving out app
  navigation and layouts.
• Design Responsively With varying screen areas,
  Android is somewhat similar to responsive web
  design, wherein rendering support to each screen
  is the target. You can avoid premature
  optimization through focusing on popular devices
  and target users. The ideal option is to target
  middle sized popular phones and then go for
  requisite optimization with user flows and
  alternate layouts for specifically small tablets
  and devices.

9

• Design of User Flows Android apps contain a set
  of screens, at the basic level. Navigation within
  the stacks is possible with the help of buttons,
  list items and action bar icons. There is also
  the up affordance which facilitates the
  navigation along the information hierarchy. It is
  good to try user flows with prospective users
  through mock-ups or wireframes and iterate.
  Ideally, prototypes on real devices should be
  leveraged because the same facilitates testing
  within realistic mobile environments.
• Optimization of First Use Installation of apps
  often is a response to real world problems. So,
  it is always wise to render a feel of the
  experience. You can also think of launching a
  tutorial with the app.
• Comprehension of Mobile Interactions Users
  interact with mobile apps in a different manner
  than with websites or PC software. In case of
  mobile apps, most interactions utilize touch
  input and are often capable of measuring in
  seconds.

10
Layouts, Themes and Styles

• Let us now discuss some of the best practices for
  crafting performance-oriented and maintainable
  layouts. The commonly used layouts are Linear
  Layout and Relative Layout, and sometimes Grid
  Layout.

Automation with framework
Extraction of values
Debugging
Use of themes and styles
Optimization
11

• Automation with framework The Android framework
  makes room for automated resource switching
  revolving around the folder structure. This
  implies that there is the possibility of having
  distinct graphic layouts and assets for diverse
  screen sizes as well as densities.
• Extraction of values Keeping the layout XML free
  from dimensions and colors is a good practice.
  You can separately define them and reference in
  the layouts, thereby enhancing the visual
  consistency and ensuring that things are easy to
  change at a later stage. Extraction of these
  values facilitates dimension switching across
  diverse platform versions, orientations and
  screen sizes.

12

• Use of themes and styles An effective means to
  ensure a maintainable XML layout is to segregate
  the positioning concern from the styling concern.
  Every Layout View is required to possess a height
  and a width attribute. Sets of attributes that
  recur can be moved to styles whereas widget
  styles that universally occur across the app may
  be moved to the theme.
• Optimization The merge and include XML tags
  facilitate the dropping of reusable sections of
  UI into the layouts, thereby minimizing duplicate
  XML as identical set of views appear in manifold
  layout configurations. Lint is a comparatively
  new addition for Android Developer Tools, which
  creates warnings regarding potential performance
  optimizations after scanning the project
  resources.
• Debugging The Hierarchy Viewer tool makes it
  convenient to spot bugs through inspection of an
  apps layout tree.

13

• Hope you are now acquainted with the major tools
  and techniques pertaining to Android mobile
  design. Remember that the most effective apps
  rely a lot on clean visual design and platform
  consistency.
• We provide android widget development services.
  If you would like to hire mobile app developers
  from our team, please get in touch with us at
  Mindfire Solutions.

14
Contact Us

• Email info_at_siliconinfo.com
• Phone No
• USA 1 - 408-216-7636
• UK 44-208-819-5832
• Australia 61 - 283-073-843
• India 91-79-2685-2558
• Website
• http//www.siliconinfo.com

15
(No Transcript)