UX en 60 segundos uso de bibliotecas de componentes

Bienvenido a esta introducción súper rápida sobre el uso de bibliotecas de componentes; Útil para diseñadores, desarrolladores y usuarios por igual. Saltemos en!

Bibliotecas de componentes en 60 segundos

Cada interacción que un usuario encuentra, tiene que aprender, lo que crea una carga cognitiva. Es especialmente desafiante para un usuario si los elementos de la interfaz de usuario son casi lo mismo pero diferente. El usuario luego tiene que analizar preguntas como "¿por qué son diferentes?", "¿Ocurrirá lo mismo si presiono estos dos botones?"

Comience por identificar objetos comunes en sus diseños, defínalos como componentes, luego, cuando diseñe pantallas, puede comenzar a jalarlos nuevamente. Al hacer esto, se obligará a ser más consistente. Es posible que incluso te sorprenda el kilometraje que puedes obtener al usar los mismos objetos para resolver diferentes problemas.

Usando el bosquejo

En la práctica, puede crear símbolos dentro de su proyecto de Sketch o usar el complemento Craft by InVision. Para realmente obtener valor de su biblioteca de componentes, trabaje con sus desarrolladores para obtener las mismas cosas definidas en el código también.

• Craft: Diseñar con datos del mundo real
• Cómo organizar tus estilos y símbolos de boceto como un profesional

Tampoco tiene que ser puramente visual; Debe definir los diferentes estados de cada objeto, e incluso las interacciones complejas..

Al usar una biblioteca de componentes, los diseñadores y desarrolladores pueden usar los mismos objetos una y otra vez, para resolver diferentes problemas. Y para los usuarios, encontrarán componentes familiares, que tendrán que dedicar menos tiempo a descubrir cómo usar su aplicación o sitio web..

Kits de interfaz de usuario destacados

Habrás notado un par de Kits de interfaz de usuario que aparecen en este video; consígalos ahora como parte de su suscripción a Envato Elements!

Sencillo

Más de 100 elementos de Photoshop editables y redimensionables, basados ​​en formas vectoriales limpias. Las capas están agrupadas y bien organizadas, los elementos son fáciles de redimensionar y ajustar, así como editar los colores.

Zoomie

Aplicación Social Media Mobile para Sketch; Todos los tableros de pantalla están bien organizados y en capas.