Preview only show first 10 pages with watermark. For full document please download

@2x @2x

   EMBED


Share

Transcript

iPhone CHEAT SHEET iPhone 5 40pt Carrier 88pt 8:08 AM iPhone 6+ 750x1134 1080x1920 @2x @2x @3x 4” 4.7” 5.5” (Pixels Per Inch) 326 ppi 326 ppi 401 ppi Contrast Ratio 800:1 1400:1 1300:1 Height of Status Bar 40 px 40 px 60 px Status Bar 100% Hamburger iPhone 6 (5, 5C, 5S) Edit Resolution Nav Bar (Pixels) 20px Radius Screen Size (Diagonal) Main Content Area PPI 120px @2x ex: iPhone 5 Height of Navigation Bar Tab Bar 96pt Height of Tab Bar App Icons App Store Icons T Radius Resolution Radius 120x120 px 20 px 1024x1024 px 180 px 120x120 px 20 px 1024x1024 px 180 px Text 180x180 px 30 px 1024x1024 px 180 px Text Text Bar Button Icons Text selected 4px stroke Segmented Control Label 1 Label 2 Label 3 Label 4 Label 5 *Minimum touchable area 44 x 44 points for each segment *Segmented control should have five or fewer segments www.techdew.com © / 2015-free to Use 88 px 88 px 132 px 120 x 120 80 x 80 80 x 80 Web clip Settings 180 x 180 120 x 120 120 x 120 87 x 87 58 x 58 58 x 58 Icons Newsstand Toolbar and Navigation bar 1024 x 1024 1024 x 1024 1024 x 1024 66 x 66 44 x 44 44 x 44 Tab bar 96 px 96 px 144 px Navigation Bar Title 34 px 34 px 48 px Medium Medium Medium Regular Buttons Label 34 px 34 px 48 px Light Light Light Table Header Label 34 px 34 px 48 px Bold Bold Bold Table Label 28 px 28 px 44 px Regular Regular Regular Tab Bar Icon Labels 22 px 22 px 30 px Regular Regular Regular 75 x 75 50 x 50 50 x 50 Helvetica Neue Font Resolution Unselected 2px stroke 640x1136 Spotlight search results *1 pt = 2 x 2 pixels on a regular retina display *In Retina, typography should have a minimum size of 22px *The optimal size for reading is around 32px Font Usage DO DON’T Your Game Your Game Play Options Help Play Options Help *Text in a navigation controller uses the same font size that body style text uses for the large setting (specifically, 34 points) *Text always uses either regular or medium weight; it doesn’t use light or bold Designed by Techdew Techdew UX Design & Consulting Firm