L' interfaccia di base di programmi più finestrati , un'interfaccia utente grafica ( o GUI ) consente agli utenti di lavorare e manipolare una domanda tramite una interfaccia visuale con un dispositivo di input come un mouse o touchscreen . GUI sono event-driven - in altre parole, solo agire in risposta ad un comando utente . Dividendo il codice in una visione e di controllo vi aiuterà a visualizzare ogni fase della progettazione grafica . Viste e Controller

primo luogo, si dovrebbe pensare ai dati da presentare per l'utente e in che modo manipolarla. Per esempio, in un programma di elaborazione la GUI presenta il documento e l' utente interagisce con essa digitando caratteri e selezionando i comandi da un menu . Potrebbe essere necessario finestre aggiuntive per modificare sottosezioni del documento , come immagini o fogli di calcolo . Essa aiuta a disegnare un diagramma che separa i diversi modi che l'utente può visualizzare e manipolare i dati , tra cui un elenco di azioni di base che l'utente può assumere.
Definizione di azioni

Dopo avete considerato il modo gli utenti potranno interagire con il programma , è necessario definire i comandi che useranno per eseguire l'azione . Molte interfacce grafiche definire diversi modi per eseguire una stessa azione . Ad esempio, per creare un nuovo file di alcuni programmi, l'utente ha la possibilità di fare clic su un pulsante , andare al menu principale e scegliendo l'azione o con una scorciatoia da tastiera . Un'applicazione creata per un dispositivo come uno smartphone può avere ancora più opzioni , come ad esempio un comando vocale o di una azione touchscreen . Per ogni azione , elencare la scorciatoia e comandi utilizzati per eseguire esso .
Definizione di eventi

comandi sono attivati ​​da eventi. In genere , questi eventi sono generati da dispositivi di input, come un mouse , una tastiera o touchscreen . Quando l' utente fa clic su un pulsante del mouse , ad esempio , genera un due eventi: un " mouse " evento quando viene premuto il pulsante e un "mouse " quando il pulsante viene rilasciato . La combinazione di questi eventi di basso livello costituisce un unico evento di alto livello chiamato "mouse premuto " o "mouse cliccato . " Per ciascuno dei tuoi comandi , è necessario definire gli eventi associati.
Controllo diagramma di flusso

Dopo aver definito gli eventi che si intende utilizzare , è necessario creare un diagramma di flusso di controllo di modellare l'intero spettro di input dell'utente per un particolare comando o subinterface . Come GUI riceve eventi , cambierà stati. Per esempio , quando un utente fa clic sul menu, il programma cambia da uno stato di "pronto" a uno stato " aperto menu" , la visualizzazione del menu per l'utente. In un diagramma di flusso di controllo , gli stati sono le caselle del diagramma e gli eventi sono le frecce .
Integrare GUI Componenti

Il passo finale è quello di considerare quali componenti da utilizzare nella GUI . Un componente è un singolo elemento GUI , ad esempio un pulsante , finestra o barra di scorrimento . Un layout organizza questi componenti in una gerarchia : ad esempio , la finestra principale contiene un pannello , che contiene diversi pulsanti , ecc . Per ogni evento di alto livello che hai, ad esempio facendo clic su un pulsante , è necessario progettare il componente corrispondente o implementare un componente da un API . Questa fase è dove prendete le vostre decisioni di design come il layout di base per i pannelli e il look di tutta l'interfaccia grafico. Anche in questo caso , utilizzare uno schizzo per visualizzare il progetto definitivo .