Diseño de navegación y diseño de interfaz de usuario de aplicaciones móviles
El diseño de navegación es una parte muy interesante del diseño y desarrollo de Apps. Debido al tamaño limitado de la pantalla de los dispositivos móviles, especialmente los teléfonos inteligentes, los diseñadores suelen intentar dejar el mayor espacio posible en la pantalla para el contenido principal. Para mostrar más contenido dentro de un rango determinado de la pantalla del teléfono móvil, un excelente diseño de la barra de navegación desempeñará un papel clave. Las diferentes operaciones deben elegir diferentes soluciones de diseño según las condiciones locales.
Por ejemplo, en el diseño de sitios web, dividiremos la navegación en navegación primaria, navegación secundaria, etc. De hecho, las aplicaciones móviles, como el diseño de sitios web, también tienen su propia arquitectura de información. Aquí dividimos principalmente la navegación de aplicaciones móviles en las siguientes dos categorías según los productos existentes en el mercado: modo de navegación principal y modo de navegación secundaria.
¿Figura 1-2? Modo de navegación auxiliar
Primero, veamos los siguientes siete modos de navegación principales:
Modo de navegación principal: el primero: trampolín.
La navegación Springboard no tiene requisitos especiales para el sistema operativo y tiene un buen rendimiento en varios dispositivos. A veces se le llama "plataforma de lanzamiento". La característica de la navegación de trampolín es que las opciones del menú en la interfaz de inicio de sesión son el punto de partida para ingresar a varias aplicaciones. El diseño de trampolín es útil en el mercado interno. Como se muestra a continuación, el primer "Baidu Mobile Guard" (Figura 1-3) muestra principalmente opciones de menú a través de funciones. Este diseño de cuadrícula divide claramente cada área funcional, lo que permite a los usuarios encontrar rápidamente la entrada y hacer clic para operar. (Imagen 1-4) Cloud TV, este es un televisor móvil sin datos. En comparación con Baidu Mobile Guard, sus módulos son relativamente simples y los nombres de los módulos se distinguen principalmente por estaciones de TV. Por ejemplo: CCTV, The Guardian, Sports e incluso canales extranjeros. Meitu Xiuxiu (Figura 1-5) es relativamente conocido. Su interfaz principal adopta un diseño de cuadrícula de 2 × 3, que muestra intuitivamente las entradas de funciones más utilizadas.
¿Qué es un diseño de cuadrícula de 2×3?
El diseño de cuadrícula 2×3 es una forma de diseño. Las formas de diseño comunes incluyen 3×3, 2×3, 2×2 y 1×2 (Figura 1-6). Pero no es necesario que se ciña al diseño de la cuadrícula. Puede definirlo según las funciones requeridas y también puede ampliar algunas opciones para mostrar su importancia.
La poderosa estación de radio en línea XiiaLive tiene un diseño de interfaz de usuario simple y fresco. Esta aplicación tiene funciones de navegación que no se pueden ignorar. El diseñador utiliza un diseño de cuadrícula de 3X3 y organiza seis elementos de menú en el medio de la pantalla, permitiendo que cada cuadrícula desempeñe un papel funcional (Figura 1-7).
Tripper es una aplicación de guía turístico local en Japón. Utiliza iconos de diseño plano y enumera las funciones de la aplicación en toda la interfaz en un diseño de cuadrícula de 2×3, lo que permite a los usuarios explorar la aplicación con bastante facilidad (Figura 1-8).
También se puede decir que el menú trampolín es un menú de cuadrícula, similar a los bloques de colores apilados de la interfaz de usuario de metro. Su ventaja es que es simple pero no tosco, la navegación es clara y obvia y puede mejorar la eficiencia operativa. Pero recuerde no utilizar colores indiscriminadamente al diseñar, ya que esto puede abrumar y cansar a los usuarios.
ASM utiliza una navegación de trampolín de cuadrícula irregular para resaltar la prioridad del contenido (Figura 1-9).
El reciente juego clásico: "No pises los bloques blancos" (Figura 1-10) es también una encarnación clásica del módulo trampolín.
Utiliza una cuadrícula para distinguir varios modos de juego, y los usuarios pueden entenderlo y operarlo claramente usando solo blanco y negro. Como se mencionó anteriormente, en el diseño de la cuadrícula, no es necesario seguir la forma de la cuadrícula varias veces, e incluso algunas opciones se pueden ampliar o reducir para mostrar sus características funcionales. En otras palabras, el diseñador también puede combinar sus diversas formas de cuadrícula para hacer más preciso el flujo lógico entre funciones. Por ejemplo, no pises todas las opciones del juego en el cuadrado blanco. Haz clic en el menú secundario para mostrar más opciones funcionales en forma de trampolín o lista.
La navegación de trampolín personalizada puede mostrar perfiles de usuario junto con opciones de menú. Las funciones de personalización generalmente se proporcionan para permitir a los usuarios cambiar el diseño del trampolín de navegación, como la interfaz de Youku.
A través del análisis del caso anterior, podemos resolver los siguientes puntos:
1. Utilice el diseño de cuadrícula para elementos de contenido igualmente importantes.
2. Utilice un diseño irregular para los elementos de contenido más importantes.
3. Utilice opciones de personalización y personalización según sea necesario.
Modo de navegación principal: el segundo tipo: tipo de menú de lista
La navegación por el menú de lista y la navegación de trampolín en realidad tienen algo en común. Lo que tienen en común es que cada elemento del menú es un. entrada a diversas funciones de la aplicación.
Pero la diferencia es que existen muchas variaciones de navegación por menús de listas, incluidos menús de listas personalizados, listas agrupadas específicas y listas mejoradas.
Análisis de lista de casos:
Modo de lista personalizada: utilice el modo de menú de lista personalizada en la página de inicio de la publicación de la foto. El diseño del sistema IOS adopta un estilo de menú de lista agrupada.
La versión iOS de Evernote combina diseños de navegación por listas y de navegación por trampolín. Vaya a la cocina para mejorar la navegación por la lista. ¿Qué es la navegación de lista mejorada? Se forma añadiendo funciones de búsqueda, navegación o filtrado a un menú de lista simple.
De hecho, la navegación por menús de lista comúnmente utilizada desde sitios web a aplicaciones móviles sigue un hábito de lectura de arriba hacia abajo, por lo que a los usuarios no les resultará difícil utilizarlo.
Al enumerar cuatro listas de casos y comparar la navegación del menú de lista y la navegación de trampolín, el menú de lista es más adecuado para mostrar títulos con contenido de texto más largo o secundario.
Modo de navegación principal - tercer tipo: por pestañas.
La navegación por pestañas tiene diferentes capacidades y reglas en diferentes sistemas operativos. Por lo tanto, es necesario definir la ubicación de las etiquetas para diferentes sistemas operativos en el momento del diseño.
Las series iOS, webOS y Blackberry colocan pestañas en la parte inferior de la pantalla para que los usuarios puedan operarlas con sus pulgares.
El diseño de navegación por pestañas generalmente utiliza cuatro botones de navegación, y el segundo y tercer botón son los más convenientes de operar. Debido a la limitación del ancho de la pantalla, el número de columnas es limitado, no más de 5 columnas. Obviamente, demasiadas palabras no favorecen el cambio de usuario. Desde la perspectiva del diseño de la interfaz, también reduce la facilidad de uso.
Ya existen algunas apps que cuentan con menús de navegación emergentes más interactivos basados en pestañas. Resalte los botones de las funciones principales que se muestran en la página de pestañas para facilitar la operación rápida por parte de los usuarios.
tab En cuanto al mercado de aplicaciones de gama baja, hay muchos. Estas son algunas aplicaciones comunes:
Las pestañas de desplazamiento horizontal en la parte inferior de la pantalla tienen un gran diseño, como la aplicación Waterlogue, que es una herramienta de manipulación de fotografías estilo acuarela. La pestaña de desplazamiento horizontal a continuación permite al usuario elegir entre una variedad de estilos de acuarela.
Android, Symbian y Windows colocan pestañas en la parte superior de la pantalla, imitando el modo de navegación del sitio web.
Horner incluye un menú que se puede ocultar pero que aparece de manera hermosa desde la parte superior, lo que contrasta muy bien con todo el contenido de la interfaz, ya que los colores brillantes y los íconos enormes son relevantes. La aplicación de cálculo del flujo de aire diseñada por Bettertec utiliza inteligentemente la pestaña que ocupa la parte superior.
El menú de arriba significa lo mismo que el menú de abajo. Colocar el menú en la parte superior puede seguir el hábito de leer de arriba hacia abajo, pero también tiene algunas desventajas, es decir, no es adecuado para operar con una sola mano.
Los usuarios con una sola mano se comportan en estas dos posturas (lo contrario ocurre con los usuarios zurdos). El verde representa el área en la que es fácil hacer clic, el amarillo representa el área en la que se puede hacer clic con el pulgar extendido y el área roja está más allá del rango en el que se puede hacer clic con una mano.
Por lo tanto, ya sea en el diseño de navegación u otros diseños de aplicaciones móviles, los hábitos de operación de gestos del usuario deben considerarse tanto como sea posible para brindarles una experiencia mejor y más conveniente.
Imagen del área de deslizamiento del dedo con una mano
NetEase News adopta la forma de navegación deslizante superior. Hay una pestaña desplazable en la parte superior de la pantalla: los usuarios pueden ver más después. moviendo las opciones del menú de la página de pestañas.
La aplicación iQiyi también adopta el modo de navegación deslizante superior. Pero lo que más vale la pena mencionar aquí es que al configurar diferentes efectos visuales, como íconos fácilmente identificables o etiquetados, los usuarios pueden saber claramente qué elemento del menú han seleccionado.
Modo de navegación principal: cuarto tipo: estilo sala de exposiciones
El diseño estilo galería generalmente muestra varios elementos de contenido en un plano para realizar la navegación. ? Se utiliza principalmente para mostrar algunos artículos, recetas, fotos, productos, etc. , se puede organizar como una ruleta, una cuadrícula o una presentación de diapositivas.
La navegación estilo galería se puede aplicar bien al contenido que los usuarios necesitan explorar y actualizar con frecuencia, como el súper álbum y el bloc de notas en la imagen siguiente.
El álbum de fotos es una función que utilizamos a menudo en nuestro día a día. La frecuencia de uso es alta y la cantidad de imágenes es grande, por lo que es más adecuado utilizar el formato de sala de exposiciones.
Los portátiles no son ajenos. El cuaderno de la imagen siguiente se puede estirar hacia arriba, abajo, izquierda y derecha para crear un nuevo espacio de almacenamiento, y las vistas cuadradas clasificadas en diferentes colores pueden lograr una belleza sorprendente y armoniosa. No hay funciones sofisticadas. La interfaz principal simplemente muestra el nombre de la caja de almacenamiento y la cantidad de elementos que contiene.
La aplicación más bonita: es una agradable aplicación de Internet móvil que se envía a los usuarios a través de la plataforma de Internet todos los días. Se navega en forma de presentación de diapositivas. El usuario cambia el contenido de la pantalla al ver cada aplicación. La barra de progreso debajo cambiará dinámicamente los íconos a medida que el usuario cambie.
Modo de navegación principal: ¿el quinto tipo? Tipo de herramienta
La navegación por instrumentos proporciona una manera de medir si los indicadores clave de rendimiento cumplen con los requisitos.
Después del diseño, cada medida puede mostrar información adicional. Este patrón de navegación principal es útil para aplicaciones comerciales, herramientas analíticas y aplicaciones de ventas y marketing.
Timish Time Accounting - Contabilidad de línea de tiempo exquisita y única: Timish Time Accounting utiliza el ahora muy popular formulario de línea de tiempo para ayudarlo a organizar sus cuentas, que es conciso y claro, con una interfaz exquisita, conveniente y fácil. Satisface las necesidades del disfrute visual.
Poder musical: Consulta tu estado de actividad diaria a través de datos. La presentación de diapositivas tiene muchas funciones en las que puede hacer clic para ver.
Modo de navegación principal: ¿sexto? Forma metafórica
La navegación metafórica se caracteriza por utilizar páginas para imitar los objetos metafóricos de la aplicación.
Este tipo de navegación se utiliza principalmente en juegos, pero también se puede ver en aplicaciones que ayudan a las personas a organizar cosas (como diarios, libros, vino, etc.) y clasificarlas.
Notas de road book, notas que registran datos mediante matrículas.
Convierte el menú de la interfaz de navegación en un libro, que no sólo tiene la forma de un libro, sino que también representa una metáfora del concepto de libro. Título personalizado, referencia por categoría.
En el juego de buscar chicas, la navegación se muestra a través del progreso del nivel, lo cual es intuitivo e interesante.
Modo de navegación principal - No. 7: Tipo de mega menú
La navegación por mega menú en dispositivos móviles es similar a la navegación por mega menú utilizada en sitios web, está en un gran panel superpuesto con Muestra las opciones del menú agrupadas en un formato definido.
Este método de navegación rara vez se utiliza en el diseño de aplicaciones actuales y generalmente se utiliza como navegación secundaria para la recuperación de categorías. Es muy común en el diseño de navegación de sitios web móviles.
La navegación por el súper menú se utiliza como navegación secundaria en Meituan.
Los anteriores son los modos de navegación primarios: entonces, la lista de casos se considera el modo de navegación secundario.
Modo de navegación auxiliar:
Cabe señalar aquí que en el diseño de la navegación, todos los modos de navegación principales se pueden utilizar como navegación auxiliar. A menudo podemos ver la navegación por pestañas en las páginas con pestañas, la navegación por listas en las tarjetas de navegación, la navegación por instrumentos en las páginas con pestañas y las luces de navegación de la sala de exposiciones debajo de la navegación de trampolín.
No está claro si el modo de navegación secundario se puede utilizar como navegación principal, porque todo es uno y todo es posible. Depende principalmente de cómo lo uses correctamente. Ahora resumo estos tres tipos de navegación como navegación secundaria, que se basa en el análisis de los productos existentes en el mercado y no es necesariamente absoluta.
Modo de navegación auxiliar-octavo:? Ruleta de páginas
Con este modo de navegación, el operador puede explorar rápidamente una serie de páginas discretas mediante una operación de "deslizar".
Crazy Money utiliza un carrusel de páginas. El indicador de página (un término en iOS, que se refiere al pequeño punto utilizado para indicar el número de páginas) puede mostrar el número de páginas en la navegación; Opere para mostrar la página siguiente.
Modo de navegación auxiliar-No. 9: tipo de rueda de imágenes
La navegación con rueda de imágenes es similar a una ruleta bidimensional y se usa más en jugadores que necesitan mostrar varias imágenes. y aplicación.
Como aplicación de cámara, Banana Camera tiene funciones relativamente completas. No hay problema para tomar fotografías, agregar imágenes a álbumes, agregar texto, etc. , y también hay filtros y marcos de fotos muy artísticos~
La navegación de la ruleta de imágenes puede ver más íconos de plátanos, agregar algunos a algunos~ ~ ~
Modo de navegación auxiliar: No 10: Tipo de lista expandida
La navegación por la lista extendida muestra más información a través de la pantalla izquierda/derecha/arriba/abajo o haciendo clic en el botón.
En el diseño de la aplicación NetEase News, TIMI Accounting y Free Reading, puede hacer clic en el botón en la esquina superior izquierda de la pantalla para que aparezcan los elementos de cambio, y algunos también se pueden completar deslizando su dedo hacia la derecha o hacia la izquierda. Por tanto, cuando sintamos que el menú ocupa mucho espacio, podemos intentar ocultar el menú de esta forma. Cabe señalar que la mayoría de los botones del menú están diseñados en una posición visible en la esquina superior izquierda o superior derecha.
Una simple animación deslizante es como sacar un cajón, y el nombre "Navegación por cajón" debería provenir de esto. La navegación del cajón supera el límite de cantidad y libera en mayor medida el espacio principal, aumentando así los costes operativos.
Personalmente, creo que si los elementos funcionales principales se pueden organizar en cuatro o cinco elementos, el diseño de navegación por pestañas puede ser mejor; de lo contrario, se debe dar prioridad a la navegación por cajones. La navegación del cajón resuelve el problema de demasiados elementos de interruptor disponiéndolos verticalmente. Sin embargo, esto también significa que la navegación no puede aparecer en la pantalla al mismo tiempo que el contenido principal.