Design interfață grafică cu utilizatorul. Adăugarea de funcționalități la butonul „Șterge”. Motif are instrumente nu numai pentru a lucra cu linii de text afișate într-un singur font, dar vă permite și să lucrați cu obiecte precum „linii compuse”

Adnotare: Studiem widget-urile - elementele vizuale care alcătuiesc interfața grafică cu utilizatorul, aspectul acestora, politica de dimensiune, conexiunile semnal-slot, elementele interfeței grafice și utilizarea lor.

13.1 Widgeturi

Widgeturile sunt elementele vizuale care alcătuiesc interfața grafică cu utilizatorul.

Exemple de widget-uri:

  • Buton (clasa QPushButton);
  • Etichetă (clasa QLabel);
  • Câmp de intrare (clasa QLineEdit);
  • Câmp contor numeric (clasa QSpinBox);
  • Bara de defilare (clasa QScrollBar).

Qt are aproximativ 50 de clase gata făcute de elemente grafice disponibile pentru utilizare. Clasa părinte pentru toate widget-urile este clasa QWidget. Toate proprietățile principale ale elementelor vizuale sunt moștenite de la acesta, pe care le vom analiza cu atenție. Să începem să explorăm modalități de a dezvolta programe cu o interfață grafică cu un exemplu.

Să creăm un fișier de proiect gol. Să lansăm expertul de proiect și să selectăm elementul din secțiunea Proiecte Alt Proiect. Apoi, selectați tipul de proiect Proiect Qt gol. Să adăugăm conținutul fișierului de proiect:

Șablon = aplicație #Qt module pe care le vom folosi QT += widget-uri #Adăugați modulul widget-uri pentru a lucra cu widget-uri (necesar pentru Qt5). TARGET = widget#Numele fișierului executabil SOURCES += \ main.cpp

Acum să creăm un program simplu cu o fereastră în care vom afișa inscripția. Să setăm dimensiunea ferestrei și textul titlului acesteia și, de asemenea, să setăm fontul pentru inscripție. Pentru a face acest lucru, creați un fișier main.cpp cu următorul conținut:

#include #include int main (int lArgc, char * lArgv ) ( //Creează un obiect QApplication care inițializează și configurează programul fereastră, //controlează execuția acestuia folosind bucla de evenimente QApplication lApplication (lArgc, lArgv); QLabel lLabel; //Creează un QLabel widget - label lLabel.setText ("Eu sunt widget!" //Setați textul pentru eticheta lLabel.setGeometry (200, 200, 300, 150) //Setați dimensiunile - poziție (x, y); și înălțime text lLabel.setAlignment (Qt::AlignHCenter | Qt::AlignVCenter //Clasa QFont este utilizată pentru a seta parametrii fontului Arial Black și dimensiunea 12. QFont lBlack ", 12); setFont (lBlackFont); //Setați fontul pentru eticheta lLabel.show (); //Apelați metoda show() pentru a afișa eticheta pe ecran return lApplication.exec (); //Rulați program pentru a executa procesarea evenimentelor exec() //Programul așteaptă acțiunile utilizatorului și le procesează.

După cum putem observa, elementele care alcătuiesc interfețele în Qt au propria lor poziție și dimensiune – așa-numita „geometrie” – și astfel ocupă o zonă dreptunghiulară corespunzătoare pe ecran (vezi Fig. 13.1). De asemenea, fiecare element are setări care îi determină comportamentul și aspectul.


Orez. 13.1.

Pentru a crea o structură, widget-urile sunt organizate într-o ierarhie conform principiului „parte - întreg”. Fiecare widget poate conține alte widget-uri. Acest element vizual devine „părinte” (widget părinte) al elementelor pe care le conține. Rețineți că astfel de relații nu trebuie confundate cu moștenirea în C++ - relațiile dintre clasele dintr-un program. Relațiile dintre widget-uri sunt relații între obiecte. Astfel de relații dau naștere la mai multe consecințe:

  • elementul părinte va fi responsabil pentru ștergerea elementului copil: dacă widgetul părinte este șters, acesta va șterge automat toate elementele copil;
  • widget-ul părinte plasează widget-uri copil în interiorul său, părți ale widget-urilor copil care se extind dincolo de părinte vor fi invizibile;
  • o parte din starea widget-ului părinte este transmisă copiilor săi - acest lucru se aplică unor proprietăți (vizibilitate, activitate) și stiluri care sunt aplicate elementului vizual.

Widgeturile care nu au un părinte (widgeturi de nivel superior) apar ca ferestre separate în program. Să ne uităm la un exemplu. Să denumim noul proiect ParentExample. Fișierul de proiect va conține setările obișnuite pentru un proiect GUI:

ȘABLON = aplicație ȚINTĂ = ParentExample QT += widget-uri

