Diseño de interfaz de usuario: descomposición del flujo de tarjetas, flujo y flujo de alimentación
Flujo de imágenes, flujo de tarjetas, flujo de feeds, "flujo" significa presentar nuestro contenido según una línea de tiempo determinada.
Pétalos, el método de visualización de la página de inicio de Pinterest, utiliza el tráfico de tarjetas para transportar información como imágenes, avatares de usuarios, nombres de usuarios, etc.
1. Funciones 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 sumergirse en la lectura
2. Composición detallada del flujo de imágenes
Desde una perspectiva profunda, el flujo de imágenes es dividido en capas de fondo, capa de contenido y 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. Precauciones para el diseño de la capa de contenido
1. Puntos clave del diseño de tarjetas con imágenes
1.
2. El estilo principal del área de información es muy fijo. Aquí debes centrarte en el espacio superior e inferior durante el diseño. (Un texto diferente hará que la altura del área de información sea diferente, pero en términos de estilo, es fijo porque esta parte se puede reutilizar).
Avatar del usuario
1. El diseño de los avatares de los usuarios debe prestar atención al equilibrio entre izquierda y derecha. Mantenga la altura del avatar coherente con la altura de la copia izquierda para garantizar el equilibrio izquierda-derecha.
2. Para los materiales de avatar, elija imágenes con fondos simples, centros visuales unificados y brillo uniforme. Las imágenes seleccionadas deben ajustarse al temperamento de nuestros productos. Cuando realizamos borradores de diseño, debemos elegir una imagen unificada, como perspectiva, brillo, etc. Sólo así podremos asegurar la unidad de nuestras páginas y el efecto del borrador del diseño. No elija algunas imágenes de alta calidad basándose en que el entorno en línea es caótico y las imágenes son feas, lo que reduce nuestro profesionalismo.
c. Puntos clave del diseño del tablero de flujo de imágenes
1. Mantenga constante el espaciado de los elementos correspondientes. Esto también es bueno para el desarrollo. (Los valores se definen en función de las especificaciones de su propio producto, siempre que el espacio entre elementos idénticos sea constante).
2. Utilice el color, el tamaño y el peso de la fuente para distinguir. Aquí debemos considerar qué información les interesa a los usuarios.
3. Presta atención al tamaño de los filetes de pescado. La configuración de las esquinas redondeadas es generalmente de 6 a 10 píxeles.
4. Descripción general de los puntos clave del flujo de imágenes
El estilo de flujo de tarjetas es muy común en las aplicaciones Alipay y Meituan. Los componentes del flujo de tarjetas son un poco como el área de contenido del flujo de imágenes. El estilo de diseño de Kaliu es relativamente fijo.
1. Función de 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 a los usuarios obtener rápidamente información importante y ahorrarles tiempo.
2. Segmentación del flujo de tarjetas
Según "UI Stars and Seas", el flujo de tarjetas se divide en las siguientes partes y cada parte se divide.
2. Puntos clave del diseño del proceso de tarjeta
A. El diseño básico, que es un color de fondo simple y líneas divisorias, no se explicará mucho. Tenga en cuenta que el color de fondo no puede ser demasiado sucio ni demasiado oscuro.
B. Palabras
Al diseñar texto, también debe usarlo de manera flexible de acuerdo con las especificaciones de diseño de su propio producto y distinguir los niveles de texto del color, tamaño y grosor del texto. . La diferencia de tamaño entre las copias primaria y secundaria debe ser de al menos 4 píxeles.
C. Nivel de contenido: componentes de la tarjeta
El área de diseño 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 de tabla. La parte del contenido de la tabla puede tener diferentes formas de presentación del contenido.
Sección de título
▲El icono está más alto que la altura del texto. El espaciado sigue el principio de dicotomía (el margen izquierdo es dos veces más largo que el margen derecho).
▲Los iconos del encabezado deben ser concisos y transpirables. La proporción entre el icono interior y la base redonda es cercana a 1:2.
Parte del contenido de la tabla
▲ Diseñe esta parte de acuerdo con la función de la tarjeta del producto. Asegúrate de controlar la distancia y seguir respirando en esta zona.
Parte del pie de página
▲ Los botones de texto o botones simples generalmente se colocan en el pie de página.
Para los botones de texto, deben resaltarse según su grosor, color y tamaño. Para botones simples, los márgenes superior e inferior y los márgenes izquierdo y derecho deben cumplir con el principio de dicotomía (más cercano al principio de dicotomía, menos rígido).
El flujo de alimentación es lo que los usuarios quieren. A menudo se utiliza en muchas aplicaciones de información, como Toutiao, Kuwo Security y otras aplicaciones.
1. Acción de tráfico de feeds
A. Ayudar a los usuarios a seguir obteniendo el contenido de suscripción más reciente.
B. Permitir a los usuarios reducir las distracciones y sumergirse en la lectura.
2. Segmentación detallada del flujo de alimentación
A. Dibujo
▲ La selección de imágenes debe seguir tres principios: sentido del fondo, tema contrastante y asociación de colores. . A partir de estos productos, podemos saber que la selección de la página de inicio debe controlarse estrictamente para que coincida con el temperamento del producto y genere el deseo de comprarlo.
▲Tamaño de la imagen
Las proporciones de las imágenes que aparecen en diferentes escenas de diferentes productos son inconsistentes. La proporción de imágenes que aparecen en el flujo de alimentación es 3:2 (aquí solo se proporciona el valor numérico, el tamaño de la imagen se explicará en detalle más adelante).
c. Flujo de lista
Para el flujo de lista, lo más importante es controlar el espaciado. Se recomienda establecer primero el espaciado más básico, como 8 píxeles, y luego aumentar el número par de píxeles según el grado de intimidad para abrir la relación jerárquica.
d.Control de segmentación
Al diseñar, la copia seleccionada generalmente es 2 píxeles más grande que la copia no seleccionada, el color generalmente es el color de la marca. Las barras pequeñas suelen estar diseñadas para tener 3px (1x).
e. Botones auxiliares
▲ Preste atención al equilibrio izquierdo y derecho. Los íconos son tan altos como la copia del diseño.
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 nuestra eficiencia y efectos de diseño. El contenido anterior es solo un resumen y una acumulación de su aprendizaje habitual. Espero que te ayude, pero recuerda aplicarlo rígidamente~