Situatie
Un detaliu aparent minor, dar care face o mare diferență în designul de interfață, este alinierea iconițelor cu textul. Mulți designeri le fac fie prea mari, fie prea mici, ajustându-le manual până când „par ok”. Dar există o regulă simplă care îți asigură un aspect profesionist de fiecare dată.
Solutie
Pasul 1: Setează dimensiunea textului
-
De exemplu alege un font size de 14px.
-
Pentru acesta folosește un line-height de 20px pentru lizibilitate și spațiere corectă.
Pasul 2: Definește dimensiunea iconiței
-
În loc să ajustezi la ochi, setează iconița la 20x20px.
-
Cheia este să o faci egală cu line-height-ul textului.
Pasul 3: Centrează iconița pe linia textului
-
Asigură-te că pictograma este aliniată vertical la baseline-ul textului.
-
Astfel, ambele elemente par gândite să funcționeze împreună, nu ca două obiecte separate.
Pasul 4: Păstrează distanța corectă între ele
-
Menține o margine de 8px între iconiță și text.
-
Acest spațiu oferă claritate vizuală.
Atunci când iconițele se aliniază la înălțimea liniei textului, ele nu mai „concurează” pentru atenție. În schimb, creează o interfața mai ușor de citit. Nu mai ghici și nu mai regla manual iconițele. Respectând regula „icon = line-height”, obții de fiecare dată un aspect echilibrat, accesibil și plăcut vizual.
Leave A Comment?