Pentru widget-ul pe care îl vom folosi ca fereastră principală, vom crea o nouă clasă. Pentru asta in categoria Fișiere și clase Să selectăm secțiunea C++ și să selectăm Clasa C++ (vezi Fig. 13.2).

Următorul pas este să creați mai multe elemente pe fereastră. Pentru a face acest lucru, deschideți fișierul parentwidget.cpp și modificați codul constructorului clasei. Pentru a afișa elemente, trebuie doar să le creați în constructorul de clasă și să setați ParentWidget ca părinte pentru ele. Codul parentwidget.cpp arată astfel:

#include " parentwidget.h " #include #include #include ParentWidget::ParentWidget (QWidget * părinte) : QWidget (părinte) ( //Creează o etichetă care indică widgetul părinte - aceasta, adică o instanță a clasei ParentWidget. QLabel * lLabel=nou QLabel (aceasta); //Posiție relativ la colțul din stânga sus al widgetului părinte lLabel ->setGeometry (50, 0, 100, 30 lLabel ->setText ("TextLabel "), setați „parent”, geometria și textul QPushButton * lPushButton = nou QPushButton (aceasta lPushButton->setGeometry (50, 50, 100, 30 lPushButton->setText (" PushButton " //Creați un câmp de intrare, setați „părinte”); QLineEdit * lLineEdit = new QLineEdit ( this lLineEdit ->setGeometry (50, 100, 100, 30) ( lLineEdit ->selectAll (doar pentru). exemplu) //Schimbați în sfârșit dimensiunea widget-ului părinte setGeometry (x (), y (), 300, 150 // și setați textul titlului ferestrei setWindowTitle ("widget-ul părinte");

Deoarece elementul părinte este ParentWidget , eticheta (QLabel), butonul (QPushButton) și câmpul de text (QLineEdit) se află în el. Poziția widget-urilor copilului este setată în raport cu colțul din stânga sus al tatălui. Puteți verifica cu ușurință acest lucru schimbând dimensiunea și poziția ferestrei programului nostru. Observați cum am creat elementele UI pe heap folosind noul operator. Acest lucru asigură că elementele nu sunt eliminate după finalizarea constructorului ParentWidget.

yadobr 14 ianuarie 2014 la 09:10

Design grafic al interfeței utilizator

  • Interfețe

Introducere

Există miliarde de dispozitive de calcul în lumea modernă. Chiar mai multe programe pentru ei. Și fiecare are propria sa interfață, care este „pârghiile” de interacțiune dintre utilizator și codul mașinii. Nu este surprinzător, cu cât interfața este mai bună, cu atât interacțiunea este mai eficientă.

Cu toate acestea, nu toți dezvoltatorii și chiar designerii se gândesc la crearea unei interfețe grafice convenabile și ușor de înțeles.

Pentru mine, am început prin a pune întrebări: principii generale, ce elemente de interfață (EI) creați ce design ar trebui să aibă, unde ar trebui să fie plasate corect și cum ar trebui să se comporte.
Mai jos voi încerca să răspund la aceste întrebări.

Principii generale


Ce EI ar trebui să creez?


Care ar trebui să fie designul EI?

De fapt, designul EI este subiectul unui articol separat. Aici trebuie să ții cont de totul: de la culoare, formă, proporții, până la psihologia cognitivă. Cu toate acestea, câteva principii sunt încă de remarcat:

Cum se poziționează corect EI pe ecran?


Cum ar trebui să se comporte EI?


In custodie

Acest articol nu pretinde a fi cel mai cuprinzător ghid al principiilor de proiectare a interfeței. Interfața grafică cu utilizatorul este un subiect vast, strâns împletit cu psihologia, ocupând mințile oamenilor de știință și sute de pagini de cărți și studii. Într-un format atât de mic, nu există nicio modalitate de a exprima plenitudinea subiectului ridicat. Cu toate acestea, respectarea principiilor de bază va face posibilă construirea de interfețe care sunt mai ușor de utilizat, precum și simplificarea procesului de proiectare în sine.
Vă mulțumim pentru atenție.

Literatură

Jeff Raskin, „Interfață: noi direcții în proiectarea sistemelor informatice”
Alan Cooper, „Despre interfață. Fundamentele designului de interacțiune”
Alan Cooper, „Spitalul de boli psihice în mâinile pacienților”
09 iulie 2003

