Tapworthy ch5

214 views

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
214
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tapworthy ch5

  1. 1. TapworthyChapter 5
  2. 2. The Standard ControlNavigation BarTable ViewTextKeyboard
  3. 3. Navigation BarGood Practice to leave the left side of thenavigation bar emptychanges when you venture at least one level down, where thematically sprouts a standard back button on the left. Tappingevious screen, one more level up toward the app’s mainon. Treat its home at the left side of the navigation as sacredanting any other controls in that spot, a space that shouldn to the previous screen. On the Home screen, where therehe naviga-screentitlew, and thew the titlek button toThe Navigation Bar Shows the Way 139
  4. 4. Navigation Barvote the full screen to your content, useful for photos and long-formexample. When you take away the navigation bar and its back buttonyou have to provide some other way to leave the current screen. For trapps, which need a navigation bar, the standard way to do this is to tplay of the navigation bar with a tap of the screen. When you do thaEbook reader Eucalypbuilt-in Photos app (the disappearing chrscreen to toggle thenavigation bar and bwhen visible, the tooare translucent to allcontent to remain viChapter 5: The Standard Controls142
  5. 5. Table ViewOnly add graphics to table cells when they addvalue to the content and make the list easier toscanence. The primary goal for these visuals should be to make the list items easierto scan and to provide additional meaning, not just to “add graphics.” When indoubt, 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 backgroundimages 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 threefood-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 thatare faster to identify than their sometimes lengthy text descriptions. Gowalla (right) uses artful icons to illustrate thestyle of cuisine for each restaurant.Chapter 5: The Standard Controls154
  6. 6. Table View CellsSubtitleuseful in content-rich apps for givinga preview of thecontent on the nextscreendard table-view cells comes in three othertional chunk of detail text. This secondaryeach cell style, with each style best suitedcell styles from item to item within the samare the three standard styles for subtitles:Table-View CSubtitle.This cell layout is idealfor longer text descriptions, useful inBlue text.Thleft with the de
  7. 7. Table View CellsBlue Textideal for settings orother contextswhere the main titleacts as a bold labelfor the svelte detailtext. Space is limitedhere.tional chunk of detail text. This secondary text appears in different locaeach cell style, with each style best suited to specific roles. You can mixcell styles from item to item within the same list according to your needare the three standard styles for subtitles:Table-View Cells: Subtitle StylesSubtitle.This cell layout is ideal Blue text.The main title appears at Labeled va
  8. 8. Table View CellsLabeled 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 foryle, with each style best suited to specific roles. You can mix and matchrom item to item within the same list according to your needs. Hereee standard styles for subtitles:Table-View Cells: Subtitle Stylescell layout is ideal Blue text.The main title appears at Labeled value. As in the blue text
  9. 9. TextLabelsdisplay really short textText Viewsmanage longer texts and let user edit itWeb Viewsdisplay your app’s own elaborately formatted textText Fieldslet user enter text or data
  10. 10. TextText views can set the color, font andalignment , but that change applies to all of thetext inside
  11. 11. Keyboardhas 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 ASCIIkeyboard—but the secondary layout is a modified number pad, no punctua-tion options.ASCIIEmail address Number padName phone padPhone padNumbers and punctuation URL

×