¿Qué tamaño tienen los íconos en el lado izquierdo y derecho de la barra de navegación para iOS 7 en iPhone 5?

¿Alguien puede aconsejar qué tan grandes son los íconos generalmente en el lado izquierdo y derecho de la barra de navegación?

Vea esto (la rueda dentada y el icono de información).

Leí en las pautas de diseño humano de iOS que es 44 x 44 pt. Debido a que lo confuso es que Apple está usando pts en lugar de px, entonces la pregunta es, ¿qué tamaño debo hacer en Photoshop? 44 puntos = 44 píxeles?

Para hacerlo más confuso, con las pantallas Retina, ¿supongo que multiplica todo por 2?

Mi cerebro se está cocinando ahora mismo. Estoy diseñando la maqueta para el tamaño de pantalla del iPhone 5.

Respuestas (4)

Leí en las pautas de diseño humano de iOS que es 44 x 44 pt. Debido a que lo confuso es que Apple está usando pts en lugar de px, entonces la pregunta es, ¿qué tamaño debo hacer en Photoshop? 44 puntos = 44 píxeles?

Para dispositivos que no sean Retina, 1 punto iOS = 1 píxel.

Para dispositivos Retina, 1 punto iOS = 2 píxeles.

Para dispositivos Retina HD (iPhone 6 Plus solo en este momento), 1 punto iOS = 3 píxeles.

Por lo tanto, 44 ​​× 44 puntos significa que necesitará activos en:

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

Pero, 44pt es en realidad la altura de la barra de navegación, por lo que probablemente no desee que sus íconos sean tan grandes. Un buen método para obtener el tamaño correcto: tome una captura de pantalla de los iconos de la barra de navegación que crea que tienen el tamaño correcto y utilícelo como base.

Cuando usaba 44/88/132, mi icono parecía demasiado grande en la barra de navegación. Cambié a 22/44/66 y se ve de un tamaño mucho más apropiado. stackoverflow.com/a/33732209/1438339

Apple está usando pt en lugar de px porque hay varias pantallas.

1pt se representa como 1px en pantallas @1x (iPhone 1, iPhone 3G, iPhone 3GS). La siguiente pantalla que apareció fue Retina (iPhone 4, 4S, 5, 5C, 5S, SE, 6, 6S, 7) que representa 1pt como 2px, por lo que esta es una pantalla @2x. Más tarde con el iPhone 6+ aparecieron con pantalla Retina HD (6+, 6S+, 7+) y esto es @3x, por lo que representa 1pt como 3px.

Entonces, la respuesta a su pregunta es 22 puntos para la imagen del botón de la barra de navegación y las imágenes que debe proporcionar son 22 px(@1x), 44px(@2x) 66px(@3x). También existe la convención de nomenclatura para las imágenes, por lo que, por ejemplo, para la imagen "info.png", debe nombrarlas "info.png", "info@2x.png" e "info@3x.png".

Sí, las pautas de diseño humano de iOS son 44 x 44 pt, es cierto. Pero no significa el tamaño del ícono, sino que hablaron sobre el área de toque. Significa que puede usar el tamaño del ícono según su diseño, pero cuando lo corta en ese momento, puede recortar este ícono en 44px para que el usuario pueda grabarlo fácilmente.

Ya veo. ¡muchas gracias! :)

Tal vez esto pueda ayudar. Hay muchos tutoriales sobre cómo diseñar para iOS. - http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/