Snabbtips Avrundade hörn gjorda rätt

Det här kommer att verka som en icke-brainer för många av er, men jag ser att det händer så ofta tänkte jag att det var värt att fostra. Vi ringer till det här problemet felaktigt inbädda hörn; En liten detalj som kan förstöra en annars lysande design!

Vem är pedantisk?

Felaktigt inbäddade hörn kan hittas i mönster av alla slag, men jag ser dem oftast i ikoner och gränssnitt. Om du fortfarande har ingen aning om vad jag pratar om, ta en titt på dessa två bilder av en lightbox mockup - vilken har mig slipning tänderna?

Ja, det är det andra som jag kommer att förlora sover över.

Enkelt sagt; om du har två runda hörn som går parallellt, bör det yttre hörnet ha en större radie som "rinner" runt den på insidan.

Utan att vilja gå in i matematiska formler (gjorde någon att säga paj?) Försök visualisera en central punkt, "ursprung", runt vilken din första radie kurver. Använd nu samma punkt för att runda ditt yttre hörn:

Formulera dina kurvor på detta sätt och du kommer att hitta slutresultatet mycket lättare på ögat.

Böjning av rör

Tänk på den effekt du skapar som att böja ett rör:

Hantverkare böjer ett rör

Du gör matematiken

Gränssnitt som är inbyggda i html / css kan vara lika skyldiga till felaktigt inbästa hörn. Tänk på formulärelement i en fältuppsättning, eller knappar i en varningsruta.

Det är inte svårt att vara död korrekt med det dock; skillnaden i gränsen för dina två objekt bör vara lika med klyftan mellan dem. Enkel!

Och det här kan också vara flexibelt, till exempel:

.inre bredd: 5em; höjd: 5em; bakgrund: svart; gränsen: 1em;  .outer display: inline-block; bakgrund: ljusblå; vaddering: 3em; gränsen: 4em; / * offset + radien av .inner * /

Perfekt böjda röret (kolla in demoen).

undantag

Liksom alla saker i design finns inga konkreta regler - du hittar alltid undantag. Det är en fråga om instinkt.

Ta det här gränssnittet till exempel; klyftan mellan kontaktknappen och dropdownen ser inte ut som något böjt rör. Säger att alla hörn i detta gränssnitt har jämn radie, så ingenting ser ut ur sin plats:

Dropdown menyns navigering - UI / UX med CSS3 av Jonathan Moreira

Folk som får det rätt

Jag tror att du antagligen har fått nog att lyssna på mig bli lindrad om någonting så trivialt. Snarare än att dra uppmärksamhet till exempel där jag har sett det gjort okej, låt oss nu titta på några inspirerande arbeten av Dribbblers som gör det rätt!

Snooker Table ikon av JJ-Maxer Postale Icon App av Aditya Nugraha Putra Ikon av chnvan Hittade UI av Martin Karasek Veggie Meals App icon av Max Rudberg Ladda upp knappen av Fares Farhan BPM Lås Knapp (PÅ) av Paul Flavius ​​Nechita Logga in knappen av Brad Haynes