Diseños gráficos
Diseño de resumen diario de correo
El diseño de resumen diario de correo convierte una síntesis de seis mensajes de Gmail en una ruta de lectura ordenada por prioridad para decidir qué gestionar primero.
Casos de uso del resumen diario de correo
- Priorización de la bandeja de entradaOrdena los mensajes por urgencia antes de abrir los hilos individuales
- Resúmenes diariosPresenta el correo importante del día anterior en un único resumen legible
- Conceptos de automatización del correoEstudia un modelo visual para priorizar mensajes agrupados
- Diseño de la estructura del resumenEquilibra los recuentos del resumen con los detalles de los mensajes que requieren acción
Aspectos destacados del diseño del resumen por prioridad
- Bandas de prioridadTres grupos etiquetados separan acción, atención e información
- Recuentos compactosLos totales iguales de las categorías resumen la carga de trabajo de seis mensajes
- Contexto del mensajeLos cargos de los remitentes y los asuntos facilitan una lectura más rápida
- Contraste de accionesLos botones azules de respuesta distinguen las respuestas urgentes de los enlaces de referencia
El resumen de correo, sección por sección
1 / 4
Diseño de resumen diario de correo
Este ejemplo oficial de OpenDesign presenta un resumen diario de Gmail agrupado por prioridad como un único diseño alto de correo HTML. Su encabezado redactado se dirige directamente a Eli y declara que seis mensajes importantes del 5 de mayo están agrupados por prioridad. Este planteamiento establece el resumen como un documento de revisión matutina, no como un reemplazo del buzón.
El orden visual avanza del resumen a la acción. Un saludo y un intervalo de fechas introducen el resumen, una franja de recuentos en tres columnas informa de dos mensajes en cada categoría, y los grupos de mensajes aparecen en el mismo orden: 需要处理, 值得关注 y 仅供知悉. La repetición del recuento de dos facilita el escaneo de la composición, mientras que la distribución equitativa también evita insinuar que una categoría domina la muestra.
El diseño utiliza superficies sobrias y un color semántico marcado. El rojo señala el grupo de acción, el amarillo señala la atención y el gris señala la información. Estas señales se refuerzan mediante líneas divisorias de sección y avatares circulares de remitente, por lo que el color no soporta por sí solo toda la clasificación.
Punto de entrada personal
El nombre del destinatario, Eli, y el saludo matutino hacen que el resumen se lea como un informe programado.
Resumen antes del detalle
La franja de recuentos dos-dos-dos ofrece a los lectores una vista previa de la carga de trabajo antes de que exploren cualquier remitente o asunto.
Lectura de la apertura
El encabezado combina el asunto redactado, la identidad del remitente Open Orbit, los metadatos del destinatario y una marca de tiempo de 2026年5月6日 06:42. Debajo, la línea “共 6 封值得关注” conecta el recuento del titular con el propósito del resumen. Esta secuencia permite al lector verificar el intervalo temporal antes de interpretar los totales de las categorías.
Aquí aparece una compensación útil: el título de apertura grande proporciona al resumen un punto de entrada personal, similar al de un correo, pero su redacción combinada en chino e inglés crea una línea más larga que depende de un espacio horizontal generoso. Una adaptación más estrecha tendría que conservar la fecha y el total sin permitir que la etiqueta del producto eclipse el contexto del destinatario.
Lectura del correo agrupada por prioridad
Esta composición resulta más útil cuando el lector necesita decidir qué merece una respuesta antes de revisar todos los mensajes. El primer grupo contiene “Q3 预算确认” de Allen Liu y “Login redesign 反馈” de Nina Park. Ambas tarjetas utilizan la acción azul “查看邮件并回复”, que conecta la etiqueta de categoría con un siguiente paso concreto.
El segundo grupo cambia la acción por “查看原文”, con contorno. El resumen de revisión de diseño de Marie y la actualización del equipo de selección sobre la entrevista de Sarah Chen se presentan como elementos que deben confirmarse, no como respuestas inmediatas. Esa diferencia es una señal de interacción significativa en el diseño visual: las acciones rellenas indican presión de respuesta, mientras que las acciones con contorno reducen la prioridad visual.
El grupo final comprime aún más la información de menor prioridad. La tarjeta de GitHub indica “已折叠 12 封通知 · 1 条值得看”, mientras que la tarjeta de reunión general de la empresa ofrece un único recordatorio de evento. Estos ejemplos muestran dos formas de compresión: muchas notificaciones se convierten en una fila resumida, mientras que un anuncio amplio permanece como un elemento independiente breve.
Responder primero
Los botones azules rellenos acompañan a los elementos de presupuesto y comentarios sobre el inicio de sesión que solicitan explícitamente una respuesta.
Revisar después
Los enlaces de fuente con contorno mantienen disponibles las notas de diseño y la programación de entrevistas sin igualar el énfasis de respuesta.
Comprimir la información
El resumen de notificaciones de GitHub reduce doce avisos a una única referencia destacada de una solicitud de incorporación de cambios.
A quién beneficia la agrupación
Una persona del equipo sin responsabilidades de gestión puede empezar por las decisiones directas, una persona responsable puede revisar aprobaciones y recordatorios de planificación, y un equipo de producto puede separar los comentarios que requieren seguimiento de las notas que solo requieren estar al tanto. El diseño respalda estas tareas mediante el orden y las etiquetas, no mediante un panel de control grande ni una navegación de buzón densa.
La compensación es que una única clasificación de prioridad oculta el razonamiento detrás de cada ubicación. La muestra indica que el mensaje de Nina contiene tres preguntas y que el presupuesto espera aprobación, pero no muestra una regla de puntuación. Una adaptación para producción necesitaría una política explícita o una justificación editable si los usuarios deben auditar por qué un mensaje aparece en una banda concreta.
Resumen, tarjetas y ritmo
El contenido principal es una amplia superficie de correo blanca sobre un fondo pálido, con márgenes izquierdo y derecho generosos alrededor del resumen. Cada mensaje se encuentra en una tarjeta redondeada de color gris claro. Las tarjetas repiten un patrón interno estable: avatar, remitente y cargo cuando están disponibles, asunto, texto explicativo y, después, una acción. Esta repetición permite comparar distintos tipos de contenido sin hacer que todos los mensajes sean idénticos.
Las dos primeras tarjetas de acción incluyen los cargos “CFO” y “客户” junto a los nombres Allen Liu y Nina Park. La tarjeta de Marie omite el cargo, mientras que la tarjeta de selección utiliza el nombre del equipo como remitente. Esa variación es importante: el diseño tolera la ausencia de metadatos del cargo sin eliminar el asunto ni la frase explicativa, aunque las tarjetas se vuelven menos uniformes horizontalmente.
Cada avatar de remitente tiene un ancho fijo de 36px, mientras que el cuerpo de la tarjeta utiliza flex: 1 con min-width: 0. Esto permite que la región de texto ocupe el espacio restante y ajuste los asuntos y resúmenes más largos junto a una columna de identidad uniforme. El texto multilingüe largo aún puede aumentar la altura de la tarjeta y extender el resumen, por lo que la anatomía estable de la fila intercambia un patrón de escaneo predecible por una longitud vertical variable.
| Grupo de prioridad | Ejemplos visibles | Tratamiento de la acción |
|---|---|---|
| 需要处理 | Q3 预算确认; Login redesign 反馈 | Acción de respuesta azul rellena |
| 值得关注 | 设计评审纪要; 候选人 Sarah 二面安排 | Acción de fuente con contorno |
| 仅供知悉 | Resumen de notificaciones de GitHub; recordatorio de la reunión general de la empresa | No se muestra ninguna acción por tarjeta |
El color como índice secundario
Los marcadores de sección rojos, amarillos y grises establecen un ritmo visual repetido en toda la vista general. Los avatares de los remitentes utilizan colores e iniciales variados, por lo que la identidad permanece separada de la prioridad. Esta es una distinción compositiva sólida: la sección representa la urgencia, mientras que el avatar representa el reconocimiento del origen.
El pie repite la etiqueta de Open Orbit y la marca de tiempo de generación antes de los controles de respuesta, respuesta a todos y reenvío. Esta ubicación cierra el resumen como un artefacto de correo. También mantiene ininterrumpida la ruta de lectura principal, aunque un resumen muy largo alejaría el pie del primer elemento urgente.
Diseño visible y límite de capacidades
El artefacto proporcionado es un diseño de resumen de correo HTML con nombres, contenidos de mensajes, fechas, recuentos y lenguaje de producto ilustrativos. La captura demuestra la jerarquía visible, las etiquetas en chino, el tratamiento cromático, la estructura de las tarjetas y los controles del pie. No establece que Gmail esté conectado, que los mensajes se hayan clasificado realmente ni que los recuentos mostrados procedan de un buzón en ejecución.
Las cuatro acciones de mensaje construyen enlaces de búsqueda de Gmail a partir del nombre visible de cada remitente. No identifican un hilo verificado ni abren un redactor de respuestas. Los tres controles del pie para responder, responder a todos y reenviar abren la bandeja de entrada de Gmail en lugar de enviar correo. El campo de búsqueda y los controles de la barra de herramientas no tienen gestores de buzón. Este es un resumen representado localmente con contenido ilustrativo, no un flujo conectado de clasificación o entrega de correo electrónico.
Un resumen funcional necesitaría recuperación autenticada de mensajes, una política declarada de clasificación por prioridad, destinos de hilo correctos y comportamientos independientes para responder y reenviar. La fuente demuestra la jerarquía de lectura y los enlaces salientes locales; no proporciona esas funciones de buzón ni establece que los mensajes de muestra se hayan recibido.
Cómo crear un diseño de resumen diario de correo en OpenDesign
Define la estructura del resumen
Empieza con una vista general con forma de correo: saludo al destinatario, intervalo de fechas, recuento total de mensajes, tres bandas de prioridad, tarjetas de mensajes repetidas y una fila de acciones en el pie. Mantén el orden de lectura desde las decisiones urgentes hasta los elementos informativos.
Prompt sugeridoCrea un diseño de resumen diario de correo para un resumen diario de Gmail agrupado por prioridad. Usa un asunto de correo bilingüe en chino e inglés, un saludo para Eli, un resumen de seis mensajes, tres grupos llamados 需要处理, 值得关注 y 仅供知悉, y tarjetas de mensajes con remitente, cargo, asunto, resumen y tratamiento de acciones. Muestra únicamente datos ilustrativos; no afirmes que existe conectividad con Gmail, clasificación en tiempo real ni rendimiento real.
Perfecciona los tratamientos de prioridad
Usa marcadores de sección rojos, amarillos y grises para las tres bandas, y después distingue las acciones de respuesta rellenas de las acciones de fuente con contorno. Comprueba que los recuentos, las etiquetas y los estilos de acción coincidan con la prioridad prevista sin añadir una regla de puntuación no respaldada.
Comprueba el contenido de los correos extensos
Prueba asuntos en chino e inglés, cargos de remitentes, resúmenes con salto de línea y metadatos de cargo ausentes dentro del patrón de tarjeta repetido. Conserva la región de texto flexible y verifica que los mensajes más largos se expandan verticalmente sin ocultar los grupos posteriores ni el pie.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de póster editorial sobre flujos de trabajo con IA
El diseño de póster editorial sobre flujos de trabajo con IA presenta seis afirmaciones sobre los flujos de trabajo, con capítulos numerados, ejemplos concretos de prompts y acentos tipográficos color óxido sobre un fondo crema.
Diseños gráficos
Diseño de carrusel social sobre flujos de trabajo con IA
Siete tarjetas verticales utilizan encabezados chinos sobredimensionados, hábitos numerados, campos de color cambiantes y una declaración final para explicar los flujos de trabajo de edición con IA.
Diseños gráficos
Diseño de shader Aurora Field
Un campo de ruido azul verdoso animado automáticamente aporta atmósfera a un hero WebGL, mientras un titular fijo y una pequeña insignia local de frecuencia de fotogramas anclan la escena.
Diseños gráficos
Diseño de shader Aurora Veil
Aurora Veil es una composición de shader interactiva que convierte la luz en capas, las estrellas y el movimiento del cursor en un hero atmosférico de WebGL.
Diseños gráficos