The IOS design Cheat Sheet interface designed for quick reference

Source: Internet
Author: User

http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

With the release of IOS 7, app designers and developers would need to adjust their visual language to match the new "flat" Design of IOS. In addition to the grid system, the dimensions of icons and commonly used elements, typography and iconography have been up Dated by Apple in many ways. That's why the old IOS Design Cheat Sheet This I published last year with the release of the IPad mini needs a update now . I decided to shift away from pure value-based tables about sizes of design elements towards a simple guide that should hel p to get your started with IOS 7 app design. As always I'll update this guide over time, and if you think there are something important missing here, just let me know .

Since IOS 7 is not supported on older models of the IPhone and IPod (only 4+), this guide would only cover the supported de Vices. If you is looking for information related to these devices, you should take a look at the older IOS Design Cheat Shee T v2.

Resolutions & Display Specificationsresolutions
Devices Portrait Landscape
iphone 5 iphone 5, 5S, 5C 640x1136 px 1136x640 px
IPhone 4/4s 640x960 px 960x640 px
IPhone & IPod Touch 1st, 2nd and 3rd Generation 320x480 px 480x320 px
Retina ipad ipad 3, ipad 4, ipad Air 1536x2048 px 2048x1536 px
IPad Mini 768x1024 px 1024x768 px
IPad Mini Retina 1536x2048 px 2048x1536 px
IPad 1st and 2nd Generation 768x1024 px 1024x768 px
Displays
Devices PPI color Mode Color temperature
iphone 5 iphone 5, 5S, 5C 326 8bit RGB Warm
IPhone 4/4s 326 8bit RGB Cool
IPhone & IPod Touch 1st, 2nd and 3rd Generation 163 8bit RGB Warm
Retina ipad ipad 3, ipad 4, ipad Air 264 8bit RGB Warm
IPad Mini 163 8bit RGB Warm
IPad Mini Retina 326 8bit RGB Warm
IPad 1st and 2nd Generation 132 8bit RGB Warm
APP Icons

One of the biggest changes in IOS 7 are the new dimensions and the visual language used for app icons. Apple introduced a grid system, increased the general size of icons on your home screens and also masked icons with a Diffe Rent shape.

Dimensions
Device App Icon AppStore Icon Spotlight Icon Settings Icon
iphone 5 iphone 5, 5S, 5C 120x120 px 1024x1024 px 80x80 px 58x58 px
IPhone 4/4s 120x120 px 1024x1024 px 80x80 px 58x58 px
Retina ipad ipad 3, 4, Air, Mini retina 152x152 px 1024x1024 px 80x80 px 58x58 px
IPad Mini 76x76 px 512x512 px 40x40 px 29x29 px
IPad 1st and 2nd Generation 76x76 px 512x512 px 40x40 px 29x29 px
Rounded Corners

The old simple radii values for rounded corners is gone. Apple introduced a new shape, named "Superellipse". Since Apple did not release a official template of the shape, you'll have a to use one of the unofficial templates out th Ere, which is replicating the shape in more or less accurate ways. The best I've came across so far is the App Icon Template, which was definitely a very good starting point when you ' re desi Gning an app icon for IOS 7. As always, the rounded corners should is not being included in your final exported assets-but we might need them while your D Esign Process If you want to add effects, such as a stroke or shadows, which is aligned to the corner of the icon.

Grid system

Apple developed a golden ratio grid system, which can be used to size and align elements on your icon correctly. Anyways, the grid template got criticized a lot by the design community, and it seems like designers (even Apple designers ) is not following the grid system very strictly. Feel free to break rules if your icon looks better without taking care of the new grid system.

User Interface

The biggest change in IOS 7 are definitely the all new flat user interface design language used across the whole operating System. While pretty much all gradients and shadows got removed from UI elements, the sizes of commonly used design elements got C Hanged in some cases as well.

Commonly used design elements
Device Height of Status Bar Height of Navigation Bar Height of Tab Bar Width of Tables
iphone 5 iphone 5, 5S, 5C + px 88/64 px 98 px 640/1136 px
IPhone 4/4s + px 88/64 px 98 px 640/960 px
Retina ipad ipad 3, 4, Air, Mini retina + px px px Dynamic
IPad Mini px px px Dynamic
IPad 1st and 2nd Generation px px px Dynamic
Status Bar

While the size of the status bar is the same as in IOS6, the appearance's content was slightly changed. You can control the background color to match the look of your app design or use the default color themes (white and black ). In a lot of the default IOS 7 apps, the status bar was visually connected with the Navigation bar without any separations.

Navigation Bar

The Navigation Bar usually includes a title as well as basic Navigation and action buttons (such as back to previous view, Create, edit, etc.). In landscape orientation, the height of the Nav bar was usually shrunk a bit (to 32pt) to allow more content to be Displaye D below it.

Table views

Tables (or lists) is using the full width of the display now and is not any longer surrounded by a container that Separa TES tables from each of the other. The only visual separation between different table views is headlines which appear on top of the table (as known from pre vious IOS versions) on top of the main app background Texture/color. Items within a table is separated by a simple 1px line, which have a margin of 15pt to the left side of the screens but CO Nnects directly with the right side of the screen. Each item has a inner padding of 15pt to both sides.

Iconography

Apple makes massive usage of icons without a fill color but only outlines with a thickness of 1pt, but "classic" Icons wit h a color fill is still present and widely used in IOS 7. An often used style for active icons in the tab bar is inverted colors–while the inactive icon have often only outlines, The active one get ' s filled with a solid color while some strokes disappear or is inverted.

Typography

Helvetica Neue is still the default font on IOS, but normal text was usually displayed in the light face instead of Regular or Bold now. Text that should appear more prominent are often displayed in Medium face (eg. the title in Navigation Bar). Of course, there is still a lot of alternative font faces available to make use of instead of Helvetica Neue. You can find the whole list here. In general (and likely because of the increased usage of light font faces) the font size is increased for most design ele ments. Buttons often appear as simple colored text links. Now, they is no longer surrounded by a shape, and which supports its metaphor.

Default Font Sizes
Label Type Default Font Size Default Font Weight
Navigation Bar Title px Medium
Regular Buttons px Light
Table Header px Light
Table Label px Regular
Tab Bar Icon Labels px Regular
Further Reading & Resources

This article would only provide some basic information to get the started with IOS 7 design. Once dig in deeper, you might is interested in some more details. These articles and resources should help-out:

General
    • Starters Guide to IOS Design by Ben Taylor
    • The IOS Design Cheat Sheet Volume 2 by Ivo Mynttinen
    • My app design workflow by Marc Edwards
    • IOS Fonts
Icons
    • APP Icon Template by Michael Flarup
    • Introduction to IOS 7 App Icons by Michael Flarup
    • Template for IOS 7 App Icons (FW) by Célio Silva
UI Kits
    • IOS 7 GUI PSD by Teehan+lax
    • IOS 7 template for Sketch by Taps+apps

The IOS design Cheat Sheet interface designed for quick reference

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.