Den grunnleggende grensesnittet til de fleste windowed programmer, lar et grafisk brukergrensesnitt (eller GUI ) brukere å arbeide med og manipulere et program via et visuelt grensesnitt med en inngang enhet, for eksempel en mus eller berøringsskjerm. GUI er hendelsesdrevet - med andre ord , de bare ta tiltak som svar på en bruker kommandoen. Dele koden til en visning og controller vil hjelpe deg med å visualisere hvert stadium av GUI design. Synspunkter og Controllers

Først bør du tenke på de dataene du ønsker å presentere for brukeren, og hvordan de vil manipulere den . For eksempel, i et tekstbehandlingsprogram GUI presenterer dokumentet og brukeren kommuniserer med det ved å skrive tegn og velge kommandoer fra en meny . Du kan trenge ekstra vinduer for å redigere underseksjoner av dokumentet for eksempel bilder eller regneark . Det hjelper å skissere et diagram som skiller de forskjellige måtene brukeren kan vise og manipulere data , inkludert en liste over grunnleggende handlinger brukeren kan ta.
Definere Handlinger

Etter du har vurdert hvordan brukerne vil samhandle med programmet ditt , bør du definere kommandoene som de vil bruke til å utføre handlingen . Mange GUI definere flere måter å utføre den samme handlingen . For eksempel vil opprette en ny fil i enkelte programmer, har en bruker valget mellom å klikke på en knapp , kommer til hovedmenyen og velge handling eller ved hjelp av en hurtigtast. Et program som er opprettet for en enhet, for eksempel en smarttelefon kan ha enda flere alternativer, for eksempel en stemme kommando eller en berøringsskjerm handling . For hver handling , liste snarveien og kommandoer som brukes til å utføre den.
Definere hendelser

Kommandoene er utløst av hendelser . Vanligvis er disse hendelsene som genereres fra input- enheter, for eksempel en mus , tastatur eller berøringsskjerm. Når brukeren klikker en museknapp , for eksempel , genererer det en to hendelser : en " mus ned " når du trykker på knappen og en " mus up" hendelse når knappen slippes . Kombinere disse lavnivå hendelser danner en enkelt høy -level event kalt "mus trykket " eller " museknappen nede . " For hver av dine kommandoer , bør du definere de tilhørende hendelsene .
Kontroll Flow diagram

etter at du har definert hendelsene du vil bruke, bør du lage en kontroll flytskjema å modellere hele spekteret av brukerundersøkelser for en bestemt kommando eller subinterface . Som GUI mottar hendelser , vil det endre stater. For eksempel når en bruker klikker på menyen , vil programmet endre seg fra en "klar " stat til en "åpen meny " tilstand, viser menyen for brukeren. I en kontroll flytskjema , statene er de boksene i diagrammet og hendelsene er pilene .
Integrering GUI -komponenter

Det siste trinnet er å vurdere hvilke komponenter å bruke i det grafiske brukergrensesnittet. En komponent er en enkelt GUI- element , slik som en knapp , vindu eller pilen. Et oppsett organiserer disse komponentene i et hierarki : For eksempel inneholder hovedvinduet et panel, som inneholder flere knapper , og så videre. For hvert stort arrangement du har, for eksempel klikke på en knapp, må du utforme tilsvarende komponent eller gjennomføre en komponent fra en API . Denne fasen er der du gjør dine design beslutninger som grunnleggende oppsett for paneler og hele grensesnittet utseende og følelse. Igjen , bruk en skisse for å visualisere den endelige utformingen .