Rejillas Bento (Apple Breeze):Rejillas Bento

El estilo Bento Grids es un estilo de diseño visual caracterizado por el minimalismo, la claridad y un alto grado de organización, que suele encontrarse en las modernas interfaces web y de aplicaciones móviles. Se consigue dividiendo el contenido en módulos ordenados en cuadrícula, cada uno de ellos con iconos, títulos y descripciones breves, creando un diseño que recuerda a una caja bento con secciones para la comida. El estilo hace hincapié en el espacio en blanco, la alineación y la coherencia, utilizando colores de fondo suaves que contrastan con elementos de primer plano nítidos para crear una experiencia de lectura limpia y cómoda. Por ejemplo, en un blog personal o una página de portafolio, Bento Grids mostraría perfiles de proyectos, resúmenes de artículos o etiquetas de habilidades en tarjetas de distintos tamaños, creando un efecto visual general de orden y belleza.

Palabra clave de referencia

Diseñe una página de lanzamiento de producto/servicio moderna, minimalista y de gama alta con un diseño estilo Bento Grid que presenta toda la información clave de forma compacta en una sola pantalla.

Contenido esencial: [introduzca aquí el contenido esencial

Requisitos de diseño:
1. Diseño de cuadrícula Bento: crear una cuadrícula de tarjetas de diferentes tamaños, cada una con una categoría específica de información, con un diseño compacto pero no abarrotado.
2. Diseño de las tarjetas: todas las tarjetas deben tener las esquinas redondeadas (radio del borde de 20px), fondo blanco/gris claro, un sutil efecto de sombra y un ligero efecto de flotación hacia arriba al pasar el ratón por encima.
3. Esquema de colores: esquema de colores minimalista, principalmente fondo blanco/gris claro con colores degradados como colores de acento (pueden especificarse colores concretos, por ejemplo, del morado claro #C084FC al morado oscuro #7E22CE).
4. Jerarquía tipográfica:
   - Números/títulos grandes y en negrita: utilice colores degradados para resaltar los datos clave y los títulos principales.
   - Títulos medianos-grandes y pequeños: para los títulos de las fichas, indicando claramente las categorías de contenido
   - Texto pequeño: utilizar el color gris para presentar el texto descriptivo de apoyo
5. Organización del contenido:
   - Fila superior: anuncios principales, características del producto, indicadores de rendimiento o puntos clave de venta
   - Fila central: especificaciones del producto, detalles técnicos, características funcionales
   - Fila inferior: guía del usuario y conclusión/llamamiento a la acción.
6. Elementos visuales:
   - Utilice iconos sencillos para representar las características
   - Barras de progreso o gráficos para mostrar datos comparativos.
   - Las cuadrículas y las tarjetas crean ritmo visual.
   - Pestañas para mostrar información categorizada en pequeñas cápsulas
7. Diseño responsivo: las páginas deben poder adaptarse a distintos tamaños de pantalla y mantener una buena legibilidad en dispositivos móviles

8. Estilo de diseño de referencia:
- El estilo general del diseño es similar al de la página de especificaciones de producto de la web de Apple.
- Utiliza mucho espacio en blanco y elementos visuales sencillos.
- Destaque las cifras y las características clave y reduzca los textos largos.
- Utilizar colores degradados para resaltar los datos importantes.
- Espaciado adecuado entre tarjetas para crear una separación visual clara.

Casos prácticos

Figma afina el borrador del diseño

Tutoriales oficiales sobre cómo utilizarlo:Ruta de aprendizaje de Figma - Introducción básica, tutorial de chino - Comunidad china de Figma

Plugin de navegador Instalación y descarga de plugins chinos:FigmaCN - Chrome Web Store

Cliente (recomendado):‍ ‍ Figma chino + Tutorial de instalación - Flying Book Cloud Documents

Primero tenemos que encontrar el plugin html.to.design de Figma que vamos a utilizar esta vez. Sólo tienes que buscarlo haciendo clic en el icono rodeado por la barra de pestañas en la parte inferior de cualquier archivo Figma.

A continuación introducimos la URL de la página que queremos importar, si no la tienes puedes desplegarla con Youware y pulsamos el botón Importar.

En primer lugar, queremos dar la cabecera del título también se añade a la tarjeta, esta vez optamos por encontrar la cabecera Ancho de cabecera que el siguiente todas las tarjetas se suman a la anchura de la tarjeta es más amplia, por lo que en primer lugar, su anchura se unifica a 1472px.

Después de que queremos copiar el estilo de la siguiente tarjeta gris sin su contenido, sólo tienes que elegir una tarjeta gris al azar a continuación, y luego haga clic derecho - Copiar y Pegar como - Copiar Propiedades en la línea, Pegar es lo mismo que seleccionar en la tarjeta de cabecera seleccione Pegar Propiedades, usted encontrará que la cabecera también tiene una tarjeta.

A continuación solucionamos el problema de que las tarjetas aquí en Escala Modelo no ocupan todo el espacio, seleccionando la tarjeta Escala Modelo y manteniendo pulsado el botón Opción nos encontramos con que su anchura a la tarjeta de entrenamiento bimodal es de 398 y entonces hay que espaciarlas 24px.

Así que la anchura de la tarjeta para la escala del modelo debe ser 350+398-24, puede escribir la fórmula matemática directamente en el cuadro de entrada de anchura, Figma hará los cálculos por usted, ahora ¿no está bien?

Por último hacemos el último paso antes de exportar, toda la tarjeta alrededor de los márgenes de algunos problemas, izquierda y derecha es muy amplia arriba y abajo es muy estrecha, queremos que sean los mismos, esta vez sólo tenemos que seleccionar la capa html-Body, y luego la parte de la caja roja del espaciamiento se cambian a un uniforme de 32 en él.

Si desea añadir un borde de degradado a la imagen como lo hice en la imagen de escaparate de arriba se puede utilizar postspark (https://postspark.app/screenshot) tales herramientas.