plantilla de diagrama de prototipo de axure: cómo utilizar Axure para crear rápidamente prototipos interactivos de aplicaciones

¿Cómo utilizar AxureRP8 para crear un prototipo de página de inicio de sesión simple?

Al usar AxureRP8 para construir prototipos, debe mencionar el uso de bibliotecas de componentes. Para Axure, la biblioteca de componentes es en realidad equivalente a la barra de herramientas para diseño gráfico hasta cierto punto. en la página Para construir un prototipo simple, el uso de componentes en la biblioteca de componentes es esencial. Al igual que construir un prototipo de bloque de construcción, el principio de los bloques de construcción es el mismo. Bien, veamos cómo usar los componentes en la biblioteca de componentes. para construir un prototipo. Diagrama de prototipo simple. Los pasos específicos son los siguientes:

1. La posición debajo de la esquina superior izquierda de todo Axure es la posición de la página. Generalmente, el sistema tiene como valor predeterminado tres. Por supuesto, también puede copiar muchas páginas. Haga doble clic en la primera página y crearemos un prototipo simple. en la página actual.

2. Seleccione el componente del rectángulo 2 en la biblioteca de componentes, arrástrelo al lienzo y dibuje el tamaño correspondiente según el tamaño que necesite. Aquí, elige utilizar el tamaño 1920*1080. que también es el tamaño de resolución de la versión iPhone plus se puede ajustar en consecuencia como se muestra en la imagen.

3. Seleccione el marcador de posición. Los marcadores de posición generalmente representan la ubicación de las imágenes en el prototipo. Los marcadores de posición se utilizan aquí para representar información como los logotipos que aparecen a menudo en la página de inicio de sesión. Por supuesto, si desea hacerlo más hermoso, también puede optar por utilizar imágenes.

4. Seleccione dos componentes, el rectángulo 1 y el cuadro de texto, para crear y mostrar la posición de inicio de sesión. Específicamente, haga doble clic en el componente para editar el componente rectangular. Aquí elegimos establecer el rectángulo en la palabra. acceso.

5. Haga clic en el componente y mantenga presionada la tecla Ctrl al mismo tiempo para copiar un componente. Específicamente, con este método, puede crear más fácilmente un efecto de visualización de contraseña.

6. Cree un botón clave, que es el botón de inicio de sesión. Una vez que se completa el arrastre, lo llamamos Iniciar sesión ahora. Específicamente, una vez completada la creación, presione F5 y haga clic en Publicar, y podremos usar la página web para abrir nuestro prototipo y ver el efecto de visualización. Diseño de prototipo de Axure móvil de gestión de tareas

Esta es una plantilla de prototipo de alta fidelidad de una aplicación de gestión de tareas creada con Axure8, que incluye cuatro módulos principales: tareas pendientes, programación, estadísticas y yo. Como prototipo de herramienta eficiente, se han reflejado las funciones principales y el estilo general es fresco y conciso y se puede ampliar como plantilla para la producción de prototipos móviles.

Además, este trabajo también contiene una variedad de componentes móviles de uso común, como navegación estilo palacio, calendarios, repetidores, formularios, paneles de acción, gráficos, tarjetas, etc., que se pueden copiar o copiar directamente. arrastrado Se utiliza en proyectos y también es una plantilla amigable para que los principiantes comiencen con la interacción de Axure.

Haga clic aquí para obtener una vista previa del prototipo completo

Algunas imágenes muestran cómo usar Axure para crear rápidamente prototipos interactivos de aplicaciones

Cree su propia biblioteca de componentes

La función principal de las herramientas de creación de prototipos no es más que demostrar la forma objetivo y el efecto del producto mediante el apilamiento y la combinación de componentes. Axure solo viene con algunos de los componentes más básicos, pero la biblioteca de componentes en Internet es enorme y confusa. Es difícil encontrar componentes que satisfagan sus necesidades y sean satisfactorios. La mayoría de ellos están en formato de mapa de bits y el color no puede ser. modificado en absoluto.Ancho y otros valores, ¿cómo puede la interacción producida cumplir con los requisitos de nivel exquisito?

Afortunadamente, Axure proporciona la función "Crear biblioteca de componentes", que puede ayudarnos a crear una biblioteca de componentes de nuestra propio. Podemos combinar los componentes básicos que vienen con el software para combinar nuestros íconos y controles de uso común. Una vez completada la producción, el color, el tamaño y el ancho de la línea se pueden ajustar de acuerdo con la situación real cada vez que se aplica, de modo que. el borrador interactivo puede ser unificado y perfecto.

Por ejemplo, las aplicaciones suelen utilizar alguna página de inicio, compartir, buscar, enviar mensajes... varios iconos, o cada vez que encontramos un icono que nos gusta, podemos usar Axure para dibujarlo cuando sea necesario.

A continuación se utilizan iconos como ejemplo para describir los pasos específicos para crear una biblioteca de componentes.

