Metodología de diseño atómico: cree una interfaz de usuario sistemática y una reutilización.

El verdadero problema en la vida: "Hermoso sitio web ... pero ¿por qué el dolor de cabeza en todas partes?"

UI/UX, diseñador de gerente de producto o incluso dueños de negocios ¿Alguna vez han experimentado esta condición? Al iniciar la web o la aplicación por primera vez, todo se ve hermoso, buen orden, pero cuando pasa el tiempo ... quiero agregar una nueva característica o simplemente para arreglar un diseño de botón pequeño, todo está roto, miserable

El botón en la página A se ve a diferencia del botón en la B, el color utilizado en la página de suscripción es un tono diferente en la página de pago, el desarrollador debe sentarse y escribir un nuevo código para un componente que se vea similar. Repetidamente ... finalmente, resulta que "gran web incluso sin orden". Expandir o mantener una pesadilla que consuma tiempo y desperdiciando presupuestos increíblemente.

Si está asentiendo, entonces no se enfrenta a este problema. Este es el "dolor" del diseño más "bueno".

Aviso: Los gráficos de la interfaz de usuario del sitio web en el segundo lado del sitio web (antes de que el lado izquierdo muestre el botón, la tarjeta y las fuentes que son inconsistentes. Parecen caóticos. El lado derecho (después) muestra la interfaz de usuario que todos los componentes se ven ordenados y maravillosamente.

¿Por qué ocurre ese problema? El diseño que solo parece "página" no se ve "sistema"

La raíz de todo el caos generalmente se debe a los métodos de diseño incorrectos. Tendemos a que se nos enseñe a ser "páginas" (diseño basado en la página), como "diseño del hogar", "detalles de la página de diseño del producto", "diseño en contacto con nosotros". Este tipo de pensamiento al principio puede ser rápido. Pero a la larga, es un buen desastre.

Porque cuando diseñemos, según la "página" como principal, crearemos varios elementos nuevos para esa página sin pensar que estos elementos se usarán en otro lugar o no causarán estos problemas seguidos:

• Inconsistencia (inconsistencia): diferentes diseñadores o incluso la misma persona en diferentes momentos, pueden crear un "botón azul" con tonos, tamaños o sombras diferentes en cada página.
• Trabajo redundante: el desarrollador debe escribir un código para el "cuadro de perfil de usuario" repetidamente, aunque debe crearse solo una vez y puede usarse nuevamente.
• Falta del centro del centro (sin una sola fuente de verdad): nadie sabe que el "botón principal" es realmente correcto. ¿Cómo es? Todos trabajan de acuerdo con su propia comprensión.

Este tipo de trabajo no es diferente de construir una ciudad sin un plan de la ciudad. Todos construyeron la casa como él quería. Al final, la ciudad creció en abarrotada y sin dirección.

Aviso: los diseñadores y programadores de dibujos animados están sentados trabajando después de chocar. Cada persona creó su propio "botón". Con una flecha que apunta a la pantalla de la computadora que muestra el mismo sitio web, pero hay muchas versiones que se ven diferentes

Si se deja, ¿cómo afectará: "deuda técnica" que se intensifica hasta que el negocio mantenga el negocio?

Permitir que su sitio web o aplicación crezca sistemáticamente no solo una cuestión de poco atractivo, sino que afecta directamente al negocio en muchas dimensiones. Al igual que la acumulación de "deuda técnica" (deuda técnica) que es enorme y costosa.

• La experiencia del usuario (UX) empeora: inconsistente, lo que hace que el usuario se confunda y se sienta inapropiado. Imagine que si el botón "Confirmar" en su aplicación bancaria cambia su cara cada vez que presiona. ¿Te sentirás seguro y te atreverás a seguir usando?
• Costos crecientes: cada vez que se requiere o se agrega, significa el tiempo del diseñador y el desarrollador que debe perderse con el mismo problema. Y el trabajo duplicado esta vez es "costo" que tienes que pagar.
• La velocidad del desarrollo disminuye: el lanzamiento de cada nueva característica es un gran problema. Debido a que tiene que preocuparse por si afectará a otras partes o no de lo que he hecho en 1 semana, puede convertirse en 1 mes
• Imagen de marca dañada: el sitio web es la cara de la marca. Si no parece ser un sistema confiable de la marca a los ojos de los consumidores, también se reducirá.

Finalmente, esta "deuda" se intensificará hasta que no pueda moverse. Luchar con competidores o responder al mercado que ha cambiado es más lento. Hasta que desafortunadamente pueda perder oportunidades de negocio

Aviso: las imágenes intovraft mostraron 4 impactos negativos causados por la liberación de este problema: icono de reloj Sansai (pérdida de tiempo), icono de bolsa de plata (alto costo), icono ícono (UX) y el icono de la marca agrietada. (Marca dañada)

¿Hay alguna forma de arreglar: comience a mirar al "químico" con diseño atómico?

La solución de este problema es cambiar la forma de pensar al investigar una "página" en un "sistema" y la herramienta más poderosa para comprender esto. de diseño atómico inventados por Brad Frost .

El diseño atómico es un concepto de endeudamiento de la química. Aplicado al diseño de la interfaz de usuario dividiendo los diversos componentes en 5 niveles, como los átomos recolectados en moléculas y las moléculas reunidas como un órgano más complejo

1. Átomos (átomo): es la unidad más pequeña y no se puede separar, como colores, fuentes, iconos o botones individuales. Es la "materia prima", la más básica.
2. Moléculas (moléculas): uniendo muchos "átomos" para crear componentes de trabajo reales, como el uso de etiqueta (átomo) + campo de entrada (átomo) + botón (átomo) en un "formulario de búsqueda de forma". (MOLÉCULA
3. Organismos (organismos): es hacer que las "moléculas" y/o "átomos" sean tan complicadas y más importantes, como el uso de la forma del logotipo + molécula + molécula para convertirse en "encabezado (encabezado)" (organismo)
4. Plantillas (plantilla): la introducción de muchos "organismos" para armar la estructura para crear "el esquema de la cara" sin ninguna información real para ponerlo es un plan que estipula lo que cada página debería tener.
5. Páginas (página): El último paso es traer "plantilla" para poner "contenido real" (imagen, texto, video) para permitirnos ver la página web o aplicaciones que el usuario realmente cumplirá. Que nos permite probar la precisión y eficiencia del sistema de diseño

El comienzo de este concepto lo ayudará a crear un sistema de diseño sistemático y se expandirá fácilmente. Hazlo sin importar cuántas decenas de cientos de páginas todo permanezca siempre en las mismas reglas.

Aviso: las hermosas imágenes infográficas muestran la jerarquía de los 5 diseño atómico (átomos -> moléculas -> organismos -> plantillas -> páginas) con ejemplos claros de interfaz de usuario en cada paso, como el átomo, la molécula es la forma de búsqueda, encabezado.

Ejemplos de lo real que solía lograrse: cuando GE revolucionó la organización con el sistema de diseño

La teoría aún puede parecer complicada. Echemos un vistazo a los ejemplos reales de organizaciones de clase mundial como General Electric (GE). GE tiene enormes productos digitales. Cada equipo diseñó la interfaz de usuario en diferentes direcciones. Resultando en confusión y muchos desperdicios de recursos

Problemas encontrados: falta de violencia que hace que la marca se vea única y lleva un nuevo desarrollo de productos más tiempo de lo necesario

Cómo resolver el problema: el equipo de GE ha aportado el mismo principio al diseño atómico para crear "sistema de diseño de predix". Crearon "Biblioteca de componentes" que todos en la organización deben usar. Comenzando desde color, átomos (átomos) hasta tarjetas de datos, gráficos, tablas complejas (organismos)

Resultados sorprendentes:

• Reduzca el diseño y desarrolle enorme porque no tiene que crear algo nuevo desde el centro
• Cree una experiencia de usuario unificada. En cada producto de GE hace que la marca sea más fuerte y confiable.
• Ahorre un gran presupuesto al reducir las funciones duplicadas

Esta es la prueba de que la creación de inversión al principio, aunque puede parecer lenta, pero las recompensas a largo plazo son enormes. Y es algo que permite que la organización crezca de manera sostenible

Aviso: Deslice el antes y después de la aplicación GE. El primer lado muestra la interfaz de usuario de 3 aplicaciones que son completamente diferentes. Después de mostrar las 3 aplicaciones que utilizan el mismo sistema de diseño, lo que hace que parezca consistente y profesional. Con números estadísticos como "tiempo de desarrollo -60%"

Si desea seguir, qué hacer: la lista de verificación comienza a crear un diseño atómico usted mismo (se puede usar de inmediato).

Lee aquí que probablemente quieras comenzar a hacerlo, ¿verdad? ¡No tienes que esperar! Puede comenzar a crear el sistema de diseño atómico para su proyecto inmediatamente con esta 5 lista de verificación simple:

1. Hacer cuentas de propiedades (inventario de UI): el primer paso es explorar lo que tiene primero. Captura cada página de la web o su aplicación. Y corte todos los componentes por separado: todos los botones, todos los tipos, tarjetas, todos los estilos, todos los temas.
2. Definitivamente sus átomos: a partir de los activos, los activos comienzan a la agrupación y crean estándares para "átomo" primero, como definir el conjunto de colores principales (escala de tipografía), el sistema del sistema de espaciado y el estilo del icono, esta es la creación de la guía de estilo que es una base importante.
3. Ensamble el cuerpo para crear moléculas: cuando hay un átomo estable, comenzó a unirlo como una "molécula" que a menudo se usa, como "completar la información con el nombre", "botón con icono", "artículos de etiqueta"
4. Cree organismos importantes: avance al siguiente nivel creando un corazón más grande y el corazón de la web, como encabezado, pie de página, barra lateral o la tarjeta de imagen del producto con un botón de pedido.
5. Use herramientas para ayudar a construir: crear todo este sistema con manos puede ser demasiado difícil. Use la herramienta de diseño de figma o boceto para ayudar a crear una "biblioteca de componentes" donde todos en el equipo puedan llamar repetidamente. Figma tiene una herramienta muy poderosa. En esta administración y si desea volver a subir, mire las técnicas avanzadas de Figma que lo ayudarán a trabajar más rápido.

Aviso: Imágenes hermosas y fáciles de entender, que muestran 5 pasos para iniciar el diseño atómico con íconos en cada elemento (lupas, bảng màu, moléculas, estructuras y logotipo de Figma).

Preguntas que las personas tienden a preguntarse y las respuestas que se limpian

Recibo preguntas que muchas personas se preguntan sobre el diseño atómico para responder claramente. Aquí

Pregunta 1: El diseño atómico es adecuado para pequeños proyectos. ¿O independiente solo?
Respuesta: ¡Muy adecuado! En realidad, cuanto más pequeño sea el proyecto porque es crear disciplina y regulaciones desde el principio, causando cuando el proyecto se está expandiendo en el futuro, tendrá una base sólida. No es necesario tener dolor de cabeza posterior al pensamiento sistemático siempre es útil si el equipo es pequeño o grande.

Pregunta 2: ¿Esto hará que el primer proyecto sea lento?
Respuesta: Sí, es una inversión un poco más en el primer período. Pero lo que ha devuelto es una gran velocidad de largo plazo. Como un proverbio que "acordó caminar lentamente en primer lugar mejor para correr más rápido y tropezar en el medio del camino." Es "lento para ir rápido" (ir lento para ir rápido) Eso es el más valioso

Pregunta 3: ¿Guía de diseño y sistema de estilo atómico o sistema de diseño diferente?
Respuesta: ¡Es una muy buena pregunta! Piensa así:

• Guía de estilo: generalmente concéntrese en "átomos", como colores, fuentes, logotipo, iconos.
• Diseño atómico: es "filosofía" o "métodos" en el uso de la guía de estilo para convertir un cuerpo en moléculas, organismos, plantillas y páginas.
• Sistema de diseño: es el más "final". Es un conjunto de componentes reciclados, con pautas y documentos completos. El diseño atómico es una gran idea para crear un sistema de diseño.

Pregunta 4: Si hay un sitio web antiguo que ya es desordenado, ¿puedo tomar el diseño atómico para adaptarse?
Respuesta: ¡Absolutamente! No tienes que desmantelarlo todo a la vez. Comience desde los pasos "Inventario de UI" que recomiendo primero para ver toda la imagen general, luego cree gradualmente un componente estándar uno por uno y luego reemplace las antigüedades en cada parte. Puede comenzar con la más frecuente primero frente a la persona.

Aviso: Los personajes de dibujos animados están parados en la intersección. Un desordenado y desordenado llamado "diseño basado en la página". Otra forma es un camino suave y ordenado llamado "diseño atómico". El personaje de dibujos animados tiene un signo de interrogación en la cabeza. Transmitir la decisión

Resumen para una fácil comprensión: deja de construir una casa ... y gire para construir "Lego hacia"

Si desea resumir el diseño atómico, lo más fácil es una forma de cambiar la forma de pensar desde "construir toda la casa" cada vez para crear "cuarto de lego estándar" con un conjunto

Cuando tiene un buen conjunto (átomos, moléculas, organismos), si los clientes quieren "casa", "castillo" o "nave espacial" (páginas), puede recoger el mismo logotipo. Ensamblado en un nuevo artículo rápidamente, hermoso y fuerte, con todo parece ser parte del mismo universo de LEGO

La inversión en el "sistema" de hoy es la compra de "velocidad" y "calidad" el próximo día. Es el corazón de los productos digitales que están listos para crecer y ajustarse en el mundo que gira pronto. Y esta es la guía que siempre posee nuestro equipo de diseño UX/UI

De acuerdo ... ¿Es hora de que comiences a crear tu propio juego de Lego?

Aviso: la última última imagen de la última imagen muestra al diseñador para la última LEGO en la compleja y hermosa estructura de la interfaz de usuario. El fondo es un gráfico que muestra el crecimiento de la eficiencia laboral.

‍