Tamaños de wireframes para pantalla de iPhone: dimensiones, ratio y herramientas

Diseñar interfaces de usuario para iPhone o iPod touch es similar a diseñar para Mac o Windows, incluyendo el uso de wireframes para crear mockups de UI. Entender las dimensiones y ratios de la pantalla del iPhone y sus apps ayuda a crear wireframes más precisos.

Dimensiones de pantalla

El iPhone original lanzó con pantalla de 3,5 pulgadas, 480x320 píxeles a 163 PPI. El tamaño físico no cambió hasta iPhone 4S, pero con Retina Display, iPhone 4 y 4S tienen pantalla 326 PPI de 960x640 píxeles. En ambos modelos, dimensiones físicas son 2,94 x 1,96 pulgadas, ratio 1,5:1. El iPod touch usa la misma pantalla que iPhone original hasta tercera gen, subiendo a Retina en cuarta gen.

Wireframes para iPhone

Si planeas crear tus propias plantillas wireframe, usa ratio 1,5:1 y diseña elementos UI al tamaño relativo apropiado. Si diseñas web/app compatible con iPhone, los elementos UI de Safari pueden reducir dimensiones usables. Apple ofrece API para ocultar UI de Safari y que una web app use pantalla completa, y puedes configurar viewport para escalar óptimamente tus páginas en Safari.

Herramientas de wireframe

Apps de terceros como FlairBuilder o Axure RP, o plantillas para Photoshop u OmniGraffle, pueden ayudarte a diseñar tu app más rápido. Muchos paquetes ofrecen elementos UI estándar drag-and-drop y otras funciones que ayudan a seguir recomendaciones de diseño de Apple.

Buenas prácticas

Apple recomienda diseñar apps iPhone usando puntos (points) en lugar de píxeles para medidas, para dimensiones UI consistentes entre modelos. Ejemplo: tamaño mínimo cómodo para elemento accionable es 44x44 puntos, que son 44 px cuadrados en iPhone original y 88 px en Retina. Apple sugiere que, aunque diseñes para ambas orientaciones, tu app inicie en vertical porque la pantalla de inicio solo aparece en esa orientación. Más guías en developer.apple.com.