Plantilla de diseño de prototipo: cómo utilizar el software de diseño EdrawMax para el prototipo de interfaz de usuario de Windows 7

1. Conceptos de diseño únicos y novedosos

Si realmente no tienes ideas, puedes mirar los diseños de fondo de sitios web del mismo tipo. para encontrar inspiración para el diseño.

2. Herramienta de creación de prototipos eficiente y práctica

Una buena idea de diseño también requiere una herramienta de creación de prototipos para producción, pruebas e iteración. En este sentido, MOckplus es una buena herramienta, con operación simple y rápida, intercambio de enlaces, recopilación de comentarios, demostración de máquinas reales, etc. , lo que permite al equipo diseñar e iterar rápidamente.

3. Busque plantillas de diseño de prototipos creativos

Una buena plantilla de diseño de fondo de sitio web también es un buen punto de partida. Sin embargo, debes prestar atención a las cuestiones de derechos de autor y averiguar si estás pagando por él o si lo estás reutilizando de forma gratuita.

Cómo diseñar un excelente prototipo de back-end de un sitio web. Para hacer un excelente prototipo de back-end, creo que se divide principalmente en tres partes:

Comprender la estructura y la lógica de la página. del módulo de función back-end Comprensión clara.

2. Ser capaz de utilizar herramientas de creación de prototipos de manera competente

3. Excelente estilo de diseño y especificaciones de diseño

1 es básico, 2 es avanzado y 3 es Haz que los prototipos se conviertan en un excelente adorno.

¿Cómo garantizar una estructura funcional y una lógica de página claras y razonables en segundo plano?

Muchas personas tienen la costumbre de dibujar prototipos, es decir, lo hayan pensado o no, simplemente abren la herramienta de prototipos y sacan algunas cajas, o simplemente comienzan a dibujar basándose en un sitio web. antecedentes que les parecen muy buenos. Esto me parece extremadamente peligroso. El fondo de la página web es diferente de la interfaz web general y tiene requisitos muy altos en cuanto a la división de módulos funcionales y la lógica de la página. Por un lado, la estructura jerárquica del backend del sitio web es mucho más compleja. Por otro lado, las funciones del backend de la página web están más inclinadas a la gestión de la página del frontend, lo que resulta en una débil correlación y orientación entre funciones. En este caso, si comienza el prototipo sin una buena comprensión de la estructura del backend, es probable que el sistema de gestión del backend final sea una acumulación de funciones, lo que dificulta garantizar la disponibilidad de las funciones y el flujo de operaciones.

Al dibujar un prototipo de fondo, recuerde siempre:

Antes de dibujar un prototipo, primero debe organizar los módulos funcionales de la gestión de fondo y ayudarle a dividir las páginas en un árbol. diagrama de estructura y módulos.

ampamplt;imgsrc= "

"

ancho de datos sin formato = " 1423 " alto de datos sin formato = " 676 " clase = " origen _ imagenzh- light box-thumb " width = " 1423 " data-original = "

" ampampgt;

Después de organizar los módulos, puede comenzar a diseñar el esqueleto del sistema de gestión backend. Personalmente puedo dividirlo en tres tipos: módulo principal (en qué módulos funcionales independientes se dividen principalmente), subcategoría (qué categorías subfuncionales tiene cada módulo funcional) y eventos funcionales (qué operaciones principales existen en cada página funcional) . El método de diseño general es el siguiente.

1) La pestaña superior divide los módulos principales y la columna de la izquierda divide las subcategorías.

ampamplt;imgsrc= "

"

ancho de datos sin formato = " 1116 " alto de datos sin formato = " 468 " clase = " origen _ imagenzh- light box-thumb " width = " 1116 " data-original = "

" ampampgt;

2) Clasificación jerárquica al estilo de Hamburgo en la columna de la izquierda (perezoso ~ probablemente el lado de el estilo de columna del mosaico de trabajo)

3) Aparece la lista de clasificación secundaria en la barra lateral izquierda.

ampamplt;imgsrc= "

"

ancho de datos sin formato = " 249 " alto de datos sin formato = " 155 " clase = " contenido _ imagen " width = " 249 " amp; ampgt;

La línea de pensamiento debe ser de arriba hacia abajo y al dividir los módulos, no se ciña a la forma de presentación de una interfaz específica.

Claridad de estructura y lógica (esqueleto)>; Diseño de página funcional (específicamente cómo diseñar una página) >Diseño funcional optimizado (si se necesita vista previa, almacenamiento en tiempo real, etc.) >Experiencia de usuario

