Tutorial de creación de prototipos de aplicaciones Axure: cómo utilizar Axurerp para crear prototipos de aplicaciones ios

Primero, necesitamos exportar el archivo desde Axure.

Paso 1: Haga clic en (Publicar) en Axure para generar el archivo prototipo. Paso 2: cree una carpeta en blanco como ubicación de exportación, haga clic en "Publicar en local", se comprimirá todo el archivo generado, seleccione el formato de archivo comprimido ZIP, tenga en cuenta que no se puede cifrar. A continuación, exportaremos e importaremos el archivo Axure en Pixso: Método 1: arrastre y suelte directamente en el banco de trabajo de Pixso e importe el archivo Axure con un clic. Método 2: importe archivos Axure con un clic y la nube se cargará sin problemas, ahorrando tiempo y realizando una migración eficiente. Abra el banco de trabajo, haga clic en el botón (Importar archivo) en la página de inicio, seleccione un archivo Axure e impórtelo. O utilice la función de importación de archivos en la barra de menú para importar el archivo Axure a Pixso y abrirlo.

Si eliges la herramienta de diseño de prototipos adecuada, ¡crear prototipos puede ser muy sencillo! La elección inteligente es resolver las necesidades más importantes con el mínimo costo. Pixso es gratuito, tiene un bajo costo de aprendizaje y tiene funciones poderosas y completas. Creo que si eres inteligente, puedes usarlo para crear un prototipo de diseño de interacción satisfactorio. ! Cómo usar axurerp para hacer un prototipo de iosapp

La versión de Apple de la interfaz axure no es muy diferente de la versión de Windows. La interfaz es más simple y la sensación familiar es mejor que la del sistema win. Cree su propia biblioteca de componentes

La función principal de la herramienta de creación de prototipos es demostrar la forma objetivo y el efecto del producto mediante la combinación y el apilamiento de componentes. axure solo viene con algunos de los componentes más básicos y la biblioteca de componentes en Internet es muy compleja

Es difícil encontrar componentes que satisfagan sus necesidades y satisfacción, y la mayoría de ellos están en formato de mapa de bits y No se puede modificar el color, el ancho y otros valores para crear el componente. La mayoría de ellos están en formato de mapa de bits, sin posibilidad de modificar el color, el ancho u otros valores, entonces, ¿cómo puede la interacción alcanzar el nivel requerido de sofisticación?

Afortunadamente, axure proporciona la función "Crear biblioteca de componentes" para respaldar la creación de nuestra propia biblioteca de componentes. Podemos usar los componentes básicos que vienen con el software para combinar y combinar nuestros íconos y controles de uso común. Una vez completada la producción, el color, el tamaño y el ancho de las líneas se pueden ajustar de acuerdo con la situación real cada vez que se aplica. , para lograr un estilo unificado y una interacción perfecta.

Por ejemplo, alguna página de inicio, compartir, buscar, enviar mensajes... a menudo se usan varios íconos en la aplicación, o cada vez que encuentres un ícono que te guste, puedes usar axure para dibujarlo en caso de emergencias. Tomemos los íconos como ejemplo para hablar sobre los pasos específicos para crear una biblioteca de componentes.

1. Cree el "archivo verde" de la biblioteca de componentes.

Abra axure y busque la función "Crear biblioteca de componentes" en la opción desplegable de "Tres líneas horizontales". en el panel de la biblioteca de componentes. Después de hacer clic, aparecerá el cuadro de diálogo 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 archivo tiene la extensión .rplib, que es el formato de la biblioteca y es diferente al formato .rp de los archivos normales de axure utilizados para crear prototipos interactivos.

Después de ingresar el nombre del archivo y la ubicación de almacenamiento y hacer clic en Guardar, Axure volverá a abrir una nueva página para editar el componente. Como podemos ver, la nueva página es exactamente la misma que usaríamos normalmente para crear un archivo .rp normal.

Pero no te confundas, esta página está editando los componentes básicos que necesitamos. para usar en un archivo .rp normal. Si volvemos a la ubicación del repositorio, podemos ver que la imagen del archivo bibliotecas.rplib está marcada en "verde", a diferencia del color azul del archivo .rp.

