Share
Cela va sembler une évidence pour beaucoup d'entre vous, mais je le vois se produire si souvent que j'ai pensé que cela valait la peine d'être évoqué. Nous appellerons ce numéro coins mal imbriqués; un petit détail qui peut ruiner un dessin brillant!
Des coins mal imbriqués peuvent être trouvés dans des conceptions de toutes sortes, mais je les vois le plus souvent dans des icônes et des interfaces. Si vous ne savez toujours pas de quoi je parle, jetez un coup d'œil à ces deux images d'une maquette de lightbox - laquelle me fait grincer des dents?
Oui, c'est la seconde que je vais perdre de sommeil.
Mettre tout simplement; si vous avez deux coins arrondis parallèles, le coin extérieur devrait avoir un rayon plus grand qui "coule" autour de celui qui se trouve à l'intérieur.
Sans vouloir entrer dans les formules mathématiques (quelqu'un a dit tarte?), Essayez de visualiser un point central, "l'origine", autour duquel votre premier rayon se courbe. Maintenant, utilisez le même point pour arrondir votre coin extérieur:
Formez vos courbes de cette façon et vous obtiendrez un résultat final beaucoup plus facile pour les yeux..
Pensez à l'effet que vous créez comme si vous pliez un tuyau:
Artisan pliant un tuyau Les interfaces construites en html / css peuvent être tout aussi coupables que des angles mal imbriqués. Pensez aux éléments de formulaire d'un ensemble de champs ou aux boutons d'un message d'alerte.
Ce n'est pas difficile d'être parfaitement précis avec cela cependant; la différence dans le rayon de la bordure de vos deux objets doit être égale à l’écart qui les sépare. Simple!
Et cela peut aussi être flexible, par exemple:
.intérieur largeur: 5em; hauteur: 5em; fond: noir; border-radius: 1em; .outer display: inline-block; fond: bleu clair; rembourrage: 3em; border-radius: 4em; / * offset + rayon de .inner * /
Pipe parfaitement coudée (voir la démo).
Comme pour toutes les questions de conception, il n’existe aucune règle concrète. Vous trouverez toujours des exceptions. C'est une question d'instinct.
Prenez cette interface par exemple; L'écart entre le bouton de contact et la liste déroulante ne ressemble en rien à un tuyau coudé. Cela dit, tous les coins de cette interface ont un rayon uniforme, donc rien n’a l’air déplacé:
Navigation dans les menus déroulants - UI / UX avec CSS3 par Jonathan Moreira Je pense que vous en avez probablement marre de m'écouter parler de quelque chose d'aussi trivial. Plutôt que d’attirer l’attention sur des exemples où j’ai vu cela se faire maladroitement, jetons maintenant un coup d’œil à un travail inspirant de Dribbblers qui le font bien!
Icône de table de billard par JJ-Maxer 
Postale Icon App par Aditya Nugraha Putra 
Icon par chnvan 
Interface utilisateur trouvée par Martin Karasek 
Veggie Meals icône d'application par Max Rudberg 
Bouton de téléchargement par Fares Farhan 
Bouton de verrouillage du BPM (ON) de Paul Flavius Nechita 
Bouton de connexion par Brad Haynes
Accentsconagua