¿Cuál es el mejor software para hacer interacción móvil / diseño UX para aplicaciones nativas? ¿Qué software comenzaría a usar hoy, si no tuviera experiencia previa con algún programa?

En Citrix Product Design, para proyectos móviles, utilizamos una variedad de herramientas / paquetes de software para lograr la mejor “natividad” posible y la fidelidad de la calidad del diseño. A continuación se presentan algunas mejores prácticas y consejos compartidos internamente que hemos aplicado recientemente … ¡Espero que esto ayude!

  • Adobe Fireworks para compilaciones de interfaz de usuario visual: una razón simple, de las muchas cualidades agradables, es Pages, que le permite crear y alternar entre varias pantallas, y en dispositivos móviles, generalmente tiene bastantes pantallas para realizar la transición, incluso para aplicaciones simples .
  • Adobe Illustrator para diagramas de flujo de tareas y wireframes. Powerpoint también se puede utilizar para wireframes para formas básicas, aprovechando las plantillas de interfaz de usuario móvil.
  • CandyBar para iconos. Evernote también se utiliza para albergar los activos de diseño visual, para arrastrar y soltar fácilmente en Firework, que se actualiza en vivo en Evernote, que sirve como el repositorio común en el equipo para patrones visuales y widgets / componentes que se compartirán entre los diseñadores de UI móviles.
  • LiveView para iOS, Android Design Preview para Android. Crítico para el diseño móvil para lograr la fidelidad nativa.

Algunas notas adicionales, más allá de las propias herramientas de software:

Las plataformas que se ejecutan en una variedad de dispositivos de hardware, como el sistema operativo Android, requieren que cada gráfico se produzca en múltiples formatos para que se escalen a la amplia gama de tamaños de dispositivos.

Para las maquetas, hay algunas plantillas geniales (muchas son gratuitas) en la web. Estos son archivos en capas que se pueden abrir en Adobe Photoshop o Adobe Fireworks. (SUGERENCIA: es posible que deba importar la familia de fuentes Helvetica Neue para interpretar las fuentes para las plantillas de iOS).

Al diseñar sus gráficos, siga las pautas de estilo visual y formato en los sitios de desarrolladores. Algunos de los sitios de desarrolladores proporcionan elementos dibujables que lo ayudan a usar su estilo de icono nativo.
La impresión de carteles de los guiones gráficos de la interfaz de usuario móvil y la colocación en una pared facilitan la comunicación y el refinamiento del diseño con miembros del equipo multidisciplinario. Sin embargo, esto requiere que todos los participantes estén en la misma sala (el formato del póster es un poco engorroso en una reunión virtual)
Ya sea PPT o PDF, las “cubiertas de diapositivas” tienden a ser útiles para socializar un diseño. Una “plataforma de diapositivas” es el mejor formato cuando tiene que comunicar diseños de forma remota a través de reuniones virtuales con equipos en diferentes lugares, y permite a los no diseñadores marcar y colaborar.

Finalmente, siempre obtenga el SDK y las herramientas para la plataforma nativa en la que está desarrollando.

· Para iOS, use XCode 4.2 o superior (requiere Mac OS) para obtener las nuevas características de storyboard. Cree sus vistas directamente en XCode con los controles nativos, los atributos y las herramientas de alineación que proporcionan · Para Android, obtenga el SDK y los emuladores de developer.android.com, y siga las instrucciones sobre la nueva sección de diseño http://developer.android .com / des …
· Para el teléfono inteligente BlackBerry, http://us.blackberry.com/develop…
· Para la tableta BlackBerry (Playbook / QNX OS), http://us.blackberry.com/develop…

Tengo algunas herramientas en las que confío mucho:

  1. Aplicación de prototipos . Hay varias herramientas de este tipo, pero esta es la que estoy más familiarizado. Le permite unir un montón de PNG para crear un fascimile de su aplicación muy creíble, que puede cargar en cualquier teléfono (no se necesita software en el extremo del teléfono) y luego tocar la aplicación, casi como si fuera real. itunes.apple.com/us/app/prototypes/id430812258?mt=12
  2. xScope Mirror . Esta nueva adición a xScope le permite reflejar exactamente lo que hay en una ventana de su computadora en su iPhone. Solía ​​usar Liveview Screencaster para esto, pero xScope lo reemplazó de inmediato (más confiable y generalmente mejor). Puede ver el tamaño de los elementos y, lo más importante para mí, ajustar los colores sobre la marcha en la pantalla del teléfono. itunes.apple.com/us/app/xscope-mirror/id488819289?mt=8
  3. Balsamiq . Para el enmarcado rápido y sucio, es bastante bueno. balsamiq.com

Para el diseño de interacción:

  • Framer: un kit de herramientas de creación de prototipos
  • Compositor de cuarzo con origami o ideo / aguacate
  • Pixate – Próximamente

Para diseño de interfaz de usuario:

  • Sketch 3 (para vectores y elementos no destructivos): se está convirtiendo rápidamente en un estándar de la industria para UI / UX
  • Photoshop (para gráficos de trama sofisticados): la antigua forma de hacer las cosas, aunque sigue siendo buena.

(Nota: si hablamos de diseño de interacción, supongo que desea crear sus propios comportamientos personalizados en lugar de arrastrar y soltar cosas que encontrará en Flinto o Marvel o Keynote. Papel de Facebook fue completamente prototipo en QC y Origami, por lo que está bastante probado y la comunidad está creciendo día a día. Lo mismo ocurre con Framer.js, si está cómodo con Javascript, puede hacer la mayoría de las mismas cosas, pero en javascript, que es un poco más comprensible para los motores a los que entrega sus prototipos).