Cómo utilizar Axure para crear rápidamente prototipos interactivos de aplicaciones

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 el ícono del archivo .rplib de la biblioteca de componentes es "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, por defecto 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 aspecto ideal final.

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 exigentes para su implementación, siempre que podamos expresar claramente la forma del producto y tener un 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 al encontrar íconos de mapa de bits ya preparados en el. 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 de la página maestra

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 debes convertir objetos compuestos que sean demasiado grandes en 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 de los maestros sea más flexible. Por ejemplo, en la figura siguiente, la información básica del producto y el posible estado de compra están separados en dos. masters., combinados para formar una página completa del producto

Desarrolla tu propio estilo de interacción

Aprendí a crear mi propia biblioteca de componentes y también aprendí a hacer un buen uso de ella. master y, por supuesto, hay otros muchos consejos para utilizar el software Axure. Debería ser posible completar un borrador de prototipo interactivo muy rápidamente, pero ¿cómo garantizar que el borrador entregado tenga un estilo unificado y alcance un nivel objetivo más alto?

En primer lugar, debemos estar familiarizados con las especificaciones de diseño de la aplicación, cumplir con los conceptos de diseño de Android o iOS y tener cierta comprensión de algunas reglas de diseño de control convencionales. Solo los productos diseñados de esta manera pueden ajustarse a las características de esta plataforma y, según 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 #333333 13 de Microsoft Yahei, el texto del mensaje para usar el tamaño de fuente del color #999999 10 de Microsoft Yahei, la altura fija de la línea de la barra de aplicaciones es de 40 píxeles y el 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 fuentes y colocarse en nuestra biblioteca de componentes de creación propia. En resumen, debemos utilizarlos con flexibilidad según nuestras propias circunstancias. 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.