Regulile generale de proiectare a componentelor UX și a animației pe care fiecare designer ar trebui să ia în considerare

Piața modernă a dispozitivelor mobile pentru navigarea pe Internet oferă clientului orice tip de produs. Dacă ne întoarcem chiar și cu un deceniu în urmă, utilizatorii de internet foloseau mai multe formate de bază: un monitor pentru computer și un telefon mobil, pentru care erau în vigoare propriile legi privind aspectul conținutului vizual. Astăzi, gama de dispozitive este reprezentată de o varietate mult mai mare de formate, iar dezvoltatorii trebuie să creeze o resursă online care să fie la fel de bine afișată pe monitorul fiecărui dispozitiv. Dacă dorești angajați dezvoltatori ux vă recomandăm să citiți acest articol.

Ce recomandări trebuie luate în considerare la proiectarea unui site web pentru diverse formate de monitor?

Scalare corectă a fragmentelor vizuale ale site-ului este foarte importantă pentru o utilizare confortabilă și convenabilă. Este destul de dificil să se realizeze o afișare echivalentă de înaltă calitate a site-ului pe diferite tipuri de dispozitive. Prin urmare, este important să vă amintiți și să urmați anumite reguli pentru proiectarea și aspectul resurselor online complexe.

1. Luați în considerare densitatea, nu numărul de pixeli. Această regulă se aplică oricărui tip de conținut de site, dar mai ales afectează interfața cu utilizatorul. Până de curând, pixelii au fost principalul limbaj de scalabilitate, cea mai des folosită abreviere este dpi. Acesta este numărul de puncte pe unitate de suprafață de 1 inch. Rezoluția vizuală tipică pentru un monitor este de 72 dpi.
2. Regulile de modelare de astăzi se bazează pe o cantitate ușor diferită numită PPI (sau densitate). Pentru proiectarea fragmentelor de interfață cu utilizatorul, se recomandă să se bazeze pe densitatea monitorului dispozitivului și nu pe numărul de puncte (adică, dpi). Această orientare va permite conținutului site-ului să se scaleze corect pe orice afișaj.
3. Dacă dezvoltatorul creează corpul butonului de interfață cu o rezoluție de 150×60 dpi, atunci fragmentul va fi afișat cu o rezoluție de 150×60 dpi pe un monitor cu o densitate de 170 ppi și 300×120 dpi pe un afișaj cu o densitate de 340 ppi, adică de două ori mai mult în raport cu dimensiunea inițială.
4. Deoarece unele monitoare au rezoluții mai mari, conținutul site-ului este afișat diferit pe ecranul fiecărui format. La valori mai mari de densitate pe monitor, bucăți de conținut vizual sunt afișate de 2,3 sau 4 ori dimensiunea lor originală. Modelarea vizuală bazată pe densitate asigură scalarea corectă a tuturor fragmentelor de site pe un monitor cu orice rezoluție.
5. Utilizați un aspect în trepte de 8 dp. Motivul pentru care dezvoltatorii se țin de divizia de opt ori atunci când proiectează scheletul site-ului este foarte simplu și direct. Faptul este că majoritatea afișărilor de pe dispozitivele moderne sunt divizibile cu 8. Prin urmare, utilizarea „regula lui 8” vă permite să obțineți cea mai corectă aliniere a conținutului site-ului pe ecranele diferitelor dispozitive.
6. Aplicați ierarhia culorilor pentru o experiență confortabilă pe site. Fiecare culoare poartă o anumită încărcătură semantică. Prin echilibrarea cu anumite vârtejuri, puteți evidenția sau ascunde anumite fragmente. Proporțiile culorilor vă permit să distribuiți armonios componentele funcționale ale resursei și să construiți o ierarhie logică a conținutului.
7. În primul rând, vizitatorul ar trebui să acorde atenție elementelor interfeței cu utilizatorul, apoi bannerelor publicitare, apoi articolelor populare și așa mai departe.

Ținând cont de rolul tot mai mare al animației pe paginile de destinație, merită să acordați atenție și liniilor directoare generale pentru dezvoltarea graficelor animate. Servicii de proiectare și dezvoltare de produse sunt furnizate sub rezerva următoarelor elemente:

• Timpul general. Dacă animația crește semnificativ timpul de afișare a esenței paginii, trebuie simplificată. Atunci când pagina este prea dinamică, este dificil de determinat sensul conținutului și o parte a publicului țintă pur și simplu nu dorește să folosească resursa.
• Viteză. După cum arată practica, viteza optimă de animație a fragmentelor de interfață nu trebuie să depășească 500 ms. Această rată de viteză se bazează pe psihologia percepției vizuale. Orice grafică de animație mai mare sau mai mică decât caracteristicile declarate sunt mai puțin identificabile de către utilizator.

Dacă decideți să utilizați efecte de animație, nu depășiți viteza și durata recomandate. Câteva secunde în plus sunt suficiente pentru ca un consumator modern să refuze să vă viziteze site-ul.