Rask Tips Avrundede hjørner gjort riktig

Dette kommer til å virke som en no-brainer for mange av dere, men jeg ser det skjer så ofte jeg skjønte det var verdt å ta opp. Vi ringer dette problemet feil nestede hjørner; En liten detalj som kan ødelegge en ellers strålende design!

Hvem er pedantisk?

Ukorrekt nestede hjørner finnes i alle slags design, men jeg ser dem oftest i ikoner og grensesnitt. Hvis du fortsatt har ingen anelse om hva jeg snakker om, ta en titt på disse to bildene av en lightbox mockup - hvilken har meg å male mine tenner?

Ja, det er det andre som jeg mister sove over.

Enkelt sagt; hvis du har to avrundede hjørner som går parallelt, bør det ytre hjørnet ha en større radius som "flyter" rundt den på innsiden.

Uten å ønske å gå inn i matematiske formler (gjorde noen si kake?) Prøv å visualisere et sentralt punkt, "opprinnelsen", rundt hvilken din første radius kurver. Bruk nå det samme punktet til å omgjøre ditt ytre hjørne:

Lag kurvene dine på denne måten, og du vil finne sluttresultatet mye lettere på øyet.

Bøyerør

Tenk på effekten du oppretter som å bøye et rør:

Håndverkere bøyer et rør

Du gjør matematikken

Grensesnitt som er bygd i html / css kan være like skyldig i feilkornede hjørner. Tenk på formelementer innenfor et feltsett, eller knapper i en advarselsboks.

Det er ikke vanskelig å være død nøyaktig med det skjønt; forskjellen i grensen radius av dine to objekter bør være lik gapet mellom dem. Enkel!

Og dette kan også være fleksibelt, for eksempel:

.indre bredde: 5em; høyde: 5em; bakgrunn: svart; border-radius: 1em;  .outer display: inline-block; bakgrunn: lyseblå; polstring: 3em; grense-radius: 4em; / * offset + radius av .inner * /

Perfekt bøyde rør (sjekk ut demoen).

unntak

Som alle saker i design, er det ingen konkrete regler - du vil alltid finne unntak. Det er et spørsmål om instinkt.

Ta dette grensesnittet for eksempel; gapet mellom kontaktknappen og rullegardinmenyen ser ikke ut som et bøyd rør. Å si at alle hjørnene i dette grensesnittet har jevn radius, så ingenting ser ut på plass:

Dropdown meny navigasjon - UI / UX med CSS3 av Jonathan Moreira

Folk som får det riktig

Jeg tror du har nok fått nok av å lytte til meg, bli såret opp om noe så trivielt. I stedet for å trekke oppmerksomhet på eksempler der jeg har sett det gjort vanskelig, la oss nå se på noe inspirerende arbeid av Dribblere som gjør det riktig!

Snooker Table ikon av JJ-Maxer Postale Icon App av Aditya Nugraha Putra Ikon av chnvan Fant UI av Martin Karasek Veggie Meals appikon av Max Rudberg Last opp knappen av Fares Farhan BPM Låseknapp (PÅ) av Paul Flavius ​​Nechita Logg inn knapp av Brad Haynes