1. Cree una biblioteca de componentes "archivo verde"

Abra Axure, busque la función "Crear biblioteca de componentes" en la opción desplegable del botón "Tres líneas horizontales" en en el panel de la biblioteca de componentes, haga clic en él y aparecerá una ventana emergente. Un cuadro de diálogo para guardar como, donde deberá seleccionar la ubicación de almacenamiento del archivo de la biblioteca de componentes e ingresar el nombre de la biblioteca de componentes.

En este punto, podemos ver que el sufijo del archivo es .rplib. Este es el formato de la biblioteca de componentes, que es diferente del formato .rp de los archivos Axure normales al crear prototipos interactivos.

Después de ingresar el nombre del archivo y la ubicación de almacenamiento, haga clic en Guardar y Axure volverá a abrir una nueva página para editar el componente. Y podemos ver que la nueva página es exactamente la misma que la página que usamos habitualmente para crear archivos .rp normales, pero no se confunda, la página editada en este momento son los componentes básicos que necesitamos usar en el .rp normal. archivos. Y cuando regresamos a la ubicación donde está almacenada la biblioteca de componentes, podemos ver que la imagen del archivo .rplib de la biblioteca de componentes

está marcada como "verde", que es diferente del color azul del archivo .rp. .

Después de crear el "archivo verde" de la biblioteca de componentes, se completó el trabajo de preparación básica y ahora se ingresa al proceso de producción.

2. Agrupación de bibliotecas de componentes

Al observar la biblioteca de componentes predeterminada de Axure, podemos ver que su biblioteca de componentes se puede agrupar según categorías. Por ejemplo, el valor predeterminado se divide en: común, formulario, flujo, etc., lo que nos facilita encontrar la ubicación del componente de destino.

De manera similar, cuando creamos bibliotecas de componentes, también podemos agruparlas. Las reglas son: en el panel de navegación de la página, todas las carpetas son un grupo y todas las páginas que no están debajo de la carpeta incluyen otras todas las subpáginas. pertenecen al grupo denominado Biblioteca de componentes.

Después de comprender las reglas de agrupación, primero podemos hacer una agrupación razonable de acuerdo con nuestro propio plan para la biblioteca de componentes. Por ejemplo, si queremos crear una biblioteca de componentes de la aplicación, podemos dividirla en tres. Partes: íconos, controles y marcos. Grupos de uso común, luego ingresa al proceso de producción de componentes específicos.

3. Editar y crear componentes

Tomemos como ejemplo cómo crear un ícono de avatar "Mi". Primero, debajo del grupo de íconos, agregue una página y asígnele el nombre "Mi". Haga doble clic para ingresar a la página de edición del componente. La operación de edición es exactamente la misma que cuando normalmente creamos un archivo .rp normal. Podemos referirnos al estilo del ícono "Mi" que se usa a menudo en algunas aplicaciones y luego usar los componentes de forma básicos predeterminados de Axure, como rectángulos, líneas horizontales, círculos, etc., para combinarlos en el ideal final.

mira.

En primer lugar, debemos dejar claro que no existen operaciones booleanas en Axure similares a las de PS (puedes editar libremente múltiples formas, como fusionar, intersecar, restar capas superiores, etc. ), por lo que crearemos componentes para nosotros.

En particular, los íconos tienen ciertas limitaciones, pero afortunadamente, los prototipos interactivos no requieren detalles de implementación exigentes siempre que podamos expresar claramente la forma del producto y tener una. estilo relativamente general, es suficiente. Y los íconos que dibujamos nosotros mismos usando las formas básicas de Axure

pueden ajustar fácilmente el color, el tamaño, etc., y se pueden aplicar a diferentes archivos interactivos. Esta es una conveniencia que es difícil de lograr encontrando. iconos de mapa de bits listos para usar de Internet.

Volviendo a "mi" producción de íconos, como se muestra en la imagen, utilicé tres formas básicas para unirlas y finalmente las combiné en un estilo de ícono que vemos a menudo y puedes entender su significado en. una mirada. Aunque no hay implementaciones más detalladas, es completamente suficiente para prototipos interactivos. La clave es que el color y el tamaño se pueden modificar de manera flexible.

Siguiendo esta idea, podemos crear más íconos y, por supuesto, también podemos crear algunos controles comunes como botones, barras de aplicaciones, barras de búsqueda, marcadores de posición de íconos, etc. La siguiente imagen es una biblioteca de componentes que creé cuando estaba dibujando el prototipo de "Dudu Daily":

Una vez completada la biblioteca de componentes, es hora de ingresar al último paso.

4. Cargue la biblioteca de componentes hecha por usted mismo y úsela.

La biblioteca de componentes se crea y guarda en su carpeta de recursos de uso común. Abra un archivo .rp normal, busque también la función "Cargar biblioteca de componentes" en la opción desplegable del botón "Tres líneas horizontales" en el panel de la biblioteca de componentes y luego busque el "icono verde" del archivo de biblioteca de componentes completo para cargar .

