Consejos para diseñar diseños elegantes de interfaz de usuario de la aplicación para iPhone en Photoshop
El diseño gráfico para la web ha sido una tendencia popular durante siglos. Y con la invención 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 construir algunas concepciones realmente fantásticas en la realidad.
Pero si no le gusta aprender Xcode y programar Objective-C, Photoshop puede tener más interés. A continuación, ofreceré algunos de los consejos que he recogido para diseñar maquetas de aplicaciones iOS asesinas. Y dado que siempre surgen nuevas tendencias, la comunidad de diseño redefine constantemente cómo crear aplicaciones. Piense en esto como una guía de recursos para principiantes para diseñar dispositivos Apple.
Configuración de documento adecuada
Antes de siquiera considerar elementos en la página, debe comprender cómo se crean los gráficos del iPhone. En la pantalla retina más reciente en los modelos de iPhone 4 / 4S, la pantalla todavía 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 utilizamos 640 × 960 con una resolución de 326ppi.
Además, los íconos del iPhone 3 / 3GS generalmente tenían 57 × 57 píxeles. Las pantallas de iPhone 4 y 4S usan 114 × 114 por defecto (pero se ampliarán para resoluciones más antiguas). Afortunadamente, el proceso de diseño de iconos está bastante separado de la creación de un diseño de interfaz de usuario. Pero como diseñador nunca está de más desarrollar 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 con la etiqueta "Guardar ajuste preestablecido ...". Solo dele un nombre y puede seleccionarlo de la lista desplegable cada vez que cree un nuevo documento.
En lugar de crear los elementos de la interfaz de usuario del iPhone manualmente, un blog Teehan + Lax ofrece una descarga gratuita del kit de interfaz de usuario específicamente para Photoshop. Esto incluye un render 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
Es probable que tanto el área superior como la inferior de su aplicación contengan barras de menú. La parte superior se usa para etiquetar la vista actual, junto con los botones de retroceso y edición. La parte inferior es generalmente navegación y más comúnmente usa pestañas para lograr esto.
Teehan + Lax utiliza algunos ejemplos realmente genéricos para estos. Pero son mucho más fáciles de personalizar con sus propios colores, texturas y cualquier otro dulce que tenga. Entonces, como ejemplo, tomemos la Barra de capa de grupo (Gris-Azul) y arrástrela a una nueva ventana de documento del tamaño de iPhone. Luego haga clic en el pequeño triángulo a la izquierda y abra para abrir otro subgrupo llamado 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 superposición de degradado. Eliminé los colores predeterminados de Apple y configuré (de izquierda a derecha) # 3478a7 a # 5eb0e7. Además, los dos botones tendrán que perder sus gradientes; para estos utilicé los valores # 052b50 a # 044a8e para un rico efecto oscuro.
Diversión con texturas
Con estos pequeños cambios de gradiente, puede darse cuenta de que personalizar su aplicación es una tarea bastante simple. Por solo un poco de detalle, podemos agregar una textura o patrón sobre el área de degradado de la barra. Iremos con algunas rayas inclinadas para este ejemplo de demostración.
Comience creando un nuevo documento de 7 × 7 píxeles con un fondo transparente. Luego configure su herramienta de lápiz en la escala más pequeña (1px por 1px) y conéctese 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. Mira la captura de pantalla a continuación si no sigues:
Ahora presione Editar -> Definir patrón ... y asígnele un nombre, luego presione guardar. Siéntase libre de cerrar la ventana ahora (sin guardar) ya que todo lo que necesitábamos era el patrón. Ahora, de vuelta al grupo superior de la barra, cree una nueva capa sobre el fondo. CMD + clic o CTRL + clic en la máscara de vector que seleccionará toda la barra de gradiente de fondo.
Pero asegúrese de volver a hacer clic en la nueva capa que acaba de crear para que quede 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" en el menú desplegable. En el cuadro a continuación, debe seleccionar el último patrón de puntos y presionar Aceptar.
Las líneas parecen bastante rígidas al principio. Por lo tanto, en el palet de capas, baje 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. ¡Aleja al 100% y observa el increíble efecto!
Puede 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 el aspecto de nuestro gradiente de 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 un consejo más, arreglemos el área de navegación en la barra inferior.
Usando el mismo archivo PSD de la GUI del iPhone 4, ubique el grupo "barra de pestañas". Recuerde que puede hacer esto CMD / CTRL + haciendo clic en el bloque en Photoshop. De manera similar a la barra superior, podemos editar el gradiente FX de fondo para algunos estilos coincidentes. Pero, alternativamente, el degradado negro predeterminado va bien con la mayoría de los esquemas de color.
Para algunos íconos, 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 FX aplicados, básicamente una sombra ligera y un degradado superpuesto. Estos pequeños detalles realmente se suman a un diseño excelente, así que presta mucha atención a tus píxeles. Intente usar este diseñador de esquemas de color si tiene problemas.
Debe pensar en cómo las etiquetas de texto afectarán la experiencia del usuario. Si cree que los íconos de la pestaña son suficientes por sí solos, entonces el texto de la etiqueta puede interferir. Sin embargo, es importante mantener sus opciones abiertas y jugar con algunas ideas diferentes. Intenta obtener las opiniones de amigos y compañeros de trabajo para ver qué método es mejor para tu aplicación.
Otra técnica bastante popular es que los diseñadores de aplicaciones creen un botón central que divida la barra de pestañas en 5 ranuras. He visto muchas aplicaciones realmente creativas que usan este diseño para ahorrar espacio y agregar algo de elegancia a la navegación. Formspring es un ejemplo, agregué la pantalla a continuación.
Enlaces Útiles
- Conjunto de iconos de glifos
- Diseñar una aplicación de iPhone Bank en Photoshop [Tutorial]
- Diseñar aplicaciones de iPhone en Photoshop [PDF]
- Colección útil de herramientas y recursos para desarrolladores de aplicaciones iPhone / iPad
- Consejos y recursos de usabilidad de iOS para aplicaciones de iPhone y iPad
- Cómo crear tu primera aplicación para iPhone
Conclusión
Estas estrategias para trabajar con aplicaciones iOS y Adobe Photoshop serán útiles a medida que desarrolle aún más sus sentidos de diseño. Las aplicaciones móviles son un juego de pelota completamente diferente en comparación con los sitios web y logotipos. Tenga esto en cuenta durante todo el proceso, ya que constantemente aprenderá nuevas técnicas.
Junto con los enlaces agregados anteriormente, debería sentirse mucho más cómodo al avanzar con el diseño de la interfaz de la aplicación. Las maquetas de diseño siempre son 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, infórmenos en el área de discusión a continuación.
