Consejos para diseñar elegantes diseños de interfaz de usuario de aplicaciones de iPhone en Photoshop

El diseño gráfico para la web ha sido una tendencia popular durante siglos. Y con el invento del iPhone de Apple en 2007, la tienda de aplicaciones ha crecido enormemente. Ahora tenemos diseñadores y desarrolladores de aplicaciones iOS que se unen para hacer realidad algunas concepciones realmente fantásticas.

Pero si no te gusta aprender Xcode y programar Objective-C, es posible que Photoshop tenga más interés. A continuación, ofreceré algunos de los consejos que he recogido para diseñar maquetas de aplicaciones para iOS. Y dado que siempre están surgiendo nuevas tendencias, la comunidad de diseño está redefiniendo constantemente cómo crear aplicaciones. Piense en esto como una guía de recursos para principiantes para diseñar dispositivos Apple.

Configuración de documentos adecuada

Antes de siquiera considerar los elementos de la página, debe comprender cómo se crean los gráficos del iPhone. En la pantalla retina más nueva en los modelos iPhone 4 / 4S, la pantalla aún se mide físicamente en el mismo tamaño. Sin embargo, la visualización en píxeles en realidad se duplica con respecto al original, lo que significa que usamos 640? 960 a una resolución de 326ppi.

Además, los íconos del iPhone 3 / 3GS eran generalmente de 57 a 57 píxeles. Las pantallas de iPhone 4 y 4S usan 114? 114 de manera predeterminada (pero se escalarán para resoluciones anteriores). Afortunadamente, el proceso de diseño del icono está bastante separado de la creación de un diseño de interfaz de usuario. Pero como diseñador nunca está de más construir ambas habilidades.

Si va a utilizar mucho esta configuración, le recomiendo guardarla como tamaño de documento preestablecido. En la nueva ventana de documento para Photoshop verá un botón etiquetado "¿Guardar preset?" ?. Solo dale un nombre y puedes seleccionarlo de la lista desplegable cada vez que crees un nuevo documento.

En lugar de crear manualmente los elementos de la IU del iPhone, un blog Teehan + Lax ofrece una descarga gratuita del kit de IU específicamente para Photoshop. Esto incluye un renderizado de iPhone 4, barras superiores, botones, teclados y toneladas de otras cosas útiles. Definitivamente tome esto primero y guárdelo en un directorio local donde tenga fácil acceso a estos elementos.

Personaliza las barras y botones

Tanto el área superior como la inferior de su aplicación probablemente contengan barras de menú. La parte superior se usa para etiquetar la vista actual, junto con los botones Atrás y Editar. La parte inferior es generalmente la navegación y más comúnmente utiliza pestañas para lograr esto.

Teehan + Lax usa algunos ejemplos realmente genéricos para estos. Pero son mucho más fáciles de personalizar con tus propios colores, texturas y cualquier otro dulce que tengas. Así que como ejemplo tomemos la capa de grupo Bar (Gris-Azul) y arrástrelo a una nueva ventana de documento del tamaño de iPhone. Luego haga clic en el triángulo pequeño a la izquierda y abra otro subgrupo etiquetado Barra superior. En la parte inferior hay una capa de fondo con un efecto de superposición para el degradado.

Abra FX en esta capa de fondo y haga doble clic en la superposición de degradado. Quité los colores predeterminados de Apple y configuré (de izquierda a derecha) # 3478a7 a # 5eb0e7. También los dos botones tendrán que perder sus gradientes, para estos utilicé los valores # 052b50 a # 044a8e para un efecto oscuro intenso.

Diversión con texturas

Con estos pequeños cambios de gradiente, puede decir que personalizar su aplicación es una tarea bastante simple. Para solo un poco de detalle, podemos agregar una textura o patrón sobre el área del degradado de la barra. Iremos con algunas franjas inclinadas para este ejemplo de demostración.

Comience creando un nuevo documento de 7? 7 píxeles con un fondo transparente. Luego, configure la herramienta de lápiz en la escala más pequeña (1px por 1px) y conéctela desde la esquina superior derecha a la esquina inferior izquierda. He usado HEX negro 000000 pero no debería importar ya que siempre puedes cambiar el color más tarde. Echa un vistazo a la captura de pantalla a continuación si no sigue:

Ahora pulsa ¿Edita> Define Patrón? y dale un nombre, luego pulsa guardar. Siéntase libre de cerrar la ventana ahora (sin guardar) ya que todo lo que necesitábamos era el patrón. Ahora de nuevo en el barra superior grupo crea una nueva capa sobre el fondo. CMD + clic o CTRL + clic en la máscara vectorial que seleccionará toda la barra de degradado de fondo.

