Tải bản đầy đủ - 0 (trang)
Chapter 2. iOS App Patterns: Hello, Renee!

Chapter 2. iOS App Patterns: Hello, Renee!

Tải bản đầy đủ - 0trang

mike needs your help



Author’s note:

not take

Head First doesy for Mike’s

any responsibilitoblems.

relationship pr

You have this friend Mike. He has a great girlfriend,

Renee, but they’ve been having some problems. She

thinks that he doesn’t talk about his feelings enough.



I could use my iPhone to send her emails

about my feelings, but it’s so much work.

Can you speed that process up?



Mike



There’s (about to be) an app for that.

Using some solid design and the basic controls

included in the Interface Builder library, you can

have Mike sending off emails in no time. The app

can handle filling out some basics, setting it up to

go straight to Renee, and Mike can just fill in some

blanks. But first, what should his messages say?



42   Chapter 2

www.it-ebooks.info



iOS app patterns



First, we need to figure out

what Mike (really) wants

Mike isn’t a complex guy. He wants an easy interface to

create his emails and he really doesn’t want to have to

type much.



Here’s what Mike

handed you at the

end of the night.



t

Here’s wha



I want:



h typing

- Not muc

unication

m

m

o

c

t

n

a

- Inst

use

__

- Easy to

is: I’m ___

h

t

e

k

li

s

il

- My ema _____ about it.”

and feeling



App Magnets



Now that we know what Mike wants, what do we need to do? Take

the magnets below and put them in order of the steps you’ll follow

to build his email app.



Build the GUI



Determine app layout

Figure out how to use

the controls



Handle the data



The controls are the standard

use.

iOS UI elements we’re going to



the email

Generate



Data here means Mike’s

feelings and actions.

you are here 4   43



www.it-ebooks.info



start with the app layout



App Magnets Solution



Now that we know what Mike wants, what do we need

to do? Take the magnets below and put them in order

of the steps you’ll follow to build his email app.

Determine app layout



ed on the

After you’ve laesnd

ign, you need to

general app d oc

umentation a

get into the d e out how to

little and figurcontrols you’ve

implement the

chosen.



Build the GUI



Figure out how to use

the controls



Here we need to m

anage

the data coming fr

om the

controls.



Q:

A:



Handle the data



How do you figure out the app layout?



We’ll help you out w

ith this

last step.



A:

Q:

A:



Don’t worry, we’ll give you some code to help you to work

with that.

Why isn’t Mike texting Renee? Why send an email?



Simply put, because that won’t work in the simulator. Once

you have a good handle on creating the email, porting that to texting

isn’t hard.



Are we always going to start with a sketch?



Yes! Good software design starts with knowing what you’re

building and how the user is going to work with the app. Expect to

spend about 50 percent of your development time on the UI—it’s

what separates the great apps from the rest.



Q:



Some people writ

first—we’re goinge tobackend code

forth depending on go back and

but to get started, our project,

GUI first this time. we’ll do the



the email

Generate



We’re going to give you a couple to choose from to get started,

but in general, it’s important to think about what your app needs to do

and focus on those features first.



Q:

A:



Before you start coding

anything, sketch up what

you’re thinking.



How do we talk to the email messaging framework?



Q:

A:



Does every control work differently than the others?



For the most part, no—once you learn a few basic patterns,

you’ll be able to find your way through most of the SDK. Some of the

controls have a few peculiarities here and there, but for the most part,

they should start to look familiar.



44   Chapter 2

www.it-ebooks.info



iOS app patterns



App Layout Construction

Here are two designs to evaluate. Based on

aesthetics, usability, and standard iPhone app

behavior, which one is better for Mike?



Option #1



Renee’s

email here

Pre-populated

text, so just

insert a couple

of words

Text field for

user name



Option #2



InstaEmail

I’m

and feeling

Send



Cancel



Labels that

will be part

of the email

text



InstaEmail

and feeling

I’m

hello

awesome

worlding



about it.

Send Button



Text field

for email

password



r

Spinning controlle

filled in with

activities and

feelings



The button will

have email addresses

and passwords



preconfigured



Which UI is better?

Why? (Be specific.)



Why not the other?



you are here 4   45

www.it-ebooks.info



keep it simple



App Layout Construction

Here are two designs to evaluate. Based on aesthetics,

usability, and standard iPhone app behavior, which

one is better for Mike?



Bad



Option #1



