Cómo hacer un diseño de prototipo de página en línea-Cómo diseñar un diagrama de prototipo de página web

Acerca del método de diseño de prototipos web y móviles

De lo que estás hablando es de un prototipo de alta fidelidad. Primero puedes usar PS y otras herramientas de diseño para diseñar la interfaz, y luego cárguelo en Mockup para su conversión. Para prototipos de alta fidelidad, también puede usar directamente la herramienta de creación de prototipos en línea de Mockup para dibujar prototipos interactivos de alta fidelidad. UE y los desarrolladores también pueden ver directamente la información de las capas y descargar recortes en Mockup para transmitir opiniones con mayor precisión. . Cómo diseñar un prototipo de página web

En la última mitad del día, arrastré y arrastré distraídamente para construir todas las partes, pero la página resultante era tan terrible que ni siquiera tuve el coraje de ábrelo. Después de regresar a casa por la noche, lo hablé con mi vecino durante otras tres horas y finalmente me quedé despierto hasta tarde para completar el prototipo. Aunque el prototipo final no fue adoptado, esta vez el prototipo fue elogiado y el líder dijo que mi prototipo había mejorado. Escribiré este artículo hoy para resumir el trabajo durante este período. Antes del diseño del prototipo: ①0202 Centrarse en el contenido resaltado: es necesario comprender claramente qué contenido debe resaltarse en la página. Esto generalmente se ha determinado en las primeras discusiones. ②0202 Primer propósito funcional: además del contenido, qué debe ser; ¿Se destacan en términos de funcionalidad? Como el registro directo o el tráfico directo a páginas del siguiente nivel. ③0202 Si es una revisión, ¿qué problemas se deben considerar en la revisión? ¿Qué problemas existían en la versión anterior de la página se deben considerar al dibujar un prototipo? ④0202 ¿Cómo dividir la sección de contenido El contenido de la página se divide principalmente? en varios módulos, y el contenido almacenado en cada módulo debe ser contenido similar ⑤0202 Correlación entre módulos: debe haber alguna correlación lógica entre cada módulo y sus módulos similares, y no se puede unir aleatoriamente; módulos y módulos Debe haber alguna conectividad lógica entre módulos y módulos. Una vez completada la página: Después de completar el prototipo, debe verificarlo, principalmente desde los siguientes tres aspectos: ⑦0202 Si el contenido está completo: verifique si está completo comparando cada parte del contenido en el marco; ⑧0202 Si la primera; la pantalla muestra el contenido más importante: El contenido más allá de la primera pantalla de la página es básicamente contenido auxiliar. Si todo el contenido no se puede mostrar en la primera pantalla, básicamente significa que el contenido está incompleto ⑨0202 Si se realiza la función: si; la función que desea expresar se muestra en un lugar obvio Salir; ⑩0202 ¿El proceso es fluido? Realice el proceso correspondiente para ver si es fluido. Consejos de nota: ① 0202 Los trabajos inacabados se presentan para discusión. Las páginas incompletas no significan ideas incompletas. Incluso si es una página incompleta, debe contener un diagrama lógico claro. De esta manera, podrás obligarte a pensar con claridad antes de actuar. ②0202 Para aclarar su propio pensamiento, debe tener su propio pensamiento claro. Primero debe comprender el contenido, las funciones y los procesos. Puede enumerar algunas preguntas específicas para ayudar a aclarar su propio pensamiento. ③0202 Cíñete a tus propias ideas. Cada uno tiene sus propias ideas. Siempre que aclares tus propias ideas, debes ceñirte a ellas. Utilice su propia lógica para responder las dudas y preguntas de otras personas y formar sus propias ideas. Con respecto a las herramientas y el dibujo: pasé mucho tiempo estudiando axure antes y aprendí algunas técnicas de dibujo, pero gradualmente descubrí que no mejoraron mucho la página. Creo que puedo ignorar temporalmente las herramientas cuando domine el uso básico de las herramientas. Lo más importante de la página es su idea. Cuando la idea madure, es posible que desee considerar lentamente la profundidad de la herramienta. Pensar demasiado en cuestiones técnicas nublará su visión. No importa si el proceso de pensamiento y el tiempo de dibujo pueden durar hasta 7:3. Después de pensar en el marco inicial y las ideas del proceso, los dibujos del prototipo posteriores surgirán de forma natural. Cómo diseñar un excelente prototipo backend de sitio web

Objetivos claros

Dado que es desde la perspectiva del prototipado, hablaremos del trabajo específico. Lo primero que hay que tener claro debe ser el. objetivos del producto, como la siguiente pregunta:

¿Es un producto nuevo o una versión actualizada?

¿Existe un sistema de interfaz de usuario compatible u otros recursos fuera de línea que necesiten? estar coordinado, etc.

¿Cuáles son los objetivos a nivel empresarial? Nuevas funciones, etc.

Análisis de requisitos

¿Después de aclarar los objetivos del producto? , se centrará en él al realizar el análisis de la demanda. En general, los siguientes elementos merecen atención:

1. Permisos de rol

Esto es muy importante. con todo tipo de usuarios en el fondo de gestión antes del diseño específico.

Incluyendo un ***, existen varios tipos de usuarios, sus respectivas necesidades de uso, permisos de operación y el diseño de permisos de usuario.

2. Arquitectura de la información

Asegúrese de dibujar un diagrama de estructura de información (es decir, un modelo de datos a nivel de producto), que se utiliza principalmente para aclarar la estructura del producto. Dibuja un mapa mental y crea un formulario de Excel. El nivel de detalle depende de tus propios hábitos. Debes cooperar con el usuario para diseñarlo.

Esto es diferente del diseño de prototipo ordinario. Si se trata de una revisión, es necesario marcar especialmente la diferencia con la versión anterior, así como el plan de limpieza o migración de los datos antiguos. Además, también es necesario considerar la cooperación con otros recursos (recepción, páginas correspondientes, etc.), flujo de datos y transferencia de estado, etc.

4. Proceso funcional

Procesos generales de usuario y procesos de reglas de negocio que deben considerarse. De acuerdo con los diferentes objetivos comerciales, los procesos de los usuarios se pueden dividir según escenarios o funciones, y se puede brindar la optimización adecuada a algunos usuarios. El proceso de reglas comerciales debe garantizar una lógica clara y un bucle cerrado, y no perder flujos anormales (el bucle cerrado es muy importante).

Diseño de prototipo

Finalmente, podemos comenzar a crear prototipos. Hay muchas plantillas de temas para varios backends de administración. Si no hay necesidades especiales, es mejor comunicarse con el desarrollador para elegir. un conjunto. Simplemente cópielo.

Durante el proceso de diseño, preste atención a la navegación, las listas (agregar, eliminar, modificar, verificar, ordenar y filtrar), etc. No se pierda detalles como vista previa, mensajes de error/éxito, contenido nuevo. recordatorios, teclas de acceso directo, etc.