No tengo ningún recurso para sugerirte, pero planificar este tipo de trabajo debería ser similar a planificar una aplicación o un sitio web dinámico.

Por lo que entiendo, le gustaría saber cómo puede mostrarle a su superior una buena "prueba" o un primer borrador de su interfaz para darle una idea del proceso y cómo funcionará.

El plan

El primer paso será hacer un plan en papel y ordenar los elementos lógicos y cómo debería funcionar. Por ejemplo, su primera página será una pantalla de bienvenida, y luego la página siguiente será el resultado de la primera acción, identificada lógicamente dependiendo de qué botón #1 haga y si hay algún tipo de "ir a". Sé que mencionaste cosas activadas por voz, pero básicamente es como si se presionara un botón. No estoy seguro si tengo sentido. Pero de todos modos, probablemente ya conozcas esa parte y es la que lleva más tiempo en la preparación de tu proyecto.

En cuanto a la "prioridad" de qué poner arriba o abajo, a la izquierda o a la derecha y qué tan grande... Eso es algo que descubrirá de acuerdo con la frecuencia con la que se usarán las funciones de su GUI y lo que debe ser siempre visible sin mover demasiado la cabeza. Si juegas juegos de computadora, algunas de sus IU están diseñadas para verse rectas, no mover demasiado la cabeza y tener la barra de salud fácilmente visible solo moviendo los ojos; tal vez puedas obtener algo de inspiración de algunos de ellos. Los rasgos que más se utilizan deben estar a la altura de los ojos; Las cosas que menos se usan o las funciones secundarias deben ser más pequeñas y en la parte inferior o en los lados.

Y para el tamaño del texto, la lógica es que los títulos deben ser los elementos más grandes para que las personas no tengan que adivinar qué está pasando en la pantalla y dónde están. Entonces los subtítulos (o título de cada gráfico) deberían ser un poco más pequeños y no desviar la atención de los títulos principales.

Una forma de saber si tienes un buen equilibrio es simplemente preguntarte "¿dónde van mis ojos primero?", y si es donde quieres que vayan, ese es un buen tamaño, estilo y posición. Esa parte, probablemente la hagas mientras trabajas en el diseño. Pero es bueno planificar con anticipación los textos o perderás el enfoque cuando empieces a hacer el diseño. El mismo principio se puede utilizar para los elementos gráficos.

los graficos

Si desea encontrar buenos gráficos que muestren los datos de una manera original sin tener que dibujar todo desde cero, puede echar un vistazo a los sitios web de imágenes de archivo y buscar palabras clave como "infografía". Por lo general, estos archivos contienen gráficos vectoriales que se pueden usar individualmente y todo tipo de formas originales de mostrar gráficos y tablas. Si no tiene un presupuesto para su primera prueba, tal vez sea posible encontrar algunas de ellas en línea de forma gratuita. Si no puede encontrar ninguno, al menos puede crear ese tipo de gráficos tomando capturas de pantalla de una interfaz de usuario similar o créelos usted mismo.

Aquí hay unos ejemplos:

http://www.istockphoto.com/vector/education-infographics-vector-37457426?st=98492d9

http://www.istockphoto.com/vector/imagen-vectorial-de-elementos-infograficos-35677988?st=98492d9

http://www.istockphoto.com/vector/business-infographic-elements-37428886?st=98492d9

http://www.123rf.com/photo_12837356_ different-indicators-collection.html?term=infographic

http://www.123rf.com/photo_17533676_infographic-elements-pack.html?term=infographic

http://www.123rf.com/photo_10933489_set-of-infographic-charts-icons-and-design-elements.html?term=infographic

http://www.123rf.com/photo_13219642_elements-of-infographics-with-buttons-and-menus.html?term=infographic

Ya puede elegir un estilo que le guste y ver si hay algo útil que pueda presentar los datos que necesita mostrar de manera adecuada (y también de manera lógica). Puede usar los archivos de imagen de baja resolución (archivos de demostración) disponible primero en los sitios web de imágenes de archivo y haga algunas pruebas con ellos para obtener una vista previa de cómo se verá en cada parte de su GUI antes de comprar las imágenes. Una vez que los compre, si puede obtener vectores, serán muy fáciles de usar individualmente y de modificar como desee o necesite.

El diseño en general

Para el diseño, debe ser similar a cualquier tipo de diseño y debe estar equilibrado. Si usa un estilo básico de 1-2-3 columnas, debería ser fácil para usted ajustar sus menús, tablas y gráficos.

Aquí hay un ejemplo para el balance (lo siento, es un Photoshop hecho muy rápido):

