Habilidades esenciales para los gerentes de producto | Cómo dibujar prototipos
Por supuesto, los gerentes de producto deben poder dibujar prototipos ~
¡Hablemos de cómo dibujar prototipos!
Antes de dibujar un prototipo, lo más importante es dibujar un diagrama de flujo de página y un diagrama de arquitectura de información. Si no tienes estas cosas y comienzas a dibujar un prototipo, ¡te esperan infinitos cambios! .
El diagrama de flujo de la página analiza 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 básica para el diseño de interacción/diseño de prototipo y la base lógica. Si no ha pensado en el orden del flujo de la página, entonces el prototipo que dibuje no debe ser una versión final.
(2) Representa el proceso de operación del usuario. Dibujar primero el diagrama de flujo de la página puede identificarlo rápidamente. experimentar problemas. Con el diagrama de flujo de la página podrás ponerte en el lugar del usuario e imaginar el proceso de funcionamiento al utilizar el producto, y descubrir los problemas que pueden surgir
(3) Resaltar los elementos clave y las relaciones lógicas del página para mejorar la eficiencia del diseño del prototipo. Muchas páginas no son páginas nuevas, pero se han realizado algunas modificaciones en las páginas originales. Si conoce el orden del flujo de páginas, le ahorrará mucho trabajo al dibujar prototipos.
El diagrama de flujo de páginas. incluye:
(1) Cuadrado: la parte cuadrada del proceso de negocio, los procesos anormales o capas elásticas generalmente se representan mediante diamantes
(2) Dirección del flujo: dirección del flujo principal y auxiliar dirección del flujo
(3 )Elementos clave: En cada proceso, cuál es el contenido clave a reflejar y expresar
Herramientas para dibujar diagramas de flujo de páginas:
(1) Axure: puedes dibujar un diagrama de flujo de página y luego dibujar el prototipo
(2) ppt: fácil de explicar
Puntos a tener en cuenta:
( 1) Regrese al proceso de negocios y aclare la línea principal: el flujo de la página debe ser seguro Proviene del proceso de negocios, generalmente la parte cuadrada del proceso de negocios. El proceso anormal suele ser una capa emergente o un mensaje de ventana emergente. Si el proceso de negocio está bien dibujado, el proceso de la página será sencillo.
(2) Aclare los elementos clave de la página: las funciones están en la página y qué elementos deben mostrarse. Agregue lógica de procesamiento para procesos de excepción. Se agregó una página de ayuda auxiliar. Considere los puntos de activación posteriores (botones/enlaces/deslizamientos...).
(3) Comunicación y optimización: primero, intente enumerar exhaustivamente las páginas involucradas y luego reste algunas páginas y combínelas o elimínelas. Optimice y ajuste elementos clave de la página a través de bocetos prototipo. Una mayor comunicación con UI, UE e I+D de front-end tendrá mejores resultados.
Reglas generales para diagramas de flujo de páginas:
Ejemplo de diagrama de flujo de páginas:
Un caso específico:
Proceso de negocio:
Proceso de página:
Separa principalmente el proceso de operación de los usuarios normales y agrega manejo de excepciones.
Para las páginas clave y las direcciones de flujo clave de usuarios normales:
Diagrama de flujo de páginas:
(1) Separe 5 páginas y determine la dirección del flujo del proceso
(2) Elementos fijos, por ejemplo, en "1 carrito de compras", "Enviar pedido" es el punto de activación posterior. Después de hacer clic, pasa a la página siguiente en "2 Ingresar código de descuento". existe el elemento clave "Complete el código de descuento" ", y también hay un punto de activación posterior "confirmar pedido"...
(3) Dibuje un diagrama prototipo correspondiente para cada página
Diagrama de arquitectura de la información, desde la perspectiva del producto, vea cuántos puntos de función están incluidos. Adecuado para productos con jerarquías claras, como productos de música, 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. En primer lugar, ¿qué es el diseño de prototipo de producto?
Prototipo de producto, comúnmente conocido como estructura alámbrica, probablemente signifique boceto. Es el punto clave de 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 producido por el gerente de producto, el que se carga y distribuye al jefe y 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 de baja fidelidad, mientras que las pequeñas empresas también pueden necesitar hacer piezas. -diseño de interacción en tiempo...
Caso:
Cuáles son las características de un buen prototipo:
(1) General: estructura de página clara, salto claro relación, consistente con el proceso de negocio, expresión completa Necesidades del usuario
(2) Página independiente: elementos funcionales claros y ordenados, relaciones posicionales claras, cambios claros en diferentes estados
(3) Interacción diseño: lógica de interacción clara, método de interacción consistente, interfaz unificada
Herramientas comunes:
(1) Papel y bolígrafo: dibuja tú mismo, aprende y posiciona rápidamente
(2) Pizarra: discutir con varias personas
(3) Software Axure/Sketch/Ink Knife: producir documentos formales
Caso:
(1) Proceso de investigación: proceso de negocio-gt; proceso de página
(2) Determinar el marco de la página: determinar aproximadamente el diseño de la página y el marco grande
(3) Dibujar un prototipo: dibujar módulos y determine los detalles de la interacción
Notas:
(1) Utilice proporciones reales y redacción real tanto como sea posible para hacer que los elementos sean más reales y evitar ser ignorados durante la revisión de requisitos. Simule situaciones extremas de la forma más realista posible y proporcione ejemplos claros.
(2) Manténgase cerca del cuerpo principal de demanda y no cree efectos secundarios. Si es necesario agregar nuevas funciones al prototipo, se debe basar en los requisitos y se deben considerar las fuentes de datos de back-end.
(3) ¡No agregues colores! Usa negro, blanco y gris para el prototipo, no caves agujeros en la interfaz de usuario y UE
(4) El árbol de directorios es claro y la lectura es fluida
(5) Guarde el registro de modificación y vuelva a guardar el archivo para modificaciones clave
Intente controlar el tiempo para dibujar/modificar el prototipo dentro de las 20 horas hábiles De lo contrario, tendrás que preguntarte si algo anda mal.
¿Has descubierto los requisitos del producto?
¿Has aclarado el proceso del producto?
¿Has dibujado el boceto a mano?
Boceto dibujado a mano ¿Lo has confirmado con Boss? Explicación detallada de los pasos del proceso de producción del sitio web
Explicación detallada de los pasos del proceso de producción del sitio web
En pocas palabras, El propósito del diseño web es producir un sitio web. Un buen sitio web es la base para la promoción. A continuación, YJBSY, he recopilado y organizado los pasos del proceso de producción del sitio web para todos. ¡Espero que sea útil para todos!
Paso uno: 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 primero que debemos analizar. Solo podemos realizar el posicionamiento del estilo del sitio web en función de la situación real de nuestra empresa. 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. La próxima vez podré explicarles nuestros tipos en detalle. Una vez que haya aclarado el posicionamiento de su sitio web, comience a recopilar casos de sitios web relevantes como referencia para el siguiente paso.
Paso 2: crear un prototipo de página web
Esta es una tarea que requiere mucho cerebro. Actualmente, la mayoría de las personas utilizan el software Axure para crearlo. Para dibujar un prototipo, es necesario consultarlo. A través de una referencia constante, puede resumir su propio estilo de sitio web. Los elementos de diseño populares actualmente son el uso de íconos con texto, una interfaz plana y un estilo de pantalla ancha. En el proceso de creación de prototipos, debemos observar muchos estilos de sitios web. Si está creando un sitio web de comercio exterior, debe buscar muchos sitios web extranjeros importantes y observar sus estilos de sitios web para encontrar ese tipo. pensando. Los sitios web nacionales son relativamente conservadores. Aunque también tienen un diseño plano, la mayoría de los sitios web tienen un diseño similar.
Paso tres: colorear/diseño de la interfaz de usuario
Cuando el prototipo esté completo, se puede entregar al diseñador para que lo diseñe. El diseñador procederá según el diseño de la interfaz de usuario. El diseño del color del prototipo no se limita a los prototipos. Los diseñadores excelentes no seguirán los pasos paso a paso. Realizarán algunos cambios de diseño detallados según su propia experiencia. El propósito de esto es mejorar la belleza de la interfaz y la experiencia del usuario.
Paso 4: corte/diseño DIV CSS
Una vez completado el trabajo de diseño, debe comenzar a cortar los gráficos. Si el sitio web es solo un sitio para PC, solo necesita hacerlo. Cree un conjunto de estilos para el corte. Si se trata de un desarrollo de sitio web responsivo, debe crear tres conjuntos de estilos para cortar imágenes, a saber, PC, tableta y teléfono móvil. Los sitios web responsivos se adaptarán automáticamente según las diferentes resoluciones y tamaños de pantalla para lograr la mejor experiencia. Sin embargo, debo agregar aquí que no todos los sitios web son adecuados para ser responsivos. Varían de un sitio web a otro. Las razones específicas se detallan a continuación. se está compartiendo.
Paso 5: Desarrollo del programa
Una vez completado el dibujo, se ingresa a la etapa de desarrollo del programa. El desarrollo del programa consiste en realizar la gestión back-end para que el sitio web pueda tener una gestión posterior. -end para actualizar el front-end más tarde. Según el contenido de la información, actualmente existen dos lenguajes de desarrollo populares para el desarrollo de sitios web: uno es el lenguaje PHP y el otro es el lenguaje .net.
Paso 6: Prueba de errores del sitio web y llenado de datos
Una vez desarrollado el programa, entréguelo al servicio de atención al cliente de tiempo completo para probar errores y probar el efecto de la página mientras completa el formulario. datos El sitio web recientemente desarrollado Siempre habrá errores y lagunas, porque es un proyecto puramente hecho a mano y el código se escribe letra por letra en el teclado. Es normal que haya errores, por lo que el servicio al cliente debe ser. Se prueba y los puntos problemáticos descubiertos durante la prueba se compilan en documentos y se entregan a los programadores para su reparación. Gerente de Producto Junior - Cómo dibujar prototipos AXURE de manera eficiente
Un prototipo es una solución específica a 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 los productos de nuestra empresa utilizan Axure. Con este software se pueden realizar muy bien prototipos de alta o baja fidelidad. Entonces, ¿qué tipo de prototipo es adecuado para la comunicación del equipo?
Después de todo, el prototipo dibujado no es solo para que usted lo vea, sino que también se lo explica a los miembros del equipo, UI/front-end/desarrollo. Especialmente cuando se realizan revisiones en grupo, al demostrar el prototipo, es necesario explicarles la lógica interna del producto, páginas específicas, animaciones, etc. También es necesario preguntarles si el diseño es razonable y si se puede implementar. , etc., y escuchar atentamente sus opiniones. En este momento, el prototipo es una herramienta para pensar la comunicación, traducir e inculcar sus ideas a los miembros de su equipo. Del mismo modo, los prototipos también son una herramienta de comunicación para el equipo. Para los prototipos dibujados, todos pueden hablar sobre sus opiniones, intercambiar ideas y mejorar las deficiencias de los prototipos.
Por eso, cuando se dibuja un prototipo, deben existir unos estándares básicos de entrega.
1. Estándares básicos de entrega para el diseño de prototipos
1. Claridad: permita que otros comprendan qué hace el producto, qué funciones incluye y qué páginas tiene.
Es necesario expresar claramente qué módulos de contenido tiene la página
Es necesario expresar claramente los componentes internos del módulo
2. ----Permítales a sus compañeros de equipo conocer los requisitos específicos y guiarlos sobre cómo hacerlos
1 Operaciones funcionales
Qué operaciones se pueden realizar en una determinada función, haga clic/coloque el mouse/arrastre , etc., y cuál será la reacción de la página. (Para facilitar el trabajo de desarrollo).
2 Ruta de operación
Algunas operaciones requieren saltos de página. La ruta de salto debe estar claramente marcada, dónde salta, qué páginas están involucradas y cómo están relacionadas. Evite que los usuarios se pierdan.
3 Estado del clic
Algunos enlaces y botones deben indicar cómo se ven inicialmente, qué efecto tiene el desplazamiento del mouse (color/subrayado/mensaje, etc.) y el estilo del clic. cambia y el estilo después de hacer clic. (Estos pueden proporcionar comodidad para el trabajo inicial)
4 Combinación de información
La información relevante debe combinarse, como información básica, nombre/género/edad, etc. Lo mejor es juntarlos, no separarlos. Mantenga su distancia irrelevante.
5 Ordenación por posiciones
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 del usuario. Para algunos datos, puede pensar en cómo están organizados y ordenados para facilitar la búsqueda de los usuarios. Todavía está "centrado en el usuario".
3. Minuciosidad-----No se pueden ignorar todos los detalles del producto
1 Estado de interacción
¿Cuál es el estilo de interacción para algunas operaciones importantes? ¿Cuál es el efecto? Es mejor extraerlo por separado y hacerlo en alta fidelidad y mostrárselo a otros para que puedan tener una experiencia y una sensación profunda del producto.
2 Visualización de datos
Se deben preparar los datos relevantes involucrados en el prototipo con casos reales, y se deben mostrar todos los datos clave que se necesitan obtener, como un artículo, los datos requeridos: autor, tiempo de publicación, número de vistas, número de me gusta, número de colecciones, etc., para facilitar el desarrollo y la preparación de las interfaces de datos necesarias.
3 Consideraciones anormales
Es necesario considerar la respuesta a algunas emergencias, como desconexión, carga lenta, datos eliminados, no se pueden encontrar datos, no hay derechos de acceso, etc. . Condición.
4 páginas de soporte
Algunas funciones 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 la página en el teléfono móvil wap, el contenido y estilo de algunos mensajes/mensajes de texto enviados al usuario, etc.
4. Estética básica
1 Alineación
2 Espaciado
3 Color
4 Fuentes
Te recomiendo que leas libros fáciles de usar como "Libro de diseño para todos".
5. Especificaciones básicas
1 Tamaño de página
El ancho de la web es 960px, 1000px, 1200px y las Apps incluyen Android, iphone5, iphone6, etc., que deben ser consistentes con los existentes. Algunos productos mantienen un tamaño uniforme.
2 Tamaño de fuente
El título puede ser de 18px o 16px y el contenido puede ser de 14px. Es necesario considerar si el usuario puede verlo con claridad y también considerar la estética.
3 colores
No tengas demasiados colores en el prototipo. Cíñete a negro, blanco y gris. Puedes usar otros colores a menos que quieras destacar.
4 ventanas emergentes
Lo mejor es unificar el estilo de tocar y cantar, y cerrar el nombre de la ventana emergente y el botón de operación de contenido
5 componentes
no están en el prototipo. Agregar demasiadas capturas de pantalla y estilos de íconos al texto 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 hábil seas en el uso de las herramientas, más tiempo. puedes pasar pensando en soluciones. A continuación se compartirán brevemente algunas operaciones rápidas al dibujar prototipos en Axure:
Primero, busque "Ver" en la barra de menú superior, muestre los componentes requeridos y luego podrá configurarlo.
1. Establecimiento de una biblioteca de componentes (puede mejorar la eficiencia y garantizar la uniformidad a nivel de producto)
2. Uso de la versión maestra (aplicable a partes comunes a varias páginas, después de la modificación, Actualización automática colectiva)
3. Establecer el estilo de la página (la fuente y el fondo de la página se pueden configurar al mismo tiempo)
4. Estilo interactivo de los componentes
5. Combinación de componentes
Utilice el mouse para encuadrar los originales que desea combinar y mantenga presionada la tecla Ctrl G. Una vez combinados, se pueden copiar y arrastrar fácilmente. Mantenga presionada la tecla Ctrl Shift G, o haga clic para seleccionar y luego haga clic en los dos íconos en la imagen a continuación para combinar y desagrupar.
6. Alinear, centrar y distribuir uniformemente
Selecciona el contenido que deseas alinear y selecciona un estilo de distribución para obtener rápidamente un estilo de prototipo ordenado sin tener que ajustar manualmente cada uno. .
7. Configuración del tipo de cuadro de entrada (tipo predeterminado)
Es posible que algunos cuadros de entrada necesiten configurar el texto predeterminado. Puede seleccionar directamente el cuadro de entrada y configurarlo en las propiedades originales. Texto rápido y algunas restricciones.
8. Avisos de componentes
Algunos textos requieren la acción de pasar el mouse para mostrar el aviso. Puede configurar directamente el "mensaje original" en las propiedades del original e ingresar el. contenido a mostrar, eso es todo.
3. El proceso de creación de un prototipo
1. Clasificar los puntos de función -------------------Convertir el requisitos en una lista de funciones, marque el nivel de importancia (siempre que los requisitos se hayan ordenado claramente)
2. Planifique la estructura del producto---------------. -Utiliza Xmind o lápiz y papel para dibujar. Hay varias páginas para el producto, y ¿qué elementos se incluyen en cada página?
Organiza el directorio del prototipo----------- -----Utilice Axure para agregar varias páginas del prototipo. Considere la relación de salto entre páginas
4. Diseñe el diseño de la página (cuadrícula): use bloques y cuadros de diferentes colores para indicar qué secciones. esta parte representará y diseñará bien el diseño de la página
5 Complete los detalles de cada módulo----------completa la información y los datos específicos en el cuadro
.6. Agregar una pequeña cantidad de acciones interactivas-------------Reflejadas en algunas operaciones relacionadas con las tareas
7. -------Descripción de interacción perfecta
8. Revisar la autocomprobación------------------Si las funciones están completamente cubiertas; falta la página; si el proceso es claro; si el estado está completo
p>
4. Experiencia en aplicaciones prototipo
Porque soy el principal responsable de la optimización del respaldo. -End Systems, me ocupo directamente del desarrollo. Si se trata de la página de inicio, la interfaz de usuario primero debe convertir el prototipo en una imagen, y luego el front-end producirá una demostración que contiene efectos dinámicos y el desarrollo. basarse en la demostración. Pero no importa cuál dibujes, el prototipo que dibujes debe hacer 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 y me llevó más de una semana dibujar el prototipo completo con varias acciones e interacciones, quería hacer un producto virtual. Sin embargo, después de hablar con los desarrolladores sobre el prototipo, cuando llegó el momento de aceptar el proyecto, descubrí que la mayoría de los desarrolladores no siguieron las acciones del prototipo, e incluso se omitieron los detalles. Después de apresurarme a compensarlo uno por uno, comencé a pensar si este método no era rentable, requería demasiado trabajo y los resultados no eran buenos.
Más tarde miré los prototipos dibujados por mis superiores. Todos estaban basados en páginas estáticas, lo que se puede decir que es de baja fidelidad, pero cada situación estaba descrita en detalle con imágenes y texto, y qué. sucedió después de hacer clic. Parece qué datos se obtendrán y qué sucederá si falla. Y de esta forma se completa muy rápidamente. Entonces elegí el modo de baja fidelidad y comencé a dibujar prototipos. Resultó que a veces el desarrollo no lograba completar bien algunas acciones.
Así que comencé con el "prototipo estilo T". Los "prototipos tipo T" se implementan en su mayoría con baja fidelidad, presentan directamente la lógica de todo el producto y luego utilizan descripciones de alta fidelidad en algunos lugares que deben resaltarse. Entonces, la mayoría de mis prototipos son una combinación de anotaciones de baja fidelidad y demostraciones de acciones de alta fidelidad. Sin embargo, para productos con interacciones simples, los modelos de baja fidelidad son suficientes.
Los hábitos y estilos de creación de prototipos son diferentes para cada producto, pero la clave es realizar reuniones grupales para explicar el prototipo y la lógica a los compañeros de equipo. Durante el proceso de desarrollo, se requiere más comunicación.
Además, comparte con todos sobre el sitio web de aprendizaje AXURE, donde puedes 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 un mensaje. Cíñete a lo que te gusta, continúa ~
.