InstaEmail



Lots of typin

This isn’t alwaygs in here.

but we can do bebad,

tter.

here for

More typinrgobably won’t

stuff he p er the first

change aft

time...

ere.

...and again h



Which app is better?



I’m

and feeling

Send



Cancel



need to type

Your user doesnd’tress again. Since

in the email ad same, we can

it’s always thethis for him.

take care of

would be

The send buttonbottom of

better at the stuck between

the page, not his.

controls like t

Cancel wha

never have t“ ? iPhone apps almost

If the user Quit”-type buttons.

hits the homchanges his mind, he

is moved to e button and the app

the backgrou

nd.



#2.



Option #2 has a lot less typing and fewer fields overall.

Since the user doesn’t need to change his username or password often, there’s no reason to put

it on the main view every time he runs the app.



Why? (Be specific.)



Why not the other?



Option #1 has a lot of typing and settings to remember. The buttons are confusing.



46   Chapter 2

www.it-ebooks.info



iOS app patterns



!

d

o

o

G

App flows

from top tcoleanly

bottom.

is shown as e

t

x

e

t

n

o

m

m

v

Co

e doesn’t hrasor

ik

M

l—

e

b

la

a

ove the cu

to try to m

around it.



Option #2



InstaEmail

and feeling

I’m

hello

awesome

worlding



about it.

Send Button



ton that

Smart send butem

ailing, not

keeps the user sswords or

remembering pa

URLs.



This is the one

you’re going to

build for Mike.



Q:



Do I really need to care about usability and aesthetics

so much?



A:



Usability and aesthetics are what made the iPhone a success,

and Apple will defend them to the death. Even more important, you

don’t get to put anything on the App Store or on anyone else’s iPhone

without their approval. Apple has sold billions of apps—if yours

doesn’t fit with the iPhone look and feel or is hard to use, people will

find someone else’s app and never look back.



Q:



type in

Instead of having Mike

feelings,

what he’s doing and his

ker to select

we can give him a picwe

r options

from. This means fe ermi

ned, but

since they’re predet We’d want

it’s way easier to use. with him, but

to double-check this with what

this seems consistent

Mike’s after.



We got rid of the username, password, and email fields.

The email one I understand, but what about the other two?



A:



Anytime your app needs configuration information that the user

doesn’t need to change frequently, you should keep it out of the main

task flow. Apple even provides a special place for these called a

Settings bundle that fits in with the standard iPhone settings. We’re

not going to use that in this chapter (we’ll just hard code the values),

but later we’ll show you how to put stuff in the Settings page. That’s

usually the right place for things like login details.



Q:



How am I supposed to know what Apple thinks is good

design or aesthetically pleasing?



A:



Funny you should ask...go ahead, turn the page.



you are here 4   47

www.it-ebooks.info



what’s your (app) type?



App design rules—the iOS HIG

The iOS Human Interface Guide (HIG) is a document that Apple

distributes for guidance in developing iOS Apps for sale on the App

Store. You can download it at http://developer.apple.com/ios. This isn’t just

something nice they did to help you out; when you submit an app for

approval, you agree that your app will conform to the HIG.

We can’t overstate this: you have to follow the HIG, as Apple’s

review process is thorough and they will reject your application if

it doesn’t conform. Complain, blog with righteous anger, and then

conform. Now let’s move on.

Apple also distributes a few other guides and tutorials, including the

iPhone Application Programming Guide. This is another great source of

information and explains how you should handle different devices, like

the iPhone, devices with old versions of iOS, and the iPod Touch. Not

paying attention to the iPod Touch is another great way to get your app

rejected from the App Store.



hors do nost

t

u

a

e

h

t

e

il

Note: Wh esting these methodApp

suggest t rejected from the rity

of being can say with autho

Store, wey work.

that the



Application types

The HIG details three main types of applications that are commonly

developed for the iPhone. Each type has a different purpose and

therefore offers a different kind of user experience. Figuring out what

type of application you’re building before you start working on the

GUI helps get you started on the road to good interface design.

Immersive Apps



Games are a classic example, but like this simulated level,

immersive apps use a very custom interface that allows

the user to interact with the device. As a result, HIG

guidelines aren’t as crucial in this case.



Utility Apps



Productivity Apps



info

ic set of ttle

if

c

e

p

s

a

li

Get

r with as

to the usioe n or settings

interact ation as possible.

configur



n

e informatio

