Ilustración sencilla con fondo blanco - ¿Cómo dibujar pequeñas ilustraciones para leer notas? pidiendo fotos

¿Es mejor utilizar un fondo blanco para mostrar los detalles de las imágenes del producto JD o una imagen de escena para mostrar la imagen?

1. Imagen de fondo blanco: adecuada para exhibir conjuntos, accesorios y patrones. Imagen de fondo blanco: color de fondo puro, adecuada para exhibir productos de colores oscuros. Cuando el producto sea un conjunto, desmonte los accesorios pequeños. en el conjunto uno por uno tendrá un efecto positivo en la conversión del pedido. El uso de imágenes de escenas para mostrar el paquete no es tan ventajoso como las imágenes de fondo blanco. Las ventajas de las imágenes con fondo blanco: muestran conjuntos de productos y contenidos de embalaje de forma clara e intuitiva, atrayendo la atención de los compradores más que simplemente mostrar escenas. Por ejemplo, en la primera imagen de un producto de juguete a continuación, la imagen de fondo blanco muestra la forma del juguete desde múltiples ángulos, lo que juega un papel positivo a la hora de atraer compradores para realizar pedidos.

2. Mapa de escena: adecuado para mostrar funciones de productos, estética y productos de joyería. Mapa de escena: para productos que enfatizan atributos funcionales, los mapas de escena tienen ventajas sobre los mapas de escena con fondo blanco. Imagen a Funciones como la derivación de escenas permiten a los compradores de dichos productos funcionales tener una sensación de conexión. Resumen: Para productos con atributos funcionales y énfasis en la estética, la tasa de conversión de las imágenes de escenas suele ser mejor que la de las imágenes de fondo blanco. Los compradores pueden obtener una sensación de contextualización a través de la imagen principal, lo que tiene un efecto positivo en compras adicionales y. conversión de orden. Por ejemplo, la siguiente es una lupa. La función de visualización de la imagen de escena de la derecha es más vívida y específica que la imagen de fondo blanco de la izquierda y puede transmitir mejor el punto de venta.

3. Dirección de disparo: para las categorías de joyería y comida, las tomas de cabeza son mejores que las de arriba hacia abajo. Motivos: las tomas de cabeza son adecuadas para mostrar formas y las tomas de arriba son adecuadas para mostrar panorámicas. Las tomas frontales de las categorías de alimentos generalmente tienen una tasa de conversión más alta que las tomas desde arriba. Resumen: para las categorías de moda, debe observar cuidadosamente sus características de modelado bajo la iluminación antes de tomar fotografías. las joyas son diferentes de firmes y redondas, siempre brillarán cuando se iluminen en una dirección específica; la imagen principal de los productos alimenticios debe tomarse desde un ángulo plano, en términos generales, la tasa de conversión es mayor que la vista superior.

4. El papel de los modelos: la categoría de ropa con modelos favorece la conversión de las categorías de moda, y las categorías de ropa y ropa interior, con escenarios de uso de modelos e imágenes grandes sin empalme de la imagen principal, juegan. un papel positivo en la mejora de las conversiones. Resumen: para la imagen principal de la ropa, se recomienda colocar una imagen grande con el modelo en la primera imagen y luego colocar las imágenes de empalme y las imágenes detalladas en las siguientes imágenes auxiliares, para que la tasa de conversión sea mayor.

El artículo fue compartido por el asistente de vendedor de comercio electrónico de Dianxiaoyu. Puede buscarlo usted mismo en el sitio web oficial. Consejos sobre la interfaz de diseño de estilo de tarjeta

Comprenda correctamente el diseño de estilo de tarjeta, qué es una tarjeta, resuma las ventajas de las tarjetas y el conocimiento del diseño correcto de la tarjeta se explica a través del diseño de dos casos y el Técnicas para usar tarjetas, espero que pueda ayudar a todos.

Ya sea WEB o APLICACIÓN, el diseño de estilo de tarjeta se usa ampliamente. Muchos diseñadores de UI prefieren este tipo de diseño de estilo de tarjeta que brindará a las personas un disfrute visual y también puede darle una sensación de interfaz. jerarquía. . Pero a menudo hay algunas técnicas en el diseño de tarjetas que deben comprenderse. El diseño de tarjetas no debe basarse en el diseño de tarjetas, sino que debe aplicarse mejor a escenarios de interfaz. Espero que algunos puntos de conocimiento de este intercambio puedan ayudar a todos. En la siguiente serie de artículos, el tío Shun analizará las técnicas de diseño más populares en la interfaz, con la esperanza de ayudar a algunos socios de diseño.

Introducción antes del tutorial

