¿Cómo mejorar esta GUI para teléfonos inteligentes?

Estoy desarrollando una aplicación para Android. La GUI está diseñada (y está implementada, pero aún puede cambiar por el momento).

Preguntas

  1. La aplicación se utilizará en cualquier entorno (brillante u oscuro, etc.). Se supone que la conexión a Internet es rápida. Se supone que los teléfonos inteligentes tienen pantallas medianas o grandes (las pequeñas no son muy relevantes para esta aplicación). ¿Cómo podría mejorar esta GUI para tal pantalla? (si es necesario)

  2. Siento que falta algo gráficamente para que la interfaz se vea mejor. En particular, el bloque blanco parece demasiado vacío. ¿Quizás una imagen degradada transparente de izquierda a derecha que iría desde la parte inferior del bloque rojo hasta la parte inferior del teléfono inteligente y se extendería por la mitad de la pantalla? Esta imagen contendría muchos adornos en tonos rojos. ¿Cómo hacer que esta GUI se vea mejor? (realmente necesario!)

la GUI

ingrese la descripción de la imagen aquí

En una palabra... contraste.
En dos palabras... contratar a alguien.
por favor concéntrese en hacer una pregunta. Su segunda pregunta es demasiado amplia y basada en opiniones para responder.

Respuestas (2)

Realmente no quería responder, pero solté todo lo que tenía que decir al respecto en un comentario y se hizo demasiado grande. Escribí esto en el móvil tarde a las 2 am, así que puede ser un poco lo que sea. Puede que vuelva a limpiarlo más tarde.

Hay algunos problemas por todas partes. Es un poco extraño cómo salta el tamaño de fuente en general.

1.)

ingrese la descripción de la imagen aquí

  1. No soy un gran admirador de cómo la fuente de búsqueda es diferente de cualquier otra cosa y cómo está en negrita. Tal vez debería usar la misma fuente que el texto del cuerpo en otro lugar.
  2. Debido a que la fuente es negrita y relativamente grande en comparación con los encabezados, y debido a que ya existe el menú de hamburguesas en esa barra de búsqueda, parece que incluso podría ser un título para esta vista o algo así. No es raro que la entrada de búsqueda se materialice después de un clic, así que quién sabe.
  3. No hay reglas estrictas sobre estas cosas en general, pero a veces es bueno seguir a la manada y usar imágenes a las que la gente, en general, está acostumbrada, para que las cosas sean fáciles de usar. Estoy seguro de que casi todo el mundo ha tenido a alguien, un familiar o un amigo quejándose de que algún sitio web cambió su diseño y ahora es peor porque no saben dónde está todo. Tómate la libertad de diseñar las cosas como quieras, pero ten en cuenta que puedes estar confundiendo a las personas con un lenguaje visual que lucha con su cerebro. El punto es que no es muy común que el texto del marcador de posición para la búsqueda esté en negrita o sea más grande que el texto del cuerpo.
  4. Tal vez esto no sea nada, pero siento que tengo que mencionarlo. ¿Por qué el icono de la lupa se muestra tan raro y con alias? Estoy pensando que es solo cómo se guardó la captura de pantalla o algo así porque incluso el reloj y los íconos en la parte inferior son iguales.

2.)