Help manaleg te tasks. Info

and comp hical, and you

is hierarc by drilling

navigate more levels of

down into

detail.



e more

Usually havdesign than a

interface ity app, and are

productiv to stay very

expected with the HIG.

consistent



48   Chapter 2

www.it-ebooks.info



iOS app patterns



Below are a bunch of different application ideas. For each one, think about what kind

of app it really is and match it to the app types on the right.



App Description



Type of App



InstaEmail 1.0: Allows you to email

with minimal typing.



News Reader: Gives you a list of

the news categories and you can

get the details on stories you

choose.



Marble Game: A marble rolling

game that uses the accelerometer

to drive the controls.



Stopwatch Tool: Gives you a

stopwatch that starts and stops by

touching the screen



Immersive Application



Utility Application



Productivity Application



Recipe Manager: A meal listing

that allows you to drill down and

look at individual recipes.



you are here 4   49

www.it-ebooks.info



who does what solution



SOlUTion

Match each app description to its application type.



App Description



Type of App



InstaEmail1.0: Allows you to create

an email with minimal typing.



Since we have one screen

and no typing, InstaEmail is

more of a Utility App.



Since this

has a list-dArpp News Reader: Gives you a list of

drill-down iven, the news categories and you can

get the details on stories you

interface,

Productivitity ’s choose.

.



The

accelerometer

controls a big

rolling, marble.

We want a

very focused

stopwatch GUI,

no real data to

work through.



Immersive Application



Marble Game: A marble rolling

game that uses the accelerometer

to drive the controls.



Utility Application



Stopwatch Tool: Gives you a

stopwatch that starts and stops by

touching the screen



Recipe Manager: A meal listing

that allows you to drill down and

look at individual recipes.







Productivity Application



Lots of data to work through here: tabl a

drill-down to recipes—definitely producties,

vity.



We’re going to get into more HIG

elements later.



This is just the beginning of our relationship

with the HIG. As we start designing apps, we’re

going to be using platform-specific technologies (like cameras) and

working with some physical analogs for the iPad.



50   Chapter 2

www.it-ebooks.info



iOS app patterns



HIG guidelines for pickers and buttons

The HIG has a section on the proper use of all the standard controls,

including the two that we’ve selected for InstaEmail—a picker and a

button. Before you build the view with your controls, it’s a good idea to

take a quick look at the recommendations from Apple. You’ll find this

information in the HIG, under iOS UI Element Usage Guidelines.



P ic k e r



t,

If you have units (feelay

, they

seconds, etc.) to dispthe

need to be fixed to

selection bar here.



InstaEmail

and feeling

I’m

hello

awesome

worlding



about it.

Send Button



We just finished

with this...



Let’s get started

building this...



splays a few

The picker only dien

at a time, so

items on the scre ur user isn’t

remember that yo see all the

going to be able to

options at once.



The picker’s overall

although you can hidesize is fixed,

it be part of the vi it or have

do in InstaEmail). ew (like we



Bu t t o n



p layout

Determine ap



he GUI

Build t



The rounded rectangle

button is pretty

straightforward, but

keep in mind it should

always perform some

kind of action.

Figure out how to use

the widgets



Handle the data



the email

Generate



Now let’s move

on to building

the GUI.



you are here 4   51

www.it-ebooks.info



a new view



Create a new View-based project

for InstaEmail

Once you’ve started Xcode, select File→New→New Project. Just like iDecide,

for InstaEmail we have one screen and we’re not going to be animating it (like the

utility app) or starting with a particular navigation for the app, so again choose the

View-based Application targeted for iPhone and name it InstaEmail.



Do this!

To write an app that can

send an email, we’ll need to

add a new framework. With

the project and its targets

highlighted, select Build

Phases, expand the Link

Binary With Libraries

section, and push the + button.

Then select MessageUI

Framework from the list and

click Add.



This is the project

highlighted.



Here are the

highlighted targets.



Just to keep things organized,

drag the new Framework into

the Frameworks folder.







The new project type in Xcode is not

necessarily the same as your app type.

For example, a Productivity App can be written as a

View-based Application, a Window-based Application,

Navigation-based Application, or a Tab Bar Application.



52   Chapter 2

www.it-ebooks.info



We’ll be working with

these other project ok.

types later in the bo



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 2. iOS App Patterns: Hello, Renee!

Tải bản đầy đủ ngay(0 tr)

×