Upload
jintin-lin
View
125
Download
1
Embed Size (px)
Citation preview
App Design GuideTim Lin
Apps generation
iOS pattern
Android pattern
Windows Phone pattern
Cross platform
UI -> UX
Example
Q&A
Agenda
Apps generation
50 Millions Achieve Time
0
20
40
60
80
Telephone Radio TV InternetFacebook iPod DrawSomthing Angrybird
50 Millions Achieve Time
0
1
2
3
4
Internet Facebook iPod DrawSomthingAngrybird
Android Shipments
iPhone Shipments
Big Vendors’ Shipments
Statistics
Apps Available
App Downloads
Very Interested Rate
iOS米羅 也需要定義所使⽤用的元素
UI Overview
Navigation Bar
Manage Screens Hierarchy
Center Text is the Title
Back Button Label Previous Title
Don’t Create a Multi-segmented Back Button
Toolbar
Contain Control to Perform Action
Frequently Used Command
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⽽而不要隱藏
MapView
Let User Interact with it is Better
Use Standard Pin Color
red:destination
green:start point
purple:user-specified point
Page View Controller
Popover (iPad only)
Independent Window to handle View Action
Avoid Making a Popover too Big
One Popover is Visible at a Time
Split View (iPad only)
Table View - I
Display List Structure Data
Avoid Variable Height
Group or Plain
Table View - II
GroupPlain
Table View - III
System Style
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
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
Picker
Choose Date, Time or any Set of Data
Present Picker only in Popover(iPad)
Segment Control
Make Sure each Segment is Easy to Tap
Same Size is Better
Avoid Mixing Text and Image into a Segment
Switcher
Present two Exclude Choices or States (Used in Table View only)
PassBook
Why PassBook
The simplest way to get all your passes in one place
Add, Delete, Share
Time Notification or Location Notification
Auto Update data
Type
Boarding Pass
Coupon
Event Ticket
Store Card
Generic
Demo Video
Game Center
Why GameCenter
No Multiplayer and Social System
3rd parties - OpenFient, Plus+, AGON Online, Score loop
Non-unified Experience
User Information
Nick Name
Apple ID
Point
Profile
Feature
Leader Board
Achievement
Multiplayer
In App Purchase
Type
Consumable
Non-Consumable
Auto-Renewing Subscriptions
Free Subscription
Non-Renewing Subscriptions
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
IOS 7
Icon Style
No Boarder
No Shadow
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
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
Sample - I
Sample - II
Sample - III
Sample - IV
Sample - V
Sample - VI
Sample - VII
Android
UI Overview
System Bars
Status Bar
Navigation Bar
Combined Bar
Home, All App, Recents
Notification
Swipe to remove
Common App UI
Main Action Bar
View Control
Content Area
Split Action Bar
System Style
Gestures - I
Touch Long Press Swipe Drag
Gestures - II
Double Click Pinch Open Pinch Close
Tabs
Scrollable Tabs Fixed Tabs
Stack Tabs
Add Tabs into Action Bar
List & Scroll
Grid Lists
Vertical Horizontal
Buttons - I
Buttons - II
Borderless style
Text Fields
Seek Bars & Sliders
Switchers
Switches
RadioButtons
CheckBoxes
Dialogs
Optional Title Region
Content Area
Action Buttons
Typical Dialog
With List With Picker With TextField
AlertsAlert without
Title Bars
Alert with Title Bars
Popups
No exactly Cancel/Accept Button
Toasts
Auto disappear
Lightweight feedback
Pickers
Date PickerTime Picker
Widgets - I
Hybird Widget
Control Widget
Information Widget
Widgets - II
GridList Custom
Collection Type
Fragmentation
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
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
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
Decide API level
Use third-party
library
Test and test....
Solution
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.
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
Fragments
Handset UI
Tablet UI
Windows Phone
UI Overview
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.
Metro Style
Nokia Lumia
Live Tiles
Live Tiles Type
News
Finance
Sports
Trending
Travel
Panorama
Flat UI
Screen
Screen in Motion
Principles
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.
Get on the Grid
The grid is the glue to give your content the cohesion it needs
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
Who are you
Find the typography that best reflect your app’s personalty
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.
Content over Chrome
By removing the chrome and take advantage of font, scale, and color, sender name and title are easier to read
Let your Content Breathe
Relevant commands and functionality are apparent and easy to interact with
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
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.
Motion
Help people learn how your app’s interface work
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.
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
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.
Think platform
Consider how your app will work across from factors and scenarios.
Process
Concept
Focus your App experience
Photosynth
Structure
Organization make everything easier.
Audible
Interaction
Tell the story of your app
Epicurious
Visual
Speak without words.
Cocktail Flow
Prototype
Refine your masterpiece.
Cross platform App
How many Platforms do we have?
Statistics
市占率比較
開發⾨檻
Web App
Estimate
Estimate - Inative feature
Web App Native App
Estimate - IIUX first
Web App Native App
Estimate - IIIcomplex UI
Web App Native App
Estimate - IVlow budget
Web App Native App
Estimate - VIAP
Web App Native App
Estimate - VISEO
Web App Native App
Estimate - VIIreview needed
Web App Native App
Estimate - VIIInumerous data
Web App Native App
Estimate - IXupdate frequently
Web App Native App
Estimate - XCross platform
Web App Native App
Web App
Web App
Browser support
Compare - I
AndroidIOS
Same
Compare - II
AndroidIOS
Different
UI -> UX
UI Design Flow
Research
Define Persona
List Use Case
Define Flow
Design UI
Prototyping
Test
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
Detail Steps - II
Feature writing
Requirement writing
Graphic arts
Interaction design
Information architecture
Usability
Detail Steps - III
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Detail Steps - IV
Copy writing
Presentation and speaking
Working tightly with Programer
Brainstorm and Coordination
Company Culture evangelism
Communication to stakeholders
Tips
Brand Definition
Uniqueness
Consistency
App UI language
Feedback
Remove Useless Item
Optimize UI Flows
Profiling
Thinking in Mobile
Desktop to Mobile - I
Desktop to Mobile - II
Examples
NFC
NFC Ring Unlock
Google Wallet
Google Wallet
Camera
Action Movie FX
Text Recognize
名⽚管理
QR-Code
活動通
AR
String
GPS
Nike+
導航王
Hotels.com
Reference
http://developer.android.com/
http://developer.apple.com/
http://developer.windowsphone.com/
http://www.youtube.com/
http://www.idc.com/
http://en.wikipedia.org/
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
QA