GUI arendus

Peamine vahend kasutaja suhtlemiseks programmiga on graafiline kasutajaliides(Graafiline kasutajaliides, GUI). GUI mis tahes tarkvaratoode on selle populaarsuse üks võtmetegureid.

Pädeva kasutajaliidese loomine on töömahukas protsess ja nõuab maksimaalset tähelepanu detailidele. Loodud liides peaks maksimeerima programmi võimalusi, kuid samal ajal mitte koormama kasutajat menüüde, nuppude, piltide ja teksti rohkusega.

Praktikas hõlmab Windowsi rakenduste programmeerimine laialdast mitmesuguste tööriistad ja meistrid. Seega, võttes arvesse valitud standardeid operatsioonisüsteem, on tarkvaral aknaliides. See on tingitud ennekõike asjaolust, et aknad on peamised elemendid GUI Windowsi perekonna operatsioonisüsteemides (OS). Need on ristkülikukujulised alad, millel on oma seaded, omadused ja tüübid.

Treeningploki graafiline osa sisaldab nelja tüüpi aknaid:

Peaaken sisaldab kõiki programmi navigeerimiselemente ja ka Lisainformatsioon vajalik tarkvaraga töötamise mugavuse tagamiseks;

Juhtaknad teabebaas-- sisaldab kõiki teabekomponentide juhtelemente tarkvara tööriist. Need võimaldavad lisada teste, teavet, uusi kasutajaid ja administraatoreid ning võimaldavad manipuleerida äsja loodud või olemasolevate andmetega;

Windowsiga töötamiseks tarkvara võimalused-- pakkuda tööd koolitusploki põhifunktsioonidega, nagu testide sooritamine ja loengute õppimine;

Aknad teabe ja statistika kuvamiseks – kasutatakse teabe kuvamiseks erinevat tüüpi, samuti statistikat ja graafikuid.

Programmi põhiaken sisaldab järgmisi juhtelemente ja teabeväljundit:

Akna pealkiri, mis sisaldab programmi nime ja akna eesmärki;

Nupud süsteemi menüü, mis vastutavad programmi suuruse muutmise, minimeerimise ja sulgemise eest;

Akna pealkirja ala, millel on puhtalt dekoratiivne funktsioon ja mis on vajalik üldise disainilahenduse järgimiseks;

tervitusala;

Nädalapäeva kuvamisala, tänane kuupäev ja aeg;

Kohandatud tööriistariba, mis sisaldab nuppe programmi põhifunktsioonidele juurdepääsuks;

Halduspaneel sisaldab nuppu juurdepääsuks PS-i haldusjuhtelementidele;

Olekuriba, mis kuvab teavet programmi kõigi töörežiimide kohta.

Graafilise liidese peaakna skeem (aknavaade administraatori jaoks konto) on näidatud joonisel 3.2

Joonis 3.2 -- Graafilise liidese peaakna skeem: 1 -- akna pealkiri; 2 -- süsteemimenüü nupud; 3 -- akna pealkirja ala; 4 -- olekuriba; 5 -- tervitusala; 6 -- ala nädalapäeva, kuupäeva ja kellaaja kuvamiseks; 7 -- halduspaneel; 8 -- kohandatud paneel; 9 -- nupp õppimisetapi avamiseks; 10 -- nupp testimisetapi avamiseks; 11 -- nupp statistika ja graafikute kuvamiseks; 12 -- väljapääs; 13 -- nupp, et pääseda juurde rakenduse haldusosale

Arvestades arendatava tarkvara fookust, töötati välja mitmeid mittestandardseid graafilisi lahendusi, et äratada tähelepanu ja rakenduse vastu suuremat huvi. Lisaks võimaldab see teil saada ülejäänud sarnaste teemade ja fookusega programmide hulgast omapära.

Ühte neist lahendustest võib nimetada värvikaks ja loovaks ainulaadne disain, liidese elemendid, millel pole selles valdkonnas analooge. See on umbes Flash-animatsioonil põhinevate animeeritud lisade kohta. Neid kasutatakse kõigi peamiste funktsionaalsete akende, navigeerimiselementide ning registreerimis- ja autoriseerimisvormi liidese nimede kujundamiseks. Selle arenduse peamised eelised on: meeldiva ja kasutajasõbraliku liidese juurutamine; programmi kasutamise märkimisväärne lihtsustamine nii kasutaja kui ka haldustasandil.

