Compartir tecnología

[PM]Creación de prototipos y diseño de interacción

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Clasificación de arquetipos

1. Prototipo de boceto

Dibujos dibujados a mano, utilizados en las primeras etapas de planificación, para organizar ideas.

2. Prototipos de baja fidelidad

Interacción simple, sin necesidad de combinar colores, principalmente negro, blanco y gris, utilizado en las etapas de planificación y revisión del producto.

Los prototipos estandarizados de baja fidelidad son la base de los prototipos de alta fidelidad

3. Prototipos de alta fidelidad

Interacciones complejas, generalmente utilizadas para manifestaciones públicas,

El producto primero produce un prototipo de baja fidelidad y el diseñador produce un borrador de diseño basado en el prototipo.

Prototipo de baja fidelidad + borrador de diseño = prototipo de alta fidelidad

Axure

1. Interfaz de operación

①Área de menú ②Área de capa ③Área de componente ④Área de dibujo ⑤Área de estilo

2. Operaciones comunes
  1. Crear un nuevo archivo: Archivo->Nuevo
  2. Abrir archivo: Archivo->Abrir
  3. Guardar archivo: Archivo->Guardar
  4. Tipos de archivos principales
  • .rp: archivo prototipo
  • .rplib: archivo de biblioteca de componentes
  • Archivo de proyecto del equipo .rpteam
  • Archivo de página web .html
  1. Guardado automático: Preferencias->Habilitar copia de seguridad
  2. Combinación: Ctrl+G
  3. Publicar: genere el prototipo en un archivo HTML -> Se recomienda crear una nueva carpeta primero
  4. Ayuda: Acerca de Axure ->Ver versión
  5. Ayuda: Administrar autorización->Descifrar software
  6. Agregar biblioteca original: biblioteca de componentes + número
  7. Eliminar biblioteca de componentes: Abrir biblioteca de componentes->Más->Eliminar biblioteca de componentes
3.Diseño de estilo

Arrastra el componente al lienzo y modifica el estilo.

4.Diseño de interacción

La interacción es el proceso de interacción humano-computadora, y el diseño de interacción es el diseño de reglas y desempeño de interacción.

En Axure, la interacción se divide en estilo de interacción y lógica de interacción.

1. El estilo interactivo tiene cambios de estilo comunes integrados, que son fáciles de usar pero no pueden establecer la lógica.

2. La configuración de la lógica de interacción es más flexible Al agregar eventos y acciones a los elementos, se pueden completar estilos personalizados e interacciones lógicas.

3. Los efectos interactivos configurados deben verse en la vista previa.

5. repetidor

La función del repetidor es reutilizar la estructura sin tener que copiar y pegar todo el tiempo.

  1. Cree un repetidor, haga doble clic en el repetidor para ingresar al modo de edición
  2. Nombra todos los componentes para facilitar el enlace de datos posterior.
  3. Salga de la edición y complete los datos de la tabla (los nombres de las columnas solo admiten inglés)
  4. Ver->Máscara->Desactivar máscara de repetidor

6. Panel dinámico

Utilice paneles dinámicos para lograr efectos de cambio de contenido

  1. Agregar barra de navegación izquierda
  2. Añade un panel dinámico a la derecha
  3. Haga doble clic en el panel dinámico para ingresar al modo de edición
  4. Establecer diferentes elementos en diferentes estados.

  1. Agregue eventos de clic a la navegación y establezca el estado del panel dinámico

  1. Efecto de vista previa

especificación del prototipo

La diferencia entre aplicaciones para teléfonos móviles y computadoras:

  1. Adaptación de pantalla (tamaño de pantalla, resolución)
  2. Método de interacción (el mouse es más preciso que el control con los dedos)
versión para PC

1. versión corazón

La resolución principal actual es 1920 * 1080, por lo que el centro de versiones generalmente está entre 960-1200 y la recomendación general es 1200.

Antes de 2012, la resolución principal era 1024 * 768, por lo que el centro de versiones era 760

2.Navegación

3. Formulario

4. Lista

Arreglar

No existe una especificación de tamaño fija para el terminal móvil. Los prototipos se fabrican según el tamaño del modelo adaptado. Por ejemplo, el tamaño del iPhone 6 es 375 * 667.

1. Tamaño de elemento fijo

2. Zonas comunes

3. Formularios de visualización comunes