Ilustraciones simples con fondo blanco: ¿cómo dibujar pequeñas ilustraciones de notas de lectura? pidiendo una foto
2. Mapa de escena: adecuado para mostrar productos funcionales, creaciones estéticas y productos de joyería. Mapa de escena: para productos que enfatizan atributos funcionales, el mapa de escena tiene más ventajas que el mapa de escena con fondo blanco. Las funciones derivadas dan a los compradores de dichos bienes funcionales una sensación de conexión. Resumen: Para productos con atributos funcionales y estéticos, la tasa de conversión de las imágenes de escena suele ser mejor que la de las imágenes de fondo blanco. Los compradores pueden obtener una sensación de participación a través de la imagen principal, lo que juega un papel positivo en el aumento de las compras y las conversiones de pedidos. Por ejemplo, la imagen a continuación es una lupa. La función de visualización del mapa 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 joyas y comida, es mejor mirar hacia arriba que hacia abajo. Motivo: la fotografía frontal es adecuada para mostrar modelos, mientras que la fotografía aérea es adecuada para mostrar vistas panorámicas. Generalmente, la tasa de conversión para el intercambio de alimentos es mayor cuando se dispara desde una vista frontal que desde una vista de pájaro. Resumen: En el caso de productos de moda, observe atentamente sus características de estilo bajo la luz antes de fotografiarlos. Aunque la forma de la superficie de las joyas de oro y plata es sólida y redondeada, siempre brillará y se moverá cuando se ilumine en una dirección específica; la tasa de conversión de la imagen principal de la comida es generalmente mayor que la de la vista superior;
4. El papel de los modelos: las categorías de ropa con modelos favorecen la transformación de las categorías de moda, ropa y ropa interior. El uso de escenas con modelos sin empalmar la imagen principal tiene un efecto positivo en la transformación. Resumen: para la imagen principal de la categoría de ropa, se recomienda colocar la imagen grande del modelo en la primera imagen y luego colocar la imagen de empalme y la imagen detallada en las imágenes auxiliares posteriores, para que la tasa de conversión sea mayor.
El artículo fue compartido por el asistente de vendedor de comercio electrónico Xiaoyu. Puede buscarlo usted mismo en el sitio web oficial.
Consejos sobre la interfaz de diseño de tarjetas. Comprender correctamente el diseño de tarjetas, qué es una tarjeta, resumir las ventajas de las tarjetas y explicar el conocimiento correcto del diseño de tarjetas a través de dos casos de diseño. Espero que esto ayude.
Ya sea que el diseño de tarjetas WEB o APP se use ampliamente, muchos diseñadores de UI prefieren este rendimiento. El diseño de la tarjeta brindará a las personas un disfrute visual y le dará a la interfaz una sensación de jerarquía. Sin embargo, a menudo hay algunos trucos que debes conocer sobre el diseño de tarjetas. El diseño de la tarjeta no debe basarse en el diseño de la tarjeta, sino que debe aplicarse mejor a escenarios de interfaz. Espero que algunos puntos de conocimiento puedan ayudarle a compartir. En la próxima serie de artículos, el tío Shun analizará las técnicas de diseño de moda en la interfaz, con la esperanza de ser útiles para algunos socios de diseño.
Introducción antes del tutorial
El diseño de tarjetas se ha vuelto más popular en los últimos años, y la misma expresión de diseño también es una tendencia. Es bastante popular aplicarlo a la interfaz APPPC. Cualquiera que se dedique al diseño de UI sabrá que el diseño de tarjetas tiene la función de integrar y modularizar el contenido, presentándolo desde una experiencia visual y personalizada. Esta es una actuación común de los diseñadores en el diseño, y además tiene ideas innovadoras únicas.
En algunos proyectos, algunos clientes dirán que la interfaz de la aplicación diseñada es demasiado blanca y no tiene sentido de jerarquía. En este momento, debe informarle al cliente que en el diseño de aplicaciones se utiliza una técnica de expresión popular: el diseño de tarjetas, que puede resolver los problemas de diseño personalizados, cambiables y jerárquicos en la pantalla. ¿Cuál es el diseño de la tarjeta?
El omnipresente diseño de la tarjeta tiene una estética personalizada y buena usabilidad. Se modulariza mediante títulos de texto, subtítulos, gráficos o imágenes, integrando el contenido en forma de bloques para hacerlo más regular y visualmente más personalizado, y también un acceso rápido a 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. Las tarjetas también tienen ciertas ventajas en el diseño, lo que hace que el conjunto tenga más capas y sea más cómodo de usar. Tienen buenas ventajas en cuanto a visión, experiencia e interacción.
Este artículo diseñó especialmente dos casos para proporcionar algunas explicaciones.
Mire la imagen a continuación:
Ya sea una plataforma grande o una plataforma pequeña, los productos adoptarán esta tendencia de diseño similar a una tarjeta, lo que también hace que el diseño similar a una tarjeta sea una ventaja común ahora, pero la tarjeta- Como si el diseño tuviera buenos efectos.
Tiene un cierto sentido de jerarquía y puede utilizar diferentes diseños y cambios personalizados en el diseño de la página. La página tiene un fuerte sentido de jerarquía y puede reflejar mejor el contenido extraído.
El diseño de la tarjeta integra imágenes, íconos, logotipos y títulos, y los muestra en la interfaz en bloques, lo que hace que el diseño sea más regular. Aunque demasiado contenido hará que la página esté desordenada, un módulo estará más organizado después de contener contenido, lo que también aporta una mejor visión del diseño de la página.
El estilo de la tarjeta aumentará la experiencia visual de 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 resulta muy cómodo utilizar la tarjeta. El diseño de la tarjeta aún debe diseñarse en función del diseño general, 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 de tarjetas es relativamente alto en facilidad de uso y flexibilidad, y también se usa ampliamente en diseño responsivo. Se puede organizar de una manera más ordenada.
Un diseño sencillo tendrá más calidad y no requiere demasiada decoración. Incluso si se trata de un bloque de color blanco, íconos coloridos y cambios de subtítulos, se sentirá de alta gama. Incluso si se trata de una tarjeta con bloques de color, el contenido del diseño no requiere demasiados títulos, íconos y botones para respaldar la tarjeta.
En el diseño de la tarjeta, habrá algunas interacciones dinámicas, como acercar, alejar, deslizar hacia la izquierda y hacia la derecha de toda la tarjeta, lo que puede hacer que todo el módulo se deslice y haga zoom. El efecto general añade una buena experiencia de interacción visual.
En general, ¿cuál es el significado y expresión de las tarjetas en el diseño de interfaces? A continuación se muestran algunas expresiones de diseño correctas comunes. Espero que mis amigos puedan tener algo de inspiración y referencia mientras diseñan y agregar algunas técnicas de expresión a sus propios diseños. La idoneidad es lo más importante. Los diseños de tarjetas deben presentarse de acuerdo con el estilo y diseño general. En una mayor comparación y diseño, el método de visualización final tiene el mejor efecto y se resumen y analizan varios ejemplos representativos comunes. Si hay alguna inexactitud, no dude en comentarla y agregarla. A continuación se muestran algunos ejemplos:
El bloque de color es el cuerpo principal, que se compone de colores degradados populares. Los cuatro lados están redondeados y las sombras debajo del mismo bloque de color resaltan el tema. Este es un método de aplicación común en el diseño de tarjetas. La longitud y la altura de la tarjeta también se establecen según la estructura, el contenido y la función del diseño. Tanto el cuadrado como el rectángulo son expresiones. El texto del título, los íconos y los gráficos en el bloque de color son el diseño de toda la tarjeta, que no es más que un diseño de izquierda a derecha y un diseño de arriba hacia abajo.
Escenarios de aplicación: paquetes de tarjetas, clima, categorías, entradas, tarjetas de descuento.
Esta tabla * * * es similar al diseño de la tarjeta que aparece en la posición C del encabezado, con título, subtítulo y disposición gráfica. No es difícil encontrar que si la imagen es en color, entonces la parte inferior es blanca, por lo que la apariencia del bloque de color de fondo blanco es relativamente simple para resaltar la tarjeta. Si el fondo es de color y la tarjeta es de color, la tarjeta no se destacará tanto. La figura 2 se utiliza a menudo en el diseño de tarjetas de membresía y es relativamente simple. Los otros dos ** tienen el mismo color de fondo. Generalmente, el color de fondo en la parte inferior es el color principal de toda la interfaz. El fondo es colorido y sobre él se utiliza una tarjeta blanca. Se presentan el título, el texto y las imágenes encima de la tarjeta. Lo único que es diferente es la forma de formatear. En muchos diseños de aplicaciones, existen muchas expresiones de este tipo. La barra de estado superior y la barra de navegación se pueden integrar visualmente a través del color principal. El color de fondo inferior continúa y la tarjeta blanca se resalta arriba, que es más visual y en capas. La tarjeta blanca no requiere demasiada decoración y puede reflejar mejor el texto y las imágenes.
Escenarios de aplicación: tarjetas de membresía, tarjetas deslizantes, títulos gráficos, entradas
Esta forma es particularmente importante en la selección de materiales de pantalla. Las imágenes con buenos efectos visuales se pueden recortar, procesar, sintetizar, fotografiar, ilustrar, etc. Si la calidad de la imagen es buena, puede impulsar todo el diseño y permitir que los usuarios lo comprendan más claramente a través de una comunicación eficaz con imágenes y texto. Esta forma generalmente aparece en forma de portal o lista, y también puede reflejar integración y visualización.
Escenarios de aplicación: tarjetas deslizantes, títulos de imágenes y textos, entradas, listas.
Los formatos de tarjetas de gran tamaño, normalmente en forma de fotografías e ilustraciones, son más impactantes y pueden expresar una tendencia. La experiencia también es muy buena. La combinación de ampliar el campo de visión, mostrar contenido e imágenes hace que los visitantes estén más dispuestos a mirarlo durante un rato.
La imagen expresada es consistente con el contenido del texto, alcanzando el nivel de combinación de imágenes y texto. Generalmente, la selección de fotografías es bastante estricta. Sin calidad, los gráficos son menos efectivos.
Escenarios de aplicación: listado, descripción, entrada, clima.
El diseño de la tarjeta de lista suele ser una tarjeta blanca, que se materializa en forma de título, avatar, botón e ilustración plana. Se utiliza principalmente para contenido subordinado de páginas de primer nivel y páginas de lista o páginas de colección de páginas de segundo nivel. El fondo general debilitado es principalmente blanco, dando a las esquinas redondeadas y a las sombras una sensación de jerarquía, reflejando el contenido superior. Cada unidad modular tiene una visión unificada.
Escenarios de aplicación: listas, páginas de colección, portales
Diseño de tarjeta grande, que está representado por una tarjeta grande con títulos, botones y otra información, y también muestra un destacado sentido de jerarquía. y características de diseño personalizadas. Para reflejar el contenido, el fondo generalmente está coloreado y la tarjeta de arriba es blanca. Si el fondo de abajo es blanco, la forma de la tarjeta también se puede colorear. Hay un contraste en el contraste para resaltar el papel de la tarjeta.
Escenarios de aplicación: indicaciones, explicaciones, entrada de farol con descuento
Las formas de las cartas resumidas anteriormente se pueden diseñar de acuerdo con la situación en el diseño. Las tarjetas son diversas y los diseños son diversos. El producto que más te convenga es lo más importante. Aunque el diseño se utiliza a menudo en el diseño de interfaces, no aplique ciegamente el diseño a las tarjetas sólo por el bien de las tarjetas. Esto no funcionará, pero el efecto no será tan bueno como debería ser. Espero que algunos resúmenes de tarjetas puedan brindarte algo de inspiración.
Del mismo modo, en estas tarjetas habrá algunas características básicas:
1. Las cuatro esquinas están redondeadas.
2. Cambia gradualmente el color o la tarjeta blanca según la tendencia.
3. La sombra debajo del bloque de color puede reflejar mejor la jerarquía.
4. Los componentes anteriores de la tarjeta, título, subtítulo, gráficos, botones, imágenes, encabezado.
5. Cambio de tamaño y color de fuente
6. Las tarjetas generales se utilizan a menudo en membresías, listas, descripciones, clasificaciones de descuentos, categorías, páginas de colección, páginas de bienvenida y otros escenarios.
Para explicar el artículo, el tío 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 el diseño de esta tarjeta.
La siguiente imagen es el prototipo de esta idea:
Después de analizar el prototipo, comienza el diseño. Primero, diseñe una versión. ¿Qué pasaría si las tarjetas se diseñaran así y los colores combinaran? En el diseño general predominan el azul y el morado. Primero, coloque un bloque de color azul-violeta como fondo y luego coloque tarjetas blancas encima, para que los números, gráficos y otros detalles de las tarjetas puedan enriquecer las tarjetas correspondientes. De manera similar, el flujo de datos también es un bit C importante. Este también es un lugar importante. Luego, según el prototipo, hay dos tarjetas debajo. A través del diseño plano, se diseña una tarjeta azul y una tarjeta naranja en base a bloques de colores, con íconos, avatares y títulos sobre ellos. El contraste entre los dos colores hace que la visión sea más impactante. No hay nada de malo en este diseño en su conjunto, pero el problema es que el efecto de sacar un solo módulo es realmente bueno, pero después de componer la imagen, la posición C de la tarjeta superior permite que las dos tarjetas de colores de abajo se roben la vista. . Cuando abres esta interfaz, tu visión recae en la tarjeta de colores, por lo que hay algún problema con el diseño general. Según los datos anteriores, la tarjeta blanca es en realidad más importante. La imagen completa es una tarjeta sin ningún cambio de diseño.
Entonces solo podemos optimizar sobre esta base. De hecho, todos diseñan al mismo tiempo. Bajo la premisa de considerar módulos funcionales, también se debe considerar la experiencia del usuario. Entonces, ¿de dónde viene la visión, los colores, las capas, los formatos, etc.? Entonces, ¿podemos optimizarlo? De hecho, todavía hay margen de optimización. La siguiente imagen es la primera versión:
Se ha optimizado de acuerdo con el diseño anterior y también se han conservado algunos elementos de la tarjeta blanca. Algunos iconos de colores se colocan entre las tarjetas para que se pueda acceder rápidamente a las funciones. En cuanto al diseño de la tarjeta, también puedes agregar cambios para flexibilizar toda la imagen. Aunque es una tarjeta blanca, hay algunos adornos de color que hacen que la tarjeta blanca sea más animada. Si la tarjeta de color se reemplaza por una tarjeta blanca, el diseño de arriba a abajo será mucho más cómodo y no habrá tal salto. El estilo general 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 el ajuste, se demuestra que la tarjeta no debe diseñarse solo por la tarjeta. , pero perderá su efecto. Teniendo en cuenta los módulos funcionales, la experiencia del usuario y la experiencia visual, definitivamente hará que todo sea muy cómodo. Siempre se ha dicho que la pintura necesita tener sus aspectos primarios y secundarios, y el diseño también debe tener sus niveles primarios y secundarios, para que la relación jerárquica sea más clara.
Pero estas condiciones deben ser comparadas y estudiadas desde los aspectos de experiencia, color, disposición, formato, etc. No se apresure a diseñar primero. Si lo piensa con anticipación y tiene una lógica clara, el diseño será más fluido. Todo el mundo utiliza el diseño de tarjetas. Espero que este artículo pueda aportarte un poco de conocimiento.
¿Cómo dibujar pequeñas ilustraciones para leer notas? El método de búsqueda de imágenes se divide en los siguientes cinco pasos:
1. Las pequeñas ilustraciones para leer notas pueden utilizar imágenes de animales. Primero dibuje el contorno de la cabeza.
2. Luego usa las partes de los ojos y la nariz para dibujar, lo que puede simplificar el dibujo.
3. Luego dibuja su cuerpo, extremidades y cola.
4. Después de terminar la pintura, dibuja una almohada debajo del oso y una mariposa delante.
5. En la última parte se pinta el osito con el color correspondiente y se completa la pequeña ilustración.