Odată cu apariția diverselor instrumente vizuale de dezvoltare a aplicațiilor, scrierea interfețelor grafice pentru programe s-a transformat în ceva asemănător unui joc pentru copii. L-am împuns cu mouse-ul și a apărut un formular; Mi se pare că mulți oameni acum nu se gândesc la un alt mod de programare într-un mediu grafic. Desigur, nu puteți argumenta împotriva progresului atunci când scrieți proiecte mari, toate aceste facilități sunt foarte utile. Dar nu despre asta este vorba în această conversație. Uneori se ajunge la punctul de absurd: o aplicație primitivă este scrisă folosind MFC, VCL etc. Astfel de programe devorează memoria precum termitele și, cu corpurile lor grase, ocupă spațiu suplimentar pe disc. De regulă, analogii MFC/VCL „cântăresc” de zece până la douăzeci de ori mai mult decât programele scrise pe un API pur. Și Visual Basic (Dumnezeu să mă ierte pentru această frază) cu msvbvmXX.dll? Și sunt consumate mult mai multe resurse de sistem (de câteva ori). Utilizatorii săraci, refuzându-și berea, economisesc bani pentru a cumpăra hardware nou. Nu este păcat de cei săraci? Nu numai programatorii beau bere? Există un alt aspect pozitiv al codării API: programatorul devine mai aproape de sistemul de operare. În consecință, el înțelege și controlează mai bine. Și este simplu - este o activitate foarte interesantă. Repet, toate cele de mai sus se aplică în mod specific programelor mici, simple, în proiectele mari, totul este complet diferit.

Sper ca te-am convins. Merge.

Ne vom uita la crearea unei interfețe de fereastră simplă cu funcționalitate minimă. Aceasta va fi o fereastră simplă cu două câmpuri de introducere și două butoane. Când faceți clic pe butonul „Copiere”, textul din primul câmp de introducere va fi copiat în al doilea. Când faceți clic pe butonul „Închidere”, programul își va finaliza activitatea. În viitor, poate servi ca șablon pentru scrierea altor aplicații mai complexe. Vom comunica în C/C++, deși nu vom jigni nici Delphi. Principiul general este același, doar sintaxa este diferită. Pentru a lucra cu mesajele de sistem și cu funcțiile API, trebuie să includeți fișiere de antet în proiect; în C/C++ acesta este windows.h, în Delphi acestea sunt ferestrele și modulele de mesaje.

Orice program din sistemul de operare Windows constă din trei părți principale: funcția principală, bucla de mesaje și funcția fereastră, care procesează toate mesajele trimise către fereastră.

Programul nostru începe să se execute cu funcția WinMain(). Aceasta este funcția principală. Funcția WinMain() îndeplinește de obicei următoarele sarcini:

  • Definește clasa ferestrei. A nu se confunda cu o clasă OOP.
  • Înregistrează această clasă în sistem.
  • Creează fereastra principală a aplicației și alte controale.
  • Afișează o fereastră pe ecran.
  • Pornește bucla de procesare a mesajelor.
  • Este declarat astfel: int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) Să ne uităm la parametrii:
    • hInstance este un handle pentru instanța curentă a aplicației.
    • hPrevInstance este un handle pentru instanța anterioară a aplicației, dacă aceasta rulează.
    • lpCmdLine - pointer către o linie care conține parametrii trecuți programului la pornire.
    • nCmdShow - o constantă care determină modul în care este afișată fereastra. (Vezi constantele SW_).

În Delphi nu vom vedea o astfel de imagine în acest mediu de dezvoltare, funcția principală este ascunsă de programator de către compilator. Deși, desigur, este prezent în codul final. Pentru a înregistra o clasă de ferestre, trebuie să completați câmpurile structurii de tip WNDCLASS (în Delphi TWNDCLASS). În acest scop, am declarat variabila wcl. wcl.hInstance = hInstance; Un handle pentru instanța curentă a aplicației, variabila hInstance este inițializată de funcția WinMain(). In Delphi este initializat implicit. wcl.lpszClassName = szWinName; Numele clasei. Am creat și inițializat variabila șir szWinName în avans. wcl.lpfnWndProc = WindowFunc; Un indicator către o funcție de fereastră. wcl.style = 0; O constantă care specifică stilul ferestrei. Steagulele CS_ sunt folosite pentru asta, tocmai le-am șters la zero. Puteți specifica o combinație de steaguri folosind operația „sau” pe biți. wcl.hIcon = LoadIcon(NULL, IDI_ASTERISK); Un mâner pentru pictograma aplicației, așa cum este returnat de funcția LoadIcon(). Am încărcat o pictogramă standard. A se vedea IDI_ constante. wcl.hCursor = LoadCursor(NULL,IDC_ARROW); Un handle pentru cursorul aplicației, așa cum este returnat de LoadCursor(). Am încărcat săgeata standard. Vedeți constantele IDC_. wcl.lpszMenuName = NULL; Indicator către un șir care specifică numele resursei de meniu pentru această clasă de ferestre. Fără meniu, fără semn. wcl.cbClsExtra = 0; Câmp rezervat. Să resetăm. wcl.cbWndExtra = 0; Câmp rezervat. Să resetăm. wcl.hbrBackground = (HBRUSH)COLOR_WINDOW; Culoarea ferestrei. Constanta COLOR_WINDOW este turnată la tipul HBRUSH (în Delphi nu este nevoie să se arunce). De asemenea, folosind funcția GetStockObject(), puteți seta culoarea pensulei ferestrei sau imaginea de fundal. Acum, nu ezitați să înregistrați clasa ferestre.

