Spacing – UI Design

Ce este Spacing in UI/UX Design?

Spacing poate fi definit ca spatiul dintre doua elemente UI sau doua puncte de vedere ale paginii. Acesta este ceea ce face ca elementele sa para consistente si organizate, ajutand in acelasi timp la crearea unui aspect estetic placut al designului. Spatiile pot fi multipli de 8px si se utilizeaza pentru dimensiuni si padding-uri pe o pagina.

Metode de Spacing in Designul UI/UX

Metodele de spacing includ baseline grids, keylines, paddings, containere si tinte de atingere.

Baseline Grid

Baseline grid-ul poate fi aliniat la 8dp si 4dp. Un grid de 8dp este utilizat pentru tablete, mobile si desktop-uri.

Pentru alinierea iconitelor, butoanelor si altor elemente in cadrul componentelor, se foloseste un grid de 4dp. Acesta poate fi folosit si pentru centrul componentelor. De asemenea, un grid de 4dp poate fi intalnit in afara grilei, dar plasat in interiorul unei componente. In acest caz, textul poate fi plasat vertical si centrat.

Keylines

Keylines sunt folosite pentru a alinia elementele in afara layout-ului grilei. Acestea sunt verticale si reprezinta locul unde elementele ar trebui sa fie plasate. Keylines sunt aranjate in functie de distanta fiecarui element fata de marginea paginii si sunt masurate folosind un grid de 8dp. Keylines au capacitatea de a crea mai mult spatiu intre elemente sau de a-l reduce in cadrul unui layout.

Padding

Padding-ul reprezinta spatiul dintre elementele care formeaza o componenta. Acesta poate fi vazut ca o alternativa la keylines si este masurat in 8dp si 4dp. Padding-ul poate fi masurat vertical si orizontal.

• Dimensiuni: Fii atent la descrierea numerica a latimii si inaltimii componentelor si elementelor. In unele cazuri, conturul poate fi observat doar pe inaltimea elementului. Totusi, inaltimea acestora trebuie sa fie aliniata la grid-ul de 8dp.
• Aliniere: Fii atent la ordinea in care sunt plasate elementele in interiorul unei componente.