3 columnas:

4 columnas:

Como puede ver, siempre uso el mismo tipo de lógica con 3 y 4 columnas, como si mi página estuviera hecha de 9 o 12 cuadrados, y simplemente agrego mis cuadros según el ancho o alto que necesito. Puede usar 2-3-4-5-6 columnas, depende de usted, pero en general ese tipo de diseño de 3-4 columnas es fácil de equilibrar y visualizar cuando hace su diseño. Si tiene muchos elementos pequeños, tal vez sea mejor usar más columnas. El principio es similar al que se utiliza para crear la sección de anuncios clasificados en los periódicos.

Como mencioné para los títulos y subtítulos, la parte más importante de la interfaz de usuario debe ser la más grande o al menos ser claramente visible. Hay muchas maneras de hacer esto; añadiendo sombras alrededor del borde, añadiendo un borde más grueso, un fondo con un color de contraste, un título más grande o un título en negrita mientras los otros títulos son más finos, teniendo esta sección en color y las demás en escala de grises, etc. Lo importante es no hacer que las personas "busquen" las características importantes o más utilizadas... y también limitar el número de operaciones para llegar a alguna parte. Por eso es tan importante el plan de la sección anterior.

Ejemplo sin menú:

Ejemplo con menú:

Los elementos que deben monitorearse al mismo tiempo o juntos deben estar cerca uno del otro para permitir que el usuario los enfoque fácilmente, de modo que no tenga que mover los ojos constantemente. Es más cómodo para un usuario poder simplemente mover los ojos hacia arriba y hacia abajo, o hacia la derecha y hacia la izquierda y tener los elementos principales aún en el campo de visión cuando mira los secundarios. Es por eso que los elementos principales necesitan realmente tener énfasis, es un poco más fácil volver a enfocarlos. Los demás elementos deben agruparse de forma lógica, en función de su prioridad.

En mis ejemplos anteriores, traté de hacer que el enfoque fuera de arriba a abajo para los elementos principales (por ejemplo, más importante en la parte superior, menos importante en la parte inferior), pero mi prioridad "secundaria" se ha puesto de izquierda a derecha para que Todavía pueden escanear la interfaz de usuario hacia arriba y hacia abajo en busca de las principales categorías de funciones, pero sus ojos deben hacer un movimiento de derecha a izquierda en la parte superior, la mayor parte del tiempo. Espero tener sentido.

Dado que desea algo muy "de alta tecnología", no le sugiero que use demasiados colores para el fondo y la interfaz de usuario principal. Un bonito gris pálido con degradados suaves, con el mismo estilo que la interfaz Apple MacOSX sería muy elegante y fácil de combinar con cualquier cosa.

Si cree que necesitará muchos gráficos o botones, utilícelos para agregar un poco de color acentuado a su interfaz. Intenta no usar más de 3-4 colores, a menos que uses diferentes tonos del mismo.

Si necesita ideas para el color, puede encontrar bonitas paletas de colores en línea o puede usar un esquema que viene con los ejemplos infográficos que mencioné anteriormente. También puede echar un vistazo a " Kuler " que está accesible como paleta de colores en su Illustrator, por ejemplo. Algunos bonitos esquemas de color ya fueron creados por otros usuarios de Adobe y pueden inspirarle.

Solo una opinión: el gris combina muy bien con un rojo, verde, azul y es muy clásico. Pero también podrías usar diferentes tonos de azul por ejemplo o los colores de tu empresa o el color del cliente de tu superior. Eso realmente tendrá un efecto positivo en ellos. No necesita usar los colores rojo, verde y azul estándar brillantes, puede usar algunos tonos "lavados" en su lugar, puede parecer más moderno.

Ejemplo rojo, verde, azul:

Diferentes tonos, estilo más comercial/médico:

Si el usuario de la interfaz va a necesitar mirarla mucho, debe evitar colores y contrastes demasiado brillantes. Incluso puede usar un fondo gris oscuro para compensar el brillo de la pantalla.

La prueba

Una vez que haya hecho el plan, seleccionado los estilos de gráfico y los colores, puede crear una prueba para mostrársela a su superior. Como dijiste, las pruebas deben ser muy bonitas y mostrar el resultado final tanto como sea posible (y hacer que el superior quiera abrazarte). Lo que puede hacer es crear sus elementos de interfaz gráfica en un archivo de Photoshop o Illustrator y mostrarlos planos, por ejemplo. como JPG. Pero en su caso, es posible que desee agregar un poco de dinamismo.

