Dibujo de diseño de prototipo: cómo diseñar un dibujo de prototipo de página web
Diseño de producto | Ventajas y desventajas de 6 tipos de dibujos de prototipos
En el proceso de diseño de productos en Internet, he visto más de 6 formatos comunes de dibujos de prototipos.
Sus ventajas y desventajas se presentan a continuación:
Puedes leer y editar prototipos de Axure en otra computadora;
En el modo de vista previa de Axure, puedes mostrar los directorio de páginas web en el lado izquierdo del navegador;
El software Axure tiene versión para Mac y versión para Windows.
Si la computadora del colega que recibe el archivo no tiene Axure instalado, no se puede abrir;
En la ventana de chat de WeChat móvil, el prototipo de Axure no se puede leer directamente;
Axure con una versión inferior no puede abrir archivos de Axure con una versión superior.
Puedes leer y editar prototipos de Sketch en otra computadora Mac;
Los diseñadores de UI pueden convertir prototipos en UI de alta fidelidad directamente en el borrador de Sketch Design;
Tú Puede exportar dibujos de prototipos PDF de varias páginas en formato PDF.
Solo se puede leer y editar en ordenadores Mac. Actualmente no existe una versión para Windows del software Sketch y no se admite la edición en computadoras con Windows;
No puedes leer los prototipos de Sketch directamente en la ventana de chat de WeChat de tu teléfono móvil;
Si Si tiene una versión inferior de Sketch, no podrá abrir un archivo de Sketch de una versión superior.
Puedes leer y editar prototipos en formato PPT en una computadora Mac o Windows;
Leer prototipos en formato PPT directamente en la ventana de chat de la aplicación WeChat en tu teléfono móvil;
Puedes importar el prototipo dibujado a PPT a través de otro software.
El área de la página ppt es demasiado pequeña y no admite la expresión de relaciones de salto entre varias páginas, es difícil operar el zoom de la página;
Hay muy pocos controles de dibujo en PPT y es difícil hacer dibujos. La herramienta está profundamente oculta y es incómoda de operar;
Se puede abrir con un navegador en cualquier computadora y el prototipo HTML se puede leer directamente. ;
No se puede utilizar en la ventana de chat WeChat del teléfono móvil. Lea directamente el diagrama del prototipo del paquete comprimido HTML;
Primero puede utilizar Axure para diseñar el prototipo. diagrama y luego exporte el formato de página web HTML.
No se admite la reedición de la página web y el directorio de la página web no se admite en el lado izquierdo del navegador;
El paquete comprimido del prototipo HTML la imagen recibida por correo electrónico debe descomprimirse y luego muchos En los archivos de la página web, haga clic para verlos uno por uno;
La relación de salto entre páginas es difícil de expresar con claridad.
Puedes leer y editar prototipos en formato jpg en cualquier ordenador;
Envía prototipos en formato de imagen por correo electrónico y los archivos pueden ser muy pequeños;
Puede leer directamente el prototipo en formato jpg en la ventana de chat WeChat de su teléfono móvil;
Primero puede utilizar otro software para diseñar el prototipo y luego exportarlo al formato de imagen jpg.
En la computadora, el formato de imagen es más difícil de operar: por ejemplo: ajustar al 100% del tamaño y mover hacia la izquierda y hacia la derecha para ver la relación de salto de página;
En la teléfono móvil, al enviar a través de WeChat, se comprimirá un diagrama prototipo en un formato de imagen grande con una relación de proceso, lo que hará que no quede claro después de ser recibido por WeChat.
Puede exportar el prototipo dibujado a formato PDF a través de otro software;
Se puede leer en Windows o Mac; software compatible: AdobeReader, Foxit PDF, Acrobat;
Puede leer dibujos de prototipos en formato pdf en su teléfono inteligente; admite software de aplicaciones móviles: WPS, Acrobat e incluso la ventana de chat de la aplicación WeChat, envíelo directamente y la otra parte lo abrirá directamente.
En la computadora, la página se puede ajustar fácilmente al 100% del tamaño y la página se puede mover hacia la izquierda y hacia la derecha para ver la relación de salto;
El software de vista previa de PDF que viene con computadoras Mac puede fusionar varios archivos PDF, rotar una página interna del PDF;
La versión para computadora del software Foxit PDF puede agregar texto de anotación a las páginas internas del PDF y agregar enlaces de directorio en el lado izquierdo del PDF de varias páginas.
Si necesita volver a editar una determinada página en el PDF, debe extraer una determinada página del archivo PDF de varias páginas y luego fusionarla en el archivo PDF de varias páginas después de la modificación. ;
Para leer archivos PDF en la computadora y en el teléfono móvil, es mejor tener instalado un lector de PDF profesional.
El diagrama prototipo del diseño de productos de aplicaciones se centra en expresar el significado, siempre que el significado se transmita en su lugar, el formato no importa.
El formato del diagrama prototipo pertenece a los tres niveles de "Tao", "Dharma" y "Qi".
Si quieres ir más allá en la experiencia del usuario, entonces necesitas acumular más experiencia en proyectos en los dos niveles de "Tao" y "Fa", así como la forma de pensar en diferentes posiciones. ideas de comunicación. Cómo abrir el prototipo de axure design
El primer paso es, por supuesto, descargar, instalar, localizar y activar. No entraré en detalles sobre estos, hay muchos en Baidu. El autor también tuvo una experiencia de descarga antes, puedes consultarla.
Hablemos del diseño básico. Hay muchos cambios entre 8.0 y 7.0:
Área de anotación de íconos 1: barra de menú
Área de anotación de íconos 2: Liberación. Área
Área de anotación de iconos 3: área de edición de demostración de componentes (edición de alineación, tamaño, color, etc.)
Área de anotación de imágenes 4: columnas de página, generar mapa del sitio después de la publicación ( Puede cancelar la visualización)
Área de anotación de imagen 5: Biblioteca de componentes (puede crear su propia biblioteca de componentes o cargar las bibliotecas de componentes de otras personas. Cuanto más clara sea la clasificación de la biblioteca de componentes, más rico será el contenido). Hacemos que el Prototipado también sea más rápido.
Área de anotación de íconos 6: área de trabajo de la página, área de visualización de contenido posterior a la publicación
Área de anotación de íconos 7: agregue eventos interactivos a componentes o páginas, agregue notas y establezca el estilo de los componentes de edición
Área de anotación de imagen 8: Resumen, diagrama de organización de componentes de la página actual, similar al panel de capas en PS
Área de anotación de imagen 9: Maestro (use DW si ha trabajado en un sitio web, debe quedar muy claro que el master es similar a un componente, y tiene las características de editar en un solo lugar y modificar muchos al mismo tiempo).
En los siguientes pasos, explicaremos brevemente el uso de cada área de anotación:
2
Área de anotación de iconos 4: columnas de página
Descripción básica: Las columnas de la página pueden entenderse como directorios Para organizar y administrar el prototipo con mayor claridad, al publicar y generar, se generan las columnas de la página: mapa del sitio.
En la columna de página, podemos crear carpetas y páginas (ver marca 1 en la figura), y arrastrar cualquier página o carpeta para cambiar su nivel (ver marca 1 en la figura) Anotación 2):
FIN
Instrucciones de funcionamiento básicas de la biblioteca de componentes
1
Área de anotación de imagen 5: biblioteca de componentes
p>Cree una biblioteca de componentes (Figura 1) y asígnele un nombre (Figura 2)
2
Después de guardar correctamente, Axure abrirá automáticamente el panel de edición de la biblioteca de componentes (básicamente el mismo que el biblioteca de prototipos consistente):
3
Organiza la biblioteca según "columnas de página" Nota: La carpeta es el título de clasificación de la biblioteca de componentes
4.
Agregar: botón, carpeta. Componentes de botones redondeados, componentes de botones en ángulo recto:
Y organícelos según el diagrama:
5
Cierre y guarde la biblioteca de componentes, regrese al espacio de trabajo y siga el diagrama. Haga clic en: Actualizar la biblioteca de componentes (cargada de forma predeterminada cuando se crea). Después del éxito, como se muestra en la siguiente figura: 1 es el nombre de la biblioteca del componente. 2 es el nombre de la carpeta nombrada y el nombre de la biblioteca de componentes de 3 dígitos
6
Lo anterior completa la creación y edición de la biblioteca de componentes.
Echemos un vistazo a la carga:
Carga y descarga de la biblioteca de componentes localmente
Haga clic en "Cargar biblioteca de componentes", se abrirá automáticamente el local y encontrará la biblioteca de componentes. Cualquier lugar está disponible.
Haga clic en "Descargar biblioteca de componentes": se conectará automáticamente al sitio web oficial de Axure y lo descargará manualmente
END
Ver
Esta columna contiene: Propiedades del componente, notas del componente, edición de estilo del componente
Propiedades del componente:
Arrastramos un botón desde la biblioteca de componentes creada al espacio de trabajo y verá las propiedades mostradas. en la siguiente figura:
Anotación 1: Nombre del componente (se recomienda escribirlo, motivo: los nombres de los botones son diferentes cuando se usa el mismo componente con frecuencia)
Anotación 2: Eventos interactivos, comúnmente utilizado y muy importante, correspondiente a cada tipo de componente Los eventos de interacción son ligeramente diferentes, es decir, los atributos de los componentes son diferentes
Anotación 3: estilo de interacción (mouse sobre, clic, después de hacer clic)
La columna de descripción es una nota sobre el componente. Puede agregar comentarios para que la interfaz de usuario o el programa comprendan mejor sus intenciones:
3
Barra de estilo: Establecer el fondo, borde, color, tamaño, etc. del componente actual: 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 valor de abrirla. 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. 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 lo que se almacena en cada módulo debe ser un 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 ⑥0202 Proceso de página: 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.