App design guide

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


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


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


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 scope buttoncontents.


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 selected tab bar items.


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


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


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


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


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://opensignal.com/reports/fragmentation-2013/






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

http://www.zdnet.com







QA