app design guide
TRANSCRIPT
![Page 1: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/1.jpg)
App Design GuideTim Lin
![Page 2: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/2.jpg)
Apps generation
iOS pattern
Android pattern
Windows Phone pattern
Cross platform
UI -> UX
Example
Q&A
Agenda
![Page 3: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/3.jpg)
Apps generation
![Page 4: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/4.jpg)
50 Millions Achieve Time
0
20
40
60
80
Telephone Radio TV InternetFacebook iPod DrawSomthing Angrybird
![Page 5: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/5.jpg)
50 Millions Achieve Time
0
1
2
3
4
Internet Facebook iPod DrawSomthingAngrybird
![Page 6: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/6.jpg)
Android Shipments
![Page 7: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/7.jpg)
iPhone Shipments
![Page 8: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/8.jpg)
Big Vendors’ Shipments
![Page 9: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/9.jpg)
Statistics
![Page 10: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/10.jpg)
Apps Available
![Page 11: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/11.jpg)
![Page 12: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/12.jpg)
App Downloads
![Page 13: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/13.jpg)
Very Interested Rate
![Page 14: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/14.jpg)
iOS米羅 也需要定義所使⽤用的元素
![Page 15: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/15.jpg)
UI Overview
![Page 16: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/16.jpg)
Navigation Bar
Manage Screens Hierarchy
Center Text is the Title
Back Button Label Previous Title
Don’t Create a Multi-segmented Back Button
![Page 17: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/17.jpg)
Toolbar
Contain Control to Perform Action
Frequently Used Command
![Page 18: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/18.jpg)
Tab Bar
Organize Information at the App Level
Don’t Use Tab to Perform Action
Don’t Remove a Tab When the Function is Unavailable
顯⽰示不能點的Tab⽽而不要隱藏
![Page 19: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/19.jpg)
MapView
Let User Interact with it is Better
Use Standard Pin Color
red:destination
green:start point
purple:user-specified point
![Page 20: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/20.jpg)
Page View Controller
![Page 21: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/21.jpg)
Popover (iPad only)
Independent Window to handle View Action
Avoid Making a Popover too Big
One Popover is Visible at a Time
![Page 22: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/22.jpg)
Split View (iPad only)
![Page 23: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/23.jpg)
Table View - I
Display List Structure Data
Avoid Variable Height
Group or Plain
![Page 24: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/24.jpg)
Table View - II
GroupPlain
![Page 25: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/25.jpg)
Table View - III
System Style
![Page 26: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/26.jpg)
Alert
Avoid Create Unnecessary Alert
Keep the Title Short enough to Display in one Line, but Avoid Single Word
Explain what People Can do with it
![Page 27: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/27.jpg)
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
![Page 28: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/28.jpg)
Picker
Choose Date, Time or any Set of Data
Present Picker only in Popover(iPad)
![Page 29: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/29.jpg)
Segment Control
Make Sure each Segment is Easy to Tap
Same Size is Better
Avoid Mixing Text and Image into a Segment
![Page 30: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/30.jpg)
Switcher
Present two Exclude Choices or States (Used in Table View only)
![Page 31: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/31.jpg)
PassBook
![Page 32: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/32.jpg)
Why PassBook
The simplest way to get all your passes in one place
Add, Delete, Share
Time Notification or Location Notification
Auto Update data
![Page 33: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/33.jpg)
Type
Boarding Pass
Coupon
Event Ticket
Store Card
Generic
![Page 34: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/34.jpg)
Demo Video
![Page 35: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/35.jpg)
Game Center
![Page 36: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/36.jpg)
Why GameCenter
No Multiplayer and Social System
3rd parties - OpenFient, Plus+, AGON Online, Score loop
Non-unified Experience
![Page 37: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/37.jpg)
User Information
Nick Name
Apple ID
Point
Profile
![Page 38: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/38.jpg)
Feature
Leader Board
Achievement
Multiplayer
![Page 39: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/39.jpg)
In App Purchase
![Page 40: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/40.jpg)
Type
Consumable
Non-Consumable
Auto-Renewing Subscriptions
Free Subscription
Non-Renewing Subscriptions
![Page 41: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/41.jpg)
![Page 42: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/42.jpg)
![Page 43: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/43.jpg)
![Page 44: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/44.jpg)
Brand New StyleiOS 6iOS 7
In iOS 7, you can manage scroll view insets yourself by using the automaticallyAdjustsScrollViewInsetsproperty of UIViewController.
Table ViewA table view presents data in a single-‐column list of multiple rows.
iOS 7 introduces several changes to the appearances of both plain and grouped table views.
Content ViewsTable View
2013-‐06-‐10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information.
33
iOS 6iOS 7
In iOS 7, you can use a custom animator object and an optional interactive controller object to manage modalpresentation. To learn more about custom view controller transitions, seeUIViewControllerAnimatorTransitioningProtocol Reference and UIViewControllerInteractiveTransitioning Protocol Reference .
Temporary ViewsModal View
2013-‐06-‐10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information.
47
TheElements sample app in iOS 6 SimulatorTheElements sample app in iOS 7 Simulator
Note: iOS 7 Seed 1 is not available on iPad.
It’s tempting to dive straight into the work of updating your app, but there are a few things to think aboutbefore beginning the process.
As you interact with the built-‐in apps, it becomes clear that the changes in iOS 7 are both subtle and profound.Familiar UI elements are easily recognizable but look very different. Visual touches of physicality and realismare muted and refined, while realism in motion is enhanced.
Before You Start
2013-‐06-‐10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information.
7
![Page 45: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/45.jpg)
IOS 7
![Page 46: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/46.jpg)
Icon Style
![Page 47: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/47.jpg)
No Boarder
![Page 48: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/48.jpg)
No Shadow
![Page 49: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/49.jpg)
Navigation BarIn iOS 7, you can control the style of the status bar from an individual view controller and change it while theapp runs. To opt in to this behavior, add the UIViewControllerBasedStatusBarAppearance key to anapp’s Info.plist file and give it the value YES.
Navigation BarA navigation bar helps users navigate through an information hierarchy and, optionally, manage screen contents.
iOS 6iOS 7
iOS 6iOS 7
Opaque gradient blue (default) oropaque black.
By default, the translucent propertyis NO.
Translucent light (default) or translucentdark.
By default, the translucent property isYES.
Bar style
A drop shadow appears at the bottomedge.
A one-‐pixel hairline appears at the bottomedge.
Appearance
Use tintColor to tint the barbackground.
Use tintColor to tint bar button items.
Use barTintColor to tint the barbackground.
Tinting
The Back button is a bordered buttonthat contains the title of the previousscreen.
The Back control is a chevron plus the titleof 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 maskimage. iOS 7 uses the mask to make the previous screen’s title appear to emerge from—or disappear into—thechevron during navigation transitions. To learn about the properties that control the Back button and maskimage, see UINavigationBar Class Reference .
iOS 7 makes it easy to add a search bar to a navigation bar. For details, see “Search Bar and Scope Bar” (page23).
Bars and Bar ButtonsNavigation Bar
2013-‐06-‐10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information.
22
![Page 50: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/50.jpg)
Tab Bar
iOS 6iOS 7
Opaque gradient blue (default) oropaque black.
By default, the translucentproperty is NO.
Translucent light (default) or translucentdark.
By default, the translucent property isYES.
Bar style
A drop shadow appears at the bottomedge.
A one-‐pixel hairline appears at the bottomedge.
Appearance
Use tintColor to tint the barbackground.
Use tintColor to tint scope buttoncontents.
Use barTintColor to tint the barbackground.
Tinting
Tab BarA tab bar gives people the ability to switch between different subtasks, views, and modes.
iOS 6iOS 7
iOS 6iOS 7
Opaque gradient black (default). IniOS 6, the tab bar doesn’t includethe barStyle or translucentproperties.
UITabBar includes the barStyle property.
Translucent light (default) or translucent dark.
By default, thetranslucentproperty isYES.
Bar style
Selection indicator image drawnbehind the tab icon.
The divider image is optional; if provided, acustom selection indicator image is used.
Appearance
Use tintColor to tint the barbackground.
Use tintColor to tint selected tab bar items.
Use barTintColor to tint the barbackground.
Tinting
If you create a custom icon for a tab bar item, you can also use the selectedImage property of UITabBarItemto specify a second icon that represents the selected state of the item. If you don’t provide a selected versionof a custom icon, the same icon is used in both states.
Bars and Bar ButtonsTab Bar
2013-‐06-‐10 | Copyright © 2013 Apple Inc. All Rights Reserved. Apple Confidential Information.
25
![Page 51: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/51.jpg)
Sample - I
![Page 52: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/52.jpg)
Sample - II
![Page 53: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/53.jpg)
Sample - III
![Page 54: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/54.jpg)
Sample - IV
![Page 55: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/55.jpg)
Sample - V
![Page 56: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/56.jpg)
Sample - VI
![Page 57: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/57.jpg)
Sample - VII
![Page 58: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/58.jpg)
Android
![Page 59: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/59.jpg)
UI Overview
![Page 60: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/60.jpg)
System Bars
Status Bar
Navigation Bar
Combined Bar
![Page 61: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/61.jpg)
Home, All App, Recents
![Page 62: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/62.jpg)
Notification
Swipe to remove
![Page 63: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/63.jpg)
Common App UI
Main Action Bar
View Control
Content Area
Split Action Bar
![Page 64: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/64.jpg)
System Style
![Page 65: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/65.jpg)
Gestures - I
Touch Long Press Swipe Drag
![Page 66: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/66.jpg)
Gestures - II
Double Click Pinch Open Pinch Close
![Page 67: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/67.jpg)
Tabs
Scrollable Tabs Fixed Tabs
![Page 68: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/68.jpg)
Stack Tabs
Add Tabs into Action Bar
![Page 69: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/69.jpg)
List & Scroll
![Page 70: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/70.jpg)
Grid Lists
Vertical Horizontal
![Page 71: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/71.jpg)
Buttons - I
![Page 72: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/72.jpg)
Buttons - II
Borderless style
![Page 73: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/73.jpg)
Text Fields
![Page 74: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/74.jpg)
Seek Bars & Sliders
![Page 75: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/75.jpg)
Switchers
Switches
RadioButtons
CheckBoxes
![Page 76: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/76.jpg)
Dialogs
Optional Title Region
Content Area
Action Buttons
![Page 77: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/77.jpg)
Typical Dialog
With List With Picker With TextField
![Page 78: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/78.jpg)
AlertsAlert without
Title Bars
Alert with Title Bars
![Page 79: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/79.jpg)
Popups
No exactly Cancel/Accept Button
![Page 80: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/80.jpg)
Toasts
Auto disappear
Lightweight feedback
![Page 81: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/81.jpg)
Pickers
Date PickerTime Picker
![Page 82: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/82.jpg)
Widgets - I
Hybird Widget
Control Widget
Information Widget
![Page 83: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/83.jpg)
Widgets - II
GridList Custom
Collection Type
![Page 84: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/84.jpg)
Fragmentation
![Page 85: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/85.jpg)
DevicesAndroid Fragmentation 2013
An OpenSignal Report
We have seen 11,868 distinct devices download our app in the past few months. In our report last year we saw 3,997.
BRAND FRAGMENTATION
A similar look by brand, to see how much of the market each leading device manufacturer currently has, with Samsung clearly way out in front. Calculating the percentage share of the market held by the top few device manufacturers from our graphic really succeeds in emphasising quite how dominant Samsung are, with Sony-Ericsson in second with a 6.5% market share - less than 1/6th of Samsung's. Some of the brand names shown as different in the graphic are part of the same company, i.e. Moto and Motorola are the same and HTC is shown as split up into its different regional variants. But even when unified under one umbrella name Motorola only ends up with a 4.2% share and HTC even less at 3.9%.
Samsung have a 47.5% share of the Android market.
!
More than 10000
![Page 86: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/86.jpg)
OSsAndroid Fragmentation 2013
An OpenSignal Report
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
Key to the success of any app is getting the UI right, and Android presents two particular challenges to developers in this regard. Firstly, brands have a tendency to produce their own variants on the system UI (Samsung’s Touchwhizz and the HTC Sense being two such examples - which can change the look of
![Page 87: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/87.jpg)
Compare with iOS
Android Fragmentation 2013
An OpenSignal Report
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
Key to the success of any app is getting the UI right, and Android presents two particular challenges to developers in this regard. Firstly, brands have a tendency to produce their own variants on the system UI (Samsung’s Touchwhizz and the HTC Sense being two such examples - which can change the look of
![Page 88: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/88.jpg)
Decide API level
Use third-party
library
Test and test....
Solution
![Page 89: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/89.jpg)
Screen SizesAndroid Fragmentation 2013
An OpenSignal Report
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 dozen or so iPod-touch, iPhones and iPad varieties there are just 4 different physical screen sizes - partly due to Apple's tendency to double pixel density while quadrupling resolution (e.g. iPad 2 -> iPad 3) maintaining the same physical screen size. The graphic below shows iOS screen size fragmentation, allowing for an easy comparison with Android.
![Page 90: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/90.jpg)
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
![Page 91: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/91.jpg)
Fragments
![Page 92: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/92.jpg)
Handset UI
![Page 93: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/93.jpg)
Tablet UI
![Page 94: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/94.jpg)
Windows Phone
![Page 95: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/95.jpg)
UI Overview
![Page 96: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/96.jpg)
Metro
Metro是我們的設計語⾔言。我們之所以稱它為Metro,是因為它在內容及排版上是有現代感⽽而且乾淨的、流暢⽽而⼜又充滿動態感。⽽而且這完全是真實的
Metro is our design language, it’s modern and clean, simple and direct. It’s elevates content. It’s love typography. And while it’s deniably, authentically.
![Page 97: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/97.jpg)
Metro Style
![Page 98: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/98.jpg)
Nokia Lumia
![Page 99: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/99.jpg)
Live Tiles
![Page 100: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/100.jpg)
Live Tiles Type
News
Finance
Sports
Trending
Travel
![Page 101: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/101.jpg)
Panorama
![Page 102: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/102.jpg)
Flat UI
![Page 103: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/103.jpg)
Screen
![Page 104: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/104.jpg)
Screen in Motion
![Page 105: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/105.jpg)
Principles
![Page 106: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/106.jpg)
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.
![Page 107: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/107.jpg)
Get on the Grid
The grid is the glue to give your content the cohesion it needs
![Page 108: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/108.jpg)
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
![Page 109: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/109.jpg)
Who are you
Find the typography that best reflect your app’s personalty
![Page 110: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/110.jpg)
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.
![Page 111: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/111.jpg)
Content over Chrome
By removing the chrome and take advantage of font, scale, and color, sender name and title are easier to read
![Page 112: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/112.jpg)
Let your Content Breathe
Relevant commands and functionality are apparent and easy to interact with
![Page 113: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/113.jpg)
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
![Page 114: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/114.jpg)
Be AliveLive 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.
![Page 115: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/115.jpg)
Motion
Help people learn how your app’s interface work
![Page 116: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/116.jpg)
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.
![Page 117: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/117.jpg)
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
![Page 118: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/118.jpg)
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.
![Page 119: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/119.jpg)
Think platform
Consider how your app will work across from factors and scenarios.
![Page 120: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/120.jpg)
Process
![Page 121: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/121.jpg)
Concept
Focus your App experience
![Page 122: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/122.jpg)
Photosynth
![Page 123: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/123.jpg)
Structure
Organization make everything easier.
![Page 124: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/124.jpg)
Audible
![Page 125: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/125.jpg)
Interaction
Tell the story of your app
![Page 126: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/126.jpg)
Epicurious
![Page 127: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/127.jpg)
Visual
Speak without words.
![Page 128: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/128.jpg)
Cocktail Flow
![Page 129: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/129.jpg)
Prototype
Refine your masterpiece.
![Page 130: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/130.jpg)
Cross platform App
![Page 131: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/131.jpg)
How many Platforms do we have?
![Page 132: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/132.jpg)
Statistics
![Page 133: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/133.jpg)
市占率比較
![Page 134: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/134.jpg)
開發⾨檻
![Page 135: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/135.jpg)
Web App
![Page 136: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/136.jpg)
Estimate
![Page 137: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/137.jpg)
Estimate - Inative feature
Web App Native App
![Page 138: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/138.jpg)
Estimate - IIUX first
Web App Native App
![Page 139: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/139.jpg)
Estimate - IIIcomplex UI
Web App Native App
![Page 140: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/140.jpg)
Estimate - IVlow budget
Web App Native App
![Page 141: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/141.jpg)
Estimate - VIAP
Web App Native App
![Page 142: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/142.jpg)
Estimate - VISEO
Web App Native App
![Page 143: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/143.jpg)
Estimate - VIIreview needed
Web App Native App
![Page 144: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/144.jpg)
Estimate - VIIInumerous data
Web App Native App
![Page 145: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/145.jpg)
Estimate - IXupdate frequently
Web App Native App
![Page 146: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/146.jpg)
Estimate - XCross platform
Web App Native App
![Page 147: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/147.jpg)
Web App
![Page 148: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/148.jpg)
Web App
![Page 149: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/149.jpg)
Browser support
![Page 150: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/150.jpg)
Compare - I
AndroidIOS
Same
![Page 151: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/151.jpg)
Compare - II
AndroidIOS
Different
![Page 152: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/152.jpg)
UI -> UX
![Page 153: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/153.jpg)
UI Design Flow
![Page 154: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/154.jpg)
Research
![Page 155: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/155.jpg)
Define Persona
![Page 156: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/156.jpg)
List Use Case
![Page 157: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/157.jpg)
Define Flow
![Page 158: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/158.jpg)
Design UI
![Page 159: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/159.jpg)
Prototyping
![Page 160: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/160.jpg)
Test
![Page 161: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/161.jpg)
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
![Page 162: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/162.jpg)
Detail Steps - II
Feature writing
Requirement writing
Graphic arts
Interaction design
Information architecture
Usability
![Page 163: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/163.jpg)
Detail Steps - III
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
![Page 164: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/164.jpg)
Detail Steps - IV
Copy writing
Presentation and speaking
Working tightly with Programer
Brainstorm and Coordination
Company Culture evangelism
Communication to stakeholders
![Page 165: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/165.jpg)
Tips
![Page 166: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/166.jpg)
Brand Definition
Uniqueness
Consistency
App UI language
![Page 167: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/167.jpg)
Feedback
![Page 168: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/168.jpg)
Remove Useless Item
![Page 169: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/169.jpg)
Optimize UI Flows
![Page 170: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/170.jpg)
Profiling
![Page 171: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/171.jpg)
Thinking in Mobile
![Page 172: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/172.jpg)
Desktop to Mobile - I
![Page 173: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/173.jpg)
Desktop to Mobile - II
![Page 174: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/174.jpg)
Examples
![Page 175: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/175.jpg)
NFC
![Page 176: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/176.jpg)
NFC Ring Unlock
![Page 177: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/177.jpg)
Google Wallet
![Page 178: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/178.jpg)
Google Wallet
![Page 179: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/179.jpg)
Camera
![Page 180: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/180.jpg)
Action Movie FX
![Page 181: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/181.jpg)
Text Recognize
![Page 182: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/182.jpg)
名⽚管理
![Page 183: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/183.jpg)
QR-Code
![Page 184: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/184.jpg)
活動通
![Page 185: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/185.jpg)
AR
![Page 186: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/186.jpg)
String
![Page 187: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/187.jpg)
GPS
![Page 188: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/188.jpg)
Nike+
![Page 189: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/189.jpg)
導航王
![Page 190: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/190.jpg)
Hotels.com
![Page 191: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/191.jpg)
Reference
![Page 192: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/192.jpg)
http://developer.android.com/
http://developer.apple.com/
http://developer.windowsphone.com/
http://www.youtube.com/
http://www.idc.com/
http://en.wikipedia.org/
![Page 193: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/193.jpg)
http://www.zdnet.com/
http://opensignal.com/reports/
http://msdn.microsoft.com/en-US/windows/apps/hh779072
http://astrodynamics.net/Articles/
http://www.windowsphone.com/en-us/features
![Page 194: App design guide](https://reader031.vdocuments.net/reader031/viewer/2022013004/58ed95c21a28ab671f8b4695/html5/thumbnails/194.jpg)
QA