Every application needs an application icon and a launch image. It’s recommended that applications also provide an icon for iOS to display in Spotlight search results (and, if necessary, in Settings). In addition, some applications need custom icons to represent custom document types or application-specific functions and modes in navigation bars, toolbars, and tab bars.
Unlike other custom artwork in your app, these icons and images must meet specific criteria so that iOS can display them properly. Table 9-1 contains a summary of information about these icons and images and provides links to specific guidelines for creating them. To learn what to name these files, and how to specify them in your code, see “Application Icons” in iOS Application Programming Guide and “Application Launch Images” in iOS Application Programming Guide.
An application icon is an icon users put on their Home screens and tap to start an application. This is a place where branding and strong visual design should come together into a compact, instantly recognizable, attractive package. Every application needs an application icon.
Try to balance eye appeal and clarity of meaning in your icon so that it’s rich and beautiful, and clearly conveys the essence of your application’s purpose. Also, it’s a good idea to investigate how your choice of image and color might be interpreted by people from different cultures. Create different sizes of your application icon for different devices. If you’re creating a universal application, you need to supply application icons in all three sizes.
For iPhone and iPod touch both sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad:
72 x 72 pixels
When iOS displays your application icon on the Home screen of a device, it automatically adds the following visual effects:
Rounded corners
Drop shadow
Reflective shine (unless you prevent the shine effect)
For example, a simple 57 x 57 pixel iPhone application icon might look like this: When it’s displayed on an iPhone Home screen, the same application icon would look like this:
Ensure your icon is eligible for the visual enhancements iOS provides. You should produce an image that:
Has 90° corners
Does not have any shine or gloss (unless you’ve chosen to prevent the addition of the reflective shine)
Does not use alpha transparency
Give your application icon a discernible background. Icons with visible backgrounds look best on the Home screen primarily because of the rounded corners iOS adds. This is because uniformly rounded corners ensure that all the icons on a user's Home screen have a consistent appearance that invites tapping. If you create an icon with a background that disappears when it's viewed on the Home screen, users don't see the rounded corners. Such icons often don't look tappable and tend to interfere with the orderly symmetry of the Home screen that users appreciate. Be sure your image completely fills the required area. If your image boundaries are smaller than the recommended sizes, or you use transparency to create “see-through” areas within them, your icon can appear to float on a black background with rounded corners.
For example, an application might supply an icon on a transparent background, like the blue star on the far left. When iOS displays this icon on a Home screen, it looks like the image in the middle (if no shine is added) or it looks like the image on the right (if shine is added). An icon that appears to float on a visible black background looks especially unattractive on a Home screen that displays a custom picture. Create a 512 x 512 pixel version of your application icon for display in the App Store. Although it’s important that this version be instantly recognizable as your application icon, it can be subtly richer and more detailed. There are no visual effects added to this version of your application icon.
If you’re developing an application for ad-hoc distribution (that is, to be distributed in-house only, not through the App Store), you must also provide a 512 x 512 pixel version of your application icon. This icon identifies your application in iTunes.
iOS might also use this large image in other ways. In an iPad application, for example, iOS uses the 512 x 512 pixel image to generate the large document icon, if a custom document icon is not supplied.
Small Icons
Every application should supply a small icon that iOS can display when the application name matches a term in a Spotlight search. Applications that supply settings should also supply this icon to identify them in the built-in Settings application.
This icon should clearly identify your app so that people can recognize it in a list of search results or in Settings.
For iPhone and iPod touch, iOS uses the same icon for both Spotlight search results and Settings. If you do not provide this icon, iOS might shrink your application icon for display in search results and in Settings. For your iPhone app, create small icons that measure:
29 x 29 pixels
58 x 58 pixels (high resolution)
For iPad, you supply separate icons for Settings and Spotlight search results. Create icons that measure:
50 x 50 pixels (for Spotlight search results)
Note that the final visual size of this icon is 48 x 48 pixels. iOS trims 1 pixel from each side of your artwork and adds a drop shadow. Be sure to take this into account as you design your icon.
29 x 29 pixels (for Settings)
Document Icons
If your iOS application creates documents of a custom type, you might want to create a custom icon that identifies this type to users. If you don’t provide a custom document icon, iOS creates one for you by default, using your application icon (including the added visual effects).
For example, a default document icon that uses the 57 x 57 pixel white star iPhone app icon would look like this: A high-resolution default document icon that uses the 114 x 114 pixel white star iPhone app icon would look like this: For iPad, a default document icon that uses the 72 x 72 pixel white star app icon would look like this: Optionally, you can provide custom artwork for iOS to use instead of your application icon. Because people will see your document icon in different places, it’s best to design an image that's memorable and clearly associated with your application. Your custom artwork should be attractive, expressive, and detailed.
Depending on whether your app runs on iPhone or iPad, you use different specifications to create this icon.
Document Icon Specifications for iPhone
For your iPhone app, create a document icon in two sizes:
22 x 29 pixels
44 x 58 pixels (high resolution)
Place your custom artwork within each rectangular space as desired. The artwork can be centered, offset, or it can fill the entire space.
For example, if you supply a 22 x 29 pixel icon that looks like the image on the left, iOS creates a document icon that looks like the image on the right: Similarly, if you supply a 44 x 58 pixel icon that looks like the image on the left, iOS creates a document icon that looks like the image on the right:
Document Icon Specifications for iPad
iOS uses two sizes of document icons for iPad applications: 64 x 64 pixels and 320 x 320 pixels. It’s a good idea to create both sizes so that your document icons look good in different contexts.
For both sizes, the overall dimensions include specific amounts of padding, leaving a smaller “safe zone” for your artwork. It’s essential to make sure your artwork fits well in these safe zones, or it may get cropped or scaled up.
Although your artwork can fill an entire safe zone, the upper right corner will always be partially obscured by the page curl effect that iOS adds. In addition, iOS adds a gradient that transitions from black (near the top, just below the page curl) to transparent (at the bottom edge).
To create a 64 x 64 pixel document icon:
Create a 64 x 64 pixel image in PNG format.
Add the following margins to create the safe zone:
1 pixel on top
4 pixels on bottom
10 pixels on each side
Your safe zone should look similar to the colored area shown below:
Place your custom artwork within the 44 x 59 pixel safe zone. The artwork can be centered, offset, or it can fill the entire safe zone. (Remember that iOS adds the page curl to the upper right corner and a gradient that runs from the page curl to the bottom edge.)
For example, if you supply an icon that looks like the image on the left, iOS creates a document icon that looks like the image on the right. To create a 320 x 320 pixel document icon:
Create a 320 x 320 pixel image in PNG format.
Add the following margins to create the safe zone:
5 pixels on top
20 pixels on bottom
50 pixels on each side
Your safe zone should look similar to the colored area shown below:
Place your custom artwork within the 220 x 295 pixel safe zone. The artwork can be centered, offset, or it can fill the entire safe zone. (Remember that the page curl will obscure some of the artwork in the upper right corner of the safe zone.)
For example, if you supply an icon that looks like the image on the left, iOS creates a document icon that looks like the image on the right.
Web Clip Icons
If you have a web application or a website, you can provide a custom icon that users can display on their Home screens using the Web Clip feature. Users tap the icon to reach your web content in one easy step. You can create an icon that represents your website as a whole or an icon that represents a single webpage.
If your web content is distinguished by a familiar image or recognizable color scheme, it makes sense to incorporate it in your icon. However, to ensure that your icon looks great on the device, you should also follow the guidelines in this section. (To learn how to add code to your web content to provide a custom icon, see Safari Web Content Guide.)
For iPhone and iPod touch create icons that measure:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad create an icon that measures:
72 x 72 pixels
As it does with application icons, iOS automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:
Rounded corners
Drop shadow
Reflective shine
For example, a simple 57 x 57 pixel webpage icon might look like this: When it’s displayed on an iPhone Home screen, the same icon would look like this:
Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that:
Has 90° corners
Does not have any shine or gloss
Icons for Navigation Bars, Toolbars, and Tab Bars
As much as possible, you should use the system-provided buttons and icons to represent standard tasks in your application. For a complete list of standard buttons and icons, and guidelines on how to use them, see “System-Provided Buttons and Icons.”
Of course, not every task your application performs is a standard one. If your app supports custom tasks users need to perform frequently, you need to create custom icons that represent these tasks in your toolbar or navigation bar. Similarly, if your app displays a tab bar that allows users to switch among custom application modes or custom subsets of data, you need to design tab bar icons that represent these modes or subsets.
Before you create the art for your icon, you need to spend some time thinking about what it should convey. As you consider designs, aim for an icon that is:
Simple and streamlined. Too many details can make an icon appear sloppy or indecipherable.
Not easily mistaken for one of the system-provided icons. Users should be able to distinguish your custom icon from the standard icons at a glance.
Readily understood and widely acceptable. Strive to create a symbol that most users will interpret correctly and that no users will find offensive.
After you’ve decided on the appearance of your icon, follow these guidelines as you create it:
Use pure white with appropriate alpha.
Do not include a drop shadow.
Use anti-aliasing.
If you decide to add a bevel, be sure that it is 90° (to help you do this, imagine a light source positioned at the top of the icon).
For toolbar and navigation bar icons, create an icon in the following sizes:
For iPhone and iPod touch:
About 20 x 20 pixels
About 40 x 40 pixels (high resolution)
For iPad:
About 20 x 20 pixels
For tab bar icons, create an icon in the following sizes:
For iPhone and iPod touch:
About 30 x 30 pixels
About 60 x 60 pixels (high resolution)
For iPad:
About 30 x 30 pixels
Don’t include a pressed or selected appearance with your icons. iOS automatically provides these appearances for items in navigation bars, toolbars, and tab bars, so you do not need to provide them. Because these visual effects are automatic, you cannot change their appearance. Give all icons in a bar a similar visual weight. Aim to balance the overall size, level of detail, and use of solid regions across all icons that can appear in a specific bar. In general, it does not look good to combine in the same bar icons that are large, blocky, and completely filled with icons that are small, detailed, and unfilled.
Launch Images
To enhance the user’s experience at application launch, you must provide at least one launch image. A launch image looks very similar to the first screen your application displays. iOS displays this image instantly when the user starts your application. As soon as it’s ready for use, your app displays its first screen, replacing the launch placeholder image. Supply a launch image to improve user experience; avoid using it as an opportunity to provide:
An “application entry experience,” such as a splash screen
An About window
Branding elements, unless they are a static part of your application’s first screen
Because users are likely to switch among applications frequently, you should make every effort to cut launch time to a minimum, and you should design a launch image that downplays the experience rather than drawing attention to it. Design a launch image that is identical to the first screen of the application, except for:
Text. The launch image is static, so any text you display in it will not be localized.
UI elements that might change. Avoid including elements that might look different when the application finishes launching, so that users don’t experience a flash between the launch image and the first application screen.
For iPhone and iPod touch create launch images that include the status bar region in the following sizes:
320 x 480 pixels
640 x 940 pixels (high resolution)
For iPad create launch images that do not include the status bar region in the following sizes:
768 x 1004 pixels (portrait)
1024 x 748 pixels (landscape)
Note that most iPad applications should supply a launch image for each orientation.
If you think that following these guidelines will result in a plain, boring launch image, you’re right. Remember, the launch image is not meant to provide an opportunity for artistic expression; it is solely intended to enhance the user’s perception of your app as quick to launch and immediately ready for use. The following examples show you how plain a launch image can be.
The iPhone Settings launch image displays only the background of the application, because no other content in the application is guaranteed to be static. In the launch image for iPhone Stocks, only static images are included because these are always visible in the front view of the Stocks app.
Tips for Creating Great Artwork for the Retina Display
The Retina display allows you to display high-resolution versions of your art and icons. If you merely scale up your existing artwork, you miss out on the opportunity to provide the beautiful, captivating images users expect. Instead, you should rework your existing resources to create large, higher quality versions that are:
Richer in texture. For example, in the high-resolution versions of the Settings and Contacts icons, the metal and paper textures are clearly visible.
More detailed. For example, in the high-resolution versions of the Safari and Notes icons, you can see details such as the accurate contours of the continents behind the compass and the torn paper left by the previous note.
More realistic. For example, the high-resolution versions of the Compass and Photos icons combine rich texture and fine details to create realistic portrayals of a compass and a photograph.
When it’s displayed on an iPhone Home screen, the same application icon would look like this:
An icon that appears to float on a visible black background looks especially unattractive on a Home screen that displays a custom picture.
A high-resolution default document icon that uses the 114 x 114 pixel white star iPhone app icon would look like this:
For iPad, a default document icon that uses the 72 x 72 pixel white star app icon would look like this:
Optionally, you can provide custom artwork for iOS to use instead of your application icon. Because people will see your document icon in different places, it’s best to design an image that's memorable and clearly associated with your application. Your custom artwork should be attractive, expressive, and detailed.
Similarly, if you supply a 44 x 58 pixel icon that looks like the image on the left, iOS creates a document icon that looks like the image on the right:
To create a 320 x 320 pixel document icon:
No hay comentarios:
Publicar un comentario