HF_iPhone_Dev_Ch2.pdf

(1478 KB) Pobierz
iPhone app patterns
2
Hello @twitter!
@grandmom please bring me some soda.
I’m so over the milk. #babyrants
Apps have a lot of moving parts. OK, actually, they don’t have any real
moving parts, but they do have lots of UI controls. A typical iPhone app has more going on
than just a button, and it’s time to build one. Working with some of the more complicated
widgets means you’ll need to pay more attention than ever to how you design your app,
as well. In this chapter, you’ll learn about some of the fundamental design patterns used in
the iPhone SDK, and how to put together a bigger application.
37
this is a new chapter
768987581.051.png 768987581.053.png 768987581.054.png 768987581.055.png 768987581.001.png 768987581.002.png 768987581.003.png
mike needs your help again
Mike is back. He has a great girlfriend, Renee, but
they’ve been having some problems. She thinks that
he doesn’t talk about his feelings enough.
A Twitter app is the way to go here.
That would be perfect: I can just tweet
about my feelings and then she’ll be happy.
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 posting to Twitter in no time. But first,
what should his tweets say?
38
Chapter 2
768987581.004.png 768987581.005.png 768987581.006.png 768987581.007.png 768987581.008.png 768987581.009.png 768987581.010.png 768987581.011.png
iPhone app patterns
First we need to figure out
what Mike (really) wants
Mike isn’t a complex guy. He wants an easy interface to
talk to Twitter and he really doesn’t want to have to type
much.
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 Twitter app.
Bui ld t he GUI
Dete rmine app layo ut
Figure out how to use
the controls
you are here 4
39
768987581.012.png 768987581.013.png 768987581.014.png 768987581.015.png 768987581.016.png
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 Twitter app.
Be fore you s tart codi ng
any thin g, ske tch up wh at
you ’re t hinki ng.
Determ ine app layout
B uild th e GU I
Fi gure out how t o use
the contr ols
the user is going to work with the app. The
app for Mike is going to work with Twitter,
and he’s going to be able to make some
selections for his feelings and thoughts.
That’s it!
Q: How do we talk to Twitter?
A: Don’t worry, we’ll give you some code
to help you to work with that.
Q: How do you figure out the app
layout?
A: 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: Are we always going to start with a
sketch?
A: Yes! Good software design starts
with knowing what you’re building and how
Q: Does every control work differently
than the others?
A: 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.
Just FYI, though, Twitter has a really well-
documented API. We’ll give you what you
need, but feel free to add more features!
40
Chapter 2
768987581.017.png 768987581.018.png 768987581.019.png 768987581.020.png 768987581.021.png 768987581.022.png 768987581.023.png 768987581.024.png 768987581.025.png 768987581.026.png
iPhone 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
Option #2
InstaTwit
InstaTwit
I’m
and feeling
I’m
and feeling
hello
worlding
awesome
Send
Cancel
about it.
Send Button
Which app is better?
Why? (Be specific.)
Why not the other?
you are here 4
41
768987581.027.png 768987581.028.png 768987581.029.png 768987581.030.png 768987581.031.png 768987581.032.png 768987581.033.png 768987581.034.png 768987581.035.png 768987581.036.png 768987581.037.png 768987581.038.png 768987581.039.png 768987581.040.png 768987581.041.png 768987581.042.png 768987581.043.png 768987581.044.png 768987581.045.png 768987581.046.png 768987581.047.png 768987581.048.png 768987581.049.png 768987581.050.png 768987581.052.png
 
Zgłoś jeśli naruszono regulamin