RegisterClass(&wcl); Un pointer către structura wcl este transmis ca parametru funcției RegisterClass.

Următoarea linie ne creăm fereastra.

hMainWnd = CreateWindow(szWinName, „O fereastră simplă pe API”., WS_OVERLAPPEDWINDOW ^ WS_THICKFRAME ^ S_MAXIMIZEBOX, CW_USEDEFAULT, CW_USEDEFAULT, 300, 170, HWND_DESKTOP, NULL, hInstance, NULL);
  • Primul parametru este numele clasei de ferestre.
  • Al doilea parametru este titlul ferestrei.
  • Al treilea parametru este stilul ferestrei. Din standardul WS_OVERLAPPEDWINDOW, folosind operația xor, am eliminat capacitatea de a scala fereastra și am dezactivat butonul de maximizare.
  • Al patrulea și al cincilea sunt poziția ferestrei din colțul din stânga, sus al ecranului. Am CW_USEDEFAULT, cu această valoare sistemul selectează automat poziția ferestrei.
  • Al șaselea și al șaptelea parametri sunt lățimea și, respectiv, înălțimea ferestrei.
  • Al optulea parametru este fereastra proprietarului. În fereastra principală, proprietarul este desktopul (0). Comenzile au o fereastră principală.
  • Al nouălea este un indicator către mânerul de meniu. Fără meniu, fără semn.
  • Al zecelea parametru este un handle pentru instanța curentă a aplicației.
  • Al unsprezecelea - Folosit la crearea aplicațiilor cu o interfață MDI. Nu avem nevoie.
Funcția returnează un handle la fereastra creată, care este stocată în variabila hMainWnd.
Un mâner de fereastră este un număr unic în sistem care identifică o fereastră sau un control.

În continuare vom crea controalele necesare. Toate comenzile sunt aceleași ferestre, au doar un nume de clasă diferit. Nu este nevoie să înregistrați clasele de control, acestea sunt deja predefinite în sistem. Buton - clasa de buton. Câmp de introducere - editarea clasei. Legendă - clasă ststic. Există multe clase care corespund controalelor standard. Creăm controale folosind funcția familiară CreateWindow() și funcția necunoscută CreateWindowEx(). CreateWindowEx() vă permite să creați o fereastră cu un stil avansat. Îl folosim pentru a crea câmpuri de intrare. Această funcție a adăugat primul parametru, care setează acest stil cel mai avansat, parametrii rămași sunt la fel ca CreateWindow(). Comenzile sunt ferestre copil, proprietarul lor este fereastra principală.

La crearea controalelor, în parametrii funcției trebuie să specificați descriptorul ferestrei principale, precum și stilul ferestrei WS_CHILD. Aspectul și funcționalitatea controalelor pot fi manipulate folosind steagurile: WS_, ES_, BS_, SS_, combinându-le cu o operațiune „sau” pe biți. La crearea controalelor, inițializam variabilele corespunzătoare cu descriptorii lor, care sunt returnați de funcțiile CreateWindow() și CreateWindowEx(). Vom avea nevoie de acești descriptori pentru a lucra în continuare cu controale. Afișăm fereastra pe care am creat-o pe ecran și o redesenăm.

Funcția GetMessage selectează următorul mesaj din coada de mesaje a aplicației și îl trimite în fereastră.
  • Primul parametru este o structură de tip MSG (în Delphi de tip TMSG)
  • Al doilea parametru este un mâner pentru fereastra căreia este destinat mesajul. Dacă NULL sau 0, atunci toate ferestrele aplicației.
  • Al treilea și al patrulea - vă permit să setați intervalul de mesaje primite. Dacă 0, atunci toate mesajele sunt adresate ferestrei.
GetMessage - returnează FALSE când apare un mesaj WM_QUIT, caz în care se iese din buclă și se iese aplicația. TranslateMessage - traduce codurile de taste virtuale în mesaje de la tastatură. DispatchMessage - trimite un mesaj către funcția fereastră pentru procesare.

Funcția fereastră asigură funcționalitatea programului prin procesarea mesajelor de sistem. Funcția fereastră este o funcție CALLBACK, adică. apelat de sistemul de operare ca răspuns la un mesaj nou primit. Funcția fereastră este declarată astfel:

LRESULT CALLBACK WindowFunc(HWND hMainWnd, UINT iMsg, WPARAM wParam, LPARAM lParam)

  • HMainWnd - handle la fereastra principală.
  • iMsg - numărul mesajului. Vezi constantele WM_.
  • lParam și wParam sunt parametri de mesaj.

