Plantillas de GUI de diseño de materiales de 8 puntos

Un recorrido por el diseño visual y las métricas básicas de Design Inc.

Ocho ... 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96. Estos son los números que pasan por mi cabeza por la noche. He estado usando un 8pt basado desde mi tiempo en Android Auto, y he disfrutado aplicando las principales metodologías de diseño de materiales a las interfaces de usuario de Design Inc. La semana pasada, en nuestro programa semanal de UNDO, un diseñador, Danaan Clarke, preguntó acerca de la cuadrícula de 8 puntos y si teníamos o no experiencia con ella. Siempre me he "nerdeado" sobre la estructura que soporta el diseño y pensé que sería divertido compartir algunos "detrás de escena".

1. Cuadrícula de referencia

El primer paso y el más importante es garantizar la estructura central de la cuadrícula de documentos. Puede definir los valores de la cuadrícula navegando Ver> Lienzo> Configuración de cuadrícula ...

El equipo de diseño de Google Material hace un gran trabajo al definir el método de cómo esta línea base afecta los valores de otros elementos de tipo de la interfaz de usuario principal. Todo, desde las barras de navegación, la tipografía, las líneas clave, el espaciado y el tamaño mínimo del objetivo de golpe para las acciones, se estructura en torno a esta línea de base central. Agregaría más aquí, pero sigo esta guía muy de cerca. Si no está roto, no lo arregles.

Fuente: Diseño de materiales de Google: https://material.io/guidelines

2. Plantillas de diseño

El siguiente paso es definir un sistema de columnas para diseños en varias pantallas. Intento ser conservador en mis tamaños de lienzo, pero siempre trato de usar una cuadrícula de 4, 8 o 16 columnas con una canaleta de 8 puntos (o cualquier multiplicador de eso). Para ritmos verticales, tengo una cuadrícula simple de 48 puntos que se repite. Puede definir los valores de diseño navegando Ver> Lienzo> Configuración de diseño ...

A continuación se muestra un ejemplo simple de cómo aprovecho la cuadrícula de mi columna (8 columnas, canal de 16 puntos), las métricas de referencia (8 puntos) y el ritmo vertical (48 puntos) en una nueva interfaz de usuario testimonial que enviamos esta semana.

3. iconos

Los iconos son una gran parte de hacer que una cuadrícula de línea base funcione correctamente en una interfaz de usuario. Hay muchas matemáticas complicadas para lograr esto perfecto, pero si se hace correctamente, la integridad de su icono se mantendrá en el espectro de densidades de pantalla (Retina, 1x, 2x, MDPI – XXXHDPI ... si esto no tiene sentido, lea esto) . La clave para ejecutar iconos de esta manera es asegurarse de que todas las formas, trazos y márgenes sean "pares" (2, 4, 6, 8), de modo que quede un icono centrado en el área de 24 x 24 puntos que pueda También se multiplica (x2, x3, x4) y escala de manera uniforme.

https://material.io/guidelines/style/icons.html#icons-system-icons

También hay un montón de conjuntos de iconos gratuitos que ya se han diseñado para ajustarse a una línea base de 8 puntos. Material Design, una vez más, tiene algunos recursos increíbles para esto, pero puede diseñar los suyos propios. A continuación se muestra una forma de indexar todos nuestros íconos en nuestra plantilla de GUI principal.

4. Estructura de la GUI

Realmente no hay reglas prescriptivas sobre la mejor manera de crear estas guías, pero estos documentos son una fuente de verdad que me dan (y espero que a mis contrapartes de ingeniería) tranquilidad. El objetivo es tener una versión "perfecta para píxeles" de cada componente central en un solo documento, de modo que no sea necesario dibujar cada pantalla y estado de la aplicación para la producción. Hay una gran cantidad de excelentes ejemplos y recursos en línea para referencia, pero si desea comenzar desde cero, puede descargar mi archivo base con las cuadrículas y la estructura de columnas definidas.

DESCARGAR EL ARCHIVO FUENTE

¡Gracias!

Esta publicación fue breve, pero quería compartir un poco sobre mi proceso. Si lo encontraste útil, compártelo con amigos que se beneficiarían. Además, si disfrutaste el video, también publico un vlog semanal ... me encantaría que te suscribas.

Si necesita ayuda en su próximo proyecto, agregue su solicitud a Design Inc. Si es diseñador y desea presentar una solicitud, nos encantaría ver su trabajo.