Divisores visuales en los móviles de diseño UI

Divisores visuales en los móviles de diseño UI

Divisores visuales en los móviles de diseño UI

Diseño

Diseñar una aplicación puede parecer sencillo a primera vista, pero cuando realmente comienza la creación de prototipos, las cosas se complican. Lo que al principio parecía simple empezó a complicarse cuando te das cuenta de que no es tan fácil hacer una elección de un elemento determinado. Incluso una simple y más común de las tareas de separación visual de dos o más bloques de contenido empieza a complicarse.



 



Divisores tradicionales



 



Usted puede utilizar una división horizontal (o vertical) de las líneas para crear cualquier necesidad visual de los divisores entre las secciones relacionadas con el contenido. Ellos ayudan a los usuarios a entender cómo el contenido es organizado por el establecimiento de un ritmo y de la jerarquía en una página.



 



Sangrado de divisores



Los divisores de sangrado hacen hincapié en separar las áreas de contenido y secciones que requieren una más clara separación visual. Se separan distintas secciones de contenido (por ejemplo, datos biográficos a partir de la información de contacto) o distintos elementos de contenido (por ejemplo, lista de correos electrónicos) en ambas listas y diseños de página.



Echa un vistazo a la bandeja de entrada de la vista en la aplicación de Gmail para Android en el siguiente ejemplo. Te darás cuenta de que cada elemento de correo electrónico separados por completo, se purga del separador. La línea horizontal que se siente como un stop, claramente separa los elementos con una parada fija entre ellos.



 



Inserción de separadores



La inserción de separadores de contenido está puesta como las secciones en una lista de contactos. Las inserciones de separadores ayudan a los usuarios a que examine visualmente los elementos y presentarlos como una colección relacionada: el conjunto de elementos que se convierte en un flujo continuo, que invita a los usuarios a desplazarse. Hacer el separador más corto, también le da más espacio para el estado de los elementos, indicadores o elementos de anclaje (tales como las letras del alfabeto).



 



Pasos alternativos para dibujar la línea



Los divisores tradicionales podrían romper el buen contenido en una pantalla de un ordenador personal, pero tienen una gran desventaja para los móviles de aplicaciones que ocupan un valioso espacio en la pantalla del móvil. Un uso intensivo de los divisores también puede conducir a la contaminación visual y densa, lleno de interfaces de gente. Las preferencias de los usuarios cambian hacia una interfaz más simple, despojando la interfaz de usuario que es muy básica, implementar los elementos necesarios, es la clave del éxito. El punto real detrás de este cambio es que se trata de un cambio de enfoque sobre el contenido y la funcionalidad, mientras que este deberá acabar con los elementos superfluos. 



Por lo tanto, trate de dividir por elementos y espaciado, no líneas. Menos líneas y los divisores de siempre, le dará una interfaz más limpia, más moderna y sentirá que es más funcional. 



El espacio en blanco



El espacio en blanco son las áreas de diseño, donde no hay ningún elemento colocado por un diseñador. El generoso espacio en blanco puede hacer que algunas de las más sucias interfaces, tengan un aspecto atractivo y simple — ya que crea los espacios alrededor de los elementos en el diseño para ayudarles a destacar o separarlos de los demás elementos. Espacio libre crea un elemento esencial de la respiración y hace que la interfaz de usuario que se ve menos desordenado.  



Contraste de colores



El contraste de colores es una de las más potentes herramientas de diseño, el uso de la habilidad y tendrás un diseño llamativo. La creatividad sin duda entra en juego con la separación de contenido a través de un uso inteligente del color. Básicamente, todo lo que necesitas hacer es encontrar dos colores que contrasten muy bien con un toque de color que atraiga la atención de los usuarios a un área determinada de la pantalla sin que esta obstruya o sea pesada a la hora de tenerla. Como resultado, los usuarios pueden acceder a la información más rápidamente y más fácilmente. 



Las sombras y la elevación



Las sombras y la elevación son capaces de crear algo de profundidad en la interfaz del usuario y separar visualmente el contenido de las secciones. La aplicación del calendario de Google es un buen ejemplo de cómo aprovechar el espacio y el uso de las sombras, en lugar de dibujar las líneas de ayuda para definir las diferentes secciones de una manera no-intrusa.



 



No se necesita divisores de imagen basados en el contenido



 



La imagen basada en el contenido no necesita divisores. Debido a que la red en sí misma crea la distinción visual, la lista de cuadrícula no necesita divisores para separar los sub encabezados del contenido. En este caso, el espacio en blanco y el sub encabezado, separan las secciones de manera adecuada.



 



Conclusión



Si bien el objetivo último es el de simplificar nuestras interfaces para hacerlas más funcional y utilizable, se debe pensar dos veces cuando se trate la separación del contenido y por las líneas y los divisores. El desarrollo de un limpio diseño de interfaz de usuario, también significa la eliminación de cualquiera de los elementos innecesarios y hay muchas cosas que se pueden hacer para mejorarla sin la adición de elementos de líneas, que sólo ocupan espacio.



 



Sobre el Autor: Nick Babich es un desarrollador de software y autor de un blog dedicado a la usabilidad.



 



"Descarga tu icono y comienza a implementar tu proyecto ilustrativo"

Icons8Divisores visuales en los móviles de diseño UI
posicionamiento en buscadores
Vive Sex Shop - Tienda online de Juguetes eróticos