Veel üks peamisi eeliseid analoogprogrammide seas nii tarkvaras kui ka graafilises teostuses on nõudmisel testide läbimise korraldamine. Testi sooritamiseks seda tüüpi kasutaja peab koostama SQL-päringud eraldi sõltumatutest elementidest. Sõltuvalt kavandatava ülesande tingimustest lähtuvalt esitatava päringu tüübist moodustatakse konkreetne komplekteerimise hulknurk. Polügoon sisaldab välju nendesse eraldi plokist hiirega lohistatud operaatorite asendamiseks ning väljad tabelite, väljade ja tingimuste nimede sisestamiseks.

Kasutajastatistikat rakendatakse graafikute kujul, mis koostatakse sõltuvalt tema saadud tulemustest. Igal testil on oma dünaamika. Diagrammid sisaldavad kõiki vajalikke allkirju, neid rakendatakse TChart komponendi abil ja seetõttu on neil palju juhtelemente, mis on vaikimisi komponenti sisse ehitatud ja sellest tulenevalt ka rakenduses juurutatud.

Samuti on kasutajasõbralikuma visualiseerimise huvides asendatud tabeli päise stiilid vaikimisi arenduskeskkonnas rakendatavatega.

Seega rakendatud graafilised lahendused võimaldas meil saavutada GUI disaini ideega ettenähtud tulemuse. Loodud liides maksimeerib programmi võimalused, kuid samas ei koorma kasutajat üle menüüde, nuppude, piltide ja teksti rohkusega.

Märkus: Uurime vidinaid - graafilise kasutajaliidese visuaalseid elemente, nende paigutust, suurusepoliitikat, signaali-pesa ühendusi, graafilise liidese elemente ja nende kasutamist.

13.1 Vidinad

Vidinad on visuaalsed elemendid, mis moodustavad graafilise kasutajaliidese.

Vidinate näited:

• Nupp (klass QPushButton);
• Silt (klass QLabel);
• Sisestusväli (klass QLineEdit);
• Numbriline loenduri väli (QSpinBox klass);
• Kerimisriba (klass QScrollBar ).

Qt-l on umbes 50 valmisklassi graafilised elemendid kasutamiseks saadaval. Kõigi vidinate vanemklass on QWidget klass. Sellest on päritud kõik visuaalsete elementide peamised omadused, mida me hoolikalt kaalume. Alustame näitega graafilise liidesega programmide arendamise võimaluste uurimist.

Loome tühi fail projekt. Käivitage projektiviisard ja valige jaotisest Projektid üksus Muu projekt. Järgmisena valige projekti tüüp Tühi Qt projekt. Lisame projekti faili sisu:

TEMPLATE = rakenduse #Qt moodulid, mida kasutame QT += vidinad # Vidinatega töötamiseks lisage vidinate moodul (vajalik Qt5 jaoks). TARGET = vidin# Käivitatava faili nimi SOURCES += \ main.cpp

Nüüd loome lihtne programm aknaga, kus kuvame pealdise. Määrame akna suuruse ja selle pealkirja teksti ning määrame ka pealdisele fondi. Selleks looge järgmise sisuga fail main.cpp:

#kaasa #kaasa int main (int lArgc, char * lArgv ) ( //Looge QApplication objekt, mis lähtestab ja konfigureerib aknaprogrammi, //juhtib selle täitmist QApplication sündmusesilmuse abil lApplication (lArgc, lArgv); QLabel lLabel; //Loo QLabel vidin - silt lLabel.setText ("Ma olen vidin!" //Määrake sildi tekst lLabel.setGeometry (200, 200, 300, 150 //Mõõtmed - asukoht (x, y), laius); ja kõrguse tekst lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter //Fonti parameetrite määramiseks //Valige fondiperekond ja suurus 12. QFont lBlackFont ("Arial Black). ", 12); setFont (lBlackFont); //Seadistage sildi lLabel.show () font programm käivitada exec() //cycle. Programm ootab kasutaja toiminguid ja töötleb neid.

