Diseño de interfaz de usuario: flujo de tarjetas, flujo de imágenes, desmontaje del flujo de alimentación

Como portadoras de información, las tarjetas se utilizan ampliamente en el diseño de interfaces. Comprender los detalles del diseño de diferentes tarjetas puede ayudarnos a simplificar el diseño y hacerlo más fácil. Durante el proceso de diseño, debemos tener una mentalidad de división, dividir módulos y componentes complejos en pequeños elementos básicos y atacarlos uno por uno.

Flujo de imágenes, flujo de tarjetas, flujo de feeds, "flujo" es presentar nuestro contenido de acuerdo con una línea de tiempo determinada.

El método de visualización de la página de inicio de Petals y Pinterest utiliza el flujo de tarjetas para transportar información como imágenes, avatares de usuarios, nombres de usuarios, etc.

1. La función de transmisión de imágenes

a. Ayuda a los usuarios a buscar y filtrar imágenes rápidamente

b. Permitir a los usuarios reducir las distracciones y leer de forma inmersiva

p >

2. Composición detallada del flujo de imágenes

Desde una perspectiva profunda, el flujo de imágenes se divide en una capa de fondo, una capa de contenido y una capa de control.

A lo que debemos prestar más atención es al diseño de la capa de contenido. La capa de contenido se divide en dos partes: área de contenido de imágenes y área de contenido de información.

3. Puntos a tener en cuenta en el diseño de la capa de contenido

a. Puntos clave en el diseño de tarjetas con imágenes

1. La altura del área de la imagen no es fija.

2. El estilo principal del área de información es muy fijo. Aquí debe centrarse en especificar el espaciado superior e inferior durante el diseño. (El número de palabras varía, lo que dará lugar a diferentes alturas del área de información, pero en términos de estilo, es fijo porque esta parte es reutilizable)

Avatar de usuario

1. El diseño del avatar del usuario debe prestar atención al equilibrio izquierdo y derecho. Mantenga la altura del avatar coherente con la altura de la copia de la izquierda para garantizar el equilibrio izquierda-derecha.

2. El material del avatar debe elegir imágenes con un fondo simple, un centro visual unificado y brillo uniforme, y las imágenes seleccionadas deben estar en línea con el temperamento de nuestros productos. Cuando estamos haciendo un borrador de diseño, debemos elegir una imagen unificada, como el ángulo de visión, el brillo, etc. de la imagen. Sólo así podremos asegurar la unidad de nuestras páginas y asegurar la efectividad del borrador del diseño. No debemos elegir algunas imágenes de alta calidad porque los avatares en el entorno en línea son desordenados y las imágenes son feas, lo que reduce nuestro profesionalismo.

c. Puntos clave en el diseño de la sección de flujo de imagen

1. Mantenga uniforme el espacio entre los elementos correspondientes. Esto también facilita el desarrollo. (Los valores se definen según las especificaciones de su propio producto, siempre y cuando el espaciado entre los mismos elementos se mantenga uniforme)

2. Preste atención a la división de niveles de información. Utilice el color, el tamaño y el peso de la fuente para distinguir. Aquí debemos considerar qué información preocupa a los usuarios.

3. Presta atención al tamaño del filete. La configuración de las esquinas redondeadas es generalmente de 6 a 10 píxeles.

4. Resumen de puntos clave del flujo de imágenes.

El estilo de flujo de tarjeta es muy común en las aplicaciones Alipay y Meituan. Los componentes del flujo de tarjetas son algo así como las secciones del área de contenido del flujo de imágenes. El estilo de diseño del flujo de tarjetas es relativamente fijo.

1. La función del flujo de tarjetas

a. El flujo de tarjetas es la entrada para que los usuarios obtengan más información

b. La presentación de información del flujo de tarjetas permite. usuarios para capturar rápidamente información importante y ahorrar tiempo a los usuarios

2. Divida el flujo de tarjetas

Divida el flujo de tarjetas en las siguientes partes de acuerdo con las "Estrellas y mares de la interfaz de usuario" y divídalas a través de cada parte por separado.