El primer coste de aprendizaje del usuario se puede sacrificar cuando sea necesario. El primer costo de aprendizaje del usuario se puede atribuir a la eficiencia después de que el usuario lo domine y trate de seguir los cuatro principios de intimidad/contraste/repetición/alineación.

Para funciones importantes que no sabes dónde colocar, puedes considerar colocarlas en el lado derecho de la barra superior en lugar de en el módulo principal.

Las ventanas emergentes frecuentes no son una buena opción (deben reproducirse si es necesario); si es posible, expandir y hacer flotar media página a la derecha es una buena solución.

¿Cómo utilizar EdrawMax para diseñar el diagrama 1 del prototipo Windows7UI y AxureRP (RapidPrototyping)?

Axure (pronunciado Ack-Sure) es sin duda la herramienta de desarrollo de prototipos más popular en la actualidad. Puede ayudar a los diseñadores de sitios web o de software a crear rápidamente prototipos anotados (diagramas de flujo y estructuras alámbricas) con la ayuda de componentes. Con componentes reutilizables personalizados, paneles dinámicos y scripts enriquecidos, se pueden crear archivos de demostración dinámica de funciones básicas o lógica de página.

Axure se basa en la interfaz de Office para permitir a los usuarios comenzar rápidamente y proporciona una gran cantidad de modificaciones de estilo de componentes, lo que le permite crear interfaces de alta fidelidad, baja fidelidad e incluso interfaces cercanas a las reales. efectos. Pero lo más valioso es que el modo de script enriquecido de Axure puede completar rápidamente la interacción de los elementos de la interfaz mediante clics y selecciones, como enlaces, cambios de estado, cambios dinámicos y otros efectos, lo que permite a Axure generar prototipos que están muy cerca de los productos reales. Por otro lado, Axure puede importar bibliotecas de componentes creadas por otros, lo que le permite cumplir con el diseño de la mayoría de los tipos de productos.

Pero Axure todavía tiene un dolor de cabeza: su soporte a los chinos no es muy amigable. Al ingresar mediodía en una pequeña cantidad de componentes, a menudo es necesario cambiar los métodos de entrada repetidamente como si fuera suerte, lo que destruye la experiencia de usuario de nuestros diseñadores.

A pesar de sus deficiencias, Axure sigue siendo la herramienta de creación de prototipos preferida por los diseñadores de interacción.

2. Microsoft Office Visio

Visio fue adquirido por Microsoft en el año 2000 y se convirtió en un componente de la suite office2003 en 2002. La última versión es 2007. Se recomienda Visio por su amplia aplicabilidad. Desde interfaces de sitios web, modelos de bases de datos, planos de planta hasta diagramas de flujo, Visio proporciona bibliotecas de componentes y plantillas correspondientes para una creación rápida.

En comparación con Axure, Visio es más adecuado para la producción o el diseño de procesos en industrias tradicionales, o información, datos y descripciones de procesos en las industrias de software e Internet, y no es adecuado para interfaces web. Debido a que su biblioteca de componentes basada en web es relativamente pequeña y su forma y estructura son más similares a las herramientas gráficas de Word, existen algunas deficiencias en la eficiencia del desarrollo de prototipos.

3. Balsamiq Mockups

Esta herramienta basada en Adobe AIR Runtime es realmente llamativa. Los componentes dibujados a mano tienen un estilo tosco y goteante, y pueden crear archivos prototipo en papel. que están cerca del dibujo a mano. Proporciona una gran cantidad de elementos web comunes en estilo dibujado a mano, incluidos controles HTML comunes y algunos controles combinados, como controladores multimedia, pestañas, listas, elementos de la interfaz de Iphone, etc.

Lo más admirable de Mockups es que la apariencia de la mayoría de los componentes que proporciona se puede personalizar y la compatibilidad con el chino también es buena (elija ver gt y usar fuentes del sistema).

4. Proceso de simulación

La mayor diferencia entre Mockflow y las herramientas anteriores es que Mockflow es un servicio en línea basado en la tecnología AdobeFlex. Proporciona funciones básicamente similares a BalsamiqMockups y componentes aún más completos. Aunque sus componentes no son altamente personalizables, el estilo predeterminado de la biblioteca de componentes que proporciona es muy adecuado para crear prototipos de productos comerciales. Una característica que no puedo dejar de lado son las plantillas. Puede diseñar una página nueva basada en cualquier plantilla de configuración de página.

En comparación con otras herramientas de plantillas, Mockflow tiene una característica muy distintiva. El almacenamiento basado en web se puede abrir en línea en cualquier computadora, lo que permite que otros compartan y recopilen rápidamente comentarios en línea, lo que lo hace ideal para intercambios de creación de prototipos en equipos virtuales.

