Share
Hay un montón de "procesos" que van desde el diseño para dispositivos móviles, pero a veces solo quieres saltar y ensuciarte las manos. Esta publicación está diseñada para brindarle las herramientas que necesitará y el diseño básico y los requisitos técnicos para que pueda comenzar a utilizarlo rápidamente..
Si aún no has leído las Pautas de interfaz de Apple para iPhone y iPad, deberías hacerlo. Es mucha información, pero vale la pena el tiempo que dedica a comprender cómo piensa Apple sobre el diseño de la aplicación. Estas guías también detallan especificaciones detalladas para el tamaño de la pantalla, el tamaño de los iconos y la resolución. A continuación, abordaré algunas preguntas frecuentes y resumiré estas especificaciones en un formato fácil de digerir.!
La pantalla de retina del iPhone es una cosa espectacular para ver. Al ver la nueva y antigua pantalla una al lado de la otra, es obvio que hay cambios en esta pantalla que afectan el diseño de su aplicación. Ver este video de comparación de pantalla lado a lado.
Al comparar los dos dispositivos, puede ver que las dimensiones de la pantalla del iPhone 4 no han cambiado respecto al modelo anterior. Sin embargo, tanto el tamaño de la pantalla del iPhone 4 como la densidad de píxeles de la pantalla están DOBLADAS, lo que le otorga un tamaño de pantalla de 640 x 960px (en comparación con el tamaño anterior de 320 x 480px) y 326 píxeles por pulgada (en comparación con los 163ppi anteriores). Esta nueva pantalla comprime 4 píxeles donde solía haber uno, por eso las imágenes se ven tan nítidas y deliciosas.!
Al leer sobre la resolución de pantalla es fácil confundirse rápidamente. El hecho es que el tipo de archivo exportado final en el iPhone suele ser .png y Xcode no considera el valor ppi guardado al renderizar imágenes. Si sigues las dimensiones especificadas a continuación, estarás en buena forma.!
| iPhone 3.0 Resolución de la pantalla: 72 ppi Tamaño de pantalla: 320 x 480 px Tamaño de ícono: 57 x 57 px Formato de archivo: PNG-24 | iPhone 4.0 Resolución de la pantalla: 72 ppi Tamaño del lienzo: 640 x 960 px Tamaño de ícono: 114 x 114 px Formato de archivo: PNG-24 | iPad Resolución de la pantalla: 72 ppi Tamaño del lienzo: 768 x 1024 px Tamaño de ícono: 72 x 72 px Formato de archivo: PNG-24 |
Icono: 512 x 512 px (.tif, .jpg o .png, 72dpi, RGB)
Capturas de pantalla del iPhone: 320 x 480 px o 640 x 860 px (.tif, .jpg o .png, 72dpi, RGB)
Capturas de pantalla del iPad: 1024 x 768 px (.tif, .jpg o .png, 72dpi, RGB)
Mientras discutimos los tamaños de pantalla, es importante hablar sobre el futuro de los dispositivos digitales en general. No soy adivino, pero solo en el último año no es un secreto que los dispositivos de pantalla táctil de todo tipo se multiplican como conejos y producen descendientes con distintos tamaños de pantalla. ¡Sí! Como diseñadores, eso significa que debemos estar preparados para traducir los diseños a múltiples dispositivos y sistemas operativos..
Un ciclo de vida de la aplicación puede ejecutar uno de los muchos cursos. Algunas aplicaciones viven en una plataforma exclusivamente, otras se extienden a otros dispositivos móviles o incluso a una presencia basada en la web. La creación de gráficos escalables le ahorra el dolor de cabeza de volver a crear gráficos para cada plataforma específica. El uso de capas de formas o objetos vectoriales inteligentes es la mejor manera de lidiar con la proliferación de tamaños de pantalla y sistemas operativos..
Diseñar íconos para iPhone fue mi primera introducción a la decisión de "comenzar poco a poco y ampliar" o "comenzar a lo grande y reducir". Para mí, se hizo evidente después de algunas ejecuciones que diseñó para el tamaño de pantalla de 320 x 480 px y luego el tamaño Hasta 640 x 960px es la mejor opción. El diseño para el tamaño de pantalla más pequeño elimina la decepción de perder detalles cuando un diseño debe reducirse de tamaño más adelante.
Digamos que ha diseñado una aplicación para un iPhone 3.0 y desea preparar esta aplicación para la pantalla retina del iPhone 4. ¿Qué haces? ¿Simplemente dimensionarlo de 320 x 480 a 640 x 960? Sí. El problema es que si no ha creado todos sus gráficos utilizando capas de formas o objetos vectoriales inteligentes, las imágenes se verán pixeladas y granuladas..
Tanto para el iPhone como para el iPad, el área de destino mínima que Apple recomienda es de 44 x 44 píxeles. Deje que Apple cuantifique el tamaño promedio de los dedos de los seres humanos. :) Si quieres ir más pequeño, asegúrate de espaciar adecuadamente las áreas que se pueden tocar para evitar errores en los toques.
"Probar" un diseño puede sonar extraño, pero diseñar un dispositivo móvil en una computadora portátil o monitor de escritorio puede ser complicado. Incluso si sigue las pautas estándar, como la regla de destino de toque de 44 x 44px, las proporciones y los tamaños pueden verse significativamente diferentes cuando se muestran en el dispositivo en comparación con la pantalla de su computadora.
La forma más fácil de probar su diseño es "Guardar para la Web" en cada diseño de pantalla en formato .png y sincronizarlo con su teléfono usando iPhoto. Una vez que se sincronizan las imágenes, puede hojear y simular cómo se verá la aplicación real. Esta también es una excelente manera de compartir maquetas con los clientes para darles una vista previa real de la aplicación..
Ahora que tiene algunos conceptos básicos en su haber, ¡es hora de comenzar a diseñar! Afortunadamente, hay muchos recursos disponibles para ayudarlo a familiarizarse con los diversos elementos de la interfaz del iPhone y el iPad. Incluso si su objetivo es crear interfaces completamente personalizadas, estas plantillas son útiles para obtener una cuadrícula de referencia o dimensiones de elementos en pantalla adecuadamente proporcionados..
iPhone GUI PSD de Teehan + Lax
iPhone GUI PSD Retina de Teehan + Lax
Plantilla de iPhone para OmniGraffle de Patrick Crowley
iPhone UI elementos vectoriales de Mercury Intermedia
Plantilla de iPad para OmniGraffle de Information Architects
iPad GUI PSD de Teehan + Lax
iPad Vector GUI de Icon Library
Todos los activos gráficos que se utilizarán para crear una aplicación se exportan en formato de Gráficos de red portátiles (.png). Técnicamente, el iPhone también puede mostrar otros formatos de archivo, pero los archivos PNG se optimizan automáticamente con el SDK de iOS y, por lo tanto, deben ser el formato preferido..
Esto se aplica a todos los elementos (botones de navegación, barras, etc.) y cualquier otra imagen mostrada en la aplicación. Por ejemplo, digamos que su aplicación es un portafolio para un fotógrafo. Las fotos mostradas también serían exportadas en formato .png.
La configuración para exportar el formato .png en Photoshop (Archivo> Guardar para web y dispositivos) tiene este aspecto:
Antes de entregar sus archivos a un desarrollador, es importante que comprenda sus capacidades con respecto a cortar y rebanar su archivo. Si su desarrollador tiene experiencia en rebanar y exportar, puede ser un gran ahorro de tiempo para descargar esa tarea. Personalmente, prefiero cortar todos mis archivos para garantizar que todas las imágenes se recorten correctamente.
Cuando guarde sus imágenes finales, intente utilizar convenciones de nombres de archivos intuitivas que facilitarán la localización y referenciación de los archivos de imagen correctos para su desarrollador. Aquí hay algunos ejemplos de prefijos y sufijos que uso:
Otra herramienta que utilizo para comunicarme con los desarrolladores es un archivo .pdf que incluye todas las pantallas y notas sobre el diseño. Defino los tipos de letra, los tamaños, el interlineado y todos los demás estilos para que haya una referencia fácil que el desarrollador pueda usar sin tener que abrir Photoshop. Otro recurso que proporciono, especialmente cuando trabajo con desarrolladores externos, es un screencast (ScreenFlow y iShowU son mis favoritos) de la aplicación, que los guía a través de todos los aspectos del diseño. Esto es especialmente útil si la aplicación contiene animaciones y / o transiciones que se ilustran mejor en un video..
Las especificaciones técnicas no son atractivas pero son importantes. Confíe estos detalles en la memoria y se ahorrará muchos dolores de cabeza en el camino!
Accentsconagua