Când apare un mesaj, putem compara parametrul iMsg cu una dintre constantele WM_ și putem programa programul să reacționeze în consecință.

De exemplu: Când butonul stâng al mouse-ului este apăsat în timp ce indicatorul mouse-ului se află deasupra zonei client a ferestrei, evenimentul WM_LBUTTONDOWN este lansat. Se apelează funcția fereastră, valoarea constantei WM_LBUTTONDOWN este introdusă în parametrul iMsg, putem verifica starea și programa reacția programului de care avem nevoie.

În interiorul funcției ferestre se află o instrucțiune de selecție care îndeplinește sarcina descrisă mai sus. Operatorul de selecție trebuie să aibă un handler implicit, care este implementat de funcția DefWindowProc(hMainWnd, iMsg, wParam, lParam);

Dacă acest lucru nu se face, programul nostru va muri fără să revină. Multe mesaje sunt procesate de sistemul însuși, cum ar fi: redimensionarea unei ferestre, minimizarea/maximizarea unei ferestre, apelarea meniului de sistem etc. Pentru asta este DefWindowProc().

Când lucrați cu comenzile ferestrei, un mesaj WM_COMMAND este trimis proprietarului ferestrei, cu lParam care conține mânerul pentru control, iar octetul înalt al parametrului wParam este identificatorul evenimentului ridicat pe control. De exemplu: când faceți clic pe un buton - BN_CLICKED. Vezi constantele BN_, WM_. Putem închide programul folosind funcția PostQuitMessage(0). Această funcție trimite un mesaj WM_QUIT către fereastră.

Câteva cuvinte despre cum să scrieți astfel de programe în Delphi. Creați un nou proiect, lansați Project Manager, ștergeți Unit1 împreună cu formularul. Apăsați Ctrl + F12 și deschideți fișierul proiect. Îndepărtăm modulul de formulare din utilizări și adăugăm acolo ferestre și mesaje. Ștergem totul între început și sfârșit. Piesa de prelucrat este gata. Puteți codifica. Este imposibil să scrieți programe folosind un API pur fără ajutor, care ar trebui să fie întotdeauna la îndemână. Dacă ai fi chiar Gates, nu ți-ai aminti totul. Vă recomand:

  • în primul rând - MSDN;
  • Sistem de ajutor Delphi (fișier MSTOOLS.HLP);
  • Există ajutor rusesc pentru Win32 API pe site-ul http://www.soobcha.ru/rushelp.
Asta e tot.
Noroc.

Bobachenko Maxim Descarca: CreateWnd.zip(2,6K)
arhiva conține fișierele windows.cpp și windows.dpr

Crearea unei interfețe grafice cu utilizatorul, care implică aranjarea elementelor grafice și alegerea structurii generale și a fluxului de aplicații, forțează programatorul să devină un fel de artist. Nu există reguli standard care să ajute la crearea prezentărilor, aranjarea elementelor și organizarea structurii. O interfață grafică de succes este considerată o operă de artă. Deoarece crearea de interfețe este mai degrabă o artă decât o știință, nu există reguli stricte de urmat în acest domeniu. Prea mulți parametri sunt determinați de natura aplicației, utilizatori și context.

Cu toate acestea, există o serie de îndrumări practice pe care dezvoltatorii ar trebui să le urmeze pentru a ușura proiectarea interfeței.

¦ Trebuie evitate structurile complexe (cum ar fi un arbore) pentru a lega diferite meniuri. Cel mai bine este să nu includeți mai mult de șase meniuri într-o linie de meniu, fiecare dintre ele nu va conține mai mult de șase opțiuni.

¦ Obiectele trebuie să aibă un sens consistent. De exemplu, pentru a activa toate pictogramele, faceți dublu clic pe mouse. Unele interfețe moderne nu îndeplinesc această recomandare și conțin pictograme care intră în vigoare numai după ce utilizatorul remorcă

obiectează la ele. Barele de defilare trebuie folosite numai pentru defilare și, dacă sunt folosite pictograme de bibliotecă prefabricate, ar trebui să le verificați cu atenție pentru a vă asigura că, de exemplu, pictograma imprimantei este întotdeauna utilizată pentru imprimare.

¦ Când activați toate pictogramele, așa cum sa menționat mai sus, ar trebui să faceți dublu clic pe mouse. Iar pentru a obține un rezultat similar pentru pictogramele de obiecte care sunt activate printr-un singur clic de mouse, este recomandat să programați și un dublu clic. Multe opțiuni, cum ar fi cele găsite în meniul Panoului de control, arată ca pictograme, dar sunt obiecte care pot fi activate cu un singur clic al mouse-ului. Ar trebui să anticipați cum se pot comporta utilizatorii atunci când lucrează cu astfel de obiecte (adică să vă așteptați să facă dublu clic pe ele) și să îi ajutați să obțină rezultatul dorit.