2. Puntos clave del diseño del flujo de tarjetas

a. El diseño básico es simplemente un color de fondo simple y líneas divisorias, por lo que no entraré en detalles. Sólo tenga cuidado de no hacer que el color de fondo esté demasiado sucio o demasiado oscuro.

b. Texto

Al diseñar texto, también debe aplicarlo de manera flexible de acuerdo con las especificaciones de diseño de su propio producto, distinguiendo los niveles de texto del color, tamaño y peso de la fuente. La diferencia de tamaño entre la copia principal y la secundaria debe ser de al menos 4 píxeles.

c. Nivel de contenido: componente de la tarjeta

El área principal del diseño del flujo de tarjetas es el componente de la tarjeta. El componente de tarjeta se divide en tres partes: encabezado de tabla, contenido de tabla y pie de página. La parte del contenido de la tabla puede tener diferentes formas de presentación del contenido.

Parte del encabezado

▲El icono está más alto que la altura del texto. El espaciado sigue el principio de bisección (el margen izquierdo es dos veces más largo que el margen derecho).

▲Los iconos del encabezado deben ser concisos y transpirables. La relación entre el icono interior y el fondo redondo es cercana a 1:2.

Parte del contenido de la tabla

▲ Diseñe esta parte del contenido de acuerdo con la función de la tarjeta del producto. Asegúrese de controlar el espacio y mantener la sensación de respirar en esta parte.

Parte final de la tabla

▲ Los botones de texto o botones simples generalmente se colocan en la parte final de la tabla. Los botones de texto deben resaltarse en términos de peso, color y tamaño según su importancia. Para botones simples, los márgenes superior e inferior y los márgenes izquierdo y derecho deben cumplir con el principio de bisección (cercano al principio de bisección, no tan rígido)

El flujo de alimentación sirve para alimentar el contenido que los usuarios desean. Se usa comúnmente en muchas aplicaciones de información, como Toutiao, Kuan y otras aplicaciones.

1. La función de flujo de alimentación

a. Ayudar a los usuarios a obtener continuamente el contenido de suscripción más reciente

b. Permitir a los usuarios reducir las distracciones y leer de forma inmersiva.

2. Dividir detalles del flujo de alimentación

a. Imágenes coincidentes

▲ La selección de imágenes coincidentes debe seguir la sensación del fondo, resaltando el tema y la asociación de colores. en principio. De productos como Meituan Takeout y Ele.me, podemos ver que las imágenes seleccionadas en la página de inicio deben estar estrictamente controladas, ser consistentes con el temperamento del producto y tener ganas de comprar.

▲ Tamaño de la imagen

Las proporciones de las imágenes que aparecen en diferentes productos y diferentes escenas son inconsistentes. La proporción de imágenes que aparecen en el flujo de alimentación es 3:2 (aquí solo se proporciona brevemente el valor numérico, y el tamaño de la imagen se explicará en detalle más adelante)

Flujo de lista

Para la secuencia de listas, lo más importante es controlar el espaciado. Se recomienda establecer el espaciado más básico, como 8 píxeles, y luego aumentar el número par de píxeles según la intimidad para abrir la relación jerárquica.

d. Control segmentado

Al diseñar, la copia seleccionada es generalmente 2 píxeles más grande que la copia no seleccionada, el color generalmente es el color de la marca; Las barras horizontales pequeñas generalmente están diseñadas para ser 3px (1x más bajas)

Botones auxiliares

▲Preste atención al equilibrio izquierdo y derecho. Diseñe el ícono para que sea tan alto como la copia.

El flujo de tarjetas, el flujo de imágenes y el flujo de alimentación se utilizan cada vez más en el diseño de interfaces. Dominar los puntos clave del diseño será de gran ayuda para la eficiencia y el efecto de nuestro diseño. El contenido anterior es solo un resumen y una acumulación de mi estudio diario. Espero que te resulte útil, pero recuerda aplicarlo estrictamente ~