Pero asegúrate de volver a hacer clic en la nueva capa que acabas de crear para que esté resaltada en azul. Vamos a llenarlo con este nuevo patrón, pero solo queremos ver franjas sobre el gradiente de la barra superior (y debajo de los botones). En el menú superior vaya a Editar -> Rellenar y seleccione? Patrón? desde el menú desplegable. En el cuadro a continuación, debe seleccionar el último patrón de puntos y presionar OK.

Las líneas parecen bastante rígidas al principio. Así que en la paleta de capas, suelte el relleno hasta aproximadamente el 20% del valor. También podríamos cambiar el modo de fusión a Superposición para que las barras fluyan con los colores degradados. ¡Vuelve al 100% y mira el impresionante efecto!

Puedes crear otra textura dulce configurando un documento de 3px por 3px y completando un símbolo más. Agregué un ejemplo anterior de cómo esto cambia la apariencia de nuestro gradiente de la barra superior tan dramáticamente. También puede intentar cambiar el color de negro puro a blanco puro #FFFFFF.

Iconos de la barra de pestañas

Los botones de navegación que se encuentran en la parte inferior de su aplicación son cruciales para la experiencia general del usuario. Los usuarios deben averiguar dónde editar la configuración, cómo realizar tareas y qué hacer en su aplicación rápidamente. De lo contrario, a menudo se frustran o aburren y dejan de intentarlo. Entonces, como una sugerencia más, vamos a arreglar el área de navegación en la barra inferior.

Usando el mismo archivo PSD de la GUI del iPhone 4, localice la barra de pestañas? grupo. Recuerde que puede hacerlo haciendo CMD / CTRL + haciendo clic en el bloque en Photoshop. Similar a la barra superior, podemos editar el gradiente de efectos de fondo para algunos estilos coincidentes. Pero, alternativamente, el degradado predeterminado negro va bien con la mayoría de los esquemas de color.

Para algunos iconos, recomiendo el conjunto de retina de The Working Group que viene en 24px, 48px y 64px. Cada uno de los íconos de la GUI PSD tiene estilos de capa de efectos aplicados, básicamente una sombra ligera y un degradado de superposición.Estos pequeños detalles realmente se suman a un diseño excelente, así que presta mucha atención a tus píxeles. Intenta usar este diseñador de combinaciones de colores si tienes problemas.

Debe pensar en cómo las etiquetas de texto afectarán la experiencia del usuario. Si cree que los íconos de las pestañas son suficientes por sí solos, el texto de la etiqueta puede interferir. Sin embargo, es importante mantener abiertas sus opciones y jugar con algunas ideas diferentes. Trate de obtener las opiniones de amigos y compañeros de trabajo para ver cuál es el mejor método para su aplicación.

Otra técnica bastante popular es que los diseñadores de aplicaciones creen un botón central que divide la barra de pestañas en 5 espacios. He visto muchas aplicaciones realmente creativas utilizando este diseño para ahorrar espacio y agregar algo de elegancia a la navegación. Formspring es un ejemplo, agregué la siguiente pantalla.

Enlaces Útiles

  • Conjunto de iconos de glifo
  • Diseñar una aplicación de iPhone Bank en Photoshop [Tutorial]
  • Diseñar aplicaciones de iPhone en Photoshop [PDF]
  • Útil colección de herramientas y recursos para desarrolladores de aplicaciones para iPhone / iPad
  • Sugerencias y recursos de usabilidad de iOS para aplicaciones de iPhone y iPad
  • Cómo crear tu primera aplicación de iPhone

Conclusión

Estas estrategias para trabajar con aplicaciones iOS y Adobe Photoshop serán útiles a medida que desarrolle sus sentidos de diseño. Las aplicaciones móviles son un juego de pelota completamente diferente en comparación con los sitios web y los logotipos. Tenga esto en cuenta durante todo el proceso, ya que aprenderá constantemente nuevas técnicas.

Junto con los enlaces que se agregaron anteriormente, debería sentirse mucho más cómodo avanzando con el diseño de la interfaz de la aplicación. Las maquetas de diseño son siempre difíciles y requieren tiempo para construir y estudiar. Pero si tiene suficiente dedicación, el mercado móvil es posiblemente el área más próspera. Si tiene preguntas o comentarios adicionales, háganoslo saber en el área de discusión a continuación.