Se ha creado el "archivo verde" de la biblioteca de componentes. Se han completado los preparativos básicos.

2. Agrupación de bibliotecas de componentes

Al observar la biblioteca de componentes predeterminada de axure, podemos encontrar 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., para que podamos encontrar la ubicación del componente de destino más fácilmente.

De manera similar, al crear una biblioteca de componentes, también podemos agruparla de acuerdo con las siguientes reglas: En el panel de navegación de la página, todas las carpetas son un grupo, pero no todas las páginas de la carpeta (incluidas todas sus subpáginas). ) pertenecen a un grupo que lleva el nombre de la biblioteca de componentes.

Después de comprender las reglas de agrupación, primero podemos hacer agrupaciones razonables de acuerdo con la biblioteca de componentes que planeamos. Por ejemplo, al crear una biblioteca de componentes de una aplicación, podemos dividirla en tres agrupaciones de uso común: íconos y controles. y marcos. Luego se divide en procesos de producción de componentes específicos.

3. Componentes de edición y producción

Tomemos como ejemplo cómo crear un ícono de avatar "Mi". Primero, agregue una página en el grupo de íconos y asígnele el nombre "Mi", doble. -Haga clic en Ingresar a la página de edición del componente y realizar operaciones de edición. Podemos referirnos a algunas aplicaciones que suelen utilizar archivos .rp como referencia. Podemos consultar los estilos de íconos "Mi" que se usan 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 combinar y unir

hasta el aspecto final más ideal.

En primer lugar, debemos dejar claro que no existe una operación booleana similar a ps en axure (la capacidad de editar libremente múltiples formas, como fusionar, intersecar, restar capas superiores, etc.), por lo que esto hará que nuestro trabajo de edición traiga grandes dificultades. ), por lo que nos traerá ciertas limitaciones en la creación de componentes, especialmente sus íconos, pero afortunadamente, la interacción del prototipo no requiere la implementación de detalles duros, siempre y cuando podamos expresar claramente lo que el producto debe ser Si podemos expresar claramente la forma del producto y tener un estilo más general, estaremos bien. Usamos axure

para esbozar la forma básica del ícono nosotros mismos. Podemos ajustar fácilmente el color y el tamaño, etc., y aplicarlo a diferentes archivos interactivos. Es difícil encontrar mapas de bits ya preparados. Iconos de Internet La conveniencia de la implementación.

Volviendo a "mi" producción de íconos, como se muestra en la imagen, utilicé tres gráficos básicos para unirlos y finalmente los combiné en el estilo de ícono que vemos a menudo, y puedes entender su significado en una mirada. Aunque no hay más detalles que implementar, es completamente suficiente para prototipos interactivos. La clave es que el tamaño del color se puede modificar de manera muy flexible.

Siguiendo esta idea, podemos crear más íconos y, por supuesto, también podemos crear algunos controles de uso común, 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é durante el dibujo del prototipo "Grabar después de leer":

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

4. Cargue la biblioteca de componentes y úsela

Una vez creada la biblioteca de componentes, guárdela en la carpeta de recursos que utiliza habitualmente. 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 que acabamos de cargar en la opción desplegable "Seleccionar biblioteca" y seleccionarla. En este momento, podemos usar la biblioteca de componentes que viene con el software y es la misma. Como biblioteca de componentes que utilizamos nosotros mismos.

¿Qué te parece? Después de leer esto, deberías haber aprendido cómo crear una biblioteca de componentes. Espero que puedas tomarte el tiempo para crear una. Por supuesto, además de crear bibliotecas de componentes, Axure también tiene muchas habilidades que dominar, como dominar funciones.

Aprenda a hacer un buen uso del dominio

En el proceso de diseño de un producto, la navegación principal suele aparecer en varias páginas, como la barra de pestañas en la parte inferior de la aplicación. Por supuesto, no se trata solo de navegación; cuando usamos cualquier conjunto de controles con frecuencia, es de esperar que no copie y pegue todo el tiempo, y siempre tenga en cuenta que podría ser mejor crear un maestro.

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, te enamorarás del Eficiencia de modificar el maestro. No puedo dejar de usar esta función.

