Share
Dit lijkt voor velen van jullie een beetje een hersenkraker, maar ik zie het zo vaak gebeuren dat ik dacht dat het de moeite van het brengen waard was. We zullen dit probleem noemen onjuist geneste hoeken; een klein detail dat een anderszins schitterend ontwerp kan bederven!
Oneigenlijk geneste hoeken zijn te vinden in allerlei ontwerpen, maar ik zie ze het vaakst in pictogrammen en interfaces. Als je nog steeds geen idee hebt waar ik het over heb, bekijk dan deze twee afbeeldingen van een mockup van een lichtbak - waar ik mijn tanden aan het slijpen ben?
Ja, het is het tweede waarop ik slaap zal verliezen.
Simpel gezegd; als je twee afgeronde hoeken evenwijdig loopt, moet de buitenste hoek een grotere straal hebben die "rond" aan de binnenkant "stroomt".
Zonder te willen ingaan op wiskundige formules (zei iemand taart zeggen?), Visualiseer een centraal punt, de "oorsprong", waarrond je eerste straal buigt. Gebruik datzelfde punt nu om je buitenste hoekje rond te maken:
Vorm je bochten op deze manier en je zult het eindresultaat veel gemakkelijker vinden voor het oog.
Denk aan het effect dat je creëert, zoals het buigen van een pijp:
Ambachtsman die een pijp buigt Interfaces ingebouwd in html / css kunnen net zo schuldig zijn aan incorrect genest hoeken. Denk aan formulierelementen binnen een veldset of knoppen binnen een waarschuwingsvenster.
Het is echter niet moeilijk om daarmee volkomen accuraat te zijn; het verschil in de grensradius van uw twee objecten moet gelijk zijn aan de opening ertussen. Eenvoudig!
En dit kan ook flexibel zijn, bijvoorbeeld:
.innerlijke breedte: 5em; hoogte: 5em; achtergrond: zwart; grensradius: 1em; .outer display: inline-block; achtergrond: lichtblauw; opvulling: 3em; grensradius: 4em; / * offset + straal van .inner * /
Perfect gebogen pijp (bekijk de demo).
Zoals alle zaken in het ontwerp zijn er geen concrete regels - u zult altijd uitzonderingen vinden. Het is een kwestie van instinct.
Neem deze interface bijvoorbeeld; de opening tussen de contactknop en de vervolgkeuzelijst lijkt niet op een gebogen pijp. Zeggen dat, alle hoeken in deze interface hebben een uniforme radius, dus niets misstaat:
Keuzemenu navigatie - UI / UX met CSS3 door Jonathan Moreira Ik denk dat je er waarschijnlijk genoeg van hebt om naar me te luisteren als ik het over iets heb dat zo triviaal is. In plaats van de aandacht te vestigen op voorbeelden waarbij ik het onhandig heb gedaan, laten we nu een kijkje nemen naar een inspirerend werk van Dribbblers die het goed doen!
Snooker Table icoon door JJ-Maxer 
Postale Icon-app door Aditya Nugraha Putra 
Icoon door chnvan 
Gebruikersinterface gevonden door Martin Karasek 
Veggie Meals app-pictogram door Max Rudberg 
Uploadknop van Fares Farhan 
BPM Lock-knop (AAN) door Paul Flavius Nechita 
Inloggen Knop door Brad Haynes
Accentsconagua