Nagu näeme, on Qt-s liideseid moodustavatel elementidel oma asukoht ja suurus - nn "geomeetria" - ning seega hõivavad nad ekraanil vastava ristkülikukujulise ala (vt joonis 13.1). Samuti on igal elemendil sätted, mis määravad selle käitumise ja välimuse.

Riis.

13.1.

• Struktuuri loomiseks korraldatakse vidinad hierarhiasse vastavalt “osa – terviku” põhimõttele. Iga vidin võib sisaldada teisi vidinaid. Sellest visuaalsest elemendist saab selles sisalduvate elementide "vanem" (vanema vidin). Pange tähele, et selliseid seoseid ei tohiks segi ajada pärimisega C++ - klassidevahelised seosed programmis. Vidinate vahelised seosed on seosed objektide vahel. Sellised suhted põhjustavad mitmeid tagajärgi: eemaldamise eest vastutab emaelement laps element
• : kui vanemvidin kustutatakse, kustutab see automaatselt kõik alamelemendid;
• vanemvidin asetab alamvidinad enda sisse, alamvidinate osad, mis ulatuvad vanemast kaugemale, jäävad nähtamatuks;

osa vanemvidina olekust antakse edasi selle lastele – see kehtib mõningate visuaalsele elemendile rakendatavate omaduste (nähtavus, tegevus) ja stiilide kohta. Vidinad, millel pole vanemat (vidinad kõrgeim tase ), näevad programmis välja nagu eraldi aknad. Vaatame näidet. Helistame uus projekt

VanemNäide. Projektifail sisaldab GUI projekti tavalisi sätteid:

Peaaknana kasutatava vidina jaoks loome uus klass. Selle jaoks kategoorias Failid ja klassid Valime jaotise C++ ja valime C++ klass (vt joonis 13.2).

Järgmine samm on luua aknale mitu elementi. Selleks ava fail parentwidget.cpp ja muuda klassi konstruktori koodi. Elementide kuvamiseks looge need lihtsalt klassikonstruktoris ja määrake nende vanemateks ParentWidget. Parenterwidget.cpp kood näeb välja selline:

#include " parentwidget.h " #include #kaasa #kaasa ParentWidget::ParentWidget (QWidget * vanem) : QWidget (parent) ( //Loo silt, mis näitab emavidinat – see on klassi ParentWidget eksemplar. QLabel * lLabel=uus QLabel (see); //Position vasaku suhtes ülemine nurk lapsevanema vidin. lLabel ->setGeometry (50, 0, 100, 30); lLabel ->setText(" TextLabel "); //Tekst sildil. //Looge nupp, määrake "vanem", geomeetria ja tekst QPushButton * lPushButton = uus QPushButton (see); lPushButton->setGeometry(50, 50, 100, 30); lPushButton->setText(" PushButton "); //Looge sisestusväli, määrake "parent", geomeetria ja tekst QLineEdit * lLineEdit = new QLineEdit (see); lLineEdit ->setGeometry (50, 100, 100, 30); lLineEdit ->setText(" LineEdit "); lLineEdit ->selectAll(); //Vali sisestusväljalt tekst (lihtsalt näiteks) //Lõpuks muuda vanemvidina suurust setGeometry (x(), y(), 300, 150); //ja määrake akna pealkirja tekst setWindowTitle (" vanem vidinNäide "); )

Kuna vanem element on ParentWidget , siis on selle sees silt (QLabel), nupp (QPushButton) ja tekstiväli (QLineEdit). Lapsvidinate asukoht määratakse isa vasaku ülanurga suhtes. Saate seda hõlpsalt kontrollida, muutes meie programmi akna suurust ja asukohta. Pange tähele, kuidas me kasutajaliidese elemendid lõime dünaamiline mälu kasutades uus operaator. See tagab, et elemente ei eemaldata pärast ParentWidgeti konstruktori valmimist.