ingrese la descripción de la imagen aquí

  1. Esto no es realmente un problema necesariamente, pero de estos dos encabezados, el de abajo es un poco más grande. Eso lucha un poco contra la jerarquía (tal vez).
  2. Están separados en sus propios bloques con el color de fondo y eso restablece la jerarquía.
  3. Si el encabezado inferior es donde comienza la esencia de la página, entonces no tengo reparos en eso.
  4. El espacio en blanco o el relleno alrededor de los encabezados es inconsistente... lo que no es necesariamente incorrecto, pero en mi opinión, la forma en que es inconsistente.
  5. El encabezado superior tiene un relleno superior de alrededor de 50 px y el encabezado inferior tiene un relleno superior de alrededor de 34 px. Creo que ambos deberían tener alrededor de 50 px o porque el área con el fondo blanco es algo así como el área de contenido, este encabezado podría tener un relleno un poco más grande. Pero yo diría que eso depende un poco de lo que diga el texto en cada una de estas mitades.
  6. El acolchado inferior también está un poco apagado. El encabezado superior tiene alrededor de 21 y el encabezado inferior tiene alrededor de 26.
  7. Estas diferencias no son tan importantes, pero a veces nuestro cerebro muestra advertencias incluso si no podemos decir por qué. No hay razón para no arreglarlos.
  8. Es posible que desee repensar los colores también. Es un poco extraño cómo el cuerpo del texto en el fondo blanco tiene el mismo color que el encabezado que se encuentra arriba. El cuerpo del texto en la parte superior es muy diferente y también diría que el texto blanco es quizás demasiado blanco. Salta hacia ti, mientras que el texto rojo no lo hace.
  9. Aquí nuevamente, tengo que mencionar sobre el icono. Los bordes se ven terribles.

3.)

ingrese la descripción de la imagen aquí

Ahora que finalmente llegamos al área de formulario (supongo...), aquí es donde realmente comienza el problema. Aquí hay todo tipo de espacios en blanco, lo que dificulta descifrar qué es qué. Se necesita un segundo caliente para darse cuenta de lo que está mirando. Después de analizar eso anoche, ahora estoy convencido de que en realidad es una forma de algún tipo, pero la primera vez que lo miré, no estaba muy seguro.

  1. Inundé todo el espacio en blanco con color para tratar de explicar visualmente por qué es un poco inconsistente y raro. No es del todo justo, ya que fui un poco rápido y suelto, pero creo que se entiende.
  2. Creo que, en general, esto podría beneficiarse mucho de un diseño más lineal y vertical, es decir: cada elemento debe ocupar su propia fila y cubrir todo el ancho de la ventana gráfica, excepto que el botón en la parte inferior no necesita estar lleno. ancho. Es más fácil ir de arriba hacia abajo en lugar de que sus ojos se muevan de izquierda a derecha buscando dónde comienza un elemento y dónde comienza el siguiente.
    • A veces tiene sentido tener columnas, pero en un dispositivo móvil y con el formulario tal como está, creo que una fila por elemento sería mejor.
    • Si esta aplicación se puede usar con una tableta, tal vez esta área podría tener un ancho máximo y estar centrada horizontalmente. Eso es solo una idea.
  3. Creo que todos estos elementos de formulario se deben dar como un borde o un color de fondo o algo así. Estos no siempre son necesarios, pero son realmente efectivos para guiar la vista de un elemento al siguiente. Tal como está, definitivamente ayudaría, pero si a cada elemento se le asigna su propia fila, eso solo podría ayudar mucho.
  4. Un poco más en profundidad sobre cada elemento:
    1. Menús desplegables (+texto): el espacio entre el texto y la flecha no es coherente entre los dos menús desplegables. No es necesariamente un problema dado que uno abarca todo el ancho de la ventana gráfica (+relleno) y el otro no, es inevitable, pero creo que solo eso me hace pensar que ambos deberían abarcar todo el ancho de la ventana gráfica.
      • El segundo menú desplegable tiene 100un gran espacio y no estoy seguro de si es parte del menú desplegable o no. También es un poco más ligero. Es difícil saberlo con certeza sin hacer clic en el menú desplegable.
      • El texto al lado también puede contener un máximo de 3 palabras de tamaño decente por fila, lo que es un poco forzado. Es un poco demasiado apretado para la comodidad.
      • Estoy seguro de que la razón detrás de ponerlo allí es que se relaciona de alguna manera con ese menú desplegable, pero no creo que sea peor tenerlo arriba o debajo.
    2. Entrada : debido a que esta área es un poco desordenada, tuve un breve momento en el que no estaba seguro de si se trataba de un subtítulo o de una entrada.
      • El tamaño de fuente que coincide con los menús desplegables indica que probablemente no sea un encabezado, pero por otro lado, este es un estilo muy común para un encabezado.
      • Quizás el texto podría ser gris para que parezca más un texto de marcador de posición.
      • o tal vez si la línea comienza desde el lado izquierdo del texto, ya no parecería un posible encabezado. En un dispositivo móvil no es muy factible si el texto no es súper corto.
      • El color de fondo o un borde o una sombra insertada probablemente ayudarían mucho.
    3. Control deslizante de rango (+botón): creo que tal como está, me gustaría que estuviera centrado verticalmente con el botón, pero si a cada elemento se le asigna su propia fila, eso no sería necesario.
      • Una cosa confusa aquí es que el botón está en el lado derecho del control deslizante de rango, lo que hace que parezca que el botón se relaciona directamente con el control deslizante de rango y no tiene nada que ver con ningún otro elemento.
      • El color de acento que solo comparten estos dos elementos en la forma refuerza aún más esa idea.
      • Quizás el control deslizante de rango debería ser gris en su lugar.
      • Quizás todos los elementos podrían compartir este color de acento de alguna manera. Sin embargo, no creo que haya una buena manera de hacerlo. Una idea que tuve fue hacer que el texto de entrada y las flechas en los menús desplegables también fueran amarillos, pero es realmente el texto de entrada donde creo que la idea se desmorona. Puede parecer extraño.
    4. botón
      • Lo primero que me molesta es que tiene más acolchado en la parte superior e inferior que en los laterales. Simplemente parece que está abarrotado allí y el acolchado de los lados se redujo para que encaje. Sin embargo, dejó intactos el relleno superior e inferior porque hay más espacio verticalmente.
      • Por lo general, me gusta tener más relleno en los lados para los botones. Lo equilibra. A veces tiene sentido tener el mismo acolchado en todos los lados.
      • La única razón por la que parece un botón es la ubicación y el hecho de que el texto es tan corto. Podría beneficiarse como una sombra, borde o esquinas redondeadas.