¦ Meniurile de interfață ar trebui să reflecte starea curentă a sistemului. Unul dintre principiile de bază care ghidează majoritatea designerilor de interfețe grafice cu utilizatorul este să se asigure că toate caracteristicile interfeței sunt accesibile indiferent de acțiunile utilizatorului. Regula de jos se potrivește bine cu aplicațiile simple, dar este mai puțin utilă pentru cele mai complexe.

¦ Elementele comune diferitelor meniuri trebuie plasate într-un singur loc. Dar, de exemplu, butoanele OK și Anulare ar trebui să fie întotdeauna poziționate la fel unul față de celălalt și să ocupe același loc în diferite casete de dialog.

¦ Nu trebuie să depuneți eforturi pentru consecvența elementelor de meniu dacă aceasta nu corespunde cu opinia utilizatorilor. De exemplu, utilizatorii cred că tragerea unui fișier dintr-un folder în altul de pe același dispozitiv face ca fișierul să fie mutat în al doilea folder.

De asemenea, ei cred că tragerea unui fișier pe alt dispozitiv creează o copie a originalului acolo. De aici rezultă că implementarea funcției de remorcare va fi inconsecventă, adică. diferite în cazuri diferite. Totuși, aceasta este dorința utilizatorilor care trebuie luată în considerare. Efortul pentru consecvență este doar o recomandare, nu o regulă strictă.

Cerințele ergonomice pentru interfețele grafice cu utilizatorul s-au dovedit a fi în mod clar insuficiente odată cu dezvoltarea „multimedia” - sisteme interactive care oferă lucru cu imagini statice și video în mișcare, grafică animată de computer și text, vorbire și sunet de înaltă calitate. Cercetarea și dezvoltarea ergonomică a acestor sisteme prezintă o provocare provocatoare și interesantă din punct de vedere profesional.

Majoritatea managerilor de proiect de dezvoltare de aplicații, notează B. Tognazzini, așteaptă până la sfârșitul proiectului pentru a începe lucrul la interfață. Acest lucru amintește de construirea unei case, când un arhitect este invitat după construirea cadrului clădirii. Toți dezvoltatorii au abordări diferite pentru organizarea procesului de creare a interfeței. Cu toate acestea, există puncte generale pe care toți dezvoltatorii ar trebui să le respecte:

1) înțelegeți scopul produsului software în fiecare detaliu printr-o comunicare strânsă cu utilizatorii, petrecând adesea zile întregi de lucru cu aceștia pentru a înțelege mai bine stilul lor de lucru și obiceiurile individuale;

2) crearea unei interfețe nu este opera unei singure persoane, ci a reprezentanților a trei domenii: un specialist care află opiniile utilizatorilor despre principalele elemente ale interfeței și le descrie; dezvoltator de interfețe și creator de grafică;

3) un angajat cu experiență ar trebui desemnat ca expert în interfață și legătura între grupul de lucru și utilizatori;

4) testarea, crearea unui aspect și testarea din nou, deoarece chiar dacă scopul produsului software este pe deplin înțeles, este imposibil să se asigure toate nevoile utilizatorului.

Interfețele ar trebui să fie create de oameni, crede D. Norman, care nu iau parte la dezvoltarea aplicației, deoarece dezvoltatorii știu prea multe despre principiile programului, iar acest lucru interferează doar cu crearea interfeței. Avantajele unei interfețe grafice de utilizator sunt în general recunoscute, și poate
Prin urmare, el nu a devenit obiectul unei analize serioase. Regula tradițională a unui dezvoltator de programe, conform căreia ușurința de învățare împiedică adesea utilizatorul să utilizeze pe deplin toate capacitățile programului, se aplică și interfeței grafice. Un exemplu este dezvoltarea unui proiect pentru o companie americană de asigurări, în care a folosit o aplicație de asigurare pentru Macintosh, echipată cu o interfață excelentă, care a fost foarte ușor de învățat. Cu toate acestea, după doi ani de funcționare, utilizatorii finali deveniseră atât de pricepuți în diferitele caracteristici ale aplicației, încât interfața grafică cu utilizatorul nu face decât să-i încetinească. Alegerea interfeței grafice ar trebui să fie determinată de natura sarcinii utilizatorului.

Regula 2: Reduceți sarcina utilizatorului

Regula 3: Faceți interfața compatibilă

Instrucțiuni

Programul Tidy Start Menu

Concluzie

Literatură

Introducere

„Regula de aur a designului este: „Nu faceți niciodată altora ceea ce ți-au făcut ei.” Amintiți-vă ce nu vă place la software-ul pe care îl utilizați și nu faceți același lucru în programul la care lucrați. ”

Tracy Leonard

