Share
Acest lucru va părea un nebun pentru mulți dintre voi, dar văd că se întâmplă atât de des încât m-am gândit că merită crescută. Vom numi această problemă colțuri imbricate necorespunzător; un mic detaliu care poate ruina un design altfel genial!
Colțurile incorect imbricate pot fi găsite în modele de tot felul, dar le văd cel mai adesea în icoane și interfețe. Dacă încă nu aveți nicio idee despre ce vorbesc, aruncați o privire asupra acestor două imagini ale unui machetuș de lumină - care mă mănâncă dinții?
Da, este al doilea pe care o voi pierde.
Pune simplu; dacă aveți două colțuri rotunjite care rulează paralel, colțul exterior ar trebui să aibă o rază mai mare care "curge" pe cea din interior.
Fără a vrea să intri în formule matematice (a spus cineva plăcinta?) Încercați să vizualizați un punct central, "originea", în jurul căruia vă curbează prima rază. Acum folosiți același punct pentru a vă roti colțul exterior:
Formați-vă curbele în acest fel și veți găsi rezultatul final mult mai ușor la ochi.
Gândiți-vă la efectul pe care îl creați ca la îndoirea unei țevi:
Artizanal îndoit o țeavă Interfețele construite în html / css pot fi la fel de vinovate de colțuri improprii imbricate. Gândiți-vă la elementele de formă dintr-un set de câmpuri sau în butoanele dintr-o casetă de alertă.
Nu este greu să fii corect cu asta; diferența dintre raza de graniță a celor două obiecte trebuie să fie egală cu diferența dintre ele. Simplu!
Iar acest lucru poate fi flexibil, de exemplu:
.interior lățime: 5em; înălțime: 5m; fundal: negru; raza razei: 1em; .outer display: inline-block; fundal: albastru deschis; padding: 3em; raza de raza: 4m; / * offset + raza .inner * /
Țeava bine îndoită (verificați demo-ul).
Ca toate aspectele legate de design, nu există reguli concrete - veți găsi întotdeauna excepții. Este o chestie de instinct.
Luați această interfață, de exemplu; decalajul dintre butonul de contact și meniul derulant nu arată ca o conductă îndoită. Spunând că toate colțurile din această interfață au o rază uniformă, deci nimic nu pare a fi în afara locului:
Meniu derulant de navigare - UI / UX cu CSS3 de Jonathan Moreira Cred că probabil că ai avut destui bani să mă asculți și să mă descurc în legătură cu ceva atât de banal. Mai degrabă decât să atragem atenția asupra exemplelor în care am văzut-o în mod ciudat, să aruncăm o privire la o lucrare inspirată de Dribbblers care o face corect!
Snooker Table icon de JJ-Maxer 
Postale Icon App de Aditya Nugraha Putra 
Icon de chnvan 
UI găsită de Martin Karasek 
Vechea pictograma de masă a lui Max Rudberg 
Butonul de încărcare de către Fares Farhan 
Butonul de blocare BPM (ON) de către Paul Flavius Nechita 
Sign Button de Brad Haynes
Accentsconagua