Reflexiones sobre el diseño de listas, tarjetas y tarjetas de dos columnas en aplicaciones
Los diseños de lista son comunes en las aplicaciones de noticias. Su característica de diseño es que puede mostrar múltiples piezas de información en una pantalla pequeña, y los usuarios pueden obtener una gran cantidad de información deslizándose hacia arriba y hacia abajo. Y la lista también tiene un formato de visualización muy fácil de entender.
El diseño de la tarjeta se ve comúnmente en aplicaciones sociales como Weibo y Facebook, y también aparece en otras aplicaciones diferentes en formas muy flexibles. Su característica es que el contenido y la forma de cada tarjeta pueden ser independientes entre sí y no interferir entre sí, por lo que en una misma página pueden aparecer diferentes tarjetas con contenido diferente. Debido a que cada tarjeta existe de forma independiente, su información puede ser más rica que una lista. Los usuarios pueden comentarla y darle me gusta, eliminando la necesidad de saltar a la página de detalles. Sin embargo, debido a la gran cantidad de información en las tarjetas, no se pueden mostrar varias tarjetas en una pantalla pequeña y la cantidad de tarjetas en una pantalla rara vez excede las tres.
El diseño de tarjetas de dos columnas es más común en aplicaciones que se centran en información de imágenes. Por ejemplo, Pinterest, algunas páginas de visualización de productos de centros comerciales. Este formulario es similar a las tarjetas, pero puede mostrar más contenido en una pantalla, al menos 4 tarjetas. Al mismo tiempo, dado que las columnas izquierda y derecha se muestran por separado, los usuarios pueden comparar más cómodamente el contenido de las tarjetas en las columnas izquierda y derecha.
La lógica de comportamiento detrás del diseño
Pero ¿por qué usamos listas para categorías de noticias, tarjetas para categorías sociales y tarjetas de dos columnas para imágenes?
Volvamos a las necesidades y patrones de comportamiento de los usuarios para pensar en este tema.
¿Cuáles son nuestras necesidades cuando navegamos por las noticias? Las necesidades de la mayoría de las personas son: por un lado, quieren saber algo que sucedió recientemente, lo cual es una necesidad cuantitativa; por otro lado, si quieren saber qué es esto, es una necesidad de profundización; lectura. Sin embargo, la necesidad de cantidad suele ser lo primero y la lectura en profundidad lo segundo. Con base en esta demanda, el patrón de comportamiento de los usuarios al buscar noticias es el siguiente: navegación masiva rápida → filtrado → juicio → navegación masiva rápida, de la siguiente manera:
Como se puede ver en la figura anterior, cuando los usuarios buscar noticias, necesitan procesar grandes cantidades de información rápidamente y tomar decisiones con alta frecuencia en un período de tiempo muy corto. Por lo tanto, la eficiencia es extremadamente importante. Obviamente, es inapropiado mostrar solo uno o dos datos en una pantalla. Además, también es muy importante tener un alto grado de coherencia en el formato de presentación y controlar estrictamente la cantidad de información mostrada. Un alto grado de coherencia permite a los usuarios comprender rápidamente la forma de presentación, seleccionando así el contenido que más les convenga, lo que facilita el filtrado y la evaluación. Controlar la cantidad de información puede reducir la interferencia de la información y así mejorar la eficiencia. Debido a esta limitación, las listas son un formato razonable para la presentación de noticias.
Del mismo modo, ¿qué es lo que realmente queremos cuando usamos Pinterest? Se trata simplemente de encontrar la imagen perfecta. El más adecuado tendrá singularidad, comparación, compensaciones y opciones. Esto también significa que los usuarios no navegan uno por uno en orden, sino que comparan y navegan repetidamente, como se muestra a continuación:
Según este patrón de comportamiento, se requiere un formulario de diseño: 1. Una pantalla puede mostrar suficiente contenido; 2. Permite a los usuarios comparar contenido cómodamente. Al mismo tiempo, también existen requisitos para el contenido en sí: 1. El contenido en sí también se puede entender rápidamente. 2. El contenido en sí es comparable.
Tomemos como ejemplo Kitchen Stories. Esta es una aplicación para aprender sobre comida occidental. No tiene nada que ver con Pinterest, pero utiliza el mismo diseño. Además de explicaciones perceptuales como la belleza visual, también podemos entenderla desde otras perspectivas.
Supongamos que existe tal escenario, es hora de comer y hoy quiero comer comida occidental, así que abro la cocina diaria y elijo una cena para esta noche. Porque tal vez prepare comida occidental esta semana, por lo que esta elección debe seleccionarse cuidadosamente. No solo es deliciosa, sino también de gran valor y fácil de operar. La primera pantalla de la cocina diaria muestra imágenes de varios productos terminados, lo cual es muy bueno. Puedo elegir lo que quiero comparando looks. También hay un número de colección para cada plato, lo que probablemente refleja la evaluación general del plato y también me ayudó a reducir la dificultad de selección. Pronto, después de varias comparaciones, finalmente elegí espaguetis a la boloñesa para cenar esta noche. ...
Como se puede ver en el escenario anterior, cuando los usuarios usan esta aplicación, debido a que solo pueden elegir una vez, tienen que comparar los contenidos. Al mismo tiempo, las imágenes y los datos fáciles de entender facilitan el acto de comparación. Por lo tanto, el diseño de la tarjeta de dos columnas es un buen modo de carga.
Del mismo modo, cuando dibujamos Weibo, ¿cuáles son nuestras necesidades? Es más conveniente interactuar con amigos o personas a las que sigues. El requisito previo para la interacción es leer el contenido completo en lugar de saltarlo rápidamente. Por lo tanto, el modelo de comportamiento al buscar actualizaciones de amigos debería ser así:
La figura anterior muestra que el formulario de visualización debe cumplir al menos dos condiciones. En primer lugar, debe contener al menos dos dimensiones de información, una es información de contenido que los usuarios puedan comprender y la otra es información operativa con la que los usuarios puedan interactuar; en segundo lugar, los usuarios pueden operar el contenido de la página actual e incluso completar la operación; de la página actual. Sin embargo, esto no significa del todo que la disposición de las cartas sea la más razonable. Esto requiere una consideración exhaustiva de la comprensibilidad del contenido de Weibo y la complejidad de la información. El diseño de la tarjeta es una mejor solución.
Debido a que las formas de diseño de tarjetas son muy diversas y flexibles, el ámbito de aplicación también es muy amplio. Y no lo discutiré en profundidad aquí.
Resumen
Combinando las características de cada forma de diseño y la lógica de comportamiento detrás de ella, se pueden extraer las siguientes conclusiones:
Cuando el patrón de comportamiento del usuario tiende a Sea eficiente Las listas son excelentes para filtrar información rápidamente.
Cuando el comportamiento del usuario requiera una comparación repetida de información, o cuando sea necesario obtener más información en una sola pantalla, intente utilizar un diseño de tarjeta de dos columnas.
Cuando los usuarios no sólo necesitan consumir el contenido mostrado, sino que también quieren interactuar con él, entonces se puede priorizar el diseño de la tarjeta.
Reflexión final
Este artículo solo piensa en el ámbito de aplicación del diseño a través de las características de una forma de diseño y la lógica de comportamiento detrás de él. Evidentemente, este pensamiento unidimensional no es apropiado en los casos reales. Además de los patrones inesperados de comportamiento del usuario, los factores que deben considerarse pueden incluir:
1. Características del flujo visual en varias formas de diseño (la lista es un flujo visual de arriba hacia abajo en forma de "I", doble. -tarjetas de columna Es un flujo visual en forma de "Z" que salta hacia arriba y hacia abajo)
2 Prioridad de transmisión de información (las listas son más adecuadas para la transmisión de texto, las tarjetas son más adecuadas para la transmisión de imágenes)
3. Posibilidades de diseño Escalabilidad
4. Construya la marca
Espera
Para cada escenario, cada aplicación, cada página, la proporción de cada consideración también es diferente y requiere un análisis detallado de cuestiones específicas. Pero pase lo que pase, los resultados del diseño pueden cambiar constantemente, pero la lógica detrás del diseño debe ser rastreable.