Reegel 2: vähendage kasutajate koormust

Reegel 3: muutke liides ühilduvaks

Juhised

Korrastatud Start Menu programm

Järeldus

Kirjandus

Sissejuhatus

"Kuvanduse kuldreegel on: "Ära tee kunagi teistele seda, mida nad sulle tegid." ”

Tracy Leonard

Miks peaksite järgima kasutajaliidese kujundamise põhimõtteid?

Tarkvara tuleb arendada arvestades kasutaja nõudeid ja soove – süsteem peab kohanema kasutajaga. Seetõttu on disainipõhimõtted nii olulised.

Arvutikasutajad võivad saada edukaid kogemusi, mis sisendavad kindlustunnet oma võimete vastu ja tõstavad arvutiga töötades kõrget enesehinnangut. Nende tegevust arvutiga võib iseloomustada kui "edu sünnitab edu". Iga positiivne kogemus programmiga võimaldab kasutajal laiendada oma teadmisi tarkvaraga ja tõsta oma pädevustaset. Hästi läbimõeldud liides, nagu hea õpetaja ja õpikud, tagab viljaka suhtluse kasutaja ja arvuti vahel. Edukad liidesed võivad isegi aidata inimesel tavapärasest kasutatavate programmide ringist välja tulla ja uusi avastada, süvendada arusaama liideste ja arvutite toimimisest.

Liidese kujundamise põhimõtted on kõrgetasemelised kontseptsioonid ja vaated, mida saab disainis kasutada tarkvara. Peate kindlaks määrama, milline põhimõte on teie süsteemi jaoks kõige olulisem ja vastuvõetavam.

Projekteerimise alustamisel on vaja esile tõsta kõige olulisem põhimõte, mis saab kompromisside otsimisel määravaks. Kõigi disainipõhimõtete järgimine võib viia selleni, et mõnes olukorras ei tasu see end ära ja avaldab lõpptulemusele negatiivset mõju. Põhimõtted on tegevusjuhised.

Kasutajaliidese kujundamise kolm põhimõtet on sõnastatud järgmiselt:

1)kasutaja juhtimine liidese üle;

2) kasutaja mälukoormuse vähendamine;

3)kasutajaliidese järjepidevus.

Kust leida kasutajaliidese disaini põhimõtteid

Hansen esitles esimest disainipõhimõtete loetelu. Põhimõtted on järgmised:

1) tunneb kasutajat;

2) vähendada meeldejätmist;

3) optimeerida toiminguid;

4) kõrvaldada vead.

Palju suured tootjad operatsioonisüsteemid, lasevad turule oma uued tooted, avaldavad asjakohased juhendid ja juhised. Need väljaanded paljastavad liidese kujundamise lähenemisviisi põhimõtted. Juhendid valmistas Apple Computer, Inc. (1992), IBM Corporation (1992), Microsoft Corporation (1995) ja UNIX OSF/Motif (1993).

Lugejad saavad neid väljaandeid kasutada õppevahendina. Liidese terminoloogia võib juhendites erineda, kuid materjali fookus, keerukusaste ja kirjeldatud kasutajaliidese põhimõtted on kõigi raamatute puhul samad.

Põhimõtete järgimise tähtsus

"Liidese ühildumatus võib suurettevõttele maksta miljoneid dollareid tootlikkuse vähenemise ja suurenenud kulude tõttu. tehniline abi"- Jessie Briest.

Need põhimõtted kehtivad kogu tarkvara ja riistvara, igat tüüpi ja tüüpi liideste puhul. Neid arendati üsna pika aja jooksul: valdkonnas tehti uuringuid tarkvara liides, viidi läbi arendus ning küsitleti paljude arvutiplatvormide, sealhulgas Macintoshi ja PC kasutajaid.

Need põhimõtted on ajaproovile ja uute esilekerkimisele vastu pidanud. arvutitehnoloogia. Jakob Nielsen märkis: "Põhimõtted jäävad fundamentaalseks isegi siis, kui programmil on sisendiks, liikumistuvastuseks ja reaalajas videopiltidega varustatud futuristlik 3D-disain. Need on asjakohased, kuna väljendavad dialoogi põhiideed masinaga käske.