Si eso es algo que puede hacer, tengo 2 sugerencias que podrían ser mejores para esto:

1) Cree un gif animado que muestre cómo funciona cada elemento y qué hacen cuando se activan. Dado que probablemente mostrará esto en una computadora portátil o de escritorio, el tamaño de los archivos no es realmente importante y realmente puede hacer una buena animación fácilmente con la línea de tiempo en Photoshop. Si tiene muchas "etapas" en su GUI, esto podría ser un poco difícil de mostrar claramente lo que hace cada cosa.

2) Cree una prueba muy simple en HTML básico con Adobe Dreamweaver, Adobe Muse o lo que prefiera para esto. Realmente puedes crear algo rápidamente con Muse y funciona de manera similar a Photoshop e Illustrator, pero tiene muchas menos herramientas.

Todo lo que necesita hacer es preparar la imagen para sus botones o gráficos individualmente en .png y agregarlos sobre el fondo (también en png o un rectángulo de color en Muse) en el software Muse. Y luego agregue algunos hipervínculos a los gráficos, botones, etc. Cada página debe ser una nueva "etapa" o resultado de una acción. Una vez que haya terminado de agregar sus gráficos e hipervínculos para vincular todas las páginas, simplemente puede exportar este paquete en HTML y alojarlo en algún lugar o mostrárselo a su superior arrastrando el archivo index.html en su navegador web en su computadora.

Los conceptos básicos de Adobe Muse no son muy difíciles de aprender y tiene algunas características pequeñas y agradables para crear "ventanas emergentes" falsas, rollovers o campos para ejemplos. Puede agregar texto en él, dibujar formas simples, líneas, etc. Es una forma gráfica muy fácil de crear páginas web simples. Si tiene elementos como menús de navegación (o muchos), simplemente puede crear diferentes páginas maestras que puede aplicar a cada página. Si aún no ha usado Muse, tal vez necesite jugar un poco con las funciones y herramientas, pero la curva de aprendizaje no es enorme para las páginas simples. Realmente puede crear buenas pruebas rápidas con él y, de hecho, podría ser más rápido que un JPG plano o un gif animado si tiene muchas "etapas".

Lo que podría verse aún mejor si tiene gráficos con datos variables y gráficos en movimiento es agregarlos como imágenes gif en su archivo Muse.

Editar: si todo esto es demasiado trabajo para usted o simplemente no tiene tiempo para esto, siempre puede mostrar su plan como probablemente lo haga normalmente con sus otros proyectos, pero agregue a esto algunas muestras de color, ejemplos de gráficos como las URL que mencioné anteriormente con infografías y capturas de pantalla en línea del sitio web que te gusta. Esto ya le dará a su superior una buena idea de lo que puede esperar. Y estos detalles se pueden dar al equipo de diseñadores como guía para su propio trabajo.

Editar: dado que dijo en un comentario "ya que es una plataforma bastante única cuando puede verse a sí mismo en la pantalla", en lugar de llenar la parte central de su pantalla con elementos, es posible que desee distribuirlos alrededor de la "forma" de la reflexión. Y en lugar de ir de arriba hacia abajo para enfatizar los elementos, quizás prefieras colocar los importantes a la altura de los ojos, luego hacia arriba y luego los menos importantes hacia abajo. Probablemente necesitará hacer algunas pruebas con sus propios planes una vez que los haya terminado, y ver qué se siente más cómodo.

No sé de qué se trata todo esto, pero una forma en que enfocaría los elementos es de esta manera o similar (no importa el lado). Separé las áreas en 5 zonas:

Y aquí con 6 zonas:

¡Espero que esto ayude!

No estoy seguro acerca de los recursos, creo que los gráficos son una cosa, pero crear una GUI real probablemente depende de ti, ¿no? Usted sabe cuál quiere que sea el resultado, siempre que pueda dibujarlo en una servilleta con lápiz, cualquier diseñador gráfico puede colorearlo para usted y hacer que se vea bien, si es hábil.

Una forma de obtener un "recurso" para el diseño es simplemente mirar otros ejemplos (películas, diseñadores, videojuegos, etc.), luego puede intentar dibujarlo en papel y ver cómo se ve, intente usar max 3 colores ya que es un HUD, en mi experiencia es la mejor manera de hacer algo. Primero: analice todos los elementos que requiere un HUD Segundo: encuentre la idea, vea varios conceptos e intente bocetarlo Tercero: una vez que tenga todos sus bocetos, intente ver cómo va y si necesita ayuda, intente contactar a un diseñador, (I Estaré encantado de ayudar).