Aunque la cuenta básica del servicio online sólo puede crear un archivo, no hay límite de páginas para un solo archivo, por lo que básicamente es suficiente.

5. Dibujo a lápiz

Pencil es un componente de extensión basado en Firefox. Una vez completada la instalación, puede abrir el panel de dibujo de Pencil en el menú Herramientas de Firefox. La función es relativamente simple y solo puede usarse como explicación auxiliar para tareas diarias simples. Todos los componentes predeterminados proporcionados se basan en ingeniería de software, por lo que son más adecuados para la construcción de interfaces simples o la descripción de funciones de página básicas de programas de escritorio de Windows. No son adecuados para el desarrollo de prototipos serios. Sin embargo, afortunadamente, son de tamaño pequeño y livianos. de peso y puede convertir fácilmente páginas web. Los elementos se arrastran o copian directamente al lienzo actual. Esta es también una de las ventajas que ofrece la instalación de Pencil en Firefox.

Más herramientas...

Las herramientas de desarrollo de prototipos enumeradas anteriormente son comúnmente utilizadas por diseñadores de interacción doméstica y se discuten con frecuencia, pero hay muchos software con funciones similares a Axure. Las siguientes son algunas explicaciones simples:

6. GUIDesignStudio

Esta es una herramienta de creación de prototipos muy poderosa. No lo recomiendo porque en realidad no lo he experimentado, pero para este tipo de diseño de interfaz de nivel de ingeniería, no tengo ningún impulso de probarlo. Sin embargo, a juzgar por las capturas de pantalla y las demostraciones en vídeo del sitio web oficial, el método de funcionamiento de este software es muy diferente al de las herramientas de creación de prototipos anteriores. Axure y otros se basan principalmente en la creación de prototipos de páginas. Aunque es muy práctico para sitios web, resulta un poco engorroso para el proceso de diseño de interfaces de software. Sin embargo, GUIDesignStudio adopta un enfoque diferente, creando automáticamente flujos de acción al establecer asociaciones entre elementos. A juzgar por la demostración en vídeo, esto mejora enormemente la eficiencia de la creación de prototipos de interfaz de software.

7. Prototype Composer

La herramienta de desarrollo de prototipos proporcionada por Serena es realmente poderosa. Se basa en el proceso principal de gestión de proyectos y proporciona plantillas de documentos de salida, herramientas de prototipos y control del proceso de desarrollo. . El concepto de desarrollo de este software es muy bueno. Utilice esta herramienta para cumplir con la comunicación y la toma de decisiones en todos los aspectos del proceso de desarrollo del proyecto. Sin embargo, el costo de aprender y utilizar el software es relativamente alto y parece llevar mucho tiempo comprender todas las funciones. Además, es necesario mejorar la eficiencia y estabilidad del software, y hubo muchos errores y dejó de responder durante el proceso de prueba.

8. LucidSpec

LucidSpec, lanzado por Elegance Technology, es una herramienta de creación de prototipos muy similar a Pencil, pero proporciona más controles. Sin embargo, LucidSpec enfatiza la función de generar documentos limpios, lo que puede deberse a la redundancia de especificaciones generadas automáticamente para la mayoría de las herramientas prototipo. Pero, para ser honesto, la interfaz prototipo proporcionada por LucidSpec es demasiado simple y los documentos generados no se han optimizado. y mejorado. Introducción en vídeo

9. Iris Professional

Una característica de Irise en comparación con otras herramientas de creación de prototipos es que proporciona la función de datos de muestra, que es una base de datos de muestra similar a una tabla de Excel. .

Se puede acceder directamente a los datos de la base de datos de muestra a través de elementos de la interfaz, de modo que el prototipo generado puede incluso actualizar datos dinámicos.

10.AdobeReader

¿Adobereader? Así es. De hecho, en teoría, cualquier herramienta que pueda crear gráficos y texto se puede utilizar para el desarrollo de prototipos, porque el prototipo en sí es una simulación o simulación de lógica empresarial e interfaz funcional. El artículo PDFPrototype de BoxandArrow nos recuerda que todas las herramientas de creación de prototipos son solo herramientas, no diseños en sí.

Además, también puedes consultar lo que está disponible aquí.

Pero recomendación personal:

Prototipo

_Axure7.0

_UIDesigner

Piensa

_Mindmanager

_Xmind

Programa

_Visio2013

_EDrawMax

Conocimiento

_Youyun Note

_ Evernote

Tiempo

_Todolist

_Work Block

Gráfico

_Photoshop

_Colorpix

Mutuamente

_Quick Show

_UIDesiger