hirevietnamese - lesson 2

27
HIREVIETNAMESE iPhone Training Lesson 2

Upload: levanly

Post on 18-Jan-2015

2.564 views

Category:

Technology


0 download

DESCRIPTION

iPhone App Development Tutorial

TRANSCRIPT

Page 1: HireVietnamese - Lesson 2

HIREVIETNAMESE

iPhone TrainingLesson 2

Page 2: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Contents

iPhone UI Design Considerations1

Application Layout2

iPhone UI Element Overview3

Example 24

Exercise 25

2

Page 3: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Design Considerations

The iPhone is not a desktop system.

The Apple iPhone is a powerful smart phone that is being used to improve the productivity of user. To design simple, successful iPhone app user interfaces, keep in mind the unique attributes of the iPhone.

Eat with it, sleep with it, drink with it, live with it.

3

Page 4: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Design Considerations

Small Screen Limit the number of controls

Break a single complex app into two or more apps with very different functions.

4

Page 5: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Design Considerations

One screen at a time

5

Page 6: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Design Considerations

One app at a time(iOS < 4)

Save user-entered data immediately.

Show the saved data the next time users open the app.

6

Page 7: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Design Considerations

Hand/Finger Input

UI Elements must be big enough to hit with a finger.

Finger tapping means the pointer can just disappear. Rollover effects don’t work well.

Multi-touch events

7

Page 8: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Design Considerations

No External Keyboard

No physical keyboard on iPhone.

On-screen keyboard appears when needed.

Multi keyboard types are available.

8

Page 9: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Design Considerations

Device Orientation

9

Page 10: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Design Considerations

Device Orientation

Applications are notified when device rotates portrait to landscape and back.

Can also find absolute orientation.

10

Page 11: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Design Considerations

No training

The strongest asset of the iPhone is its ease of use. The simple user interface usually allows users to get their tasks done without training or reading online Help.

Analyze your users, their needs and design a very simple, intuitive user interface that allows users to operate your app without training or Help

11

Page 12: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Application Layout

Tab Bar ControlTab control always visible

12

Page 13: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Application Layout

Tab Bar ControlUse in:

Applications with different models.

Applications with different subtasks related to the overall app function.

Many standard icons are provided.

13

Page 14: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Application Layout

Navigation Bars

14

Page 15: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Application Layout

Navigation Bars

Like navigating a web site.

Start with high-level general view.

“Back” buttons automatic.

Changes are animated.

15

Page 16: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Application Layout

Table Views

16

Page 17: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Application Layout

Table Views

Single column only.

But custom cells can offer more flexibility.

Can use multiple custom cell types in the same table.

17

Page 18: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Application Layout

Toolbars

18

Page 19: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Application Layout

Toolbars

Provide quick access to common actions.

Usually at the bottom in the iPhone Apps .

Many standard icons are provided.

19

Page 20: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Element Overview

Switch control

iPhone version of a checkbox control.

Change states on tap or drag.

20

Page 21: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Element Overview

Segmented control

iPhone version of a radio buttons.

21

Page 22: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Element Overview

Pickers

Another way to have users select from a list of values.

Can have multiple columns.

22

Page 23: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Element Overview

Activity Indicators

If you need to show one for very long.

The system provides standard network activity indicator in status bar.

23

Page 24: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

iPhone UI Element Overview

Alert ViewsUse in:

When user has more than one option for an action.

When you need to confirm an action.

24

Page 25: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Example 2

25

Page 26: HireVietnamese - Lesson 2

HIREVIETNAMESEhttp://www.hirevietnamese.com HIREVIETNAMESE

Exercise 2

26

Page 27: HireVietnamese - Lesson 2

HIREVIETNAMESE