3. Navigation Bar
Good Practice to leave the left side of the
navigation bar empty
changes when you venture at least one level down, where the
matically sprouts a standard back button on the left. Tapping
evious screen, one more level up toward the app’s main
on. Treat its home at the left side of the navigation as sacred
anting any other controls in that spot, a space that should
n to the previous screen. On the Home screen, where there
he naviga-
screen
title
w, and the
w the title
k button to
The Navigation Bar Shows the Way 139
4. Navigation Bar
vote the full screen to your content, useful for photos and long-form
example. When you take away the navigation bar and its back button
you have to provide some other way to leave the current screen. For tr
apps, which need a navigation bar, the standard way to do this is to t
play of the navigation bar with a tap of the screen. When you do tha
Ebook reader Eucalyp
built-in Photos app (
the disappearing chr
screen to toggle the
navigation bar and b
when visible, the too
are translucent to all
content to remain vi
Chapter 5: The Standard Controls142
5. Table View
Only add graphics to table cells when they add
value to the content and make the list easier to
scan
ence. The primary goal for these visuals should be to make the list items easier
to scan and to provide additional meaning, not just to “add graphics.” When in
doubt, keep it simple and elegant. If your images feel like window dressing in-
stead of actual content, leave them out. (You can also add colors and background
images to table cells to give them a completely new look; find out more on page 186.)
Only add graphics to table cells when they add value to the content and make the list easier to scan, like the three
food-focused examples here. Cocktails+ (left) shows a silhouette of the proper glass for each of its drink recipes,
which also suggests its style of drink.The Lose It calorie counter (middle) illustrates foods with detailed icons that
are faster to identify than their sometimes lengthy text descriptions. Gowalla (right) uses artful icons to illustrate the
style of cuisine for each restaurant.
Chapter 5: The Standard Controls154
6. Table View Cells
Subtitle
useful in content-
rich apps for giving
a preview of the
content on the next
screen
dard table-view cells comes in three other
tional chunk of detail text. This secondary
each cell style, with each style best suited
cell styles from item to item within the sam
are the three standard styles for subtitles:
Table-View C
Subtitle.This cell layout is ideal
for longer text descriptions, useful in
Blue text.Th
left with the de
7. Table View Cells
Blue Text
ideal for settings or
other contexts
where the main title
acts as a bold label
for the svelte detail
text. Space is limited
here.
tional chunk of detail text. This secondary text appears in different loca
each cell style, with each style best suited to specific roles. You can mix
cell styles from item to item within the same list according to your need
are the three standard styles for subtitles:
Table-View Cells: Subtitle Styles
Subtitle.This cell layout is ideal Blue text.The main title appears at Labeled va
8. Table View Cells
Labeled Value
-view cells comes in three other styles, all of which include an addi-
nk of detail text. This secondary text appears in different locations for
yle, with each style best suited to specific roles. You can mix and match
rom item to item within the same list according to your needs. Here
ee standard styles for subtitles:
Table-View Cells: Subtitle Styles
cell layout is ideal Blue text.The main title appears at Labeled value. As in the blue text
9. Text
Labels
display really short text
Text Views
manage longer texts and let user edit it
Web Views
display your app’s own elaborately formatted text
Text Fields
let user enter text or data
10. Text
Text views can set the color, font and
alignment , but that change applies to all of the
text inside
11. Keyboard
has to be dismissed with a separate Done button elsewhere in the interface—
a good idea anyway.)
• Phone pad. This one’s identical to the number pad, but with an additional lay-
out for the +, #, *, and Pause keys.
• Name phone pad. The main keyboard offers letters—the same as the ASCII
keyboard—but the secondary layout is a modified number pad, no punctua-
tion options.
ASCII
Email address Number pad
Name phone pad
Phone pad
Numbers and punctuation URL
