3

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.

migrated from ux.stackexchange.com Mar 13 '15 at 8:54

This question came from our site for user experience researchers and experts.

3

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

Apple is using the pt instead of px because there are multiple displays.

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 on your question is 22pt for the navigation bar button image and the images you need to provide are 22px(@1x), 44px(@2x) 66px(@3x). Also there is the naming convention for the images so for example for the "info.png" image you should name them "info.png", "info@2x.png" and "info@3x.png".

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.

  • I see. tks a lot! :) – Xeon Mar 15 '15 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, privacy policy and cookie policy

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