() translation by (you can also view the original English article)
Für viele von Ihnen wird dies ein Kinderspiel sein, aber ich sehe es so oft, dass ich dachte, es lohnt sich, darauf einzugehen. Wir nennen dieses Problem falsch verschachtelte Ecken; ein kleines Detail, das ein ansonsten brillantes Design ruinieren kann!
Wer ist pedantisch?
Falsch verschachtelte Ecken finden sich in Designs aller Art, aber ich sehe sie am häufigsten in Symbolen und Schnittstellen. Wenn Sie immer noch keine Ahnung haben, wovon ich spreche, schauen Sie sich diese beiden Bilder eines Leuchtkastenmodells an - welches lässt mich meine Zähne knirschen?
Ja, es ist die zweite, bei der ich den Schlaf verliere.
Einfach ausgedrückt; Wenn zwei abgerundete Ecken parallel verlaufen, sollte die äußere Ecke einen größeren Radius haben, der um die innere Ecke "fließt".
Versuchen Sie, einen zentralen Punkt, den "Ursprung", zu visualisieren, um den sich Ihr erster Radius krümmt, ohne auf maThemetische Formeln eingehen zu wollen (hat jemand Kuchen gesagt?). Verwenden Sie nun denselben Punkt, um Ihre äußere Ecke abzurunden:
Bilden Sie Ihre Kurven auf diese Weise und Sie werden feststellen, dass das Endergebnis für das Auge viel einfacher ist.
Rohrbiegen
Stellen Sie sich den Effekt vor, den Sie erzeugen, als würden Sie ein Rohr biegen:
Du machst die Mathematik
In HTML/CSS erstellte Schnittstellen können ebenso an falsch verschachtelten Ecken schuld sein. Denken Sie an Formularelemente in einem Feldsatz oder an Schaltflächen in einem Warnfeld.
Es ist jedoch nicht schwer, absolut genau damit umzugehen. Der Unterschied im Randradius Ihrer beiden Objekte sollte gleich dem Abstand zwischen ihnen sein. Einfach!
Und das kann auch flexibel sein, zum Beispiel:
1 |
<div class="outer"> |
2 |
<div class="inner"> |
3 |
|
4 |
</div><!--/ inner--> |
5 |
</div><!--/ outer--> |
1 |
.inner { |
2 |
width: 5em; |
3 |
height: 5em; |
4 |
background: black; |
5 |
|
6 |
border-radius: 1em; |
7 |
}
|
8 |
|
9 |
.outer { |
10 |
display: inline-block; |
11 |
background: lightblue; |
12 |
|
13 |
padding: 3em; |
14 |
border-radius: 4em; /*offset + radius of .inner*/ |
15 |
}
|
Perfekt gebogenes Rohr (siehe Demo).
Ausnahmen
Wie bei allen Fragen im Design gibt es keine konkreten Regeln - Sie werden immer Ausnahmen finden. Es ist eine Frage des Instinkts.
Nehmen Sie zum Beispiel diese Schnittstelle; Der Spalt zwischen dem Kontaktknopf und dem Dropdown sieht nicht wie ein verbogenes Rohr aus. Davon abgesehen haben alle Ecken in dieser Benutzeroberfläche einen einheitlichen Radius, sodass nichts fehl am Platz aussieht:
Leute, die es richtig machen
Ich denke, Sie haben wahrscheinlich genug davon, mir zuzuhören und sich über etwas so Triviales zu wundern. Anstatt auf Beispiele aufmerksam zu machen, bei denen ich es als unangenehm empfunden habe, werfen wir jetzt einen Blick auf einige inspirierende Arbeiten von Dribbblern, die es richtig machen!
