How large are the icons on the left and right side of the navigation bar for iOS 7 on iPhone 5?



How large are the icons on the left and right side of the navigation bar for iOS 7 on iPhone 5?


Question

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.

2015/03/13
1
3
3/13/2015 7:55:00 PM

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.

2015/03/14
3
3/14/2015 2:55:00 AM