4

Can anyone advise how large are the icons usually on the left and right side of the navigation bar?

See this (the cog wheel and info icon).

I read from the iOS human design guidelines it's 44 x 44 pt? Because the confusing thing is Apple is using pts instead of px, so the question is, how large should I make it in Photoshop? 44 pt = 44 px?

To make it more confusing, with the Retina displays, I assume multiply everything by 2?

My brain is getting cooked right now. I'm designing the mockup for iPhone 5 screen size.

4 Answers 4

4

I read from the iOS human design guidelines it's 44 x 44 pt? Because the confusing thing is Apple is using pts instead of px, so the question is, how large should I make it in Photoshop? 44 pt = 44 px?

For non-Retina devices, 1 iOS point = 1 pixel.

For Retina devices, 1 iOS point = 2 pixels.

For Retina HD devices (iPhone 6 Plus only right now), 1 iOS point = 3 pixels.

So, 44×44pt means you’ll need assets at:

  • 44×44px (1× scale, non-Retina, original iPhone etc).
  • 88×88px (2× scale, Retina, iPhone 4, iPhone 6 etc).
  • 132×132px (3× scale, Retina HD, iPhone 6 Plus).

But, 44pt is actually the height of the navigation bar, so you probably don’t want your icons that big. A good method for getting the right size: Take a screenshot of navigation bar icons that you think are the right size, and use that as your basis.

1
1

Apple is using the pt instead of px because there are multiple displays. Suggested minimum tappable area is 44x44pt, but that is for the button, not the image. You can make image smaller and add extra empty space, or center the image and make the button larger.

1pt is being represented as 1px on @1x screens (iPhone 1, iPhone 3G, iPhone 3GS). The next display that appeared was Retina (iPhone 4, 4S, 5, 5C, 5S, SE, 6, 6S, 7) which represents 1pt as 2px so this is @2x screen. Later with iPhone 6+ they appeared with Retina HD (6+, 6S+, 7+) screen and this is @3x, so it represents 1pt as 3px.

So answer to your question would be 44pt for the navigation bar button image and the images you need to provide are 44px(@1x), 88px(@2x) 132px(@3x). Also there is the naming convention for the images so for example for the "info.png" image you should name them "info.png", "[email protected]" and "[email protected]".

0

Yes, iOS human design guidelines it's 44 x 44 pt it's true. But its mean not size of icon but they told about tapping area. Means you can use icon size as per your design but when you slice this that time you can crop this icon by 44px so user can taping easily.

1
  • I see. tks a lot! :)
    – Xeon
    Mar 15, 2015 at 10:08
-1

Maybe this can help. There are a lot of tuts about how to design for IOS. - http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.