StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><a href="http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html" rel="nofollow noreferrer">http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html</a></p> <blockquote> <p>When possible, you should use the system-provided buttons and icons in navigation bars, toolbars, and tab bars... For a complete list of standard buttons and icons, and guidelines on how to use them, see <a href="http://web.archive.org/web/20090627063120/http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/SystemProvided/SystemProvided.html#//apple_ref/doc/uid/TP40006556-CH15-SW2" rel="nofollow noreferrer">“System-Provided Buttons and Icons.”</a></p> <p>Of course, not every task your application performs is a standard one. If your application 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 application 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 clearly describe these modes or subsets. This section gives you some guidance on how to design icons that work well in navigation bars, toolbars, and tab bars.</p> <p>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:</p> <ul> <li>Simple and streamlined. Too many details can make an icon appear sloppy or indecipherable.</li> <li>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.</li> <li>Readily understood and widely acceptable. Strive to create a symbol that most users will interpret correctly and that no users will find offensive.</li> </ul> <p>After you’ve decided on the appearance of your icon, follow these guidelines as you create it:</p> <ul> <li>Use the PNG format.</li> <li>Use pure white with appropriate alpha.</li> <li>Do not include a drop shadow.</li> <li>Use anti-aliasing.</li> <li>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).</li> <li>For toolbar and navigation bar icons, create an icon that measures about 20 x 20 pixels.</li> <li>For tab bar icons, create an icon that measures about 30 x 30 pixels...</li> </ul> </blockquote>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload