Algunos métodos de diseño para aplicaciones basadas en contenido
La página de inicio de "Meituan Travel" se puede dividir en cinco módulos principales: área de ventas especiales, instituto de investigación de viajes, dónde ir los fines de semana/buenos lugares nacionales/en el extranjero seleccionados, destinos seleccionados y adivina qué como. Me compararía con otras aplicaciones, analizaría sus fortalezas y debilidades y optimizaría.
Las ventas de Forex deberían ser el servicio especial de Meituan, incluidas ventas por tiempo limitado y descuentos temáticos. Creo que la delegación estadounidense debería querer mostrar todo lo importante en la feria. Estos son los tres elementos que se muestran en la imagen de arriba. Sin embargo, la disposición de estos tres elementos es un poco confusa.
Imagínense, cuando los usuarios ven "Oferta especial", deberían sentirse atraídos por la imagen a primera vista, seguida de las palabras "Oferta especial". Cuando vean “dos días y una noche” y “venta flash”, se sentirán confundidos acerca de la relación entre los tres. Entonces, clasifiquemos las relaciones lógicas de estos tres bloques y hagamos un diseño específico para cada bloque.
En la segunda página, podemos ver que las "Ofertas especiales" incluyen "Ofertas por tiempo limitado" y "Descuentos temáticos". No es difícil adivinar que "Venta especial" incluye "Venta por tiempo limitado" y "Descuento temático", y "Venta por tiempo limitado" se yuxtapone con "Descuento temático":
Basado en lo anterior Análisis lógico simple, organicé aproximadamente la estructura de los intercambios especiales:
“Meituan Travel” VS “Ctrip”, “Tuniu”, “Taobao”
Si decimos “ventas por tiempo limitado” puede capturar mejor los globos oculares de los usuarios, esa podría ser la cuenta regresiva. Porque la atención de la gente se ve atraída más fácilmente por las cosas dinámicas. Comparemos los diseños de "ventas por tiempo limitado" en varias plataformas importantes:
(1) Aunque Ctrip hizo que el "tiempo limitado" de las "ventas por tiempo limitado" fuera muy audaz, no creó un impacto psicológico en los usuarios. en primer lugar Influencia, haciendo que los usuarios tengan ganas de hacer clic.
(2) Mire de nuevo a Taobao y Tuniu, lo sabemos muy bien. Los usuarios notarán la cuenta regresiva a primera vista y, por curiosidad, definitivamente harán clic para echar un vistazo.
Según el análisis anterior, Tuniu y Taobao se pueden utilizar para diseñar una "oferta por tiempo limitado", colocando el tiempo directamente en la página de inicio para crear una sensación de urgencia para los usuarios.
Después de ordenar la lógica y los detalles de diseño, rediseñé el área de ventas:
“Meituan Travel” VS “Mafengwo”
Mi opinión personal La comprensión de "Travel Research Institute" es un lugar para compartir comida, bebida y diversión. Es de naturaleza similar a las guías y se compone principalmente de artículos de blog. También puedes optimizar el diseño para que los usuarios puedan entender el contenido principal de esta sección de un vistazo. Puede comparar el método de diseño de la estrategia de Mafengwo:
(1) Puede ver que "Daily Bee Head" de Mafengwo también está dividido en dos módulos. Uno es una selección de artículos diarios que se pueden deslizar horizontalmente. Artículos recomendados. No es necesario hacer clic en "Ver más" para comprender claramente el contenido principal de esta sección.
(2) Meituan Travel El "Instituto de investigación de viajes" de Meituan también se divide en dos partes, la columna "Dónde ir los fines de semana" y los artículos recomendados. Cuando los usuarios ven “Dónde ir los fines de semana”, pueden pensar que el “Instituto de Investigación Turística” solo tiene contenido relacionado con “Dónde ir los fines de semana”. Si las imágenes y los títulos no son lo suficientemente atractivos, es fácil que los usuarios pierdan interés en ingresar a la página secundaria para ver más.
Según el análisis anterior, podemos colocar varios módulos principales en el "Travel Research Institute" y mostrar más contenido deslizándose hacia la izquierda y hacia la derecha como un avispero.
Basado en el análisis anterior, realicé el siguiente diseño para este módulo:
Imagínese el escenario de uso: cuando el usuario ve el título "2017, el lugar más adecuado para una fuga en 18, he estado en 3 Un lugar donde no puedo evitar querer casarme ". Si te atrae, harás clic. Entonces el atractivo del usuario en este momento es ver el contenido específico de este artículo. Sin embargo, lo que vi cuando entré fue una lista de muchos artículos, pero no pude encontrar el artículo que quería leer.
“Meituan Travel” VS “Fliggy Travel”
Puedes comparar cómo se maneja el contenido de Fliggy Travel al cambiar de página:
Haz clic en Después del artículo, salte a la página secundaria y muestre el artículo mostrado en la primera página.
Echemos un vistazo a la gira americana:
Haz clic en el artículo que deseas leer y no podrás encontrarlo después de saltar a la página secundaria. Hay un error.
“Meitu Travel” VS “Airbnb”
En términos de efectos dinámicos, cuando haces clic para saltar a la página secundaria, la página se mueve de derecha a izquierda. ¿Es esta la mejor manera de interactuar?
Podemos echar un vistazo al diseño de Airbnb:
Al saltar de la página de primer nivel a la página de segundo nivel, el usuario puede ver claramente la trayectoria de transformación del contenido cuando cambiar de página. Este tipo de interacción es conmovedora. En vista del análisis anterior, realicé las siguientes optimizaciones:
Como puedes ver, este bloque se compone de muchos bloques de contenido y la lista de productos se incluye en pestañas horizontales. La operación es compleja: los usuarios pueden deslizar el dedo hacia la izquierda o hacia la derecha para ver la lista de productos en una pestaña determinada. Si el usuario ve la pestaña de arriba, debe hacer clic en ella para ver la lista de productos correspondiente debajo de la pestaña.
“Meituan” VS “Toutiao de hoy” y “APP STORE”
Sabemos que el mejor efecto interactivo de las pestañas en los teléfonos móviles es deslizarse, no hacer clic. Puede echar un vistazo al cambio de pestaña de "Toutiao de hoy". Los usuarios lo encontrarán muy conveniente con solo deslizarlo.
También puedes echar un vistazo a la App Store. La lista deslizante de productos también se muestra bien en la interfaz:
Basado en el análisis anterior, rediseñé "Dónde ir". en fines de semana":
En cuanto al destino elegido, sustituí las fotos por dibujos hechos a mano, que quizás queden mejor visualmente:
“Meituan Travel” VS “Ctrip” y “ China
Como puede ver, "Adivina que te gusta" de Meituan Travel se muestra en forma de lista. Sin embargo, el diseño de la lista tiene muchas ventajas que las tarjetas no pueden igualar si todo el contenido está en forma de tabla. Durante mucho tiempo, será difícil. ¿No hay fatiga visual? Entonces, necesitamos agregar algunos elementos de cambio para brindar alivio visual a los usuarios.
Echemos un vistazo a los arreglos de Ctrip:
Echemos un vistazo a un sitio web de blogs extranjero, Medium, ¿cómo manejan los mismos tipos de contenido? Como puede ver, se intercalan con tarjetas basadas en listas; después de varios contenidos de lista, colocar un contenido de tarjeta y luego algunos contenidos de lista tiene muchos beneficios, además de reducir visualmente el aburrimiento de un solo modelo, también puede tener algún valor comercial.
En vista del análisis anterior, realicé las siguientes optimizaciones:
“Meituan Travel” VS “Taobao” y “Ctrip”
Además. Para mejorar la eficiencia de la navegación, la lista puede mostrar más contenido en una pantalla y colocar más detalles relacionados con el producto. Por lo tanto, debemos prestar atención a los detalles al diseñar la clase de lista. detalles de "Meituan Travel", "Taobao" y "Ctrip":
(1) Los nombres y precios de los productos de Meituan Travel están ordenados en buenas posiciones, pero las posiciones de los consumidores no son uniformes, y los usuarios se confundirán al leer diferentes tipos de información en la misma posición.
(2) La información de Ctrip está en la misma ubicación, pero el "precio" más importante se coloca en la esquina inferior derecha. Los ojos son tortuosos al explorar la información, lo cual no es ideal.
(3) Información de Taobao muy consistente, enfocada y muy clara
Basado en la comparación anterior, al diseñar. , no solo debemos garantizar la coherencia de la información, sino también permitir que los usuarios presten atención a información importante la primera vez.
Luego, cuando hay mucha información y el espacio es reducido, debemos ordenar la importancia de la información:
Nombre del producto>Precio>Número de consumidores y calificaciones>Etiqueta>Distancia (aplicable a todos los productos (excepto productos de viaje periféricos)
Podemos organizar esta información según su importancia:
Basándonos en el diagrama de estructura anterior, rediseñé los detalles de la lista:
Resumen: Los anteriores son varios métodos de diseño para el diseño de aplicaciones basadas en contenido, que son básicamente una aplicación integral de diseño de listas y tarjetas. En cuanto a cuándo adoptar y qué forma, es necesario analizar en detalle cuestiones específicas. Benchmarking de productos, descomposición de escenas, atención a los detalles.