27. Action Sheet
Display a Set of Choices to
Action
Include a Cancel Button
(iPhone)
Avoid too many Choices
Use Red Button to Indicate
Destructive Action
49. Navigation Bar
In iOS 7, you can control the style of the status bar from an individual view controller and change it while the
app runs. To opt in to this behavior, add the UIViewControllerBasedStatusBarAppearance key to an
app’s Info.plist file and give it the value YES.
Navigation Bar
A navigation bar helps users navigate through an information hierarchy and, optionally, manage screen contents.
iOS 6iOS 7
iOS 6iOS 7
Opaque gradient blue (default) or
opaque black.
By default, the translucent property
is NO.
Translucent light (default) or translucent
dark.
By default, the translucent property is
YES.
Bar style
A drop shadow appears at the bottom
edge.
A one-‐pixel hairline appears at the bottom
edge.
Appearance
Use tintColor to tint the bar
background.
Use tintColor to tint bar button items.
Use barTintColor to tint the bar
background.
Tinting
The Back button is a bordered button
that contains the title of the previous
screen.
The Back control is a chevron plus the title
of the previous screen. *
Back button
* If you want to use a custom image to replace the default chevron, you also need to create a custom mask
Navigation Bar
50. Tab Bar
A drop shadow appears at the bottom
edge.
A one-‐pixel hairline appears at the bottom
edge.
Appearance
Use tintColor to tint the bar
background.
Use tintColor to tint scope button
contents.
Use barTintColor to tint the bar
background.
Tinting
Tab Bar
A tab bar gives people the ability to switch between different subtasks, views, and modes.
iOS 6iOS 7
iOS 6iOS 7
Opaque gradient black (default). In
iOS 6, the tab bar doesn’t include
the barStyle or translucent
properties.
UITabBar includes the barStyle property.
Translucent light (default) or translucent dark.
By default, the translucent property is YES.
Bar style
Selection indicator image drawn
behind the tab icon.
The divider image is optional; if provided, a
custom selection indicator image is used.
Appearance
Use tintColor to tint the bar
background.
Use tintColor to tint selected tab bar items.
Use barTintColor to tint the bar
background.
Tinting
If you create a custom icon for a tab bar item, you can also use the selectedImage property of UITabBarItem
to specify a second icon that represents the selected state of the item. If you don’t provide a selected version
of a custom icon, the same icon is used in both states.
85. DevicesAndroid Fragmentation 2013
We have seen 11,868 distinct devices download our app in the past
few months. In our report last year we saw 3,997.
More than 10000
87. Compare with iOS
COMPARISON WITH IOS
Android fragmentation of all kinds is usually illustrated in comparison with iOS. These two pie charts
clearly show the difference in API fragmentation between the two competing operating systems.
SCREEN SIZES
89. Screen Sizes
Android Fragmentation 2013
various default elements. Secondly, no other smartphone platform boasts such a proliferation of different
screen sizes. For help in overcoming these difficulties see our 40 developer tips for Android Optimization.
Designing and coding layouts that work well across all these screens is hugely challenging. Across the
90. Same looking
Provide different size of pictures
Use DP not PX
Different looking
Provide layouts for different screen size
Use Fragment to mix layout
Solution
106. Pride in Craftsmanship
Sweat the details.
Make using apps safe and reliable.
Use balance, symmetry, and hierarchy.
Align your app layout to the grid, the new layout for apps.
Make your app accessible to the widest possible audience, including people who have impairments or disabilities.
107. Get on the Grid
The grid is the
glue to give your
content the
cohesion it needs
108. It all Stacks Up
Use hierarchy and
balance when
design your app
Good use of
typography can
create a sense of
structure and
rhythm in your app
109. Who are you
Find the
typography that
best reflect your
app’s personalty
110. Be Fast and Fluid
Be responsive to user interaction and ready for the next interaction.
Design for touch and direct interaction.
Delight your users with motion.
Smoothly connect to what comes before and after.
111. Content over Chrome
By removing the
chrome and take
advantage of font,
scale, and color,
sender name and
title are easier to
read
113. Authentically Digital
Be dynamic and alive with communication.
Use typography beautifully.
Use bold, vibrant colors.
Connect to the cloud so that your users can stay connected to each other
114. Be Alive
Live Tiles are responsive,
alive and engaging.
Plus they can run the
gamut of your
imagination - from
notifying you about new
email to giving you the
inside tip on drink
specials at your favorite
bar.
116. Do More with Less
Be great at something instead of mediocre at lots of things.
Put content before chrome.
Be visually focused and direct, letting people get immersed in what they love, and they will explore the rest.
Inspire confidence in users.
Reduce redundancy in your UI.
117. Info is In
Be “infographic” information
delivery is the primary goal,
not the wrapper around it.
Adopting the infographic
approach will help you optimize
the user experience on Window
Phone
118. Win as One
Use the UI model.
Work with other apps to complete scenarios by participating in app contracts.
Use our tools and templates to promote consistency.
161. Detail Steps - I
Field research
Face to face interviewing
Creation and administering of tests
Gathering, organizing and present statistics
Documentation of peoples and finding
Production design
162. Detail Steps - II
Feature writing
Requirement writing
Graphic arts
Interaction design
Information architecture
Usability
164. Detail Steps - IV
Copy writing
Presentation and speaking
Working tightly with Programer
Brainstorm and Coordination
Company Culture evangelism
Communication to stakeholders