Además de aprender a utilizar la placa maestra, también debes aprender a hacer un buen uso de la placa maestra. Otra cosa que espero que todos recuerden es no convertir una combinación demasiado grande de objetos en un maestro. Porque cuanto mayor sea la combinación de objetos, más probable será que sea necesario modificar muchos lugares del maestro

. En este momento, generalmente es una mejor manera de fusionar algunas placas base con otra placa base, para que el cambio de placa base sea más flexible. Como se muestra en la figura siguiente, la información básica del producto y la posibilidad de compra están separadas. por dos placas base

, combinadas para formar una página de producto completa

Desarrolla tu propio estilo interactivo

Aprende también a crear tu propia biblioteca de componentes

Aprender a hacer un buen uso de la placa master, también

Debemos hacer un buen uso de la placa master, también

Podemos hacer un buen uso de la placa master. Aprendí a crear mi propia biblioteca de componentes, aprendí a aprovechar al máximo los masters y por supuesto muchos otros consejos para utilizar el software axure. Debería poder completar un prototipo interactivo rápidamente, ¿verdad? Pero ¿cómo se asegura de que la entrega sea consistente y logre objetivos de alto nivel?

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 generales de diseño de control.

De esta manera, podemos diseñar productos que se ajusten a las características de la plataforma y, según la comprensión inherente de las plataformas relevantes, también es fácil lograr una comprensión de ****. Éste es también el objetivo de los prototipos interactivos como productos de comunicación.

Basado en la familiaridad de la aplicación con las especificaciones de diseño y durante el proceso de producción, forma su propio estilo interactivo basado en los escenarios de uso y los propios hábitos. Por ejemplo, puede definir un prototipo de aplicación, usar el tamaño de fuente Microsoft Elegant Black #33333313 como fuente para el texto principal y usar el color Microsoft Elegant Black #999999 como texto de solicitud.

10 Fuente tamaño, altura de línea fija de la barra de la aplicación a 40 px, distancia desde el borde de la pantalla en el lado izquierdo del contenido a 10 px….

Por supuesto, algunas de las especificaciones, como las fuentes, también se pueden utilizar como componentes de fuentes y colocar en nuestra biblioteca de componentes de creación propia. En resumen, se pueden utilizar de forma flexible según su propia situación. Después de tener un conjunto de estilos y crear la biblioteca de componentes, el color y el tamaño se pueden modificar a voluntad. Creo que el prototipo interactivo producido debe ser un todo coordinado y unificado.

Lea el prototipo diariamente

Después de dominar los métodos teóricos, aún necesita capacitación práctica para absorberlos y comprenderlos mejor. El autor se refirió a la versión de iOS "Reading Daily" y dibujó algunos prototipos interactivos en algunas páginas principales. El proceso básico y las ideas son los mencionados en este artículo.

Para tener una mejor imagen, encontré un marco de iPhone en Internet, creé mi propia biblioteca de piezas y dibujé algunos iconos y controles de uso común. Luego, establezca el estilo general Durante el proceso de producción, también se utilizan algunos patrones para mejorar la eficiencia. Al mismo tiempo, puede utilizar líneas auxiliares para ayudar a garantizar la alineación y distribución uniforme de sus piezas para mejorar la estética del diseño.

Al final, mencioné al principio la metodología de cómo usar axure para crear rápidamente prototipos interactivos de aplicaciones: crea tu propia biblioteca de componentes y aprende a hacer un buen uso de la placa base, familiarízate con el diseño de aplicaciones. especificaciones y tenga su propio conjunto de estilos de estilo interactivos.

¿Cómo hacer prototipos interactivos en axure?

Abra Axure8 (lo mismo ocurre con axure7). El valor predeterminado es crear un nuevo proyecto y buscar el componente "Panel dinámico", como se muestra a continuación:

Arrastre el componente a. abra el espacio de trabajo y siga las instrucciones de la imagen. Asigne un nombre arbitrario al panel dinámico: Panel de prueba

Haga doble clic en el componente del panel dinámico, aparecerá estado1, haga doble clic para ingresar a estado1 Editar: