Thông tin tài liệu
ptg 228 CHAPTER 10 ● VISUAL DESIGN problematic given that mobile users typically want quick access to maps. To avoid these user experience issues, make sure your hierarchy matches user needs within the relevant context. And, more important, make sure that every element you choose is essential for the user experience. Even the most well-craed hierarchy will break down if there are too many elements. Placing items near the top is not always key to establishing visual hierarchy; the task ow and relationship to other elements must also be considered. For example, Tw it teric lets users add cont ac ts, i ma ges, a nd loc at ion in formation to their Tweets (FIGURE 10.9). Although these options are near the top, they may be over- looked since the cursor focus is in the text area. Also, the header is typically used for navigation, so users may not expect additional options in that area. In con- trast, on TweetDeck (FIGURE 10.10) the Tweet options are in the lower-right portion of the Tweet form, supporting the natural workow. FIGURE 10.9 Twitterific Tweet form FIGURE 10.10 TweetDeck Tweet form Scale Scale is another way to establish visual hierarchy. In essence, larger visual ele- ments attract the eye more than smaller ones. FIGURE 10.11 illustrates how ier- mometer uses large text combined with a bright blue background to emphasize the temperature. Its place in the visual hierarchy is reinforced through contrast. Other elements, such as the City, Condition, Wind, and Unit, have smaller type with a subdued blue background. Both groupings occupy the same space, but the temperature is bigger. Scale can also establish hierarchy within visual groupings. For example, All Recipes uses scale and color to draw attention to the recipe name, photo, and rating (FIGURE 10.12). In contrast, the recipe author is displayed in smaller type, Download from www.wowebook.com ptg VISUAL STRUCTURE 229 suggesting that this information is less important. is makes sense within this context (it’s unlikely that users will know the author), but a dierent scale would be appropriate if it were a celebrity chef. FIGURE 10.11 iThermometer app FIGURE 10.12 All Recipes recipe screen ALIGNMENT Eective alignment can make your designs easier to understand and more usable. To illustrate, let’s look at USA TODAY and the Hungton Post (FIGURES 10.13–10.14). Notice how the headline, section, byline, and body are all aligned le in USA TODAY. e photo is right-aligned, but this works since it would disrupt the reading ow if it were le-aligned. FIGURE 10.13 USA TODAY article view FIGURE 10.14 Huffington Post article view Download from www.wowebook.com ptg 230 CHAPTER 10 ● VISUAL DESIGN In contrast, the alignment on the Hungton Post alternates with each piece of information, forcing users to scan right and le as they read through the article. As you rene your designs, avoid such arbitrary alignment: Every item should have a visual connection with the other items. 2 To play it safe, aim for one align- ment per screen. Additionally, consistent alignment across similar types of screens will unify your overall app design. Color We associate color with certain meanings based on our environment (e.g., green = fresh), culture (e.g., red = good luck in China), and personal experiences (e.g., lavender reminds me of my grandmother). 3 As you choose colors for your iPhone app, it’s important to consider the relevant environment and culture. Choosing inappropriate colors may send the wrong message or even turn some users away. For example, purple is the color of mourning in ailand, but it symbolizes roy- alty in the West. 4 In addition to evoking meaning, color can help reinforce visual structure in the following ways: • Dierentiation • Emphasis • Classication DIFFERENTIATION Color can be used to dierentiate many visual elements on the iPhone. Controls that are oen customized by the designer include the navigation bar, list headers, and segmented controls. Navigation Bar If you want to dierentiate your navigation bar from the background, try using contrasting colors. To illustrate, consider the Facebook and Flickr apps, shown in FIGURES 10.15–10.16. Facebook has a blue navigation bar and a white background, which calls attention to the brand. In contrast, Flickr uses all white to minimize the user interface, which allows the user to focus on the photos. Both approaches are eective as long as they meet their respective app goals. 2. Robin Williams, e Non-Designer’s Design Book (Peachpit Press, 2008). 3. Donis A. Dondis, A Primer of Visual Literacy (MIT Press, 1973). 4. Jennifer Kyrnin, “Color Symbolism Chart by Culture,” http://webdesign.about.com/od/color/a/ bl_colorculture.htm . NOTE If you need assistance with your palette, consider using a tool like Adobe Kuler (http://kuler.adobe.com), which helps users create color themes. Avoid combi- nations that are problem- atic for visually impaired users (e.g., red and black) or color-blind users (e.g., red and green). NOTE Chapter 11, “Branding and Advertising,” will discuss the relationship between visual design and brand- ing. Often, visual design decisions, such as the color palette, are constrained by the existing brand design. Download from www.wowebook.com ptg COLOR 231 FIGURE 10.15 Facebook FIGURE 10.16 Flickr List Headers List headers are used to dierentiate related items. Since they are a guide, not the primary focus, consider using colors with low contrast. For example, let’s compare the iLike and iConcertCal apps (FIGURES 10.17–10.18). Notice how the dates in the iLike app are readily available but don’t compete with the main content. On the other hand, the dates on the iConcertCal app are more prominent than the events themselves. As the user scans the list, the blue bars demand equal (if not more) attention, but users are presumably more interested in the events. If the iConcert- Cal dates were shown in a color with lower contrast (for example, dark gray), the events would stand out more. FIGURE 10.17 iLike FIGURE 10.18 iConcertCal Download from www.wowebook.com ptg 232 CHAPTER 10 ● VISUAL DESIGN Segmented Controls If you choose to customize segmented controls, make sure there’s enough contrast to dierentiate the segments. Also, keep in mind that Interface Builder lets you alter only the tint; thus you may need to create a custom control to get certain col- ors. e Whole Foods recipe tab (Overview, Ingredients, Method) is an example of a custom control (FIGURE 10.19). Notice how the tan color contrasts well with the green and visually connects with the recipe’s background color. FIGURE 10.19 Whole Foods recipe screen EMPHASIS Color may also be used to emphasize certain information or tasks. FIGURE 10.20 shows how TweetDeck uses red to emphasize Updates and yellow for writing Tweets. B e sure not to over use your emphasis colors; other wise t he content may be ignored, which defeats the purpose. For example, the Betty Crocker app uses red—a color normally reserved for alerts—for tabs, buttons, icons, and links. Red is synonymous with their brand (the red spoon), but it would be more eective if used sparingly (FIGURE 10.21). Color can also emphasize the primary action on a screen. Amazon uses an orangey-yellow color and arrow icon to call attention to the Sign In button (FIGURE 10.22). In contrast, Wells Fargo’s Sign On button is dicult to see since it is the exact same color as the background (FIGURE 10.23). If you plan to color-code app buttons, carefully consider how they will t into your palette. Also, make sure your colors don’t conict with the colors used in the built-in apps. For example, green is used to make a call within the telephone, and red is used to end a call. Download from www.wowebook.com ptg COLOR 233 CLASSIFICATION Color can be an eective way to classify app content. FIGURE 10.24 shows how USA TODAY uses color to indicate which section you’re currently viewing (e.g., green is used for the Money section); these colors correspond to those used on the web site and in the newspaper. e Hungton Post also tries to communicate its sections by color-coding the headlines. Unfortunately, that solution is much less eective. e colored text may slow readers down as they try to decipher its meaning (FIGURE 10.25). If you choose to use color for classication, make sure the approach adds value and clearly indi- cates what each color means. FIGURE 10.24 USA TODAY FIGURE 10.25 The Huffington Post FIGURE 10.20 TweetDeck FIGURE 10.21 Betty Crocker FIGURE 10.22 Amazon FIGURE 10.23 Wells Fargo Download from www.wowebook.com ptg 234 CHAPTER 10 ● VISUAL DESIGN Type Ty pe can inuence how users interpret and perceive you r application. For exam- ple, Marker Felt (displayed as Marker Felt) may seem friendly and approachable within an art app but informal and unprofessional within a nancial news app. is section discusses several aspects of type—typeface, size, color, and weight— within the context of the iOS. TYPEFACES If you create your app designs using Interface Builder, you’ll notice that the text defaults to Helvetica. is typeface was chosen for its readability and versatility on the iPhone device (the typeface was also immortalized in a lm, Helvetica 7 ). You ca n override the defaults, but ma ke sure that the selected t ypeface is appro- priate for the task. For example, a whimsical typeface may be suitable for a game but not for reading long texts. Also, apps with long texts, such as the Kindle, tend to use serif typefaces like Times New Roman. Serif typefaces contain structural details on the strokes that connect the letters and make them easier to read; sans serifs like Helvetica don’t have these elements. If you want to use a typeface other than Helvetica, this doesn’t mean that all app text must be in the same font. For example, the NYTimes app uses Times New Roman for the headlines and article text but Helvetica for the byline, headers, tab bar, and buttons. Using Helvetica for the byline provides contrast; using it for the other elements ensures readability and conformity with Apple’s guidelines. Keep in mind that too many typefaces can add visual noise and make your app dicult to interpret. To avoid this problem, consider limiting typeface usage to one or two families. Variations in type size and weight can help create a visually interesting system using just one family. If further variation is needed or desired, you can also experiment with leading (line spacing) and kerning (the space between letters.) A complete list of typefaces available on the iPhone is shown in TABLE 10.1. Other typefaces can be bundled with your app, but this may increase your app download size. NOTE Readers interested in delv- ing even further into type should consider reading The Elements of Typo- graphic Style 5 or Thinking with Type. 6 5. Robert Bringhurst, e Elements of Typographic Style (Hartley and Marks, 2002). 6. Ellen Lupton, inking with Type (Princeton Architectural Press, 2004). 7. Ga ry Hust wit, Helvetica (2007). Download from www.wowebook.com ptg TYPE 235 TABLE 10.1 Typefaces Available on the iPhone 8 Typeface* Styles Supported American Typewriter Bold, Light, Condensed, Condensed Bold, and Condensed Light; no italics )XXTM/W\PQK Plain Arial All Arial Rounded MT Bold No italics Courier New All Georgia All Helvetica All 0MQ\Q Light, Medium 0QZIOQVW3IS]/W\PQK Plain Marker Felt All Times New Roman All Trebuchet MS All Verdana All Zapfino All *Note: Serifs are American Typewriter, Courier New, Georgia, and Times New Roman. 8. iPhone Dev Center, “UIFont Class Reference,” http://developer.apple.com/iphone/library/ documentation/UIKit/Reference/UIFont_Class/Reference/Reference.html. Download from www.wowebook.com ptg 236 CHAPTER 10 ● VISUAL DESIGN TYPE SIZE Ty pe si ze on the iPhone is mea su red in point s (e.g., 12 pt, 14 pt, etc.). If you add text in Interface Builder, a default type size is pre-selected for certain elements. For example, text in the navigation bar is 20 pt, and tab bar labels are 10 pt. If you plan to experiment with type size, make sure the text is readable for the given context and audience. To demonstrate, consider the NYTimes and Ameri- trade apps (FIGURES 10.26–10.27). Both apps show almost the same number of head- lines, but the Ameritrade app is much more dicult to read. e biggest problem is the type size. e text beneath the headline should be at least one point larger than the current one, and more space (referred to as “line spacing” or “leading”) is needed between all of the elements (headline, description, time, and line rule). FIGURE 10.26 NYTimes list view FIGURE 10.27 Ameritrade list view Some readers may prefer the Ameritrade app’s type size since it shows more head- lines. If having four headlines is a requirement, it’s possible to increase the font size and show less text aer the headline. Another option is to provide default sizes that are readable for the majority of users. If you take that route, be sure to allow users to adjust the type size as needed. Many Twitter clients and news apps provide a type size control on their list and detail views. TYPE WEIGHT Another aspect to vary is type weight (a term that’s oen mistaken as “bold”). As shown in the Yahoo! News example, readers are drawn to the headlines because of the contrast; the headlines are “heavier” compared to the text below (FIGURE 10.28). However, if there’s little or no contrast, increasing type weight will have minimal impact. e Bloomberg app (shown in FIGURE 10.29) adds weight to the headline, WARNING! Do not change the type size defaults unless you have a strong reason. If the type size is too small, it may be difficult to read; if it’s too big, you may run into space issues. Additionally, the type was designed as a sys- tem, so changing one size means you may need to change other parts of the system. However, you can (and should) vary the type size in the body of your app (e.g., list content and detail views). Download from www.wowebook.com ptg ICONS AND OTHER IMAGERY 237 time, and date; each demands the reader’s attention. If the date and time had less visual weight, the eye would be drawn to the primary content, the headline. FIGURE 10.28 Yahoo! News FIGURE 10.29 Bloomberg News Icons and Other Imagery Icons are part of the eld of semiotics: the general theory and practice of signs. By denition, icons are physically similar to an object (e.g., a movie icon might resemble lm, not a bucket of popcorn). However, within soware, the term icon is commonly used for any small image, whether or not it’s physically or conceptu- ally similar. is section reviews a variety of icons in the context of the iPhone user i n t e r f a c e — t h e t a b b a r , t h e t o o l b a r , a n d e v e r y t h i n g e l s e i n b e t w e e n . B e f o r e s t a r t - ing, let’s review some of the imagery design principles outlined in Mullet and Sano’s Designing Visual Interfaces. Immediacy Icons should be perceived eortlessly; users should not have to pause and inter- pret them. For example, consider the brush icons in FIGURES 10.30–10.32. e rst two are immediately recognizable, but the last one requires some interpretation (is it a jar with a brush and pen, or a cup with two straws?). is dierence is mostly attributed to the level of abstraction; FIGURE 10.32 has one too many undierenti- ated visual elements to make the icon instantly recognizable. FIGURE 10.30 Brushes app FIGURE 10.31 Layers app FIGURE 10.32 NetSketch app Download from www.wowebook.com . how users interpret and perceive you r application. For exam- ple, Marker Felt (displayed as Marker Felt) may seem friendly and approachable within an art app but informal and unprofessional within. the photos. Both approaches are eective as long as they meet their respective app goals. 2. Robin Williams, e Non-Designer’s Design Book (Peachpit Press, 2008). 3. Donis A. Dondis, A Primer. and Ameri- trade apps (FIGURES 10.26–10 .27) . Both apps show almost the same number of head- lines, but the Ameritrade app is much more dicult to read. e biggest problem is the type size. e
Ngày đăng: 06/07/2014, 19:20
Xem thêm: Thiết kế trải nghiệm người dùng iphone - p 27 docx
