Resumen comparativo del diseño de navegación de la aplicación
El propósito del diseño de navegación es resaltar el núcleo del producto y aplanar la ruta de tareas del usuario. Proporcione a los usuarios productos de navegación fluida, permitiéndoles saber siempre dónde se encuentran en la aplicación y cómo llegar a la página de destino.
El sistema de navegación de productos es una forma de mostrar la estructura de la información del producto en la interfaz de usuario. No existe el mejor diseño para la navegación de productos móviles, sólo el diseño más adecuado. Adopte el diseño de navegación más adecuado según su producto.
Si observamos las aplicaciones en el mercado de aplicaciones, los patrones de diseño de navegación son siempre una combinación de varios. Echemos un vistazo a algunos patrones de diseño de navegación comunes.
Descripción:
1. Cuando todo el proceso de experiencia del producto está penetrado por varios módulos funcionales de uso común (generalmente no más de cinco), significa que los usuarios deben ingresar varios. pestañas Cambiar hacia adelante y hacia atrás; para garantizar la eficiencia del cambio, los módulos de flujo a lo largo de toda la experiencia del producto se presentan en la barra de pestañas, lo que garantiza el aplanamiento de la ruta de tareas del usuario.
2. Podcast de aplicación original de iOS, 5 pestañas.
Ventajas:
1. Buena visibilidad, ubicación obvia, fácil de encontrar. Permite a los usuarios comprender intuitivamente las funciones principales de la aplicación. Puede Buena operabilidad, los usuarios pueden tocar fácilmente esta área y pueden cambiar rápidamente entre varias pestañas sin perderse, simple y eficiente
3. De acuerdo con los hábitos, controles nativos de ios, fáciles de desarrollar; /p >
4. Prioridad alta, utilizada con frecuencia por los usuarios e independientes entre sí.
Desventajas:
1. El número de asientos es limitado, normalmente hasta cinco (de lo contrario es necesario combinarlo con otros métodos, utilizando niveles y retracción).
2. Ocupan un espacio de altura ligeramente mayor, normalmente en forma de iconos de texto.
Descripción:
La pestaña superior es un modo de navegación propuesto por Google. Para distinguirlo de iOS, ya que a los dedos les resulta difícil llegar a la parte superior, Google propuso una solución de operación por gestos: cambiar de pestaña deslizando el dedo hacia la izquierda y hacia la derecha en la pantalla.
En proyectos reales, la parte superior y la inferior suelen usarse juntas. En realidad, es un artículo de holo.
Ventajas:
Buena escalabilidad: no hay límite superior en el número de etiquetas, pero si hay demasiadas, cuantas más páginas haya detrás, menor será la tasa de penetración;
p>
Ocupa espacio Pequeño: en comparación con las pestañas inferiores, las pestañas superiores generalmente ocupan menos espacio (porque no es necesario considerar clics con los dedos para reducir el área y solo es necesario seleccionar íconos o texto), por lo que Se puede disponer de más espacio para la visualización del contenido.
La operación por gestos es muy conveniente.
Desventajas:
Un poco menos de visibilidad: esto es el resultado de la menor huella de espacio.
Descripción:
1. Haga clic en Agregación para agregar múltiples funciones principales en la interfaz principal para su visualización, lo que facilita a los usuarios llamarlas. Aparecerá junto con otros estilos de navegación, como etiquetas como navegación con timón.
2. De manera similar a la navegación por etiquetas, haga clic en la combinación de navegación completa y navegación por etiquetas. Una etiqueta de navegación contiene más opciones de operación, lo que también puede entenderse como que la etiqueta contiene más etiquetas de navegación secundarias. Este modo de navegación de la APP se puede utilizar cuando la página tiene varios contenidos principales al mismo nivel y requiere una entrada muy importante y operada con frecuencia.
Ventajas:
1. Coloque los botones de función principal similares a los de producción de contenido en el medio y las etiquetas son más prominentes.
2. Al mismo tiempo, las etiquetas de funciones principales se expanden. Se agregaron algunos aspectos destacados personalizados al diseño.
Desventajas:
1. Ocupa un espacio de altura ligeramente mayor y suele tener forma de iconos de texto.
Descripción:
Cuando la información de su aplicación sea lo suficientemente plana, puede probar la navegación en carrusel;
Ventajas:
Puede maximizar Esto garantiza que la página de la aplicación sea concisa y la operación sea la más conveniente;
Desventajas:
No se puede localizar rápidamente el contenido de paginación correspondiente;
Descripción:
1. La navegación Palace se usa ampliamente en la página central de cada sistema de plataforma;
2. Se usa como una forma gráfica de una lista de contenido en páginas secundarias, o como una colección de un. serie de elementos de herramientas;
3. La probabilidad de que los usuarios cambien con frecuencia es relativamente baja;
4. En diferentes artículos, se puede llamar: trampolín (tarjeta de icono), estilo de mosaico. .
Ventajas:
1. Muy buena escalabilidad, fácil de combinar diferentes tipos de información (posiciones operativas, posiciones publicitarias, bloques de contenido, configuraciones, etc.);
2. Hay muchas entradas funcionales que se pueden mostrar dentro del campo de visión, lo que permite a los usuarios tener una comprensión general de los servicios proporcionados por la APLICACIÓN, para poder elegir los servicios que necesitan;
3. La combinación de lo dinámico y lo estático puede mantener la unidad visual al mismo tiempo que muestra información rica;
4.
Desventajas:
1. Cada celda es independiente entre sí. No hay intersección entre su información y no pueden saltar ni comunicarse. Cuando hay demasiados, los usuarios se deslumbran fácilmente y la elección es estresante;
Descripción:
1 es una variante de navegación en cuadrícula que se puede utilizar para presentar contenido en tiempo real. como noticias, recetas, artículos o fotografías, y se pueden mostrar en diseño de cuadrícula (como transmisiones en vivo e ins) o diseño de ruleta (como la película de Guevara) o en modo de presentación de diapositivas.
2. El modelo de diseño estilo galería es más adecuado para presentar contenido independiente, visualmente intuitivo y actualizado con frecuencia.
Ventajas:
1. En comparación con la navegación por listas y la navegación por palacio, la navegación por la sala de exposiciones tiene expresiones más ricas, efectos de combinación más aleatorios (flujo de cascada, etc.) y efectos dinámicos ricos (ruleta). y presentación de diapositivas).
2. Mostrar visualmente todo el contenido.
Desventajas:
1. No es adecuado para mostrar marcos de entrada de nivel superior.
2. Demasiado contenido puede crear fácilmente una interfaz desordenada;
3. El efecto del diseño es fácil de volverse aburrido.
Descripción:
1. El estilo del cajón también es un método de navegación propuesto por Google. Debido a la existencia de botones virtuales, el uso de la pestaña inferior en Android generará barras inferiores dobles y una experiencia visual deficiente.
2. Generalmente se utiliza para colocar funciones o núcleos que los usuarios no utilizan comúnmente en productos o aplicaciones que no requieren un cambio frecuente de contenido, como ocultar configuraciones, información, información personal, etc.
3. Se utiliza más en el diseño de productos de flujo de información, centrándose en la visualización del contenido principal. La ruta de tareas del usuario es relativamente simple y casi todas se utilizan para explorar el contenido principal. el producto; en cuanto a otras entradas de módulos de baja frecuencia, estarán ocultas detrás de la interfaz actual para evitar que los módulos redundantes capten la atención del usuario;
4. navegación;
5. "2/8 "La regla nos dice que el 80% de los usuarios solo usan esas 20 funciones, que son las funciones centrales en el flujo de información si ese 80% de las funciones no lo son; Los productos de uso común también ocupan la posición más importante, entonces los usuarios se sentirán molestos, hinchados e incluso dejarán de usar el producto.
Ventajas:
1. Ahorra espacio de visualización de la página y permite a los usuarios centrarse más en la página actual
2. pantalla, expansión Finalmente, toda la página es el contenido del menú de navegación, por lo que hay mucho espacio para la expansión y personalización;
3. Tiene buena escalabilidad y no hay límite superior en el número de navegaciones. .
Desventajas:
1. Es difícil para los usuarios encontrar el uso de funciones secundarias, lo que genera costos operativos para los usuarios para cambiar de función. p>2. La visibilidad es muy pobre. Los usuarios no han podido conectar el botón del menú de hamburguesas a la barra lateral, por lo que la tasa de penetración de la barra lateral es baja;
3. Adecuado para navegación principal. No es adecuado para operaciones frecuentes. En este caso, la experiencia del usuario al abrir y cerrar constantemente el cajón no es buena.
Descripción:
1. El propósito de la navegación por el cajón es el mismo que el de resaltar el contenido. Generalmente ubicado en la parte superior del producto, haga clic para abrir el menú de navegación;
2 Generalmente se usa para filtrar diferentes tipos de información en el mismo módulo de información o para iniciar rápidamente algunos módulos funcionales de uso común sin ellos. saltos frecuentes de página;
2. p>
3. El control correspondiente en Android es el control giratorio, pero este control se usa para cambiar entre diferentes vistas de la misma categoría, en lugar de saltar a una. visión completamente diferente. Los menús desplegables en iOS son controles personalizados que pueden cambiar entre diferentes categorías.
4. También existe una variación de la navegación desplegable, es decir, el menú desplegable muestra dos o más niveles. Esta situación es común en los productos de comercio electrónico porque hay muchas categorías y muchos. condiciones de filtrado.
Ventajas:
1. El menú y la interfaz son más coherentes que el cajón, lo que facilita a los usuarios percibir la ubicación actual;
Desventajas:
2. Está ubicado en la parte superior de la pantalla, relativamente oculto, no se puede combinar con gestos y no es adecuado para cambios frecuentes de funciones;
3. El área del menú de navegación es pequeña y el contenido del menú generalmente se muestra en forma de lista.
Descripción:
1 Como marco de organización de la información, es un modo de transporte de información indispensable en el diseño de nuestro producto.
2. Adecuado para mostrar títulos largos o títulos con contenido de texto secundario. Cada línea puede integrar más información.
3. Similar a la navegación en cuadrícula, a menudo se usa en páginas secundarias y no muestra ningún contenido sustancial de forma predeterminada, por lo que las aplicaciones generalmente no se usan en la página de inicio. El desarrollo de iOS y Android tiene plantillas y complementos de diseño de listas listos para usar.
Ventajas:
1. La vista de arriba hacia abajo es consistente con los hábitos.
5. La estructura es clara, fácil de entender, tranquila y eficiente. y puede ayudar a los usuarios a localizar e ir rápidamente a la página correspondiente.
Desventajas:
1. Demasiados elementos o distribución irrazonable, lo que dificulta que los usuarios los encuentren.
2. cambio de tareas.