Me di cuenta de que muchos diseñadores de productos se preguntan "¿Cómo organizar diferentes estados de componentes?". Todo el mundo del diseño está dividido en 2 partes. El primero crea un componente en el que hay varias carpetas para todos los estados. Este último crea un componente separado para cada estado del elemento.
Primero, analizaré las ventajas y desventajas de cada uno de ellos, y luego me aventuraré a proponer otra opción. Hablo de la implementación en la Fig. Quizás algo no sea aplicable en otros editores.
1. Un componente con muchos estados
Los beneficios
- La biblioteca de componentes se ve más compacta.
- En el panel de componentes hay menos elementos y, por lo tanto, menos desplazamiento para encontrar el correcto. En este caso, se guarda la búsqueda por nombre.
Desventajas
- En algún lugar, aún debe mostrarle al diseñador de diseño todos los estados posibles, porque no ve las capas ocultas.
- Tienes que pasar tiempo buscando el estado deseado: mostrándolo y ocultando lo innecesario. Esto es especialmente agotador si la estructura del componente es compleja.
2. Muchos componentes para cada una de las condiciones.
Los beneficios
- Para el diseñador de diseño, todo está claro de inmediato.
- Todos los estados también son visibles para comparar con otros componentes. Esto es útil al crear los siguientes componentes.
- En la selección de Instancia, es fácil encontrar el componente deseado, siempre que todo esté correctamente nombrado.
Desventajas
- La biblioteca se está volviendo enorme. Sin embargo, algunas de las condiciones en el 99% de los casos no son necesarias. El tipo de orientación y presión generalmente se impone una vez y ya no es necesario mostrarlo.
3. Lo que ofrezco
Todo el mundo sabe sobre
diseño atómico , no tiene sentido hablar de ello. Solo prestaré atención al hecho de que muchos elementos de la interfaz son similares. Por ejemplo, la entrada, la selección, el botón, la barra de menú se pueden hacer de acuerdo con un principio: rectángulo + texto + icono. En este caso, podemos hacer un componente que consista en estos elementos básicos y construir sobre él el resto de los componentes: botones, entradas y todo lo demás. Se me ocurrió un nombre para este elemento "Componente superior". Es decir, los componentes maestros del botón, entrada, selección e incluso la barra de menú consistirán en un componente superior.
Ventajas:
- Todos los elementos de la interfaz tienen el mismo aspecto: sangrías, tamaños, fuentes y más.
- Editando el componente superior, se editan los componentes restantes basados en él.
- El sistema de diseño es más holístico, más unificado.
- Lo hace más rápido y fácil.
Características (no lo llamaría desventajas):
- Debe tener una edición cuidadosa, ya que al cambiar el componente superior, puede romper el resto de los componentes.
- Si cambió los estilos de los componentes maestros, la edición de los estilos (e incluso si reescribe el texto) del componente superior no interrumpirá nada. Obviamente, no se trata de la edición estructural del componente superior.
- La anidación es más profunda. Hay más clics para llegar a las capas inferiores. Tienes que acostumbrarte. Esto es lo único que llamaría un menos.
- En el proceso de diseño de la página, el componente superior puede interponerse entre los componentes del trabajo. Esto se puede resolver inventando un nombre para él, gracias al cual irá al final de la lista. Quizás esto también le parecerá un inconveniente a alguien, no me molesta.
Mi propuesta cierra la pregunta planteada al principio solo parcialmente. Entonces, ¿cómo dibujar estados de elementos? No funcionará para la entrada y los botones para hacer el mismo estado. Aquí puedo ofrecer lo siguiente:
- Intenta describir estados en algún lugar por separado usando estilos. Bueno, ¿por qué necesita la apariencia de un botón presionado en cada diseño?
- Piense en los componentes principales para poder usarlos convenientemente en los componentes maestros posteriores.
- Cuando un componente es complejo (por ejemplo, una tarjeta con una combinación de imágenes, textos, etiquetas, etc.), use el sentido común. Si tiene un montón de carpetas ocultas en las que está tratando de excavar, cree un componente separado. Si cambiar de estado no requiere más de 3-4 clics, deje carpetas en el componente.
- Si más de un diseñador está trabajando en un proyecto, acuerde cómo se verá el componente maestro en el estado en el que debe publicarse. Para que la actualización del componente no rompa los diseños terminados. Por ejemplo, por defecto, el estado más básico se muestra en la carpeta superior, todos los demás deben estar ocultos. O una medida extrema: todas las carpetas están ocultas por defecto.
- Todo lo demás depende de tu imaginación y preferencias de gusto.