¿Qué significa el marco de interacción con pestañas?

Un marco es un diseño reutilizable para todo el sistema o parte del sistema, representado por un conjunto de artefactos abstractos y métodos de interacción entre instancias de artefactos.

Esta es la definición oficial. La traducción al lenguaje humano es un método para crear productos que pueden ampliarse, estandarizarse, organizarse y optimizarse para una iteración rápida. Si todavía no es fácil de entender, también podríamos dar un ejemplo fácil de entender: si tengo una casa vacía y quiero renovarla, entonces lo primero que debo considerar es la estructura de la habitación (es decir, el marco). ), marco), como cuánto quiero diseñar dormitorios, cuántas salas de estar, cuánto espacio ocupan, dónde están ubicadas, etc. (arquitectura de la información, luego también piense en cómo diseñar puertas y ventanas, cómo); comunicarse con diferentes habitaciones (método de navegación) y luego pensar en cómo diseñar puertas y ventanas, cómo hacer que funcione. (Método de navegación); luego piense en cómo debe distribuirse cada habitación, qué muebles y electrodomésticos hay y dónde deben colocarse (estructura de la página, luego continúe subdividiéndola hasta considerar cada detalle, luego una completa); Básicamente, el marco del producto ya está construido. Después de comprender el concepto de marco, es posible que aún tenga preguntas: ¿Por qué necesitamos diseñar el marco? Tomemos la casa de arriba como ejemplo. Si no considero el diseño de la habitación y coloco los muebles y electrodomésticos donde quiero, y coloco el dormitorio en la parte trasera de la casa, necesito pasar por la sala de estar. cuarto, cocina y baño para llegar Dormitorio; puse el baño en el dormitorio, la cama en el salón, los utensilios de cocina en el baño, el armario en el balcón y la lavadora en la cocina___¿Te imaginas? Si te pidieran que diseñaras una casa como ésta, ¿qué harías? Si tu casa estuviera diseñada así, ¿te gustaría vivir en ella? Asimismo, sus usuarios no utilizarán un producto que esté mal estructurado. El marco y la estructura de todos los productos de Internet que tienen cierta influencia en la industria deben ser considerados y diseñados cuidadosamente por el producto y los diseñadores. El marco es el esqueleto y el contexto de un producto, y es la base para saber si un producto se puede utilizar. Por lo tanto, es muy importante ordenar la estructura del marco antes de comenzar con el diseño del producto. Entonces, ¿cómo deberíamos pensar y diseñar el marco de interacción? Lo resumo en 3 pasos:

Paso 1: Arquitectura de la información Este término ciertamente es familiar para el producto y el diseño, entonces, ¿qué es la arquitectura de la información? Es un diagrama de arquitectura de información de un producto de aplicación. Es un diagrama de marco de información funcional que muestra todos sus puntos funcionales a través de diferentes niveles de clasificación. En términos generales, este tipo de diagrama de arquitectura se produce principalmente por productos, y también estarán involucradas algunas interacciones más profesionales. Tomemos el diseño de una casa como ejemplo para discutir cómo hacer arquitectura de información. En primer lugar, debemos determinar cuántas habitaciones tiene la casa y qué tipo de muebles y equipos se necesitan (recopilación de requisitos). Después de recopilar los requisitos, debemos comenzar a ordenar y clasificar los requisitos. Consulte el método de clasificación de tarjetas y el modelo Kano: una vez completada la clasificación, finalmente se genera el diagrama de arquitectura de la información: la finalización de la arquitectura de la información no es el final y es necesario pensar más: ¿Hay alguna otra pregunta? ¿Falta alguna característica? ¿Hay algún problema con la clasificación funcional? ¿Qué tan escalable es el marco? ¿Es la estructura lo suficientemente plana? Si no piensas bien en estas cosas, puedes terminar encontrando un baño en tu dormitorio. Una vez determinada la arquitectura de la información, es hora de empezar a pensar en el segundo paso:

