Cómo diseñar una interfaz de usuario de una aplicación de Android que no sea mala
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 animadas de bienvenida y los diseños elegantes eran una cosa, entonces, tenía sentido contratar a un diseñador profesional. Pero la tendencia actual es mínima, o al menos enormemente simplificada.
Déjame darte un ejemplo anecdótico: hace un tiempo, alguien me pidió que creara una pantalla de bienvenida para el software de su 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 con el que fueron fue literalmente un pequeño logotipo de unos círculos de colores superpuestos, y el nombre del software debajo de él. Como un trabajo de 2 minutos en PhotoShop. ¿Y sabes qué? Tenía que aceptar que era mejor que el mío.
El punto que estoy haciendo es así: creo que los programadores caen en esta trampa de cometer el mismo error que yo. Tendemos a pensar en las interfaces de usuario y las pantallas de bienvenida que necesitan ser estas cosas realmente elegantes y llamativas que hacen que la aplicación se destaque . Pero no tienen que serlo, sinceramente, no deberían serlo. Debemos tomar la mentalidad de un programador y aplicarlo al diseño estético: trabajos simples y funcionales.
En este artículo, veremos algunas formas muy simples de crear una elegante UI / UX de APLICACIÓN de Android, incluso si casi no tiene experiencia en diseño.
A menos que realmente desee algo más, manténgase en el diseño de materiales
Su aplicación no necesita ser " única" y " sobresalir del resto" para que sea popular y se vea bien. Eso es lo que se propuso lograr el Diseño de materiales de Google: un estándar para las interfaces de usuario de aplicaciones en toda la industria, y han hecho un buen trabajo. Hay un montón de aplicaciones populares que se adhieren al diseño de materiales, algunos de los nombres más importantes en aplicaciones de Android, como SwiftKey, Nova Launcher, Textra SMS, YouTube, solo por nombrar algunas.
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, extrayendo una gran cantidad de elementos de prácticas de diseño minimalistas, y luego lanzó todo de forma gratuita: 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 el diseño de materiales 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:
- Editor de temas de material (macOS + Sketch)
- Plug-in de paleta de colores de diseño de materiales (PhotoShop / Illustrator)
- Material Design UI Kit PSD (PhotoShop)
- Kit de interfaz de usuario de Android Material Design ( Sketch)
- Material UI Theme Generator
Y si necesita algo de inspiración para crear temas de diseño de materiales simples y elegantes, consulte estos blogs:
- MaterialDesignBlog - 15 ejemplos impresionantes de diseño de materiales bien hecho
- MockPlus - 12 mejores ejemplos de sitios web de diseño de materiales para inspirarse
- AndroidAuthority - 10 mejores aplicaciones de diseño de materiales para Android
Los degradados de color son mucho más fáciles de lo que piensas
Para una alternativa al diseño de materiales, 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 gradiente definitivo. Te equivocarías: se puede hacer en 10 segundos en 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)
Vaya a UIGradients.com y encuentre algo que le guste.
Copie los colores degradados desde arriba de la vista previa.
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.
Ahora solo pegue y 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 gradiente que vale la pena ver:
- WebGradients.com
- Android Shapes Generator ( para generar formas a través de XML, con opción de degradado)
Use 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 ( gráficos vectoriales escalables) . Esto se debe a que los SVG pueden redimensionarse 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. Las personas intentan usar grandes archivos PNG que se reducirán para adaptarse a las pantallas de Android; cuando, en cambio, puede usar SVG más pequeños que se mejoran sin pérdida de calidad.
Además, los SVG pueden ser hasta un 60% a 80% más pequeños 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.
Incluye 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".
Use una plantilla o 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 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 otras cosas.
Algunos excelentes recursos para plantillas y kits de interfaz de usuario de Android:
- SpeckyBoy: 50 kits de interfaz de usuario móvil gratuitos para iOS y Android
- SketchAppSources - Recursos de la aplicación de interfaz de usuario de Android ( Sketch)
- Freebiesbug - Kits de interfaz de usuario de PSD ( PhotoShop)
