Подбираете радиус скругления на глаз? Эти 5 правил помогут скруглять углы как сеньор

В статье мы пройдёмся по этапам создания красивых скруглений.
Правила в картинках:

Уровень дизайнера легко определить по деталям. Одна из таких мелочей — умение правильно подобрать корнер-радиус.

Представьте ситуацию.
Дизайнеру Косте упала задачка — задизайнить промо-карточку для мобильного приложения.

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

Он ещё не читал эту статью, поэтому не знает, как исправить макет. Давайте разбираться вместе.

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

Пусть будет главным правилом в списке — радиус внешнего контейнера равен радиусу внутреннего плюс отступ между ними.

Это правило — база, но дизайнеры нарушают его в каждом втором макете.

Вот, что у нас получается.

С прямоугольными формами разобрались. Костя уже готовится уйти на обеденный перерыв, но замечает, что круглая иконка не вписывается в угол.

Первое правило работает и в случае с кружочком. Чему равен радиус скругления окружности? Вспоминаем школу и делим сторону эллипса пополам.

Есть ещё один фокус, следите за руками.

Получили такой блок.

Костя — фанат марки Эппл, а у них скругления выглядят как-то посимпатичнее что ли.

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

Используйте «corner smoothing» в Фигме, чтобы сгладить углы и сделать дизайн приятнее для восприятия.

Добавили сглаживание — глаз радуется.

Осталось наполнить карточку текстом. На этом моменте Константин снова загрустил.

Нет ничего более непрофессионального и гадкого на вид, чем строчка текста, которая упирается в радиус. Большое скругление выглядит некрасиво рядом со строгим гротеском по типу Интера и одновременно отжирает ширину у текстового блока. Так же бугеркинговский Флейм не играет с острыми углами.

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

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

Такой экран уже можно без кринжа показывать арт-директору.

Каждое из приведённых правил можно нарушать. Большие цифровые продукты и экосистемы вообще не забивают себе голову такими мелочами.

Тем не менее, я считаю, что нужно стремиться к совершенству, ведь сделать хреново всегда успеем!

Панель приложения на Макбуке знает о физическом скруглении дисплея.

#ui #интерфейс #product #дизайн