De ce ar trebui să urmați principiile de proiectare a interfeței cu utilizatorul?

Software-ul trebuie dezvoltat ținând cont de cerințele și dorințele utilizatorului - sistemul trebuie să se adapteze utilizatorului. Acesta este motivul pentru care principiile de design sunt atât de importante.

Utilizatorii de computere pot avea experiențe de succes care le insuflă încredere în abilitățile lor și construiesc o stimă de sine ridicată atunci când lucrează cu un computer. Acțiunile lor cu computerul pot fi caracterizate ca „succesul naște succesul”. Fiecare experiență pozitivă cu programul permite utilizatorului să-și extindă familiaritatea cu software-ul și să-și mărească nivelul de competență. O interfață bine concepută, precum un profesor bun și manuale, asigură o interacțiune fructuoasă între utilizator și computer. Interfețele de succes pot chiar ajuta o persoană să iasă din cercul obișnuit de programe pe care le folosește și să descopere altele noi, să-și aprofundeze înțelegerea modului în care funcționează interfețele și computerele.

Principiile de proiectare a interfeței sunt concepte și vederi de nivel înalt care pot fi utilizate în proiectarea software. Trebuie să determinați care principiu este cel mai important și mai acceptabil pentru sistemul dvs.

Când începeți proiectarea, este necesar să evidențiați cel mai important principiu care va fi decisiv atunci când căutați compromisuri. Încercarea de a respecta toate principiile de proiectare poate duce la faptul că în unele situații nu dă roade și are un impact negativ asupra rezultatului final. Principiile sunt un ghid de acțiune.

Cele trei principii ale proiectării interfeței cu utilizatorul sunt formulate după cum urmează:

1) controlul utilizatorului asupra interfeței;

2) reducerea încărcării memoriei utilizatorului;

3) consistența interfeței cu utilizatorul.

Unde găsiți principiile de proiectare a interfeței cu utilizatorul

Hansen a prezentat prima listă de principii de proiectare. Principiile sunt:

1) cunoașteți utilizatorul;

2) reducerea memorării;

3) optimizarea operațiunilor;

4) eliminarea erorilor.

Mulți producători majori de sisteme de operare publică manuale și instrucțiuni relevante atunci când își lansează noile produse pe piață. Aceste publicații dezvăluie principiile abordării designului interfeței. Manualele au fost produse de Apple Computer, Inc. (1992), IBM Corporation (1992), Microsoft Corporation (1995) și UNIX OSF/Motif (1993).

Cititorii pot folosi aceste publicații ca ajutor didactic. Terminologia interfeței poate diferi între manuale, dar concentrarea materialului, nivelul de complexitate și principiile interfeței cu utilizatorul descrise sunt aceleași pentru toate cărțile.

Importanța respectării principiilor

„Incompatibilitatea interfeței poate costa o companie mare milioane de dolari în pierderi de productivitate și costuri crescute de asistență.” - Jessie Briest.

Aceste principii se aplică tuturor software-ului și hardware-ului, în toate tipurile și stilurile de interfețe. Ele au fost dezvoltate de-a lungul timpului destul de mult: s-au efectuat cercetări în domeniul interfeței software, s-a realizat dezvoltare și au fost chestionați utilizatorii multor platforme de computer, inclusiv Macintosh și PC.

Aceste principii au rezistat testului timpului și apariției noilor tehnologii informatice. Jakob Nielsen a remarcat: „Principiile vor rămâne fundamentale chiar dacă programul are un design 3D futurist cu un DataGlove pentru introducere, recunoaștere a mișcării și imagini video în direct. Ele vor fi relevante deoarece exprimă ideea de bază a dialogului cu mașina comenzi.”

Interpretarea acestor principii va depinde de hardware, sistemul de operare, componentele interfeței cu utilizatorul și sarcinile acesteia. Adesea, deciziile de afaceri depășesc utilizarea principiilor de către designeri. Modelele de utilizator și de proiectant sunt, de asemenea, diferite și influențează modul în care vor fi aplicate principiile. În unele etape importante ale dezvoltării proiectului, poate apărea întrebarea: „Ce se întâmplă în continuare?” Răspunsul ar trebui să fie: „Orice dorește utilizatorul!”

Decizia de a alege principiile optime pentru construirea unei interfețe ar trebui dezvoltată în comun de toți membrii echipei de proiectare. Aceste soluții ar trebui să contribuie la îmbunătățirea gradului de achiziție și dezvoltarea produselor software.

Reguli de proiectare a interfeței cu utilizatorul

„Fă-l mai simplu, dar nu mai primitiv.”

Albert Einstein

Regula 1: Oferiți controlul utilizatorului

