Fichas de diseño Sistema de diseño

Nombrar y gestionar valores compartidos.

7 comprobaciones · 3 grupos de contenido

Contenido de la lista

Progreso de la revisión

Estructura y significado

Comparar información y presentación en contexto de uso.

Separando valor y propósitoDistinga los valores primitivos de las variables basadas en roles y las variables específicas de componentes.Cambie la interfaz clara a oscura y luego verifique los estados de los componentes. Usar nombres para fines tales como texto secundario o bordes; Evite dejar que cada pantalla elija un color similar.Ejemplo Las fechas de actualización, las sugerencias del cuadro de entrada y los comentarios utilizan el token de "texto silenciado"; El intercambio de tokens actualizará los tres según las mismas reglas.Nombrar tiene reglasUtilice un nombre que refleje su uso, estado y alcance para que otros puedan adivinar cómo se utilizará.Los nombres de funciones, como el color de fondo de advertencia, son más duraderos que los nombres de valores, como amarillo-200; Mantenga el mismo orden de nombre para todo el sistema.Registre cómo utilizar cada variable.Dé ejemplos adecuados y mencione casos en los que esa variable no debería utilizarse.Cada variable necesita un ejemplo de uso correcto y una advertencia por uso incorrecto; Indique claramente que las variables individuales del ingrediente no son selecciones de todo el producto.

Interacción y usabilidad

Pruebe la operación, cambie el estado y continúe trabajando.

Mira las interfacesUtilice un papel constante al cambiar de luz u oscuridad y verifique el contraste de cada estado.El nombre de un rol debe conservar su significado a través de la luz y la oscuridad; No requiere que el componente sepa qué código de color pertenece a cada interfaz.Mantenga el diseño y el código sincronizadosCompare nombres y valores entre documentos de diseño y componentes en uso.Elija una fuente de datos primaria y verifique automáticamente si hay sesgos; El mismo nombre pero valor diferente sigue siendo un error de sincronización.Seguimiento de cambios compartidoRegistre el motivo, el alcance de la influencia y el método de conversión al cambiar o eliminar una variable.Registre la variable de reemplazo y el rango de conversión al eliminar la variable anterior; Verifique las dependencias antes de publicar nuevos valores.

Completa la experiencia

Busque detalles que sean fáciles de pasar por alto al poner en uso el diseño.

Asignar propiedad y un proceso para agregar tokensIndique quién revisa los tokens nuevos, cuándo se deben reutilizar los tokens existentes y cómo se resuelven los significados superpuestos.Una solicitud para agregar una variable debe incluir los casos de uso y los motivos para no utilizar un rol existente; Evite que cada grupo cree su propia paleta de colores.

El progreso se guarda automáticamente en este navegador.

GUÍA

Cómo revisar

Compruebe si el valor es llamado por rol

Cambie la interfaz clara a oscura y luego verifique los estados de los componentes. Usar nombres para fines tales como texto secundario o bordes; Evite dejar que cada pantalla elija un color similar.

EJEMPLOS

Ejemplos de uso

Color de fuente secundaria común

Las fechas de actualización, las sugerencias del cuadro de entrada y los comentarios utilizan el token de "texto silenciado"; El intercambio de tokens actualizará los tres según las mismas reglas.