Espaciado / Cuadrícula Sistema de diseño

Mantenga el ritmo del diseño constante a medida que cambian el contenido y las pantallas.

7 comprobaciones · 2 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.

Utilice un conjunto de distancia comúnElija niveles de distancia regulares en lugar de ajustar cada punto arbitrariamente.Distinga el espacio dentro de un elemento del espacio entre secciones de página.Ejemplo Las etiquetas y los cuadros de entrada están cerca; Los dos grupos de entornos tienen una brecha mayor.Nombrado según el propósitoUtilice variables para el relleno de elementos, el espaciado de listas y los márgenes de página.Separe el relleno dentro del componente del espacio de diseño entre regiones; el mismo valor numérico no significa el mismo rol.Pestillos para columnas y canalonesIndique cómo dividir las columnas, el espacio entre columnas y el margen exterior en cada nivel de ancho.Especifique el número de columnas, el espacio entre columnas y el margen exterior en cada tamaño; El contenido real debe ajustarse a la cuadrícula en lugar de solo al patrón de bloques de color.Cambiar diseño según el contenidoEstablezca un punto de transición cuando el contenido comience a saturarse y siga compartiendo reglas.Establezca puntos de cambio de diseño cuando el contenido lo necesite, no solo por el nombre del dispositivo; compruebe los anchos entre dos puntos especificados.

Interacción y usabilidad

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

Tener una densidad apropiada para el contextoSi correspondeSi se admite el modo compacto, el texto, las áreas táctiles y los puntos de enfoque seguirán siendo legibles.El modo compacto aún debe preservar el área interactiva y la legibilidad; Reduzca la cantidad de decoración antes de escalar botones o texto.Comparar el eje de alineaciónVerifique que los títulos, cuadros de entrada y acciones tengan las mismas guías que la intención.Pruebe contenido extenso y haga zoomCompruebe si hay etiquetas largas, varias filas y amplíe el texto antes de finalizar la cuadrícula.Pruebe etiquetas largas, varias columnas, traducciones largas y niveles de zoom grandes; Los errores de malla suelen aparecer en estos casos antes de los datos de muestra.

El progreso se guarda automáticamente en este navegador.

GUÍA

Cómo revisar

Utilice un conjunto de distancia común

Distinga el espacio dentro de un elemento del espacio entre secciones de página.

EJEMPLOS

Ejemplos de uso

Utilice un conjunto de distancia común

Las etiquetas y los cuadros de entrada están cerca; Los dos grupos de entornos tienen una brecha mayor.

Espaciado / Cuadrícula Sistema de diseño

Estructura y significado

Interacción y usabilidad

Cómo revisar

Utilice un conjunto de distancia común

Ejemplos de uso

Utilice un conjunto de distancia común

Buscar una lista

No se encontraron listas