En primer lugar, usted debe pensar en los datos que desea presentar al usuario y cómo manipularlo . Por ejemplo , en un programa de procesamiento de la interfaz gráfica presenta el documento y el usuario interactúa con él escribiendo caracteres y la selección de comandos de menú . Es posible que tenga ventanas adicionales para editar subsecciones del documento, como imágenes u hojas de cálculo . Le ayuda a dibujar un diagrama de separar las diferentes formas en que el usuario puede ver y manipular datos , incluida una lista de acciones básicas que el usuario puede tomar.
Definir acciones
Después que se han considerado las maneras usuarios interactuar con el programa, usted debe definir los comandos que van a utilizar para realizar la acción . Muchos GUIs definir múltiples formas de realizar la misma acción. Por ejemplo, para crear un nuevo archivo , en algunos programas , el usuario tiene la opción de hacer clic en un botón, vaya al menú principal y seleccionar la acción o usando un atajo de teclado . Una aplicación creada para un dispositivo como un teléfono inteligente puede tener aún más opciones , como un comando de voz o una acción de la pantalla táctil . Para cada acción , una lista de los comandos utilizados para llevarla a cabo y el acceso directo .
Definir eventos
comandos se activan por eventos . Normalmente , estos eventos se generan a partir de dispositivos de entrada , tales como un ratón de ordenador , el teclado o la pantalla táctil . Cuando el usuario hace clic en un botón del ratón , por ejemplo , genera unos dos eventos: un " ratón hacia abajo " evento cuando se pulsa el botón y un "ratón " cuando se suelta el botón. La combinación de estos eventos de bajo nivel constituye un evento de alto nivel llamado " del ratón " o " ratón pulsado. " Para cada uno de los comandos , debe definir las actividades que se organicen .
Control diagrama de flujo
Después de definir los eventos que va a utilizar , se debe crear un diagrama de flujo de control para modelar el espectro completo de la intervención del usuario para un comando determinado o subinterfaz . Como GUI recibe eventos , cambiará estados. Por ejemplo , cuando un usuario hace clic en el menú , el programa va a cambiar de un estado de "listo" a un estado " menú abierto " , que muestra el menú para el usuario. En un diagrama de flujo de control, los estados son los cuadros en el diagrama y los eventos son las flechas.
Integración de componentes GUI
El último paso es considerar qué componentes utilizar en la interfaz gráfica de usuario . Un componente es un único elemento de interfaz gráfica de usuario , tal como un botón , ventana o barra de desplazamiento . Una disposición organiza estos componentes en una jerarquía : por ejemplo , la ventana principal contiene un panel , el cual contiene varios botones , y así sucesivamente . Para cada evento de alto nivel que tiene, como hacer clic en un botón , debe diseñar el componente correspondiente o implementar un componente de una API . Esta etapa es donde usted hace sus decisiones de diseño como el diseño básico de los paneles y la mirada de toda la interfaz y se siente. Una vez más , utiliza un esquema de visualizar el diseño final.