File Upload – Element UI

Ce este File Upload UI Element?

Componenta de file upload este UI element de design care permit utilizatorilor sa incarce continut de pe dispozitivele lor.

File uploads sunt de obicei introduse de UI UX designers in formulare, dar apar si in conversatii, dialoguri, modale si alte sectiuni unde utilizatorii trebuie sa incarce fisiere sau atasamente. Ele pot fi, de asemenea, elemente independente care functioneaza individual intr-o interfata de utilizator. Componentele de file upload sunt activate prin click pentru a incarca, dar pentru o experienta utilizator mai buna, ar trebui sa fie si functionalitatea de drag-and-drop.

Tipuri de File Upload UI Element

Componentele de UI design pentru file upload pot fi prezentate in trei moduri, in functie de spatiul disponibil si obiectivele de design ale interfetei utilizator.

• Doar Input: Cand spatiul este limitat - in special pe ecranele mobile - poate fi folosit un simplu camp de introducere a fisierului, reprezentat printr-un camp de text si un buton „Rasfoieste fisiere” sau „Alege fisier”.
• Input si Drag-and-Drop: Acest format este similar cu tipul ,,Input”, dar include si functionalitatea de drag-and-drop. Cu adaugarea prin drag-and-drop, utilizatorii pot trage fisiere de pe dispozitivele lor si le pot plasa in zona desemnata din interfata. Este folosit de UI UX designers in ecranele mai mari - cum ar fi cele ale laptop sau desktop.
• Drag-and-Drop: Acest tip poate fi folosit atunci cand accentul principal este pe incarcarea fisierelor. Acest tip de file upload poate fi utilizat fara un camp de input. Tocmai de aceea, este important ca UI UX designers trebuie sa se asigure ca elementele din incarcarea fisierului sunt intuitive astfel incat utilizatorul sa stie ce sa faca.

Cum se utilizeaza File Upload in UI UX Design

1.  Structura 

Structura de file upload UI element include in mod tipic:

• Camp de input
• Buton
• Drag-and-Drop

2. Marime si Stil

In UI design, este important sa folosim icons relevante pentru fisierele necesare de la utilizatori. Iconita si standardul de grosime a textului (subtire, regular sau bold) ar trebui sa fie similare - nu folositi o iconita ingrosata langa o eticheta de text light. Ca si UI UX designer, este important sa mentinem un spatiu consistent pe toate partile - inaltimea liniei unui tip de litera nu ar trebui sa depaseasca inaltimea caracterelor reale.

‍

3. Stare 

Campul de introducere al componentei de file upload poate avea cinci proprietati de stare: none, done, warning, error si loading.

‍

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 componenta UI UX Design File Upload. 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.

‍