Después de cargar, podemos encontrar la biblioteca de componentes que acabamos de cargar y seleccionarla en la opción desplegable "Seleccionar biblioteca de componentes". Luego podemos usar nuestros componentes caseros al igual que los componentes que vienen con el software. Biblioteca de componentes.

¿Qué te parece? Después de leer esto, deberías haber aprendido cómo crear una biblioteca de componentes personalizada. Espero que te tomes el tiempo para crear una. Por supuesto, además de crear una biblioteca de componentes, Axure tiene muchas habilidades que deben dominarse, como la función maestra.

Aprenda a hacer un buen uso del tablero maestro

En el proceso de diseño del producto, la navegación principal suele aparecer en varias páginas, como la barra de pestañas inferior de la aplicación. Por supuesto, no se trata solo de navegación. Cuando usamos cualquier conjunto de controles con frecuencia, espero que no esté copiando y pegando todo el tiempo. Recuerde siempre que crear un maestro puede ser una mejor opción.

La conveniencia de usar el maestro no es solo la capacidad de usar rápidamente un conjunto de controles, especialmente en las últimas etapas del diseño, cuando necesitamos modificar algunos controles básicos, la eficiencia de modificación que brinda el maestro Es seguro que te enamorarás profundamente de esta función y no podrás parar.

Además de aprender a utilizar la placa maestra, también debes aprender a hacer un buen uso de la placa maestra. También vale la pena recordar que no se deben convertir objetos compuestos que sean demasiado grandes en objetos maestros. Porque cuanto más grande sea el objeto combinado, más probable será que sea necesario realizar modificaciones en muchos lugares del maestro.

En este momento, generalmente es una mejor manera de fusionar algunos maestros con otro maestro, de modo que la modificación del maestro sea más flexible. Por ejemplo, en la figura siguiente, se muestra la información básica del producto y el posible estado de compra. separadas en dos partes

Plantillas maestras, combinadas para formar una página completa del producto

Desarrolla tu propio estilo interactivo

Aprendí a crear mi propio componente biblioteca y hacer un buen uso de ella Master, y por supuesto muchos otros consejos para usar el software Axure. Deberíamos poder completar un prototipo interactivo muy rápidamente, pero ¿cómo asegurarnos de que el borrador de entrega tenga un estilo unificado y alcance un nivel objetivo más alto?

En primer lugar, debemos estar familiarizados con el diseño de El estándar de aplicación está en línea con los conceptos de diseño de Android o iOS y tiene cierta comprensión de algunas reglas de diseño de control convencionales. Los productos diseñados de esta manera pueden estar en línea con las características de la plataforma y, en función de la comprensión inherente de todos sobre la plataforma relevante, es fácil lograr un entendimiento común. Este es también el objetivo que debe alcanzar un prototipo interactivo como entregable de comunicación.

Con base en la familiaridad con las especificaciones de diseño de la aplicación, al mismo tiempo, durante el proceso de producción, debe desarrollar su propio estilo de interacción según el escenario de uso y sus propios hábitos. Por ejemplo, en el prototipo de la aplicación, puede definir la fuente del texto principal para usar el tamaño de fuente del color #33333313 de Microsoft Yahei, el texto del mensaje para usar el tamaño de fuente del color #999999

10 de Microsoft Yahei y la barra de aplicaciones fija. línea La altura es de 40 píxeles y el contenido está a 10 píxeles del borde izquierdo de la pantalla...

Por supuesto, ciertas especificaciones, como las fuentes, también se pueden usar como componentes de fuente y colocar en nosotros mismos. Biblioteca de componentes creada en resumen, úsela de manera flexible según su propia situación. Después de tener un conjunto de estilos y agregar la biblioteca de componentes creada para modificar libremente el color y el tamaño, creo que el prototipo interactivo producido definitivamente será un todo coordinado y unificado.

Lea los prototipos diarios

Una vez que haya dominado los métodos teóricos, necesitará capacitación práctica para absorberlos y comprenderlos mejor. Dibujé algunos prototipos interactivos para algunas páginas principales con referencia a la versión iOS de "Dudu Daily". El proceso básico y las ideas son los mencionados en este artículo.

Para hacerlo más vívido, encontré un marco de iPhone en Internet, creé mi propia biblioteca de piezas y dibujé algunos iconos y controles de uso común.

Luego se estableció el estilo general y se utilizaron varios patrones durante el proceso de producción para mejorar la eficiencia. Al mismo tiempo, puede utilizar líneas auxiliares para garantizar la alineación y distribución uniforme de los componentes, mejorando así la estética del diseño.

Resumen

Al final, una vez más descarto la metodología que mencioné al principio, cómo usar Axure para crear rápidamente prototipos interactivos de aplicaciones: cree su propia biblioteca de componentes y aprenda para hacer un buen uso del maestro. Familiarícese con las especificaciones de diseño de la aplicación y tenga su propio conjunto de estilos interactivos.