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

Los programadores y desarrolladores generalmente no son diseñadores; esto es ampliamente aceptado como cierto. Los desarrolladores tienden a centrarse en hacer que una aplicación funcione; los diseñadores se centran en hacer que la aplicación sea estéticamente atractiva. 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 sí, tenía sentido contratar a un diseñador profesional. Pero la tendencia actual es mínima, o al menos muy simplificada.

Déjame contarte una anécdota. example – Hace un tiempo, alguien me pidió que creara una pantalla de inicio para su software de PC. Así que hice todo lo posible: lo dibujé en papel de boceto, lo importé a PhotoShop, creé muchas líneas y efectos de neón elegantes. Podría haber sido un fondo de escritorio, en lugar de una pantalla de bienvenida. El punto es que creé este diseño realmente elegante y elaborado para ellos.

Como probablemente puedas adivinar, no les gustó. El diseño que eligieron era literalmente un pequeño logotipo de unos pocos círculos de colores superpuestos y el nombre del software debajo. Como, un trabajo de 2 minutos en PhotoShop. ¿Y sabes qué? Tuve que aceptar que era mejor que el mío.

El punto que quiero decir es: creo que los programadores caen en la trampa de cometer el mismo error que yo. Tendemos a pensar que las interfaces de usuario y las pantallas de presentación deben ser cosas realmente elegantes y llamativas que hagan que la aplicación se destaque. Pero no tienen por qué serlo; sinceramente, no deberían serlo. Deberíamos tomar la mentalidad de un programador y aplicarla al diseño estético: obras simples, funcionales.

En este artículo, veremos algunas formas muy sencillas de crear una elegante UI/UX de aplicación de Android, incluso si casi no tienes experiencia en diseño.

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

Su aplicación no necesita ser “única” y “destacar del resto” para que sea popular y se vea bien. Eso es lo de GoogleDiseño de materialesse 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 las aplicaciones de Android, como SwiftKey, Nova Launcher, Textra SMS, YouTubeSólo para nombrar unos pocos.

El enfoque central 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 minimalista y luego lo lanzó todo de forma gratuita; es un trato bastante bueno, ya que los cursos de diseño de sitios web y aplicaciones pueden costar cientos de dólares en 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 enumeraremos a continuación:

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

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

Como alternativa a Material Design, los gradientes 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. Se equivocaría: 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 ppi funciona bien)

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

YUIGradients.comy encuentra algo que te guste.

Copie los valores hexadecimales de color de UIGradients

Copie los colores degradados desde arriba de la vista previa.

Selector de degradado de Photoshop.

Haga clic 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 color.

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

Ahora simplemente pegue los valores hexadecimales de color de UIGradient en el editor de gradiente 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.), debería usar SVG (Scalable Vector Graphics) en su lugar. Esto se debe a que los SVG se pueden cambiar de tamaño sin perder calidad, por example, si escala un JPG a un valor mayor, pierde calidad y se vuelve borroso/pixelado. Un SVG no lo hace. Las personas intentan usar archivos PNG enormes que se reducirán para adaptarse a las pantallas de Android; en cambio, puede usar SVG más pequeños que se escalan sin pérdida de calidad.

Además, los SVG pueden ser de hasta60% 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 necesita diseñar dos temas separados para incluir un tema de modo oscuro/nocturno en su aplicación. Está prácticamente integrado en la biblioteca AppCompat, solo necesita habilitarlo y editar los valores.

Consulte 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 simplemente puede usar la plantilla/kit tal como está, agregando sus propios botones y otras cosas.

Algunos recursos excelentes para plantillas y kits de interfaz de usuario de Android:

Leer siguiente

  • Los paquetes de aplicaciones de Android ahorrarán almacenamiento en los teléfonos inteligentes con la publicación de una nueva aplicación…
  • La accesibilidad de Google Android obtiene un gran impulso ahora que la aplicación ‘amplificador de sonido’ AI…
  • ¿Cómo hacer una aplicación de Android para su sistema de hogar inteligente en Android Studio?
  • Las imágenes filtradas de la aplicación Xbox Store rediseñada con nombre en código “Mercury” muestran nuevos…

Actualizaciones del boletín

Ingrese su dirección de correo electrónico a continuación para suscribirse a nuestro boletín