Cómo crear una plantilla de prototipo de página web: cómo diseñar un excelente prototipo de fondo de sitio web

1. Conceptos de diseño únicos y novedosos

Si realmente no tienes ideas, puedes mirar los diseños de fondo de sitios web del mismo tipo. para encontrar inspiración para el diseño.

2. Herramienta de creación de prototipos eficiente y práctica

Una buena idea de diseño también requiere una herramienta de creación de prototipos para producción, pruebas e iteración. En este sentido, MOckplus es una buena herramienta, con operación simple y rápida, intercambio de enlaces, recopilación de comentarios, demostración de máquinas reales, etc. , lo que permite al equipo diseñar e iterar rápidamente.

3. Busque plantillas de diseño de prototipos creativos

Una buena plantilla de diseño de fondo de sitio web también es un buen punto de partida. Sin embargo, debes prestar atención a las cuestiones de derechos de autor y averiguar si estás pagando por él o si lo estás reutilizando de forma gratuita.

Cómo diseñar un excelente prototipo de backend de sitio web y aclarar los objetivos

Ya que estamos haciendo un prototipo, hablemos del trabajo específico. En primer lugar, debemos aclarar los objetivos del producto, como las siguientes preguntas:

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

¿Existe un sistema de recepción de apoyo? ¿U otros recursos fuera de línea que necesitan coordinación? Espera

¿Cuáles son los objetivos a nivel empresarial? ¿Nueva característica? ¿Optimización de la experiencia? Espere

Análisis de requisitos

Aclare los objetivos del producto y céntrese en el análisis de necesidades. En términos generales, los siguientes elementos merecen atención:

1. /p>

Esto es muy importante. Antes del diseño específico, debe estar familiarizado con los distintos usuarios del backend de administración. Incluyendo * * * Hay varios tipos de usuarios, sus respectivos requisitos 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 haz una tabla de Excel. El nivel de detalle se puede diseñar según sus propios hábitos y en conjunto con el usuario.

Esto es un poco diferente de la creación de prototipos ordinarios. Si se modifica, se debe indicar específicamente la diferencia entre la versión anterior y el plan de migración o limpieza de datos anterior. Además, cooperación con otros recursos (recepción, páginas correspondientes, etc.). ), es necesario considerar la dirección del flujo de datos y la transición de estado.

4. Flujo funcional

Por lo general, es necesario considerar el proceso del usuario y el proceso de reglas comerciales. Según los diferentes objetivos comerciales, los procesos de los usuarios se pueden dividir según escenarios o funciones, y algunos usuarios se pueden optimizar adecuadamente. El proceso de reglas comerciales debe garantizar una lógica clara y un bucle cerrado, y no omitir procesos anormales (el bucle cerrado es muy importante).

Prototipo

Finalmente puedes empezar a crear prototipos. Hoy en día, existen muchas plantillas temáticas en diversos ámbitos de gestión. Si no hay necesidades especiales, simplemente comuníquese con el desarrollador y elija un conjunto de "redacción publicitaria".

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

Cómo diseñar un excelente prototipo de back-end de un sitio web. Para hacer un excelente prototipo de back-end, creo que se divide principalmente en tres partes:

Comprender la estructura y la lógica de la página. del módulo de función back-end Comprensión clara.

2. Ser capaz de utilizar herramientas de creación de prototipos de manera competente

3. Excelente estilo de diseño y especificaciones de diseño

1 es básico, 2 es avanzado y 3 es Haz que los prototipos se conviertan en un excelente adorno.

¿Cómo garantizar una estructura funcional y una lógica de página claras y razonables en segundo plano?

Muchas personas tienen la costumbre de dibujar prototipos, es decir, lo hayan pensado o no, simplemente abren la herramienta de prototipos y sacan algunas cajas, o simplemente comienzan a dibujar basándose en un sitio web. antecedentes que les parecen muy buenos. Esto me parece extremadamente peligroso. El fondo de la página web es diferente de la interfaz web general y tiene requisitos muy altos en cuanto a la división de módulos funcionales y la lógica de la página. Por un lado, la estructura jerárquica del backend del sitio web es mucho más compleja. Por otro lado, las funciones del backend de la página web están más inclinadas a la gestión de la página del frontend, lo que resulta en una débil correlación y orientación entre funciones. En este caso, si comienza el prototipo sin una buena comprensión de la estructura del backend, es probable que el sistema de gestión del backend final sea una acumulación de funciones, lo que dificulta garantizar la disponibilidad de las funciones y el flujo de operaciones.

Al dibujar un prototipo de fondo, recuerde siempre:

Antes de dibujar un prototipo, primero debe organizar los módulos funcionales de la gestión de fondo y ayudarle a dividir las páginas en un árbol. diagrama de estructura y módulos.

& imgsrc= "

"

ancho de datos sin formato = " 1423 " alto de datos sin formato = " 676 " clase = " origen _ imagenzh -light box-thumb " width = " 1423 " data-original = "

"&ampgt;

Después de organizar los módulos, puede comenzar a diseñar el esqueleto del sistema de gestión backend. Personalmente puedo dividirlo en tres tipos: módulo principal (en qué se dividen principalmente los módulos funcionales independientes), subcategoría (qué categorías subfuncionales tiene cada módulo funcional) y eventos funcionales (qué operaciones principales existen en cada página funcional). El método de diseño general es el siguiente.

1) La pestaña superior divide los módulos principales y la columna de la izquierda divide las subcategorías.

& imgsrc= "

"

ancho de datos sin formato = " 1116 " alto de datos sin formato = " 468 " clase = " origen _ imagenzh -light box-thumb " width = " 1116 " data-original = "

"&ampgt;

2) Clasificación jerárquica estilo hamburguesa en la columna de la izquierda (lazy~probablemente estilo worktile Sidebar)

3) Aparece una lista de categorías secundarias en la barra lateral izquierda.

& imgsrc= "

"

ancho de datos sin formato = " 249 " alto de datos sin formato = " 155 " clase = " content_image " ancho = " 249 " &ampgt;

La línea de pensamiento debe ser de arriba hacia abajo. Al dividir módulos, no se ciña a la forma de presentación de una interfaz específica.

Claridad de estructura y lógica (esqueleto)>; Diseño de página funcional (específicamente cómo diseñar una página) >Diseño funcional optimizado (si se necesita vista previa, almacenamiento en tiempo real, etc.) >Experiencia de usuario

El primer coste de aprendizaje del usuario se puede sacrificar cuando sea necesario. El primer costo de aprendizaje del usuario se puede atribuir a la eficiencia después de que el usuario lo domine y trate de seguir los cuatro principios de intimidad/contraste/repetición/alineación.

Para funciones importantes que no sabes dónde colocar, puedes considerar colocarlas en el lado derecho de la barra superior en lugar de en el módulo principal.

Las ventanas emergentes frecuentes no son una buena opción (deben reproducirse si es necesario); si es posible, expandir y hacer flotar media página a la derecha es una buena solución.