Как закруглять углы?

Сейчас я расскажу о том, как нужно закруглять углы в ситуациях, когда нам нужно поместить один прямоугольник внутрь другого прямоугольника (все очень просто).

На написание этой статьи меня вдохновило прослушивание музыки. Пару дней назад, слушая музыку, я случайно обратил внимание на обложку трека в плеере.

В чем же тут проблема?

Все дело в расстоянии между внутренним прямоугольником и внешним, сверху и слева расстояние одинаковое, а вот на изгибе пространство между двумя прямоугольниками сужается. Из-за этого наш глаз ощущает какую-то «инородность», кажется, что внутренний прямоугольник просто впихнули туда, где ему не место, и теперь ему там тесно.

Разное расстояние в изгибе – следствие неправильного соотношения радиусов закругления внутреннего и внешнего угла.

Какое должно быть закругление

Самое главное правило соотношения углов – окружности, образованные радиусами закругления углов должны иметь общий центр, то есть маленькая окружность должна находиться ровно в центре большой окружности.

А вот как расположены окружности в нашем примере:

Формула закругления углов

Легко сказать, что внутрення окружность должна быть в центре внешней, но как же это реализовывать на практике?

На самом деле так же легко

Итак, давайте для удобства дадим названия углам. Угол внешнего прямоугольника будет A, а угол внутреннего будет B. Сейчас радиусы углов одинаковы, и равны 20 пикселям

Введем еще одну переменную – расстояние между внутренним прямоугольником и внешним. Назовем его C, сейчас оно равняется 12 пикселям

Итак, у нас есть внешний угол A с радиусом 20 пикселей и расстояние C между внешним и внутренним углом в 12 пикселей. Нам нужно узнать, какой радиус закругления задать внутреннему углу B, чтобы все было ровно и классно.

Для этого есть очень простая формула:

Получается, чтобы узнать радиус скрепления внутреннего прямоугольника, нам нужно от числового значения закругления внешнего прямоугольника отнять значение расстояния между этими двумя прямоугольниками.

В нашем случае получится так

Вот что у нас получилось:

Теперь угол выглядит органично.

Обе окружности имеют один центр.

И расстояние от внутреннего прямоугольника до внешнего теперь везде одинаковое.

Что делать, если расстояние между прямоугольниками больше, чем радиус внешнего угла?

Если получается так, что расстояние между прямоугольниками больше, чем радиус внешнего угла (например, радиус внешнего угла 20 px, а расстояние до внутреннего прямоугольника – 22 px), то можно пойти двумя путями:

1. Сократить расстояние между прямоугольниками так, чтобы оно было меньше значения радиуса внешнего угла, а затем применить формулу (лично я предпочитаю, чтобы разница была как минимум в 4 пикселя)
2. Отдалить настолько, чтобы теория близости перестала работать, и мы не воспринимали внешние и внутренние углы как единое целое.

Исправляем углы

В этой части статьи я попробую представить свою версию того, как стоило бы выглядеть некоторым углам из разных приложений.

Вообще, можно еще попробовать уменьшить радиус двух нижних углов, чтобы обложка была на одной линии с текстом, образуя тем самым единый блок. Но с такими решениями нужно быть аккуратнее.

Такой метод, например, использует Яндекс Еда в карточке товара:

На самом деле, я немного расстроился, потому что надеялся, что сейчас найду у себя в телефоне кучу приложений с неправильными углами, но, к сожалению (хотя на самом деле к счастью), нашел только одно – Яндекс Go, и оно по праву может занять первое место в списке худших углов вообще.

На главной странице все выполнено отлично – все радиусы по формуле.

Но вот что будет, если мы попробуем ввести адрес:

А вот так нужно было сделать

Еще немного примеров с Dribbble (всегда думал, что в слове dribblbe две b, а их аж три!)

Первая картинка до, вторая после:

Конечно, можно было бы найти больше примеров плохих радиусов, но мне так не хочется дальше копаться в этом...

Заключение

Теперь вы знаете как закруглять углы прямоугольников, внутри других прямоугольников.

Вообще, в дизайне нет абсолютно истинных правил и законов, следуя которым, можно просто делать хороший дизайн. В любом правиле всегда найдутся исключения, и хороший дизайнер должен чувствовать, когда нужно нарушить тот или иной закон. Формула радиусов углов тоже не является нерушимым правилом. Иногда можно позволить себе немного отойти от формулы, если это обусловлено композицией (часто такое случается на больших расстояниях от внешнего фрейма).