Cómo dibujar un prototipo de página web: explicación detallada de los pasos del proceso de producción del sitio web
¡Hablemos de cómo dibujar un prototipo!
¡Antes de dibujar el prototipo, es más importante dibujar el diagrama de flujo de la página y el diagrama de arquitectura de la información! Si no tienes estas cosas y empiezas a dibujar prototipos, te esperan infinitas variaciones.
El diagrama de flujo de la página muestra la racionalidad del proceso desde la perspectiva del usuario. Suele ser adecuado para pasar a funciones de productos más complejas, como el comercio electrónico y los productos sociales.
Por qué dibujar el flujo de la página:
(1) es la base del diseño de interacción/diseño de prototipos y la base de la lógica. Si no considera el orden del flujo de páginas, entonces el prototipo que dibuje definitivamente no será la versión final.
(2) Representa el proceso de operación del usuario. Dibujar primero el diagrama de flujo de la página puede identificar rápidamente los problemas de la experiencia. A través del diagrama de flujo de la página, puede imaginar el proceso de operación del usuario al usar el producto e identificar posibles problemas.
(3) Resalte los elementos clave y las relaciones lógicas de la página para mejorar la eficiencia del diseño del prototipo. Muchas páginas no son páginas nuevas, pero tienen algunas modificaciones en las páginas originales. Si conoce la secuencia del flujo de la página, crear un prototipo le ahorrará mucho trabajo.
El diagrama de flujo de la página incluye:
(1) Cuadrado: la parte cuadrada del proceso de negocio, los procesos anormales o las capas generalmente están representados por diamantes.
(2) Dirección del flujo: dirección del flujo principal y dirección del flujo auxiliar.
(3) Elementos clave: ¿Cuáles son los elementos clave a reflejar y expresar en cada proceso?
Herramientas para dibujar diagramas de flujo de páginas:
(1) Axure: después de dibujar un diagrama de flujo de páginas, puedes dibujar un prototipo.
(2)ppt: fácil de explicar
Lo que hay que tener en cuenta es:
(1) Volver al proceso de negocio y aclarar la línea principal: el proceso de página debe provenir del proceso de negocio, normalmente una parte cuadrada de un proceso de negocio. Los procesos anormales generalmente son provocados por capas elásticas o ventanas emergentes. Si el proceso comercial está bien dibujado, el proceso de la página será simple.
(2) Aclarar los elementos clave de la página: qué elementos deben expresarse en la página para funcionar. Agregue lógica de procesamiento para tráfico anormal. Agregar página de ayuda auxiliar. Considere los puntos de activación posteriores (botones/enlaces/control deslizante...).
(3) Optimización de la comunicación: primero, las páginas involucradas deben agotarse tanto como sea posible y luego se deben restar algunas páginas. serán fusionados o eliminados. Optimice y ajuste elementos clave de la página a través de bocetos prototipo. Comuníquese más con UI, UE y RD front-end, y el efecto será mejor.
Reglas generales para diagramas de flujo de páginas:
Leyenda de flujo de páginas:
Un caso específico:
Proceso de negocio:
Tráfico de la página:
Separa principalmente el proceso de operación de los usuarios normales y agrega manejo de excepciones.
Páginas clave y procesos clave para usuarios comunes:
Diagrama de flujo de páginas:
(1) Dividir en cinco páginas para determinar la dirección del flujo.
(2) Elementos fijos, por ejemplo, en "1 carrito de compras", "enviar pedido" es el punto de activación posterior y, después de hacer clic, pasa a la página siguiente; "2 ingrese el código de descuento" Complete el código de descuento ", y también hay un punto de activación posterior" confirmar pedido ". ...
(3) Dibujar el prototipo correspondiente a cada página.
El diagrama de arquitectura de la información muestra cuántos puntos funcionales contiene desde la perspectiva del producto. Adecuado para diferentes niveles, como productos musicales, clientes de noticias, productos de lectura, etc.
Ilustración 1 de arquitectura de la información:
Con el diagrama de flujo de la página o el diagrama de arquitectura de la información, finalmente puede comenzar a dibujar prototipos. Primero, ¿qué es la creación de prototipos de productos?
Prototipo de producto, comúnmente conocido como estructura alámbrica, significa aproximadamente boceto. Es el punto clave para la implementación del producto y el nodo desde el concepto virtual hasta el contacto con el usuario. Al mismo tiempo, también es el contenido clave generado por el gerente de producto, que se carga al jefe y se envía a los colegas de UI y UE.
El proceso del producto desde el prototipo hasta el lanzamiento:
Los gerentes de producto de las grandes empresas solo necesitan hacer dibujos a mano y piezas reales, mientras que las pequeñas empresas también pueden necesitar trabajar a tiempo parcial. diseño de interacción. ...
Caso:
¿Cuáles son las características de un buen prototipo?
(1) En general: la estructura de la página es clara, la relación de salto es clara, coherente con el proceso comercial y las necesidades del usuario se expresan plenamente.
(2) Página independiente: los elementos funcionales son claros y ordenados, la relación de posición es clara y los cambios en diferentes estados son claros.
(3) Diseño de interacción: lógica de interacción clara, métodos de interacción consistentes e interfaz unificada.
Herramientas de uso común:
(1) Papel y bolígrafo: dibuja tú mismo y aprende a posicionarse rápidamente.
(2) Pizarra: discusión entre varias personas
(3) Software Axure/Sketch/ink knife: crea documentos oficiales.
Caso:
(1) Proceso de investigación: proceso comercial ->; tráfico de la página
(2) Determinar el marco de la página: determinar aproximadamente el diseño de la página y marco grande.
(3) Dibujar prototipo: dibujar el módulo y determinar los detalles de la interacción.
Notas:
(1) Utilice proporciones reales y copias reales tanto como sea posible para hacer los elementos más realistas y evitar el rechazo en la revisión de requisitos. Simule situaciones extremas de la manera más realista posible y dé ejemplos claros.
(2) Seguir de cerca el tema de demanda y evitar complicaciones. Si el prototipo necesita agregar nuevas funciones, debe provenir de los requisitos y se debe considerar la fuente de datos de back-end.
(3)¡No dibujes! Utilice negro, blanco y gris para los prototipos y no cave agujeros en la UI y UE.
(4) El árbol de directorios es claro y fácil de leer.
(5) Guarde registros de modificación y guarde archivos para modificaciones clave.
Intenta controlar el tiempo dedicado a dibujar/modificar prototipos en 20 horas laborales, o pregúntate si has hecho algo mal.
¿Has descubierto los requisitos del producto?
¿Está claro el proceso del producto?
¿Has terminado el boceto dibujado a mano?
¿Has confirmado el boceto dibujado a mano con Boss?
Explicación detallada de los pasos del proceso de producción de un sitio webExplicación detallada de los pasos del proceso de producción de un sitio web
En pocas palabras, el propósito del diseño web es crear un sitio web. Un buen sitio web es la base de la promoción. He recopilado y compilado los pasos del proceso de producción del sitio web para usted YJBSY. ¡Espero que le resulte útil!
El primer paso: aclarar el posicionamiento del sitio web.
Necesitamos aclarar el posicionamiento de nuestro sitio web, las ventajas de los productos de la empresa y los grupos objetivo a visitar. Esto es lo que debemos analizar primero. Sólo basándonos en la situación real de nuestra empresa podemos realizar el posicionamiento de estilo del sitio web. Como todos sabemos, los estilos de sitios web se dividen en sitios web de marketing, sitios web de marcas, sitios web de comercio electrónico, sitios web de plataformas, etc. Puedo explicarte nuestros tipos en detalle la próxima vez. Una vez que haya aclarado el posicionamiento de su sitio web, comience a recopilar casos de sitios web relevantes como referencia en el siguiente paso.
Paso 2: Realizar un prototipo de página web.
Esto es un desperdicio de capacidad cerebral. Actualmente, la mayoría de la gente utiliza el software Axure para producción. Dibujar un prototipo requiere referencia a muchos estilos de sitios web. A través de una referencia constante, puede resumir el estilo de su propio sitio web. Los elementos de diseño más populares actualmente son los íconos con personajes, interfaces planas y estilos de pantalla panorámica. En el proceso de creación de prototipos, debemos analizar muchos estilos de sitios web. Si desea crear un sitio web de comercio exterior, entonces necesita encontrar muchos sitios web extranjeros conocidos y observar los estilos de sus sitios web para encontrar ese tipo de pensamiento y sentimiento. Los sitios web nacionales son relativamente conservadores. Aunque todos son diseños gráficos, el diseño de la mayoría de los sitios web es similar.
Paso 3: Diseño de interfaz de usuario/color
Una vez completado el prototipo, se puede entregar al diseñador para que diseñe la interfaz de usuario. Los diseñadores diseñarán colores según el diseño del prototipo, pero no se limitan al prototipo. Los diseñadores excelentes no lo implementarán paso a paso, sino que realizarán algunos cambios en el diseño detallado según su propia experiencia. El propósito de este movimiento es mejorar la hermosa interfaz y la experiencia del usuario.
Paso 4: corte/diseño DIV CSS
Cuando se complete el trabajo de diseño, debes comenzar a cortar el mapa. Si el sitio web es solo un sitio para PC, solo necesita crear un conjunto de estilos de mapa de recorte. Si se trata de un desarrollo de sitio web responsivo, debe crear tres conjuntos de estilos de recorte, a saber, PC, tableta y teléfono móvil. Los sitios web responsivos se adaptarán automáticamente a diferentes resoluciones y tamaños de pantalla para lograr la mejor experiencia, pero debo agregar aquí que no todos los sitios web son adecuados para la capacidad de respuesta y cada sitio es diferente. Las razones específicas se compartirán en el próximo artículo.
Paso 5: Desarrollo del programa
Después de recortar la imagen, ingrese a la etapa de desarrollo del programa. El desarrollo del programa se trata de la gestión de back-end, de modo que el sitio web tendrá un back-end de gestión para actualizar el contenido de los datos del front-end más adelante. Actualmente existen dos lenguajes de desarrollo populares para desarrollar sitios web: uno es el lenguaje PHP y el otro. Idioma de Internet.
Paso 6: Prueba de errores del sitio web y llenado de datos.
Una vez desarrollado el programa, se entrega al servicio de atención al cliente de tiempo completo para probar errores y se prueba el efecto de la página mientras se completan los datos. Los sitios web recientemente desarrollados tendrán errores. Debido a que es un proyecto puramente manual, es normal que el código se escriba uno por uno y tenga errores. Por lo tanto, se requiere que el servicio al cliente realice las pruebas. Los problemas descubiertos durante las pruebas se compilarán en forma de documentos y se entregarán a los programadores para su reparación.
Gerente de producto junior: cómo dibujar AXURE de manera eficiente Un prototipo es una solución específica para una determinada necesidad o problema diseñada por un gerente de producto o diseñador de interacción. Existen muchas herramientas para dibujar prototipos y la mayoría de nuestros productos utilizan Axure. Con este software, se pueden realizar perfectamente prototipos de alta o baja fidelidad. Entonces, ¿qué tipo de prototipo es adecuado para la comunicación en equipo?
Después de todo, el prototipo que dibujas no es solo para ti, sino también para los miembros del equipo, UI/front-end/desarrollo. Especialmente en revisiones grupales, al demostrar el prototipo, debemos explicarles la lógica interna, páginas específicas, efectos dinámicos, etc. productos, pregúnteles también si el diseño es razonable y si se puede realizar, y escuche sus opiniones en silencio. En este momento, el prototipo es una herramienta para pensar la comunicación, traducir e inculcar sus ideas a los miembros de su equipo. Asimismo, los prototipos sirven como herramientas de comunicación para el equipo. Para el prototipo dibujado, todos pueden hablar sobre sus opiniones, intercambiar ideas y mejorar las deficiencias del prototipo.
Por eso, a la hora de dibujar un prototipo, debes tener unos estándares de entrega básicos.
1. Estándares básicos de entrega para el diseño de prototipos
1. Claridad: informar a los demás sobre el propósito del producto, incluidas sus funciones y páginas.
Expresar claramente qué módulos de contenido tiene la página.
Es necesario expresar claramente los componentes dentro del módulo.
2. Claridad: informe a los compañeros de equipo los requisitos específicos y orínelos sobre cómo hacerlo.
1 Operación de función
¿Qué puede hacer una función? Hacer clic/desplazar/arrastrar y cómo reaccionará la página. Trabajo que promueve el desarrollo.
2 Ruta de operación
Hay algunas operaciones que saltan a páginas. Es necesario marcar claramente la ruta de salto, dónde saltar, qué páginas están involucradas y cómo contactar. Evite que los usuarios se pierdan.
Estado de 3 clics
Algunos enlaces y botones deben marcarse al principio cómo se ven, qué efecto tendrá el mouse al pasar el mouse sobre ellos (color/subrayado/mensaje, etc.), al hacer clic en Estilo cambia, el estilo después de hacer clic. (Estos pueden facilitar el trabajo inicial)
4 Combinación de información
Necesita combinar información relevante, como información básica, nombre/género/edad, etc. Es mejor mantenerlos juntos y no separarlos. Independientemente de la distancia.
Clasificación de 5 dígitos
El diseño de la página debe adaptarse a los hábitos, métodos de navegación y tareas laborales del usuario. Resaltar puntos clave para facilitar el trabajo de los usuarios. Algunos datos se pueden organizar y ordenar según cómo facilitar la búsqueda de los usuarios o si están "centrados en el usuario".
3. Integral: no se pueden ignorar todos los detalles del producto.
1Estado de interacción
¿Cuáles son las operaciones, estilos de interacción y efectos importantes? Es mejor extraerlo por separado, hacerlo de alta fidelidad y mostrárselo a otros para que puedan tener experiencias y sentimientos profundos sobre el producto.
2 Visualización de datos
Los datos relevantes involucrados en el prototipo deben tener casos reales y se deben mostrar los datos clave que se deben obtener, como un artículo, los datos requeridos : autor, hora de publicación, visualizaciones, me gusta, colecciones, etc. , con el fin de desarrollar y preparar las interfaces de datos necesarias.
3 Precauciones de excepción
Se deben considerar algunas emergencias, como desconexión de la red, carga lenta, datos eliminados, no se pueden encontrar datos, falta de derechos de acceso, etc.
4 páginas de soporte
Algunas características del producto pueden estar relacionadas con otros productos, y otras páginas que pueden estar involucradas deben incluirse en el proyecto. Por ejemplo, el estilo de navegación de los teléfonos móviles en WAP, el contenido y estilo de algunos mensajes/mensajes de texto enviados a los usuarios, etc.
4. Estética básica
1 Alineación
2 Espaciado
3 colores
4 fuentes
Te recomiendo leer un libro sencillo y fácil de usar como "El libro de diseño para todos".
5. Especificaciones básicas
1 Tamaño de página
El ancho de la página web es 960 px, 1000 px, 1200 px, la aplicación es Android, iphone5, iphone6, etc. , necesitan mantener las mismas dimensiones que los productos existentes.
2 Tamaño de fuente
El título puede ser de 18px o 16px y el contenido puede ser de 14px. Los usuarios no sólo deben considerar si pueden ver con claridad, sino también lo hermoso que es.
3 colores
No tengas demasiados colores para tu prototipo, limítate al negro, blanco y gris, y usa otros colores a menos que quieras destacar.
4 ventanas emergentes
Lo mejor es tener un estilo de interpretación y canto unificados: nombre, contenido, botón de operación y cierre de la ventana emergente.
5 elementos
No agregue demasiadas capturas de pantalla y estilos de íconos al texto del prototipo, ya que interferirá con el diseño de la interfaz de usuario.
2. Consejos rápidos para usar Axure
Si quieres hacer bien tu trabajo, primero debes afilar tus herramientas. Cuanto más experto sea en sus herramientas, menos tiempo dedicará a pensar en el plan. Compartamos brevemente algunas operaciones rápidas al dibujar prototipos en Axure:
Primero busque y muestre las piezas necesarias y luego podrá configurarlas.
1. Establecimiento de una biblioteca de componentes (puede mejorar la eficiencia y garantizar la coherencia del nivel del producto)
2. Uso de master (aplicable a partes comunes de varias páginas, se actualizará después de la modificación). automáticamente).
3. Establezca el estilo de la página (puede configurar la fuente y el fondo de la página al mismo tiempo)
4. Estilo interactivo de los componentes
5. Combinación de componentes
Utilice el mouse para encuadrar los manuscritos que desea fusionar y mantenga presionada la tecla Ctrl G. De esta manera, podrá copiar y arrastrar fácilmente después de fusionarlos. Mantenga presionada la tecla Ctrl Shift G, o haga clic en la selección y haga clic en los dos íconos a continuación para agrupar y desagrupar.
6. Alinear, centrar y distribuir uniformemente
Seleccione el contenido que se distribuirá y elija un estilo de distribución. Puede obtener rápidamente un estilo de prototipo ordenado sin necesidad de ajustar cada uno manualmente.
7. Configuración del tipo de cuadro de entrada (tipo predeterminado)
Para algunos cuadros de entrada, es posible que necesite configurar el texto predeterminado. Puede seleccionar directamente el cuadro de entrada y establecer el texto del mensaje y algunas restricciones en las propiedades originales.
8. Palabras de indicaciones de los componentes
Algunos caracteres requieren que se mueva el mouse para mostrar las indicaciones. Puede configurar directamente el "mensaje original" en las propiedades del original e ingresar el contenido que se mostrará.
En tercer lugar, el proceso de creación de prototipos
65438
2. Planifique la estructura del producto: utilice herramientas como Xmind o papel y bolígrafo para dibujar cuántos productos hay páginas y qué elementos contiene cada página.
3. Organice el directorio de prototipos: use Axure para agregar varias páginas de prototipos y considere la relación de salto entre páginas.
4. Diseñar el diseño de la página (cuadrícula): utilice bloques y cuadros de diferentes colores para indicar qué secciones representará esta parte y diseñe el diseño de la página.
5. Rellena los detalles de cada módulo - Rellena completamente la información y los datos específicos del cuadro.
6. Se agregó una pequeña cantidad de acciones interactivas, reflejadas en algunas operaciones relacionadas con tareas.
7. Comentarios de página: descripción interactiva mejorada.
8. Autoinspección de auditoría: si las funciones están completamente cubiertas; si faltan páginas; si el proceso es claro; si el estado está completo; en cuarto lugar, experiencia en aplicaciones prototipo;
Como soy el principal responsable de la optimización del sistema backend, me encargo del desarrollo directamente. Si se trata de la página de inicio, primero necesito que la interfaz de usuario convierta el prototipo en una imagen, luego haga una demostración con efectos dinámicos en el front-end y luego desarrolle en base a la demostración. Pero no importa cuál sea la situación, el prototipo que dibujes debe permitir que tus compañeros de equipo comprendan tu lógica y los puntos clave que deseas expresar.
Cuando fui responsable del primer proyecto, utilicé alta fidelidad. Pasé más de una semana dibujando un prototipo completo. Quería hacer un producto virtual con varias acciones e interacciones. Sin embargo, después de hablar con los desarrolladores sobre el prototipo, se descubrió durante la aceptación del proyecto que la mayoría de los desarrolladores no siguieron las acciones del prototipo e incluso omitieron los detalles. Después de instarme a compensarlo uno por uno, comencé a pensar si este método no era rentable, demasiado laborioso y los resultados no eran buenos.
Más tarde, vi los prototipos dibujados por mis superiores. Eran principalmente páginas estáticas, que se puede decir que eran de baja fidelidad, pero cada situación estaba claramente descrita con imágenes y texto. después de hacer clic en él? ¿Qué datos se obtienen y qué pasa si falla? Y así, se hizo rápidamente. Entonces elegí el modo de baja fidelidad y comencé a dibujar prototipos. Como resultado, descubrí que a veces el desarrollo no lograba realizar bien algunas acciones.
Así que comencé con el "prototipo tipo T". "Prototipo T" significa que la mayor parte del desarrollo se lleva a cabo con una comprensión muy pequeña, presentando directamente la lógica de todo el producto y luego proporcionando descripciones detalladas y de alta fidelidad en algunos lugares que deben destacarse. Entonces, la mayoría de mis prototipos son una combinación de anotaciones de alta fidelidad y demostraciones de acción de alta fidelidad. Pero para productos con interacciones simples, las maquetas de baja fidelidad son suficientes.
Cada producto tiene diferentes hábitos y estilos a la hora de dibujar prototipos, pero la clave es realizar una reunión grupal para explicar el prototipo y la lógica a los compañeros de equipo. En el proceso de desarrollo, se necesita más comunicación.
Además, comparte tu sitio web sobre AXURE learning, donde podrás encontrar paquetes de instalación de software y cursos de enseñanza gratuitos.
/
Si estás interesado en el artículo, deja un comentario y quédate con lo que te gusta, continúa ~