El diseño estilo tarjeta se ha vuelto más popular en los últimos años. La misma expresión de diseño también es una tendencia en la interfaz APPPC. en diseño de UI Todo el mundo sabe que el diseño estilo tarjeta integra contenido en módulos y lo presenta desde una experiencia visual y personalizada. Es una expresión comúnmente utilizada por los diseñadores en diseño, y también tiene un concepto innovador único.

En algunos proyectos, algunos clientes dirán que la interfaz de la APLICACIÓN diseñada es demasiado blanca y carece de sentido de jerarquía. Entonces debe decirles a los clientes que ha utilizado una expresión popular en el diseño de la APLICACIÓN. La técnica, diseño estilo tarjeta, puede resolver el diseño de personalización, cambio y superposición en la imagen. Entonces el cliente preguntó ¿qué es un diseño de tarjeta?

El omnipresente diseño de tarjeta tiene una belleza personalizada y una buena facilidad de uso. Es un módulo compuesto por títulos de texto, subtítulos, gráficos o imágenes, que integran contenido. un formato similar a un bloque, lo que hace que el contenido esté más organizado y visualmente más personalizado, y también es un punto de entrada conveniente para la información del contenido. Expresión más intuitiva de información de contenido y operaciones de salto rápido. Se ha convertido en una tendencia popular en el diseño actual, y las tarjetas también ocupan ciertas ventajas en el diseño, lo que hace que la estructura general tenga más capas, sea más cómoda de usar y tenga buenas ventajas en términos de visión, experiencia e interacción.

Para este artículo, se diseñaron dos casos especialmente y se darán algunas explicaciones a través de estos dos casos. Consulte la siguiente imagen:

Tanto los productos de plataformas grandes como los de plataformas pequeñas utilizarán este estilo de tarjeta. Siguiendo la tendencia del diseño, el diseño de estilo de tarjeta se ha convertido en una ventaja de uso común ahora, pero el diseño de estilo de tarjeta sí lo es. De hecho, hay muy buenos resultados.

Tiene un cierto sentido de jerarquía, lo que puede generar diferencias de diseño y cambios personalizados en el diseño de la página. La página tiene un fuerte sentido de jerarquía y puede reflejar y refinar mejor el contenido.

El diseño estilo tarjeta integra imágenes, íconos, logotipos y títulos para mostrar en la interfaz en un formato similar a un bloque, presentando un diseño más regular. Aunque demasiado contenido hará que la página esté desordenada, una vez que un módulo contenga el contenido, estará mucho más organizado y también brindará una mejor apariencia visual al diseño de la página.

El estilo de la tarjeta agrega una experiencia visual a toda la página, especialmente el estilo de la tarjeta con imagen grande, que tiene más impacto visual. El fondo resalta el diseño del estilo de la tarjeta en primer plano. También me siento cómodo con el tipo de tarjeta. El diseño estilo tarjeta aún debe diseñarse en función del diseño completo, los requisitos del producto y las funciones. Para lograr la mejor experiencia de usuario y experiencia visual.

No diseñes tarjetas por diseñarlas.

El diseño estilo tarjeta es relativamente alto en facilidad de uso y flexibilidad, y también se usa más comúnmente en diseño responsivo. Se puede organizar en mejor orden.

El diseño simple mostrará más calidad y no requiere demasiada decoración. Incluso si es un bloque de color blanco con íconos coloridos y cambios en el título y los subtítulos, se verá de alta gama. tarjeta de bloque de color con colores, y los títulos, íconos y botones en el contenido del diseño son suficientes para respaldar la tarjeta.

En el diseño estilo tarjeta, habrá algunas interacciones dinámicas, como la ampliación general de la tarjeta, la reducción, el deslizamiento hacia la izquierda, el deslizamiento hacia la derecha y todo el zoom deslizante modular. El efecto general añade una buena experiencia de interacción visual.

En general, ¿cuál es el significado y la expresión de las tarjetas en el diseño de interfaces? A continuación se muestran algunos ejemplos de gestos de expresión de diseño correctos comúnmente utilizados. Espero que mis amigos tengan inspiración y referencia mientras diseñan, y que agreguen algunas técnicas de expresión a sus propios diseños. La idoneidad es lo más importante. El diseño de la tarjeta aún debe mostrarse en función del estilo completo y el diseño completo. En una comparación y diseño adicionales, se utilizará el mejor efecto como método de visualización final. Si hay alguna información incompleta, se resumirán y analizarán varios ejemplos representativos comunes. discuta y agregue lo siguiente:

Use bloques de color como cuerpo principal y use los colores degradados ahora populares. Los cuatro lados están redondeados. Las sombras debajo de los bloques del mismo color resaltan el tema. Esta es una técnica común utilizada en el diseño de tarjetas, la longitud y la altura de la tarjeta también se establecen de acuerdo con la estructura, el contenido y la función del diseño. Tanto los cuadrados como los rectángulos son técnicas de expresión. El texto del título, los íconos y los gráficos en el bloque de color son la forma de diseño de toda la tarjeta, que no es más que un diseño izquierdo y derecho y un diseño superior e inferior.

Escenarios de aplicación: paquetes de tarjetas, clima, categoría, entrada, tarjeta de descuento

La característica más común de este formulario es el diseño estilo tarjeta que aparece en la posición C de la cabeza, que lleva el título, subtítulo y diseño de gráficos y texto. No es difícil encontrar que si la imagen tiene color, entonces la parte inferior es blanca, de modo que la apariencia de los bloques de color sobre el fondo blanco es relativamente simple y resalta la tarjeta. El color y la tarjeta también tienen color, el grado de prominencia de la tarjeta no será tan fuerte. Los miembros suelen utilizar el diseño de la tarjeta más comúnmente y los otros dos tienen las mismas características. El color de fondo es generalmente el color de fondo inferior, es el color principal de toda la interfaz. El fondo tiene bloques de colores y la tarjeta blanca se usa arriba El título y el texto encima de la tarjeta, presentación de imagen. Es solo que los métodos de diseño son diferentes en muchos diseños de aplicaciones, hay muchas expresiones de este tipo. El color principal se puede usar para integrar la barra de estado superior y la barra de navegación en una sola, creando unidad visual, y el color de fondo inferior continúa. la tarjeta blanca está resaltada en él, lo que lo hace más visual y en capas. Las tarjetas blancas no requieren demasiadas modificaciones y pueden reflejar mejor el texto y las imágenes que contienen.

Escenarios de aplicación: tarjetas de membresía, tarjetas deslizantes, títulos de imágenes y texto, entradas

Este formulario tiene una imagen encima del texto o un título encima de la imagen, este formulario es especial. La selección de materiales gráficos es particularmente importante. Las imágenes con buenos efectos visuales se pueden cortar, procesar, sintetizar, fotografiar, ilustrar, etc. Si las imágenes son de buena calidad, pueden marcar el estilo de todo el diseño y transmitirse a través de imágenes efectivas. La comunicación por texto permite a los usuarios comprender con mayor claridad. Estas formas generalmente aparecen en forma de portales o listas, y también pueden reflejar integración y visualización

Escenarios de aplicación: tarjetas deslizantes, títulos gráficos, portales, listas

Estilo de tarjeta con imagen grande, generalmente en forma de fotografías o ilustraciones, con texto presionado encima de las imágenes. Este efecto es más impactante y también puede parecer más moderno. La experiencia también es muy buena. La combinación de amplificación visual, contenido de visualización e imágenes hace que los espectadores estén más dispuestos a mirarlo por un tiempo. Las imágenes expresadas son consistentes con el contenido del texto, y las imágenes y los textos están integrados en la medida. En general, la selección de fotografías es bastante estricta. Las imágenes sin calidad serán menos efectivas.

Escenarios de aplicación: listas, descripciones, entradas, clima

Diseño de tarjeta de lista, este formulario es generalmente una tarjeta blanca, con títulos, avatares, botones, ilustraciones planas y más. aplicado al contenido inferior de la página de primer nivel, así como a la página de lista o página de colección de la página de segundo nivel. El fondo general debilitado es principalmente blanco, y las esquinas redondeadas y las sombras se dan para respaldar el sentido de jerarquía. y reflejar la parte superior del contenido. El cuerpo unitario de cada módulo tiene una visión unificada.

Escenarios de aplicación: listas, páginas de colección, entradas

Diseño de tarjeta grande, que aparece como una tarjeta extra grande con títulos, botones y otra información, mostrando también un nivel destacado de sentimiento. , las características del diseño personalizado. Para reflejar el contenido, el fondo generalmente tiene un color y la tarjeta superior es blanca. Si el fondo inferior es blanco, la forma de la tarjeta también puede ser un bloque de color. Sólo por contraste se puede resaltar la funcionalidad de la tarjeta.

Escenarios de aplicación: consejos, instrucciones, descuentos y entradas

Las formas de tarjetas resumidas anteriormente se pueden diseñar según la situación, con tarjetas diversificadas y diseños diversificados, lo más importante. es lo que se adapta a su producto. Aunque el diseño se usa comúnmente en el diseño de interfaces, no aplique ciegamente el diseño a la tarjeta por el bien de la tarjeta. Esto no funcionará y el efecto no alcanzará el nivel ideal. Espero que algunos resúmenes en forma de tarjetas puedan inspirarte.

