Schneller Tipp Abgerundete Ecken richtig gemacht

Dies wird für viele von Ihnen ein Kinderspiel sein, aber ich sehe, dass es so oft vorkommt, dass ich dachte, dass es sich lohnt, darüber zu sprechen. Wir nennen dieses Problem unsachgemäß verschachtelte Ecken; ein kleines Detail, das ein sonst brillantes Design ruinieren kann!

Wer ist Pedantiker??

Nicht ordnungsgemäß verschachtelte Ecken sind in Designs aller Art zu finden, aber ich sehe sie am häufigsten in Symbolen und Schnittstellen. Wenn Sie immer noch keine Ahnung haben, wovon ich rede, werfen Sie einen Blick auf diese beiden Bilder eines Leuchtkastenmodells - die mich dazu bringen, meine Zähne zu reiben?

Ja, es ist das zweite, bei dem ich den Schlaf verliere.

Einfach ausgedrückt; Wenn Sie zwei abgerundete Ecken haben, die parallel verlaufen, sollte die äußere Ecke einen größeren Radius haben, der um den inneren Bereich herum "fließt".

Versuchen Sie, ohne auf mathematische Formeln eingehen zu wollen (sagte jemand pie), einen zentralen Punkt, den "Ursprung", um den sich Ihr erster Radius krümmt. Verwenden Sie jetzt denselben Punkt, um Ihre äußere Ecke abzurunden:

Bilden Sie Ihre Kurven auf diese Weise und Sie werden das Ergebnis für das Auge viel einfacher finden.

Biegen von Rohren

Stellen Sie sich den Effekt, den Sie erstellen, vor, als würden Sie ein Rohr biegen:

Handwerker, der ein Rohr verbiegt

Du machst die Mathematik

In html / css erstellte Schnittstellen können ebenso falsch verschachtelten Ecken schuldig sein. Stellen Sie sich Formularelemente innerhalb eines Feldsatzes oder Schaltflächen innerhalb eines Alert-Felds vor.

Es ist nicht schwer, dabei absolut genau zu sein; Der Unterschied des Grenzradius Ihrer beiden Objekte sollte dem Abstand zwischen ihnen entsprechen. Einfach!

Und das kann zum Beispiel auch flexibel sein:

.innere Breite: 5em; Höhe: 5em; Hintergrund: schwarz; Grenzradius: 1em;  .outer display: Inline-Block; Hintergrund: hellblau; Polsterung: 3em; Grenzradius: 4em; / * Offset + Radius von .inner * /

Perfekt gebogenes Rohr (siehe Demo).

Ausnahmen

Wie bei allen Designfragen gibt es keine konkreten Regeln - es gibt immer Ausnahmen. Es ist eine Frage des Instinkts.

Nehmen Sie zum Beispiel diese Schnittstelle; Die Lücke zwischen dem Kontaktknopf und der Dropdown-Liste sieht nicht aus wie ein gebogenes Rohr. Das heißt, alle Ecken in dieser Schnittstelle haben einen einheitlichen Radius, sodass nichts falsch aussieht:

Dropdown-Menünavigation - UI / UX mit CSS3 von Jonathan Moreira

Leute, die es richtig machen

Ich glaube, Sie hatten wahrscheinlich genug davon, mir zuzuhören, wie ich über etwas so Triviales aufgewacht bin. Anstatt auf Beispiele aufmerksam zu machen, bei denen ich es unbeholfen gesehen habe, werfen wir einen Blick auf einige inspirierende Arbeiten von Dribbblers, die es richtig machen!

Snooker Table-Symbol von JJ-Maxer Postale Icon App von Aditya Nugraha Putra Ikone von chnvan UI von Martin Karasek gefunden Veggie Meals App-Symbol von Max Rudberg Upload-Button von Fares Farhan BPM-Sperrknopf (EIN) von Paul Flavius ​​Nechita Anmelden Button von Brad Haynes