eerste moet je denken aan de gegevens die u wilt presenteren aan de gebruiker en hoe ze het zullen manipuleren . Bijvoorbeeld, in een tekstverwerkingsprogramma de GUI presenteert het document en de gebruiker interageert met het door het intikken van personages en het selecteren van commando's uit een menu . U kunt extra vensters moeten onderafdelingen van het document , zoals foto's of spreadsheets bewerken . Het helpt om een diagram scheiden van de verschillende manieren waarop de gebruiker kan gegevens te bekijken en te manipuleren , inclusief een lijst van fundamentele acties de gebruiker kan schetsen .
Definiëren Acties

Na je de manieren gebruikers zullen interageren met uw programma hebben overwogen , moet u de opdrachten die zij zullen gebruiken om de actie uit te voeren definiëren . Veel GUI's definiëren meerdere manieren van het uitvoeren van dezelfde actie . Bijvoorbeeld , om een ​​nieuw bestand in een aantal programma's te maken , een gebruiker heeft de keuze van het klikken op een knop , ga naar het hoofdmenu en het kiezen van de actie of met behulp van een sneltoets . Een aanvraag gemaakt voor een apparaat, zoals een smartphone kan hebben nog meer opties , zoals een gesproken commando of een touchscreen actie . Voor elke actie , een lijst van de snelkoppeling en opdrachten die worden gebruikt om het uit te voeren .
Definiëren Evenementen in

Commando
worden getriggerd door gebeurtenissen . Doorgaans worden deze gebeurtenissen gegenereerd uit invoerapparaten , zoals een computer muis , toetsenbord of touchscreen . Wanneer de gebruiker een muis knop klikt , bijvoorbeeld , het genereert een twee gebeurtenissen : een ' mouse down " wanneer de knop wordt ingedrukt en een ' mouse up " event wanneer de knop wordt losgelaten . De combinatie van deze gebeurtenissen low - level vormt een hoog niveau evenement genaamd "muis ingedrukt " of "muis geklikt . " Voor elk van uw opdrachten , moet u de bijbehorende gebeurtenissen te definiëren .
Controle Flow diagram

Nadat u de gebeurtenissen die u wilt gebruiken hebt gedefinieerd , moet u een controle stroomdiagram maken om het volledige spectrum van input van de gebruiker te modelleren voor een bepaalde opdracht of subinterface . Als GUI ontvangt gebeurtenissen , zal het land veranderen . Bijvoorbeeld , wanneer een gebruiker het menu klikt , zal het programma veranderen van een " gereed " toestand van een "open menu" toestand en geeft het menu aan de gebruiker . In een control flow diagram , de staten zijn de vakjes in het diagram en de gebeurtenissen zijn de pijlen .
Integreren GUI Componenten

De laatste stap is na te gaan welke onderdelen te gebruiken in uw GUI . Een component is een GUI-element , zoals een knop , venster of scrollbar . Een layout organiseert deze componenten in een hiërarchie : bijvoorbeeld het hoofdvenster bevat een paneel , dat een aantal knoppen bevat , enzovoort . Voor elk evenement op hoog niveau je hebt , zoals het klikken op een knop , dient u de bijbehorende component ontwerp of de uitvoering van een onderdeel van een API . Deze fase is waar je je ontwerp beslissingen , zoals de basis lay-out voor de panelen en de hele interface van de look en feel . Nogmaals, gebruik van een schets tot het uiteindelijke ontwerp te visualiseren .