Как правильно скруглять углы в дизайне

Скругление углов — одна из самых недооцененных тем в UX/UI дизайне. Через грамотный выбор параметра считывается аккуратность работы, согласованность всех элементов и визуальная логика. 

Разберем, как подбирать скругление для одного элемента и как согласовывать его между несколькими фигурами в макете. Работать будем с Figma и Adobe Photoshop.

Что такое скругление

У каждого элемента на экране сайта или графическом макете есть углы. Например, у кнопок, карточек, букв. По-умолчанию в графическом редакторе углы фигур чаще всего прямые. Но в большинстве интерфейсов вы увидите скругление: с ним дизайн смотрится «чище» и дружелюбнее.

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

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

Разберем подробно использование и настройку каждого варианта ниже.

Как работает скругление

Дизайнеры по-разному настраивают скругления в зависимости от сферы бизнеса, целевой аудитории. Например, в проектах на тему детских праздников или домашних любимцев мягкие формы поддерживают веселое настроение. Здесь комбинация цвета, шрифта и скругления поможет объединить разные по содержанию блоки в единую визуальную систему. 

Другой пример — киберпанк и в целом технологичный дизайн. Чтобы создать ощущение интерфейсов и цифровой структуры, используют прямые углы и срезы. Скругление здесь будет точечным, чтобы выделить отдельные объекты. 

Заметные скругления часто выбирают для минималистичных дизайнов в премиум-сегментах — в сфере красоты, SPA, электроники. Для более современного и технологичного вида применяют суперэллипс. В iOS на этой настройке строятся иконки, кнопки и карточки.

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

Для сравнения — ниже пример с полным отсутствием скругления. Такая дизайнерская задумка смотрится интересно для сайтов-портфолио, спецпроектов, небольших артовых заведений и узких ниш. Но масштабировать подобные интерфейсы и создавать цифровые продукты в таком стиле уже труднее.

Как настроить в Figma

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

Внутри Figma в разделе Appearance есть параметр Corner radius — это обычное скругление по дуге окружности. Достаточно выбрать фрейм или фигуру и задать значение в пикселях. Чтобы проще ориентироваться на макете, лучше выбирать целые четные числа. Например, 20px или 60px.

Чтобы создать суперэллипс в Figma нужно сначала открыть параметр с выбором каждого угла отдельно — он похож на квадрат с подсвеченными гранями. А затем кликнуть на значок настройки под ним — откроется ползунок Corner smoothing. Здесь нужно задать значение сглаживания от 1% до 100%. Например, для UX/UI в iOS стандарт — 60%.

Если нужно скруглить углы текста, сначала его переводят в вектор через параметр Flatten. Учитывайте, что в дальнейшем слово или фразу нельзя будет переписать — только создать новый текстовый слой.

Дополнительно в Figma можно настроить эффекты — в зависимости от стиля сайта это поможет подчеркнуть закругленные края кнопки или карточки. Например, через параметр Effects → Drop Shadow можно создать мягкую тень от объекта.

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

Как настроить в Photoshop

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

Затем создать фигуру и задать ей скругление — это можно сделать по значку с одним обозначенным углом в нижней части программы либо на панели свойств справа. Дальше внутри прямоугольника можно работать: добавлять другие элементы и выстраивать композицию. 

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

В дальнейшем эту фигуру с маской можно редактировать — изменить скругление углов или размер отображаемой области.

Как сочетать скругление нескольких фигур

Дизайнер практически не работает изолированно с одной фигурой или фреймом — чаще всего они встроены в композицию. Например, на макете сайта есть карточки с изображениями и текстом, всплывающие окна, кнопки. А значит, если мы скруглили один элемент, то должны изменить параметр и у его содержимого или окружения. 

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

Чтобы согласовать все элементы используют простое соотношение: A − B = C. Здесь A — угол внешней фигуры или фрейма, B — расстояние между внешним и внутренним элементом, C — угол внутреннего элемента. 

Нужно выбрать один элемент и посчитать по нему остальные. Например, у внутренней карточки радиус 20px, отступ — 6px. Тогда для внешней фигуры нужно выбрать скругление в 26px. 

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

Например, если круг размером 40х40px, его радиус 20px. Расстояние до края пусть будет 6px. Значит, скругление внешней фигуры должно быть 26px.