Paso 2: Navegación La navegación es como una puerta en una casa, que es la entrada a través de todo el producto una vez finalizada la navegación. Cuando se completa, los usuarios pueden alcanzar sus objetivos rápidamente. Si la navegación no se realiza bien, los usuarios se perderán en el vasto océano de información y se sentirán abrumados. Actualmente, los principales modos de navegación en la industria de las aplicaciones incluyen navegación por pestañas y cajón. navegación y navegación de trampolín. Navegación con pestañas: también conocida como barra de pestañas en el sistema iOS, los representantes típicos incluyen Taobao, WeChat, etc. Estos productos son de tamaño relativamente grande y la estructura del producto y la lógica del proceso también son complejas y modificables. Navegación por cajones: los representantes incluyen Didi; y Mobike Etc., este tipo de producto tiene características muy singulares, es decir, el usuario tiene objetivos claros, el proceso de operación es único y es de "un solo subproceso". El proceso de operación es único y pertenece al tipo "proceso fuerte, marco débil"; navegación estilo palacio, representantes típicos como Midea. Otra característica distintiva de este tipo de producto es el "proceso único de subprocesos múltiples". es decir, hay muchas entradas funcionales (generalmente más de 5), el proceso de operación es único y se usa a menudo en los Estados Unidos. Otra característica notable de este producto es el "proceso único de subprocesos múltiples", es decir, hay muchas entradas funcionales. Muchas entradas funcionales (generalmente más de 5), el proceso de operación es único y se usa a menudo en los Estados Unidos. Imágenes y algunos productos finales.

Aunque las diferentes formas de productos determinan diferentes modos de navegación, casi el 90% de las aplicaciones en la industria utilizan la navegación por pestañas tiene ventajas muy significativas: estructura simple y clara, fácil operación, gran escalabilidad y buena estabilidad, es de hecho la preferida. modo de navegación para muchas aplicaciones, pero no se puede generalizar. Su elección de navegación debe estar relacionada con el tipo de producto y la estructura del marco, Didi Dache, Didi Dache, Didi Dache, Didi Dache, Didi Dache, Didi Taxi. Pero no se puede generalizar. La navegación que elija debe estar relacionada con el tipo de producto y la estructura del marco. Didi usa la navegación por cajón en lugar de la navegación por pestañas porque está determinada por los atributos del producto en sí. Douban siempre usa la navegación por cajón. La razón es que la estructura del marco del producto en sí es relativamente simple. Entonces, ¿qué tipo de navegación debe ser flexible y modificable? No existe la mejor, solo la más adecuada, como los siguientes tres ejemplos: La navegación en camello, que se utiliza en todo momento, es una deformación de la navegación por etiquetas, lo que fortalece una parte importante. o función de operación de alta frecuencia y es multipropósito. La muy rara navegación flotante se usa en blogs y aplicaciones de transmisión en vivo Curiosity Daily. En cuanto a por qué se hace esto, puede pensarlo usted mismo. No hay navegación alguna y este producto tiene solo una función. Combine su propio tipo de producto y estructura de marco, elija la navegación de manera flexible, no se ciña al formulario, pruebe más y piense más, siempre encontrará el más adecuado. Después de completar el diseño de navegación, vaya al último paso:

Paso 3: Estructura de la página La estructura de la página es el diseño de la página, que es una visualización de la relación de diseño entre diferentes controles y elementos en una sola página, solo como una habitación en una casa Se han diseñado las ubicaciones grandes y pequeñas, por lo que el siguiente paso es considerar cómo agregar cada habitación de la casa, como dormitorios, armarios, lámparas, aires acondicionados, etc., cómo distribuirlas. en qué direcciones y en qué lugares específicos, cuánto, cuál es el impacto de la ubicación, etc. La calidad del diseño de la habitación afecta el uso del espacio y también afecta la belleza y la limpieza de la habitación y el estilo de distribución. De la misma manera, la calidad del diseño de la página determina la experiencia de uso del usuario y la experiencia de lectura determina el estilo y el gusto de todo el producto, lo que en última instancia afecta la conversión del producto. Entonces, ¿cuáles son las características de un excelente diseño de página? 1. Prioridades claras y estructura clara. Los elementos y controles de la página con una estructura clara se manejan muy bien. Por el contrario, si la estructura es caótica, los usuarios no podrán concentrarse después de leerla durante mucho tiempo. saber qué quiere expresar su página o qué significa cómo operar.