Nende põhimõtete tõlgendamine sõltub sellest riistvara, operatsioonisüsteem, kasutajaliidese komponendid ja selle ülesanded. Sageli kaaluvad äriotsused üle disainerite põhimõtete kasutamise. Ka kasutaja- ja disainermudelid on erinevad ja mõjutavad põhimõtete rakendamist. Mõnel olulised etapid Projekti arendamise käigus võib tekkida küsimus: "Mis saab edasi?" Vastus peaks olema: "Mida iganes kasutaja soovib!"

Otsuse valida liidese loomise optimaalsed põhimõtted peaksid kõik disainimeeskonna liikmed ühiselt välja töötama. Need lahendused peaksid aitama parandada tarkvaratoodete ostetavust ja arendamist.

Kasutajaliidese kujundamise reeglid

"Tehke see lihtsamaks, kuid mitte primitiivsemaks."

Albert Einstein

Reegel 1: andke juhtimine kasutajale

Kogenud disainerid võimaldavad kasutajatel mõningaid probleeme oma äranägemise järgi lahendada. Arhitektid peavad kompleksse hoonekompleksi ehitamise lõppedes rajama nende vahele jalakäijatele rajad. Nad ei tea veel täpselt, kus inimesed saidid läbivad. Seetõttu ei rajata teid kunagi üheaegselt hoonete ehitamisega. Majadevahelistele aladele on paigutatud sildid kirjaga: "Palun kõndige murul." Mõne aja pärast tulevad ehitajad tagasi ja alles nüüd täidavad vastavalt elanike “tahtele” tallatud teed asfaldiga.

Põhimõtted, mis annavad kasutajale süsteemi üle kontrolli:

1) kasuta režiime targalt;

2) anda kasutajale võimalus valida: töötada kas hiire või klaviatuuriga või mõlema kombinatsiooniga;

3) võimaldab kasutajal keskenduda;

4) näidata sõnumeid, mis aitavad teda tema töös;

5) luua tingimused koheseks ja tagasipööratavaks tegevuseks, samuti tagasisideks;

6) tagama sobivad teed ja väljapääsud;

7) kohandama süsteemi erineva väljaõppetasemega kasutajatele;

8) muuta kasutajaliides arusaadavamaks;

9) anda kasutajale võimalus kasutajaliidest oma maitse järgi kohandada;

10) võimaldama kasutajal liideseobjektidega vahetult manipuleerida;

Kasutage režiime targalt

Režiimid pole alati halvad. On vaja võimaldada inimesel valida endale vajalikud režiimid. Liides peaks olema nii loomulik, et kasutaja tunneks end mugavalt nendega töötades. Kasutaja ei mõtle sisselülitamisel sisestusrežiimile või ülekirjutamisele tekstitöötlus- see on täiesti ratsionaalne ja loomulik.

Lubage inimesel kasutada hiirt ja klaviatuuri

Võimalus töötada klaviatuuriga, kasutades hiire asemel klaviatuuri. See tähendab, et kasutajal on lihtsam töötada, ta lihtsalt kas ei saa seda kasutada või tal pole seda. Tööriistaribad on loodud teie töö kiirendamiseks hiire kasutamisel. Klaviatuuriga töötades pole neid aga võimalik saavutada - sellistel juhtudel on ette nähtud rippmenüüd.

Luba kasutajal tähelepanu vahetada

Ärge sundige kasutajaid alustatud toiminguid lõpetama. Andke neile valik – tühistage või salvestage andmed ja naaske sinna, kus pooleli jäid. Andke kasutajatele võimalus programmis töötamise protsessi juhtida.

Näita selgitavaid sõnumeid ja tekste

Kasutage kogu liideses kasutajasõbralikke termineid. Nad ei pea teadma bittide ja baitide kohta!

Sõnumites ja kutsetes tuleks valida õige toon. Sama oluline on kindlustada end probleemide ja vigade vastu. Kehv terminoloogia ja vale toon põhjustavad selle, et kasutajad süüdistavad end esinevates vigades.

