Chart – Element UI

Ce este un Chart UI?

Un chart este un element de design UI care are scopul de a organiza datele. in acelasi timp, charts UI ajuta utilizatorul sa vada si sa analizeze informatiile primite, facandu-le mai usor de inteles. Designul unui UI design chart trebuie sa fie ajustabil si adaptabil pentru publicul tinta, dar si sa informeze utilizatorii cu claritate si sa aiba un UI design placut.

Un UI design chart util trebuie sa ajute utilizatorii sa inteleaga si sa proceseze mai bine datele si sa obtina informatii. Tocmai de aceea, informatiile din charts UI pot ghida utilizatorii sa ia decizii si sa actioneze pe baza acestor cunostinte.

‍

Tipuri de Charts UI

Principalele tipuri de UI design chart sunt: pie charts, bar charts, line charts, radial charts, si donut charts.

• Pie Charts: Aceste charts sunt create folosind o forma rotunda, iar fiecare ,,felie” reprezinta o categorie diferita ilustrata. Charts de tip placinta sunt usor de inteles, deoarece dimensiunea feliilor este proportionala cu categoria sau valoarea pe care o reprezinta. Graficele pot fi utilizate atunci cand datele furnizate nu sunt impartite in prea multe categorii.
• Bar Charts: Charts de tip bara pot fi orizontale sau verticale. Sunt proiectate folosind bare dreptunghiulare de dimensiuni diferite pentru a ilustra diferentele dintre categoriile afisate. Valorile sunt reprezentate de lungimea sau inaltimea liniilor dreptunghiulare. Acest tip de UI chart design este utilizat de obicei in domeniile de afaceri sau financiare pentru a prezenta diferite puncte in timp. O axa reprezinta timpul petrecut si cealalta schimbarile care au avut loc intr-un buget.
• Line Charts: Aceste charts pot reprezenta valori despre datele furnizate, exprima comparatii, birocratie sau chiar evidentierea tendintelor si modelelor pe o perioada de timp. Line Charts UI sunt de obicei impartit in doua axe, X si Y, si o linie care reprezinta activitatea valorilor specifice descrise in analiza. Aceste charts liniare sunt des intalnite in cercetarea stiintifica, analiza datelor, afaceri sau finante, deoarece pot demonstra rata de schimbare sau directia (crestere si scadere) cu ajutorul liniei plasate intre cele doua axe.
• Radial Charts: Un radial UI design chart este usor de interpretat si dedus, fiind cunoscut si ca chart circular. Poate contine mai multe optiuni decat un UI chart design de tip placinta sau donut. Diferitele dimensiuni din grafic reprezinta procentul diferitelor aspecte care compun produsul intreg.
• Donut Charts: Acest UI chart design este similar cu un pie chart. In ambele cazuri, aceste tipuri de UI design chart sunt utilizate pentru a reprezenta diferite clasificari. Continutul este identic in ambele design-uri, diferenta constand in formele usor diferite.

‍

Cand sa folosesti Charts in UI UX Design?

• Foloseste charts pentru o intelegere mai rapida si mai buna a datelor.
• Charts UI ar trebui sa fie utile si contraintuitive. Asa ca, asigura-te ca utilizatorii inteleg ce ilustrezi si ca textul si comparatiile sunt corecte.
• Foloseste charts pentru a reprezenta variabilitatea anumitor date. Foloseste texturi diferite pentru liniile grafice pentru a reprezenta diferitele etape. Nu folosi culori diferite pentru a exprima variabilitatea aceleiasi categorii de date.

‍

Cum se folosesc Charts UI?

• Vizualizeaza clar datele: Unele charts ar putea necesita numere sau ar putea fi grafice categorice. Stabileste o consistenta vizuala si o ierarhie pentru a oferi un mesaj lizibil si precis utilizatorilor.
• Creeaza un grafic lizibil in orice mediu: Maximizeaza latimea graficului. Un UI UX design al acestui UI element trebuie sa aiba componente suficient de mari pentru a fi vazute si intelese de orice utilizator. Aceasta include textul si plasarea elementelor incat sa fie deductibile si usor de inteles. 
• Alege culorile potrivite: Culorile au semnificatie si pot ajuta la clarificarea informatiilor si la a face UI chart design mai intuitiv. Culorile pot reprezenta cantitatea, pot evidentia mesaje importante sau pot distinge categoriile.
• Asigura-te ca axele sunt plasate corect si etichetate corespunzator: Eticheteaza axele in mod corespunzator si in concordanta cu informatiile prezentate.

‍

Inscrie-te acum la Cursul de UI UX Design de la Traction Keys

Parcurge cursul nostru de UI/UX design pentru a invata totul despre user interface si user experience. La cursul de UI UX design de la Traction Keys vei invata cum se creaza un sistem de design, cat si cum se creeaza UI UX Design Charts. Stapanirea tuturor elementelor cat si a practicilor de design UI UX te vor ajuta sa devii un designer UI UX complet si iti va asigura urmatorul tau job si viitoarea cariera.