Hice un ejemplo rápido donde implementé algunos de esos cambios de los que estaba hablando. De ninguna manera es esto como un diseño listo para producción. Hay muchas cosas que no me gustan de él. Algunas mejoras adicionales requerirían conocer el contexto y la necesidad, de lo que no tengo idea. Al igual que en la cosa es el control deslizante sonó. No hay una indicación clara de lo que hace.

Como mínimo, esta imagen debería transmitir la idea de que cuando todo está apilado de manera ordenada, no tienes que volverte loco tratando de averiguar qué es qué.

ingrese la descripción de la imagen aquí

Omití muchas cosas de la primera iteración de esta respuesta. El original se puede encontrar en el enlace de edición.

¡Muchas gracias! Esta es una captura de pantalla de la aplicación de Android. La falta de bordes (y colores) se debe a la configuración de campos predeterminada de las aplicaciones de Android. No tienen ningún borde, excepto el borde inferior de los campos de texto. No pensé en agregarlos. De hecho, ¡no pensé en diseñar mis campos! ¡Gracias de nuevo! Espero que haga esta sección menos blanca. Quizás también agregue la imagen transparente degradada.
@ JarsOfJam-Scheduler, edité la respuesta para que sea más legible para los humanos.

A mi modo de ver, el principal problema es la fuente serif grande que has elegido. Esta es, por supuesto, mi propia opinión, pero realmente no me gusta, y no creo que coincida o complemente el otro texto o el resto del diseño.

Aquí hay una lista de otros problemas que veo.

  • Hay demasiadas variaciones confusas en el color, el tamaño y el interletraje de la fuente.
  • El logotipo está colocado de forma incómoda: necesita algo de espacio a su alrededor.
  • Hay demasiados colores y no son complementarios.
  • No está claro qué son las opciones desplegables, qué son los campos de entrada y qué es la información.
  • El diseño carece de equilibrio y el espacio en blanco no se usa de manera efectiva

Mi consejo sería simplificar el diseño, mantenerlo limpio, tener en cuenta el espacio en blanco y cómo usarlo de manera más efectiva.

Este es un bosquejo aproximado, pero algo como esto tal vez debería ilustrar lo que quiero decir. . .

ingrese la descripción de la imagen aquí