Suggerimento rapido angoli arrotondati fatti bene

Questo sembrerà un gioco da ragazzi per molti di voi, ma vedo che succede così spesso che ho pensato che valesse la pena allevarlo. Chiameremo questo problema angoli impropriamente annidati; un piccolo dettaglio che può rovinare un design altrimenti brillante!

Chi è pedante?

Angoli impropriamente annidati possono essere trovati in disegni di tutti i tipi, ma li vedo più spesso in icone e interfacce. Se non hai ancora idea di cosa sto parlando, dai un'occhiata a queste due immagini di un mockup lightbox - che mi fa digrignare i denti?

Sì, è il secondo che perderò il sonno.

In poche parole; se hai due angoli arrotondati che corrono paralleli, l'angolo esterno dovrebbe avere un raggio più ampio che "scorre" attorno a quello interno.

Senza voler entrare nelle formule matematiche (qualcuno ha detto la torta?) Prova a visualizzare un punto centrale, la "origine", attorno alla quale si curva il tuo primo raggio. Ora usa lo stesso punto per arrotondare il tuo angolo esterno:

Forma le tue curve in questo modo e troverai il risultato finale molto più facile per gli occhi.

Tubi piegati

Pensa all'effetto che stai creando come piegare una pipa:

Artigiano che piega un tubo

Tu fai il Math

Le interfacce costruite in html / css possono essere altrettanto colpevoli di angoli impropriamente annidati. Pensa agli elementi del modulo all'interno di un fieldset, o ai pulsanti all'interno di una finestra di avviso.

Tuttavia, non è difficile essere precisi. la differenza nel raggio di confine dei tuoi due oggetti dovrebbe essere uguale alla distanza tra loro. Semplice!

E questo può essere anche flessibile, ad esempio:

.inner width: 5em; altezza: 5em; sfondo: nero; border-radius: 1em;  .outer display: inline-block; sfondo: azzurro; imbottitura: 3em; border-radius: 4em; / * offset + raggio di .inner * /

Tubo perfettamente piegato (guarda la demo).

eccezioni

Come tutte le questioni del design, non ci sono regole concrete: troverai sempre delle eccezioni. È una questione di istinto.

Prendi questa interfaccia per esempio; lo spazio tra il pulsante di contatto e il menu a discesa non assomiglia a un tubo piegato. Detto questo, tutti gli angoli di questa interfaccia hanno un raggio uniforme, quindi nulla sembra fuori posto:

Navigazione nel menu a discesa - UI / UX con CSS3 di Jonathan Moreira

Gente che lo fa bene

Penso che tu ne abbia avuto abbastanza di ascoltarmi per finire su qualcosa di così banale. Piuttosto che attirare l'attenzione su esempi in cui l'ho visto fare in modo imbarazzante, diamo ora un'occhiata ad un lavoro stimolante di Dribbblers che lo fa bene!

Icona di Snooker Table di JJ-Maxer Icona Postale di Aditya Nugraha Putra Icona di chnvan Found UI di Martin Karasek Icona dell'app Veggie Meals di Max Rudberg Pulsante di caricamento di Fares Farhan BPM Lock Button (ON) di Paul Flavius ​​Nechita Accedi al pulsante di Brad Haynes