Cómo diseñar una interfaz de usuario de una aplicación de Android que no apesta

Cómo Es
. Pero, ¿por qué los desarrolladores no pueden hacer lo mismo?



En el pasado, cuando las páginas de inicio de bienvenida animadas y los diseños elegantes eran una cosa, entonces, claro, tenía sentido contratar a un diseñador profesional. Pero la tendencia de hoy es mínimo - o al menos enormemente simplificado.

Permítanme darles un ejemplo anecdótico: hace un tiempo, alguien me pidió que creara una pantalla de presentación para el software de su PC. Así que hice todo lo posible: lo dibujé en papel de boceto, lo importé a PhotoShop y creé muchas líneas y efectos de neón elegantes. Podría haber sido un fondo de escritorio, en lugar de una pantalla de presentación. El punto es que creé este diseño realmente elegante y elaborado para ellos.



Como probablemente puedas adivinar, no les gustó. El diseño con el que se fueron fue literalmente un pequeño logotipo de algunos círculos de colores superpuestos, y el nombre del software debajo. Como, un trabajo de 2 minutos en PhotoShop. ¿Y sabes qué? Tenía que estar de acuerdo en que era mejor que el mío.



Lo que quiero decir es que, creo que los programadores caen en la trampa de cometer el mismo error que yo. Tendemos a pensar en las IU y las pantallas de presentación que deben ser estas cosas realmente elegantes y llamativas que hacen que la aplicación destacar . Pero no tienen que serlo, honestamente, no deberían serlo. Deberíamos tomar un programadores mentalidad y aplicarla al diseño estético - funciona simple, funcional.



En este artículo, veremos algunas formas muy simples de crear una interfaz de usuario / experiencia de usuario elegante de una aplicación de Android, incluso si casi no tiene experiencia en diseño.

A menos que realmente desee algo más, apéguese al diseño de materiales

Su aplicación no necesita ser ' único' y ' destacar del resto ' para que sea popular y se vea bien. Eso es lo que Google Diseño de materiales se propusieron lograr: un estándar para la interfaz de usuario de aplicaciones en toda la industria, y han hecho un buen trabajo. Hay un montón de aplicaciones populares que se adhieren a Material Design, algunos de los nombres más importantes en aplicaciones de Android, como SwiftKey, Nova Launcher, Textra SMS, YouTube, solo por nombrar algunos.

El enfoque principal de Material Design está en un diseño basado en tarjetas, con una paleta de colores sólidos. Google trabajó con los mejores diseñadores de la industria, extrajo una gran cantidad de elementos de prácticas de diseño minimalistas y luego lanzó todo de forma gratuita; eso es un buen negocio, ya que los cursos de diseño de sitios web y aplicaciones pueden costar cientos de dólares para libros electrónicos, videos, etc.



Comenzar con Material Design es increíblemente fácil y hay un puñado de herramientas que lo hacen aún más simple, que enumeramos a continuación:

  • Editor de temas de materiales (macOS + Sketch)
  • Complemento de paleta de colores de material design (PhotoShop / Illustrator)
  • Material Diseño UI Kit PSD (PhotoShop)
  • Kit de interfaz de usuario de Android Material Design ( Bosquejo)
  • Generador de temas de material de interfaz de usuario

Y si necesita algo de inspiración para crear temas de Material Design simples y elegantes, consulte esta lista de blogs:

Los degradados de color son mucho más fáciles de lo que cree

Como alternativa al diseño de materiales, los degradados de dolor son simples, modernos y llamativos. Y podría pensar que los diseñadores pasan mucho tiempo pintando en todos los colores o diseñando el degradado definitivo. Estaría equivocado: se puede hacer en 10 segundos en PhotoShop.

10 segundos en la interfaz de usuario de degradado de PhotoShop.

Incluso te guiaré a través de esto, para mostrarte lo fácil que es.

Cree un nuevo proyecto de PS para dispositivos móviles ( 1080 x 1920 px @ 72 ppp funciona bien)

UIGradients.com: gran colección de degradados prefabricados.

Ir UIGradients.com y encuentra algo que te guste.

Copie los valores hexadecimales de color de UIGradients

Copie los colores degradados de arriba de la vista previa.

Selector de degradado de PhotoShop.

Haga clic con el botón derecho en una capa vacía en PS y vaya a Opciones de fusión> Superposición de degradado.

Haga clic directamente en la vista previa del patrón de degradado en el menú desplegable; no haga clic en el botón desplegable. Al hacer clic directamente en el degradado se abre el editor de colores.

Ingrese valores hexadecimales de UIGradient en la herramienta de degradado PS.

Ahora simplemente pegue y pegue los valores hexadecimales de color de UIGradient en el editor de degradado PS.

Ajuste según sea necesario. Ahora tiene un fondo degradado profesional para su aplicación de Android.

Otras herramientas de degradado que vale la pena revisar:

Utilice SVG en lugar de JPG / PNG

En lugar de usar PNG o JPG para sus elementos gráficos (botones, logotipos, etc.), realmente debería usar SVG ( Gráficas vectoriales escalables) en lugar. Esto se debe a que se puede cambiar el tamaño de los SVG sin perder calidad; por ejemplo, si aumenta la escala de un JPG a un valor mayor, pierde calidad y se vuelve borroso / pixelado. Un SVG no lo hace. La gente intenta usar archivos PNG enormes que serán reducido a escala para adaptarse a las pantallas de Android, cuando en su lugar, puede usar SVG más pequeños que son mejorado sin pérdida de calidad.

world of warcraft no pudo iniciar la aceleración 3d

Además, los SVG pueden tener hasta 60% a 80% más pequeño en tamaño de archivo que PNG . Esto significa que su aplicación o sitio web móvil se cargará más rápido para el usuario y se verá bien sin importar la resolución de la pantalla.

Incluya un modo oscuro usando Theme.AppCompat.DayNight

No es necesario que diseñe dos temas separados para incluir un tema de modo oscuro / nocturno en su aplicación. Está prácticamente integrado en la biblioteca de AppCompat, solo necesita habilitarlo y editar los valores.

Ver la guía de Appual ' Cómo implementar un modo oscuro en su aplicación de Android ”.

Utilice una plantilla o un kit de interfaz de usuario móvil

Si su aplicación no requiere una GUI elegante y personalizada, no hay absolutamente nada de malo en usar una plantilla o un kit. Las plantillas y los kits se pueden usar como una guía inspiradora, o literalmente puede usar la plantilla / kit tal como está, agregando sus propios botones y cosas.

Algunos recursos excelentes para kits y plantillas de IU de Android:

  • SpeckyBoy - 50 kits de interfaz de usuario móviles gratuitos para iOS y Android
  • SketchAppSources - Recursos de la aplicación de interfaz de usuario de Android ( Bosquejo)
  • Freebiesbug - Kits de interfaz de usuario PSD ( PhotoShop)
Etiquetas android Desarrollo 4 minutos de lectura