martes, 26 de enero de 2010

Diseño de la GUI (1). Diseño y Bocetos.

Antes de entrar en detalle de como se elaboró, quiero mostrar varios de los pasos de la evolución de la Interfaz Gráfica de Usuario (GUI), hasta llegar a la definitiva.
Aunque lo mejor es empezar dibujándola en papel, yo muchas veces empiezo a plasmar mis ideas directamente desde Photoshop. Quizás no sea lo mejor para pantallas de poca resolución, siendo aconsejado un programa tipo Paint, como los existentes para Amiga como el Deluxe Paint o Personal Paint. También existen programas de este tipo para PC, creo que son freeware. Habría que probarlos para ver que tal funcionan. Para MAC existe el Pixen, pero me es un poco incomodo, seguramente por que no estoy acostumbrado a él. Para MSX también hay bastantes programas tipo Paint. Lo recomendable es utilizar la herramienta con la que uno trabaje más a gusto.

En el primer boceto, podemos ver que empecé a desarrollar varias partes. Una de ellas es un control tipo potenciometro. Probé con dos tamaños, pero me decidí por el pequeño, con un tamaño de 16x16 puntos. También creé la fuente, unos marcos, un controlador tipo checkbox, un selector de envolvente y un deslizador para el control de volumen.

En la siguiente pantalla, podemos ver que comencé a darle forma. Desestime el control tipo potenciometro y lo sustituí por un selector donde se muestra el valor decimal de los registros. Mi intención era de poner un controlador del volumen general, pero como veremos más adelante, lo eliminé, para simplificar.

En esta pantalla, amplié la zona del envolvente y el ruido para que abarcara el ancho de la pantalla para indicar que afectan a los tres canales. También compacté los controles para ganar espacio en la zona de abajo y utilicé colores para mejorar el aspecto y diferenciar la información. Aunque no se vea, en una capa iva trabajando en el set de caracteres.

En el siguiente paso cambié el dibujo de los marcos por unos en relieve.

En este último paso, como podéis observar, hay bastantes cambios. El logo lo he modificado por una barra horizontal con el nombre de aplicación y la versión más un botón de salida. Uno de los motivos, es el de ganar espacio para poder incorporar todas las funcionalidades necesarias. He añadido un título de la pantalla, que en este caso seria la de Edición, ya que habrá una de ayuda, y las de acceso a disco para leer y grabar la información. Abajo he añadido un pequeño secuenciador de 16 pasos (tipo TR 909), pero de un solo patrón. y una barra con un menú de opciones, que se lanzan con las teclas de función.

No hay comentarios:

Publicar un comentario