También hay algunas características básicas y diferentes en estas tarjetas:

1. Las cuatro esquinas son redondeadas

2 Según el color degradado de moda o la tarjeta blanca.

3. La sombra debajo del bloque de color, la sombra debajo del bloque de color puede reflejar mejor la jerarquía.

4 Los componentes superiores de la tarjeta, título, subtítulo, gráficos y botones. , imágenes, avatares

5. Los cambios en el tamaño y el color de la fuente

6 se aplican tarjetas generales a miembros, listas, descripciones, ofertas, clasificaciones, categorías, páginas de colección, escenarios. como las páginas de bienvenida son comunes

Para explicar el artículo, Shun Shun concibió temporalmente un prototipo de producto y rápidamente hizo un diseño simple, una primera versión y una versión optimizada, principalmente para explicar algunos problemas en esta tarjeta. diseño,

La siguiente imagen es el prototipo de la idea:

Después de analizar el prototipo, comenzamos a diseñar Primero, diseñamos una versión si el diseño de la tarjeta está diseñado así. , la combinación de colores es así. A continuación, ¿qué pasará? El diseño general utiliza azul y morado como color principal. Primero, coloque los bloques de color azul y morado como fondo y luego coloque tarjetas blancas encima. el contenido detallado de las tarjetas, como números y gráficos, se puede enriquecer mejor. El flujo de datos también es un bit C relativamente importante. También es una posición relativamente importante.

Luego, de acuerdo con las dos tarjetas debajo del prototipo, a través de un diseño plano, una tarjeta azul y una naranja se diseñaron principalmente con bloques de colores, con íconos, avatares y títulos. El contraste de los dos colores hace que la visión sea más clara. El impacto general de este diseño no es nada, pero existe el problema de que el efecto de un solo módulo es realmente bueno, pero después de estar compuesto, la posición C de la carta superior hace que las dos cartas de colores de abajo te roben la visión. esta interfaz Cuando el enfoque visual está en las tarjetas de colores, entonces hay un problema con el diseño general. En los datos anteriores, las tarjetas blancas son en realidad más importantes y la imagen completa son solo tarjetas sin cambios de diseño.

Entonces solo podemos optimizar sobre esta base. De hecho, todos hacen lo mismo al diseñar. Bajo la premisa de considerar los módulos funcionales, la experiencia del usuario y la experiencia visual, entonces, ¿de dónde viene la visión, el color y el nivel? , Formato, etc. Entonces, ¿podemos optimizarlo? De hecho, todavía hay margen de optimización. La siguiente imagen es la primera versión:

Estamos optimizando de acuerdo con el diseño anterior, conservando también algunos elementos de la tarjeta blanca y colocando algunos íconos de colores entre las tarjetas, para brindar un mejor acceso rápido a las funciones. , también puede agregar cambios al diseño de la tarjeta, haciendo que toda la imagen sea más flexible. Aunque las cartas son blancas, hay algunos adornos de color para darles vida. Cambiar las cartas de colores por cartas blancas hace que el diseño de arriba a abajo sea mucho más cómodo y menos nervioso. Todo el estilo es más simple y las funciones son más completas.

Después del ajuste:

Desde el prototipo, hasta la primera versión del diseño, pasando por la optimización y ajuste, se ha demostrado que la tarjeta no debe diseñarse sólo por el tarjeta, de lo contrario perderá su efecto. La consideración de módulos funcionales, la experiencia del usuario y la experiencia visual también deben hacer que la experiencia general sea cómoda. Siempre se ha dicho que debe haber un diseño primario y secundario en la pintura, y debe haber un diseño primario y secundario en el diseño, para que la relación jerárquica sea más clara.

Pero estas condiciones hay que compararlas y estudiarlas en términos de experiencia, color, disposición, formato, etc. No se apresure a diseñar primero. Si lo piensa con anticipación, la lógica será clara y el diseño será más fluido. Todo el mundo utiliza el diseño estilo tarjeta. Espero que este artículo pueda aportarle un poco de conocimiento. ¿Cómo dibujar pequeñas ilustraciones para leer notas? Solicitar imágenes

El método se divide en 5 pasos, de la siguiente manera:

1. Las pequeñas ilustraciones de las notas de lectura pueden utilizar imágenes de animales. Primero, dibuja el contorno de la cabeza.

2. Luego dibuja las partes de los ojos y la nariz. Puedes hacerlo más simple.

3. Luego dibuja su cuerpo, extremidades y cola.

4. Después de dibujar, dibuja una almohada debajo del oso y una mariposa delante.

5. En la última parte, pinta el osito del color correspondiente y ya está completa la pequeña ilustración.