Pakkuge kohest ja pöörduvat tegevust ja tagasisidet

Iga tarkvaratoode peab sisaldama UNDO ja REDO funktsioone. Kasutajat tuleb sellest teavitada see tegevus ei saa tühistada ja võimaluse korral lubada tal võtta alternatiivne toiming. Hoia inimest pidevalt kursis sellega, mis hetkel toimub.

Pakkuge selged teed ja väljapääsud

Kasutajad peaksid nautima töötamist mis tahes tarkvaratoote liidesega. Isegi tööstuses kasutatavad liidesed ei tohiks kasutajat hirmutada, ta ei peaks kartma vajutada nuppe või minna teisele ekraanile. Internetiinvasioon näitas, et navigeerimine on peamine interaktiivne tehnika Internetis. Kui kasutaja saab aru, kuidas sisse logida soovitud leht WWW-s on 80% tõenäosus, et ta saab liidest aru. Inimesed õpivad brauseri tehnikaid väga kiiresti selgeks.

Majutage erineva oskustasemega kasutajaid

Ära "ohverda" kogenud kasutajad tavainimeste hüvanguks. Peame neid tagama kiire juurdepääs funktsioonide programmeerimiseks. Ärge väsitage neid toimingu sooritamiseks mitme sammuga, kui nad on harjunud kasutama ühte makrokäsku.

Muutke kasutajaliides "läbipaistvaks"

Kasutajaliides on tarkvaratoote "müütiline" osa. Kell hea projekt kasutajad isegi ei tunne selle "kohalolu". Kui see on halvasti disainitud, peavad kasutajad selle nimel isegi palju vaeva nägema tõhus kasutamine tarkvaratoode. Liidese eesmärk on aidata inimestel tunda, et nad on arvuti sees ning saavad vabalt manipuleerida ja töötada objektidega. Seda nimetatakse "läbipaistvaks" liideseks!

yadobr 14. jaanuar 2014, kell 09:10

Graafiline kasutajaliidese disain

• Liidesed

Sissejuhatus

IN kaasaegne maailm miljardeid arvutusseadmed. Rohkem rohkem programme neile. Ja igal neist on oma liides, mis on kasutaja ja kasutaja vahelise suhtluse "hoovad". masina kood. See pole üllatav parem liides, seda tõhusam on suhtlus.

Kuid mitte kõik arendajad ja isegi disainerid ei mõtle mugava ja arusaadava graafilise kasutajaliidese loomisele.

Enda jaoks alustasin küsimuste esitamisega: üldised põhimõtted, mis liidese elemendid (EI) looge, milline kujundus neil peaks olema, kuhu need tuleks õigesti paigutada ja kuidas nad peaksid käituma.
Allpool püüan neile küsimustele vastata.

Üldised põhimõtted

Millise EI peaksin looma?

Milline peaks olema EI disain?

Tegelikult on EI disain eraldi artikli teema. Siin peate võtma arvesse kõike: alates värvist, kujust, proportsioonidest kuni kognitiivse psühholoogiani. Siiski tasub meeles pidada mõnda põhimõtet:

Kuidas EI-d ekraanil õigesti positsioneerida?

Kuidas peaksid EI-d käituma?

Vahi all

See artikkel ei pretendeeri kõigele täielik juhend liidese kujundamise põhimõtted. Graafiline kasutajaliides on ulatuslik teema, mis on tihedalt läbi põimunud psühholoogiaga, hõivab teadlaste mõtteid ning sadu lehekülgi raamatuid ja uurimusi. Nii väikeses formaadis ei saa kuidagi väljendada tõstatatud teema täiust. Siiski järgimine põhiprintsiibid, võimaldab teil luua kasutajasõbralikumaid liideseid ja lihtsustada projekteerimisprotsessi ennast.
Tänan tähelepanu eest.

Kirjandus

Jeff Raskin, "Liides: uued suunad arvutisüsteemide kujundamisel"
Alan Cooper, „Liidese kohta. Interaktsiooni kujundamise alused"
Alan Cooper, "Vaimuhaigla patsientide kätes"