Notă
Accesul la această pagină necesită autorizare. Puteți încerca să vă conectați sau să modificați directoarele.
Accesul la această pagină necesită autorizare. Puteți încerca să modificați directoarele.
Se aplică acestei recomandări din lista de verificare *Optimizarea experienței bine arhitectate*: Power Platform
| XO:06 | Mențineți machete utilizabile și atractive din punct de vedere vizual pentru toate dimensiunile și rezoluțiile ecranului. Folosește tehnici adaptive pentru a reda dinamic conținutul în diverse moduri. |
|---|
Acest ghid descrie recomandările pentru proiectarea unor machete de ecran ușor de navigat și care se adaptează fluid pe diverse dispozitive. Această abordare asigură utilizatorilor o experiență de vizionare consistentă și optimă, indiferent de dispozitivul pe care îl utilizează.
Definiții
| Termen | Definiție |
|---|---|
| Vizualizare | Porțiunea vizibilă a unei interfețe digitale, cum ar fi un browser web sau o aplicație mobilă, unde este afișat conținutul. Intervalele de ferestre de vizualizare sunt adesea asociate cu clase de dispozitive (mobile, tablete și desktop) pe baza dimensiunilor și rezoluțiilor ecranului. |
| Puncte de întrerupere | Valori specifice ale pixelilor care definesc intervalele de vizualizare utilizate pentru a determina comportamentul adaptiv al aspectului. |
Strategii cheie de design
Layout-urile responsive oferă o experiență flexibilă și eficientă pentru utilizatori, indiferent de dimensiunea ferestrelor. Se adaptează prin scalarea conținutului, rearanjarea elementelor și afișarea selectivă a textului și imaginilor. Layout-urile responsabile satisfac nevoile utilizatorilor, indiferent de dimensiunea ecranului lor.
Determinați un cadru de aplicație consistent
Cadrul aplicației constă dintr-un set de controale disponibile în mod constant pe fiecare ecran. Acesta cuprinde trei subcomponente principale: un antet, o secțiune de navigare și o regiune de conținut. Aplicațiile simple au flexibilitatea de a utiliza componenta de antet, în timp ce aplicațiile mai sofisticate folosesc adesea navigarea laterală pentru a activa mai multe pagini. Subcomponentele sunt personalizabile. De exemplu, puteți încorpora o căutare globală în antet sau puteți grupa elemente în navigarea laterală pentru a se potrivi cerințelor aplicației dvs.
Cele trei subcomponente principale ale cadrului aplicației sunt:
*Antetul* este o componentă de bază concepută pentru a face parte din fiecare aplicație internă. Este alcătuit din subcomponente care oferă utilizatorilor acces la funcții la nivel de sistem, îi ajută să se orienteze către interfața cu utilizatorul și asigură consecvență între experiențe. Apare în partea de sus a cadrului aplicației și ar trebui să persiste pe toate paginile aplicației. Opțional, poate găzdui comenzi globale, cum ar fi căutare, setări, notificări, feedback, profil sau ajutor. Numele aplicației ar trebui să fie afișat întotdeauna și, în mod ideal, ar trebui să servească și ca link către pagina principală sau pagina de destinație, pe care se poate da clic. Antetul ar trebui să fie responsiv, cu comenzi care se mută în controlul de depășire în viewport-uri de 600 pixeli sau mai puțin. Lățimea de introducere a textului de căutare este, de asemenea, responsivă la 1023 pixeli și mai puțin.
Navigația este un sistem de controale care funcționează împreună pentru a ajuta utilizatorii să găsească informații și să finalizeze sarcini. Ajută utilizatorii să treacă de la o secțiune la alta a unei aplicații. Ierarhic, nu este atașat niciunei pagini sau secțiuni, ci există deasupra oricărui alt conținut. Este mereu prezent și poate fi minimizat la o stare restrânsă (numită și stare șină) pentru a elibera spațiu suplimentar pentru conținutul paginii. La ferestre mai mici, aceasta poate fi minimizată într-un meniu glisant. Cele mai comune forme de navigare includ navigarea superioară și navigarea laterală. Nu le folosiți pe amândouă simultan.
Regiunea de conținut conține focalizarea ecranului. Dimensiunea ferestrei browserului influențează cadrul de conținut și spațiul disponibil în regiunea principală de conținut. Acest cadru se adaptează în funcție de punctul de întrerupere și de comportamentul de răspuns corespunzător al fiecărei componente. Aflați mai multe în Crearea unei matrice de puncte de întrerupere.
Regiunea de conținut poate conține opțional mai multe subregiuni disponibile pentru plasarea consistentă a elementelor, cum ar fi un antet de pagină, panouri laterale în linie sau panouri care se suprapun peste conținut.
Respectarea unui limbaj de design consistent, cu scheme de culori, tipografie și structură a aspectului, îi ajută pe utilizatori să identifice și să interacționeze rapid cu diverse elemente, fără confuzie. Cu cât un model de cadru de aplicație este utilizat mai consistent în toate aplicațiile interne de business, cu atât mai puternică devine amintirea sau modelul mental al utilizatorului. Alinierea la standardele din industrie sau la modelele comune ale platformelor sporește și mai mult acest efect.
După ce este determinat cadrul aplicației, aspectul fiecărui ecran se află în zona de conținut a cadrului aplicației.
Folosește cu grijă regiunea de conținut
Utilizatorii își doresc experiențe fluide, în care informațiile sunt ușor accesibile, textul este ușor de citit, iar estetica îmbunătățește, în loc să împiedice, utilizabilitatea. Prioritizați vizibilitatea inițială a informațiilor cheie, asigurați lizibilitatea pe toate coloanele și armonizați elementele de design pentru un aspect estetic plăcut.
Asigurați-vă că informațiile esențiale sunt vizibile imediat la deschiderea ecranului, fără a fi nevoie de derulare. Prioritizați afișarea informațiilor esențiale, cum ar fi opțiunile de navigare, conținutul crucial și elementele acționabile în partea de sus a ecranului. Găsirea unui echilibru între afișarea unui număr suficient de elemente și furnizarea de informații detaliate pentru fiecare element este o provocare constantă. În schimb, deși poate fi tentant să oferi toate informațiile posibile în prima prezentare, prea multe informații riscă să copleșească utilizatorii și să dilueze importanța elementelor cheie. Luați în considerare utilizarea unor rezumate sau previzualizări concise care oferă o privire asupra unui conținut mai detaliat, incitând utilizatorii să aprofundeze informațiile. Tablourile de bord sunt optimizate pentru a servi acestui scop de vizualizare a unor cantități mari de date.
Încorporează mai multe coloane, secțiuni sau grupări pentru a organiza logic conținutul și a maximiza spațiul. Acordați o atenție meticuloasă lățimii coloanelor, asigurându-vă că textul rămâne lizibil fără a fi suprasolicitat. Evitați coloanele prea înguste care obligă utilizatorii să deruleze constant pe orizontală, perturbând fluxul de interacțiune. În schimb, coloanele excesiv de late pot împiedica lizibilitatea, obligând utilizatorii să urmărească linii pe distanțe lungi. Căutați un echilibru care să ofere o lectură confortabilă și să utilizeze eficient spațiul disponibil.
Dimensionați și poziționați elementele vizuale în mod corespunzător pentru a crea o interfață plăcută din punct de vedere vizual și echilibrată. Aliniați legendele cu elementele vizuale sau titlurile corespunzătoare, mențineți o spațiere consistentă între elemente și respectați o ierarhie bazată pe nevoile utilizatorilor. Eliminați înfrumusețările inutile și alocați pixelii cu judecată elementelor care contează cel mai mult. Prioritizați și accentuați conținutul și elementele de navigare, în special în aplicațiile sau paginile principale care necesită multă navigare și evitați ornamentația superfluă care diminuează utilitatea.
O grilă subiacentă poate fi utilă pentru aranjarea uniformă a elementelor. Comportamentul ales al grilei ar trebui să fie consistent în fiecare regiune de conținut a ecranului din aplicație și poate fi aplicat și la nivel de componentă, cum ar fi cardurile sau panourile laterale. Cel mai comun tip de grilă utilizat în aplicațiile web este grila de coloane. Comportamentul fluid (sau extensibil) al grilei este recomandat pentru implementarea ecranelor responsive.
Folosește machete și modele de grupare stabilite
Folosește structuri și aranjamente recunoscute în mod obișnuit pentru organizarea conținutului și a elementelor în cadrul unei interfețe utilizator. Aceste machete și modele au fost rafinate și s-au dovedit eficiente în timp, făcându-le familiare și intuitive pentru utilizatori, facilitând în același timp implementarea modelelor adaptive. Odată ce scenariile și elementele principale sunt identificate, mapați fiecare la un aspect stabilit care oferă cea mai bună interacțiune. Prioritizează conținutul și caracteristicile importante pentru finalizarea sarcinii. Decideți ce elemente ar trebui să fie întotdeauna vizibile și accesibile pe ecran și care pot fi ascunse sau accesate prin alte meniuri sau acțiuni.
Următoarea listă, deși nu este exhaustivă, descrie machete consacrate utilizate în mod obișnuit pentru aplicații de afaceri sau de productivitate. Toate pot fi plasate în regiunea principală de conținut.
Ecran de pornire/principal
Ecranul de pornire sau de pornire servește ca punct de intrare către o aplicație, oferind utilizatorilor o prezentare generală a ofertelor sau funcțiilor aplicației. De obicei, își propune să capteze atenția vizitatorilor și să încurajeze o acțiune specifică, cum ar fi finalizarea unei sarcini pentru prima dată sau explorarea unui conținut suplimentar. Adesea conține imagini principale și opțiuni de navigare curate.
Este ideal pentru a întâmpina utilizatorii, oferind acces rapid la funcționalități cheie, opțiuni de navigare sau îndemnuri la acțiune și stabilind tonul experienței aplicației. Prioritizați claritatea, simplitatea și navigarea intuitivă pentru a ghida eficient utilizatorii.
Tablou de bord
Un tablou de bord este un hub centralizat în cadrul unei aplicații care oferă utilizatorilor o imagine de ansamblu completă a datelor sau informațiilor relevante. Adesea constă din widget-uri sau module personalizabile, permițând utilizatorilor să monitorizeze anumite valori sau să efectueze acțiuni.
Tablourile de bord sunt potrivite pentru aplicații cu seturi de date complexe sau funcționalități multiple, permițând utilizatorilor să urmărească progresul, să analizeze tendințele și să ia decizii informate dintr-o privire. Sunt deosebit de utile în platformele de analiză, instrumentele de management de proiect și aplicațiile de management financiar.
Formular
Un formular este un aspect structurat care facilitează introducerea datelor de către utilizatori, alcătuit de obicei din câmpuri pentru introducerea diferitelor tipuri de informații, cum ar fi text, numere, date și selecții. Formularele sunt esențiale pentru colectarea datelor de intrare ale utilizatorilor, procesarea tranzacțiilor și facilitarea interacțiunilor în cadrul aplicațiilor.
Acestea sunt utilizate în mod obișnuit în fluxurile de înregistrare, procesele de finalizare a comenzii, sarcinile de introducere a datelor și orice scenariu care necesită intervenția sau feedback-ul utilizatorului.
Vizualizare entitate/profil
Entitatea sau vizualizarea profilului prezintă informații detaliate despre o anumită entitate, cum ar fi un profil de utilizator, o listă de produse sau un element de conținut. De obicei, include text descriptiv, elemente multimedia și acțiuni sau interacțiuni relevante.
Sunt potrivite pentru prezentarea de informații detaliate despre elementele dintr-o aplicație. Acestea oferă utilizatorilor informații detaliate, facilitează luarea deciziilor și sprijină interacțiunea cu entități specifice, cum ar fi profilurile de utilizator în aplicațiile de socializare sau listele de produse în platformele de comerț electronic.
Pagina de listă
O listă sau un tabel afișează o colecție de elemente sau entități într-un format structurat, adesea prezentate într-un aspect liniar sau de tip grilă. De obicei, include scurte rezumate sau previzualizări ale fiecărui element, împreună cu controale de navigare pentru răsfoire sau filtrare.
Paginile cu listă sunt eficiente pentru prezentarea unor seturi mari de conținut sau date într-un format ușor de digerat, permițând utilizatorilor să scaneze, să caute și să navigheze eficient. Dacă sunt activate acțiuni pe anumite rânduri, procesul ar trebui să fie clar. Paginile de listă sunt utilizate în mod obișnuit în sistemele de gestionare a conținutului, listele de directoare, rezultatele căutării și fluxurile de știri.
Mini recenzie (ecran divizat)
O mini-revizuire sau un ecran divizat împarte interfața în două secțiuni distincte, cu o listă afișată în partea stângă și o vizualizare a elementelor în partea dreaptă. Lista conține de obicei o colecție de elemente, în timp ce vizualizarea elementelor oferă informații detaliate despre elementul selectat din listă.
Acest aspect este deosebit de eficient în scenariile în care utilizatorii trebuie să răsfoiască rapid o listă de elemente și să vizualizeze simultan informații detaliate despre fiecare element, cum ar fi atunci când efectuează operațiuni în bloc. Cataloagele de produse, sistemele de gestionare a documentelor, clienții de e-mail sau de comunicare și instrumentele de gestionare a activităților (de exemplu, vizualizatorul de interogări Azure Dev Ops) sunt scenarii care se încadrează de obicei în acest model.
Expert
Un expert ghidează utilizatorii printr-o serie de pași sau sarcini secvențiale, de obicei într-o manieră liniară, pentru a finaliza un proces complex sau a atinge un obiectiv specific. Adesea include indicatori de progres, solicitări și verificări de validare. Wizard-ii sunt utili pentru simplificarea proceselor complexe, reducerea supraîncărcării cognitive și ghidarea utilizatorilor prin sarcini sau fluxuri de lucru nefamiliare. Acestea sunt utilizate în mod obișnuit în fluxurile de integrare, procesele de configurare, formularele cu mai mulți pași și interacțiunile bazate pe sarcini, cum ar fi configurarea setărilor complexe sau a tranzacțiilor.
Personalizați și dezvoltați pe baza aspectului standard pentru a se potrivi cerințelor specifice. Acest proces poate include adăugarea sau eliminarea elementelor, ajustarea dimensiunii și poziționării elementelor și aplicarea stilului pentru a se potrivi cu identitatea mărcii sau cu liniile directoare de design vizual. Experimentați cu diferite configurații și variații ale aspectului standard pentru a găsi cea mai eficientă aranjare pentru conținut și experiența generală a utilizatorului.
Design layout-uri pentru toate dispozitivele
Layout-urile sunt o culminare a unor reguli definite și a unei organizări intenționate a conținutului. Aducerea conținutului în structuri bine gândite este esențială, dar asigurarea unei ierarhii clare între platforme și dimensiuni de ecran necesită o logică de scalare. Designul individual, adaptiv și responsiv poate aborda fiecare această provocare. În unele cazuri, o combinație de design adaptiv și responsiv este alegerea potrivită.
Designul responsiv folosește un singur layout, în care conținutul este fluid și se poate adapta la schimbarea dimensiunii formatului. Această tehnică de proiectare folosește interogări media pentru a inspecta caracteristicile unui anumit dispozitiv și a reda conținutul în consecință. Designul responsiv vă permite să creați o funcționalitate o singură dată și să o faceți să funcționeze eficient pe toate dimensiunile ecranului.
Un *layout* adaptiv se schimbă în întregime în funcție de formatul în care este prezentat. Designul adaptiv are mai multe dimensiuni fixe de layout și declanșează browserul să încarce un anumit layout în funcție de spațiul disponibil. Site-urile web construite cu design adaptiv utilizează interogări media pentru a detecta punctele de întrerupere, similar designului responsiv. De asemenea, folosesc markup suplimentar bazat pe capacitățile dispozitivului. Acest proces este cunoscut sub numele de „îmbunătățire progresivă”.
Repoziționare
Modificați poziția elementelor paginii.
Mențineți conținutul organizat, ușor de citit și echilibrat optimizând compoziția pe măsură ce dimensiunea ferestrei crește. De exemplu, elementele stivuite vertical dintr-o fereastră de vizualizare mobilă pot fi repoziționate orizontal pe ferestre de vizualizare mai mari. Această modificare respectă o ordine naturală de citire de la stânga la dreapta, creează echilibru în design și menține focalizarea vizuală asupra elementelor cheie ale paginii.
Redimensionare
Ajustați dimensiunea și marginile elementelor paginii.
Redimensionați elementele paginii pentru a optimiza experiența utilizatorului, afișând mai mult conținut în partea de sus a ferestrei, reducând astfel necesitatea derulării verticale. Ajustați marginile paginii pentru a adăuga spațiu alb și echilibru aspectului, ceea ce permite conținutului să respire și îmbunătățește atractivitatea vizuală a designului. De exemplu, o componentă hero s-ar putea extinde pe întreaga lățime a ferestrei pentru a afișa o parte mai mare din imaginea de fundal. Conținutul de sub imagine poate fi extins, dar folosiți margini diferite pentru a adăuga varietate în aspect și a ajuta la definirea ierarhiei vizuale.
Rearanjare
Optimizați fluxul elementelor paginii.
Ajustați elementele paginii pentru a vă asigura că sunt afișate complet, ținând cont de dimensiunea și orientarea ferestrei, prin rearanjarea conținutului. De exemplu, o singură coloană de conținut dintr-o fereastră mai mică poate fi reorganizată într-o fereastră mai mare pentru a afișa două coloane de text. Această tehnică permite afișarea unei cantități mai mari de conținut „deasupra liniei de îndoire”.
Afișează/ascunde
Optimizați conținutul pentru dimensiunea ferestrei și orientarea acesteia.
Afișați sau ascundeți elementele paginii pentru a optimiza conținutul în funcție de dimensiunea ferestrei și de orientarea acesteia. Această tehnică responsivă adaptează cantitatea de informații la contextul de vizualizare. De exemplu, categoriile care apar pe un ecran mic ar putea afișa metadate limitate, cum ar fi o imagine, un titlu și un link, astfel încât alte informații să fie vizibile pentru a ajuta utilizatorul să se concentreze. Pe un ecran mai mare, categoriile pot afișa metadate suplimentare, cum ar fi o persoană, o dată și o scurtă descriere, încadrându-se în totodată în fereastra de vizualizare.
Rearhitect
Elementele și conținutul paginii se bifurcă sau se restrâng pentru a menține concentrarea asupra informațiilor și acțiunilor importante.
Această abordare este similară cu urmarea practicii „dezvăluirii progresive” în design, dar pentru dimensiuni și orientări diferite ale ferestrelor. De exemplu, extinderea ferestrei permite afișarea unei liste de elemente lângă detalii. Această legătură vizuală între conținut permite utilizatorilor să selecteze cu ușurință un alt element. Pe un ecran mai mic, accentul rămâne pe afișarea informațiilor cheie.
Creați o matrice de puncte de întrerupere
O matrice de puncte de întrerupere servește ca o reprezentare grafică a comportamentelor responsive sau adaptive ale designului unei aplicații pe diferite dimensiuni și orientări ale ecranului. De obicei, prezintă o grilă structurată sau un aspect care detaliază răspunsul designului la diferite puncte de întrerupere. Fiecare segment corespunde unei lățimi distincte a ecranului, oferind informații despre structura, aspectul și funcționalitatea designului. O matrice de puncte de întrerupere cuprinde considerații privind lățimea ecranului, orientarea viewport-ului, elementele de design, structura aspectului, prezentarea conținutului, navigarea, media și componentele interactive, pentru a ilustra modul în care designul unui site web sau al unei aplicații răspunde la diferite dimensiuni și orientări ale ecranului. Această abordare nu numai că ajută la finalizarea designului fiecărui ecran, dar facilitează și implementarea atunci când modificările proprietăților componentelor cheie sunt urmărite explicit și bine comunicate.
Power Platform facilitare
Aspectele formularelor pentru aplicațiile bazate pe modele sunt configurate folosind Power Apps Studio. Designerul de formulare permite creatorilor să adauge elemente la o structură de grilă, ceea ce permite paginilor de formular să fie în mod inerent responsive. ... Componentele personalizate încorporate, cum ar fi paginile personalizate, componentele încorporate din canvas și Power Apps componentele de cod Component Framework , trebuie să includă un comportament responsiv în implementările lor. De exemplu, paginile personalizate trebuie să implementeze un comportament responsiv în același mod ca o aplicație canvas pură pentru a funcționa corect.
Aplicațiile Canvas necesită o configurare explicită pentru fiecare componentă pentru a implementa un comportament responsiv, permițând un control mai mare asupra experienței. Dimensiunile ecranului sunt determinate în definiția aplicației, care poate fi consultată pentru a determina poziția, comportamentul, vizibilitatea și alte proprietăți relevante.