https://es.icons8.com/
Cuando examine la más exitosa interacción de diseños en los últimos años, los ganadores fueron aquellos que ejecutan los fundamentos de la perfección. Se alimentan natural del comportamiento humano, y luego en silencio eliminan las barreras sin ni siquiera darnos cuenta, y es que se centran en la presentación visual y la experiencia interactiva, especialmente escaneandose por sí mismo. Vamos a resumir las más importantes técnicas de diseño y cómo estas pueden trabajar para usted.
Tipografía efectiva.
El propósito de texto en tu sitio o en la aplicación es establecer una clara conexión entre la aplicación y el usuario, para ayudar a los usuarios en alcanzar sus metas, y la tipografía juega un papel vital en esta interacción. El tamaño y el diseño de su texto puede tener un impacto enorme en la experiencia de la lectura y lo mismo en la pantalla: el usuario pasa mucho más tiempo para procesar el texto más pequeño, y como resultado, los usuarios no están asistiendo a la mayoría de la información. Esto es especialmente cierto para las unidades portátiles móviles, donde los pequeños tipos de pantalla brillante pueden ser un verdadero dolor de cabeza para los usuarios. Por lo tanto, la más de la pantalla, el más significativa en entender en cuanto a su tipografía.
Crédito de la imagen: usertesting.
El truco con la tipografía del móvil es el balanceo legible con la conservación del espacio. La selección de un tamaño adecuando y el espacio, es el momento más importante a la hora de diseñar el tipo de texto para los dispositivos móviles. Este tipo de texto debe ser lo suficientemente grande cómo para leer con facilidad y debe haber suficiente espacio entre líneas para qué el texto no se descuadre en el pequeño espacio.
Ejemplo de buen tamaño y espaciado en medio de la aplicación para iOS. Crédito de la imagen: Medio.
Sugerencia: Para asegurar la legibilidad en los dispositivos móviles, el objetivo tendrá que ser de 30 a 40 caracteres por línea. Esta estimación conservadora es la mitad de la recomendada qué es entre 60-75 caracteres mostrados en pantalla.
Simple esquema de color.
El Color es el más complicado en el área de diseño visual. El esquema simplificando de color que mejora la experiencia del usuario, pues al tener demasiados colores pueden tener un impacto negativo sobre ella. Diga No a las complicadas mezclas del color. Al modificar la saturación y la luminosidad en una sola tonalidad, puede generar varios colores y esquemas de colores que no serán abrumadoras para él ojo.
Esquemas de tono esquema de color azul. Crédito de la imagen: Smashing Magazine.
La aplicación en el siguiente ejemplo tiene un esquema de color monocromático, que se compone de diferentes tonos, sombras y matices dentro de un matiz específico.
Crédito de la imagen: Louis Saville.
Sugerencia: Crear sus propios esquemas de color puede ser un poco intimidante, pero no es tan complicado como muchos piensan. La adición de un acento de color brillante en los esquemas de colores, crea un diferencial inmediato. El color de acento brillante inmediatamente atrae la atención de forma sencilla y eficaz.
Crédito de la imagen: Maximlian Hennebach.
Contenido basado en la navegación junto con los diseños
No importa qué tipo de contenido dese incluir en el diseño de la aplicación de la tarjeta, siempre se quiere hacer que el usuario se lleve la experiencia del contenido tanto como sea posible. Basado en el contenido, la navegación es un patrón de diseño que se utiliza para la incorporación de transiciones entre la visión general y detallada de los estados de los elementos. Este tipo de navegación funciona especialmente bien junto con las tarjetas, ya qué estas tarjetas son una gran manera de organizar y desarrollar una enorme cantidad de contenido de una manera qué es fácil de digerir:
Las tarjetas en la pantalla se dividen contenidos significativos desde las secciones en la qué ocupa menos espacio en la pantalla. De similar a la forma de los grupos de párrafos de texto, sentencias en secciones distintas, las tarjetas pueden reunir varias piezas de información para formar una pieza coherente de los contenidos.
Las tarjetas están hechas para los pulgares. Los usuarios no tienen que pensar acerca de cómo hacer que las cosas funcionen, ya qué intuitivamente entienden la física de convertir una tarjeta para obtener más información o deslizarse para la siguiente parte de la información.
Crédito de la imagen: Behance
Sugerencia: Mantener la interfaz de usuario como invisible como usted puede — centrarse en el contenido.
Capas y profundidad.
La mayor diferencia entre el ordenador de sobremesa y las pantallas de móviles es el tamaño. Debido a qué los sitios y las aplicaciones tienen menos espacio para ayudar a neutrealizar este inconveniente, así más y más interfaz están aprovechando al máximo mediante la aplicación de varias capas, una encima de la otra.
EnfOk de capas le da una sensación de profundidad a la interfaz, haciendo que la experiencia sea más tangible.
Las capas de interfaz de trabajo dentro de los principios de Google, material diseñado que imita cómo interactúan las personas con los objetos en el mundo real. Las capas ayudan a los usuarios a interactuar con el diseño. Las superficies y las sombras juegan un papel importante en la transmisión de la estructura de la aplicación — en el que se diferencian los elementos y objetos con las sombras que parecen como si estuvieran fuera de la página.
Las capas son la interacción de las señales. Crédito de la imagen: Diseño de Material.
Algunas de las aplicaciones comunes de las capas de interfaz son:
Botón de acción flotante. Este tipo de botones se utilizan para promover la acción. Ellos se distinguen por verse como un icono circular flotante que está por encima de la interfaz del usuario.
Crédito de la imagen: pocketmeta.
Zom-in. Un ejemplo común de dichas capas es cuando el usuario selecciona un elemento en una lista para hacer zoom en su vista detallada (que sobrepasa la vista de la lista) y es capaz de volver a ver plenamente toda la lista.
Crédito de la imagen: androidcentral
Navegación pegajosa. Un menú con sólos elementos esenciales que se quedan en la pantalla en todo momento, mientras el usuario interactúa con las vistas.
La parte superior de la barra de navegación se desplaza con el contenido. Crédito de la imagen: exisweb.
La barra de navegación superior es fija. Crédito de la imagen: exisweb.
Ventana Modal. Al igual que con los ordenadores de sobremesa, puede superponerse completamente sobre la ventana respecto a los ya existentes para asegurarse de que el usuario se dé cuenta, esto lo podemos ver en inicios de sesión, los anuncios o avisos.
Crédito de la imagen: Material Design.
Sugerencia: Simplificar los flujos de usuarios — el diseño de pantalla va para cada uno y para una cosa solamente.
Gestos Familiares.
El aumento de gesto acciónados en los dispositivos, cambia dramáticamente la manera en que pensamos acerca de la interacción. La pantalla se convierte no sólo en un destino táctil, sino también un gesto de destino. Deslizar, tocar y hacer zoom, son de los gestos más comunes, estos son casi instintivos como apuntar y hacer clic. Usamos gestos para volver a alcanzar el menú, cambiar un elemento actual o activar acciones tales como eliminar un elemento.
Crédito de la imagen: Dribbble.
Más que una aplicación se basa en gesto de controles, menos botones en pantalla, por lo tanto, más espacio para él valioso contenido. Esto hace que la aplicación de contenido sea muy centrada.
Crédito de la imagen: Bady.
Sugerencia: Todo lo que se menciona se refiere a la norma (intuitiva) gestos. Tenga cuidado si usted desea utilizar gestos creativos. La principal cosa para saber acerca de los gestos (estándar o creativo) es que, siempre están ocultos. Así qué sin señales visuales, los usuarios podrían confundirse acerca de cómo interactuar con la aplicación.
Animación funcional.
La animación funcional es una sutil animación que podemos incrustar en un diseño de interfaz de usuario como parte de nuestro proceso. Actúa como facilitador de las interacciones* para:
Proporcionar una retroalimentación visual:
Cuando los usuarios ven una película de dibujos animados con comentarios triggred, ellos harán un toque de clic en la acción, y al instante sabrán que la acción fue aceptada. Crédito de la imagen: Ryan Dufy.
Suavizado de transición de estado y llamar la atención a los cambios:
Los iconos de cambio de una imagen a otra, sirven a dos funciones en diferentes momentos. Crédito de la imagen: Diseño de Material
Sugerencia: puede mejorar la experiencia del usuario con el uso sutil del movimiento y las transiciones. Pero use las animaciones con cuidado, anímelas con un propósito. En lugar de animar exclusivamente para él bien de las delicias, usted debe centrarse en las cosas prácticas de la animación para él usuario.
Conclusión.
El diseño de interfaz de usuario se está moviendo hacia la eliminación de cualquiera de los elementos innecesarios para centrarse mucho más en la funcionalidad. Una interfaz limpia, simple con esquemas de color y visualmente de estética agradable. Le dará una interfaz moderna y hará que su producto sea fácil de usar.
Sobre el Autor: Nick Babich es un desarrollador de software y autor de un blog dedicado a la usabilidad.
Ver más sobre el tema y los comentarios en el foro