Designerii experimentați permit utilizatorilor să rezolve unele probleme la propria discreție. Arhitecții, la finalizarea construcției unui complex complex de clădiri, trebuie să amenajeze căi pentru pietoni între ei. Ei încă nu știu exact unde vor traversa oamenii site-urile. Prin urmare, căile nu sunt niciodată așezate în același timp cu construcția clădirilor. Pe zonele dintre case sunt amplasate semne cu inscripția: „Vă rugăm să mergeți pe iarbă”. După ceva timp, constructorii se întorc și abia acum, după „voința” populației, umplu potecile călcate cu asfalt.

Principii care oferă utilizatorului controlul asupra sistemului:

1) utilizați modurile cu înțelepciune;

2) oferă utilizatorului posibilitatea de a alege: să lucreze fie cu un mouse, fie cu o tastatură, fie cu o combinație a ambelor;

3)permite utilizatorului să concentreze atenția;

4) arata mesaje care il vor ajuta in munca sa;

5) să creeze condiții pentru acțiuni imediate și reversibile, precum și pentru feedback;

6) asigurați căi și ieșiri adecvate;

7) adaptarea sistemului la utilizatori cu diferite niveluri de pregătire;

8) face interfața cu utilizatorul mai ușor de înțeles;

9)oferiți utilizatorului posibilitatea de a personaliza interfața după bunul său plac;

10) permit utilizatorului să manipuleze direct obiectele de interfață;

Utilizați modurile cu înțelepciune

Modurile nu sunt întotdeauna rele. Este necesar să se permită unei persoane să aleagă modurile de care are nevoie. Interfața ar trebui să fie atât de naturală încât utilizatorul să se simtă confortabil să lucreze cu ele. Utilizatorul nu se gândește să treacă la modul de inserare sau rescrire atunci când lucrează într-un procesor de text - acest lucru este destul de rațional și natural.

Permiteți unei persoane să folosească un mouse și o tastatură

Abilitatea de a lucra cu o tastatură folosind o tastatură în loc de un mouse. Aceasta înseamnă că utilizatorului îi va fi mai ușor să lucreze, pur și simplu fie nu îl poate folosi, fie nu îl are. Barele de instrumente sunt concepute pentru a vă accelera munca atunci când utilizați un mouse. Cu toate acestea, atunci când lucrați cu tastatura, acestea nu pot fi atinse - pentru astfel de cazuri, sunt furnizate meniuri „derulante”.

Permiteți utilizatorului să treacă atenția

Nu forțați utilizatorii să termine secvențele de acțiuni începute. Dă-le de ales - anulează sau salvează datele și revine la locul unde au rămas. Permiteți utilizatorilor să aibă posibilitatea de a controla procesul de lucru în program.

Afișați mesaje și texte explicative

Folosiți termeni ușor de utilizat în întreaga interfață. Ei nu trebuie să știe despre biți și octeți!

Ar trebui să alegeți tonul potrivit în mesaje și invitații. Este la fel de important să vă asigurați împotriva problemelor și erorilor. Terminologia slabă și tonul incorect vor determina utilizatorii să se învinuiască pentru erorile care apar.

Oferiți acțiuni și feedback imediat și reversibil

Fiecare produs software trebuie să includă funcțiile UNDO și REDO. Utilizatorul ar trebui să fie informat că acțiunea nu poate fi anulată și, dacă este posibil, să permită o acțiune alternativă. Țineți în mod constant o persoană informată cu privire la ceea ce se întâmplă în acest moment.

Oferiți căi și ieșiri clare

Utilizatorii ar trebui să facă plăcere să lucreze cu interfața oricărui produs software. Nici măcar interfețele folosite în industrie nu ar trebui să intimideze utilizatorul, acesta nu trebuie să se teamă să apese butoane sau să meargă la alt ecran. Invazia internetului a arătat că navigarea este principala tehnică interactivă pe internet. Dacă utilizatorul înțelege cum să acceseze pagina dorită de pe WWW, atunci există o șansă de 80% ca el să înțeleagă interfața. Oamenii învață tehnicile de browser foarte repede.

Acomodați utilizatori cu diferite niveluri de calificare

Nu „sacrificați” utilizatorii experimentați în beneficiul utilizatorilor obișnuiți. Este necesar să le oferiți acces rapid la funcțiile programului. Nu-i plictisi cu mai mulți pași pentru a efectua o acțiune dacă sunt obișnuiți să folosească o singură comandă macro.

Faceți interfața cu utilizatorul „transparentă”

Interfața cu utilizatorul este partea „mitică” a produsului software. Cu un proiect bun, utilizatorii nici măcar nu simt „prezența” acestuia. Dacă este proiectat prost, utilizatorii vor trebui să depună chiar și o mulțime de efort în utilizarea eficientă a produsului software. Scopul interfeței este de a ajuta oamenii să se simtă ca „în interiorul” computerului, să manipuleze liber și să lucreze cu obiecte. Aceasta se numește interfață „transparentă”!