Я Никита Колюгин, дизайнер цифровых продуктов. Делал дизайн для Бургер Кинга, Бетховена и Medlinx. Веду телеграм-канал про жизнь дизайнера.
В статье мы пройдёмся по этапам создания красивых скруглений.
Правила в картинках:
Уровень дизайнера легко определить по деталям. Одна из таких мелочей — умение правильно подобрать корнер-радиус.
Представьте ситуацию.
Дизайнеру Косте упала задачка — задизайнить промо-карточку для мобильного приложения.
Костя привык подбирать радиусы элементов на глаз, и у него получилось это:
Он ещё не читал эту статью, поэтому не знает, как исправить макет. Давайте разбираться вместе.
Собрал пять правил красивого скругления в дизайне. Сохраняйте в закладки, чтобы не оказаться на месте Кости.
Правило №1 «Внутренний угол связан с внешним»
Пусть будет главным правилом в списке — радиус внешнего контейнера равен радиусу внутреннего плюс отступ между ними.
Это правило — база, но дизайнеры нарушают его в каждом втором макете.
Используйте для радиусов и отступов числа, которые делятся на четыре: 4, 8, 12, 16, 20, 24, 32… Лучше всего зафиксировать значения в переменных.
Вот, что у нас получается.
С прямоугольными формами разобрались. Костя уже готовится уйти на обеденный перерыв, но замечает, что круглая иконка не вписывается в угол.
Правило №2 «Кружок внутри, угол снаружи»
Первое правило работает и в случае с кружочком. Чему равен радиус скругления окружности? Вспоминаем школу и делим сторону эллипса пополам.
Есть ещё один фокус, следите за руками.
- Рисуем кружок со стороной равной двум радиусам контейнера.
- Прибиваем круг к углу вплотную.
- Уменьшаем окружность к собственному центру.
Получили такой блок.
Костя — фанат марки Эппл, а у них скругления выглядят как-то посимпатичнее что ли.
Правило №3 «Применяем сглаживание»
В природе не бывает правильных углов, вычерченных циркулем. Обычные скругления выглядят неестественно для человеческого глаза.
Используйте «corner smoothing» в Фигме, чтобы сгладить углы и сделать дизайн приятнее для восприятия.
Большинство конструкторов сайтов не умеют сглаживать углы, а некоторые версии браузеров и андроида вообще неего не поддерживают. Ребята из Эппла добавили сглаживание в свои продукты по-умолчанию, но для веб-сайта придётся повозиться с отдельной библиотекой. Покурите тему до передачи макетов в разработку.
Добавили сглаживание — глаз радуется.
Осталось наполнить карточку текстом. На этом моменте Константин снова загрустил.
Правило №4 «Радиус дружит с текстом»
Нет ничего более непрофессионального и гадкого на вид, чем строчка текста, которая упирается в радиус. Большое скругление выглядит некрасиво рядом со строгим гротеском по типу Интера и одновременно отжирает ширину у текстового блока. Так же бугеркинговский Флейм не играет с острыми углами.
Я использую радиусы от 12 pt до 20 pt для карточек в мобильных приложениях. Большие разделы и поп-ап шторки скругляю до 32 пунктов. Рисунок шрифта, кегль текста и ширина экрана играют решающую роль в подборе скруглений для карточек.
Правило №5 «Проверка обводкой»
Как удостовериться, что мы правильно подобрали радиус скругления? Сейчас покажу маленький лайфхак.
Создаём внутреннему элементу внешнюю обводку и увеличиваем толщину до тех пор, пока она не достигнет края контейнера. Фигура, образованная обводкой, должна идеально лечь в угол.
Такой экран уже можно без кринжа показывать арт-директору.
Пост-скриптум
Каждое из приведённых правил можно нарушать. Большие цифровые продукты и экосистемы вообще не забивают себе голову такими мелочами.
Тем не менее, я считаю, что нужно стремиться к совершенству, ведь сделать хреново всегда успеем!
Десерт
Панель приложения на Макбуке знает о физическом скруглении дисплея.
Хорошая статья
Изучаю Блендер в свободное время, и иногда чувствую себя мега тупым. Но тут людям объясняют, как скруглять углы…
Не просто как скруглять углы, а как это делать правильно, чтобы было приятного глазу, ну и внутренний перфекционист ликовал
Ты сравниваешь изучение инструмента с изучением принципа построения работы. Научинться работать в блендере не равно научиться делать красивые 3д модели.
Я тоже выпал
Статья классная, вроде мелочь, а дизайн становится намного приятнее на глаз
Но написано немного криво: "Рисуем кружок со стороной равной двум радиусам контейнера." - у кружка нет сторон, вероятно имеется ввиду диаметр
С текстом тоже не совсем понятно
Статья 🔥
Больше бы такого на vc. Единственное, не понял трюк со шрифтом. Нужно менять шрифт под радиус? А если у меня фирменный шрифт из брендбука и менять его нельзя?
Нужно подбирать радиусы чтобы гармонировали со шрифтом
Насколько я понял, речь о том, что блок текста, условно говоря, прямоугольный. Поэтому отступ до текста должен быть равен радиусу скругления. Но с округлыми шрифтами история немного другая...
Последний пример с макбуком 🔥
В этом и есть магия эпла — точность и педантичность в мельчайших мелочах что создает ощущение целостности и удовлетворения, в результате человек сам не понимает почему ему нравится эпл.
Если человеку, который даже только в начале пути дизайнера надо объяснять что вот это плохо, то не надо, эта профессия точно не для него. А посему, сама статья может с натяжкой интересная не дизайнеру, но абсолютно бесполезная. Кто видит - тому объяснять не надо, кто не видит, тому уже ничего не поможет.
А это плохо? Или это не по канону?
Комментарий удален модератором
Никите - моё увоженье за полезнятину! Редко на VC встретишь подобные публикации.
... и наступает та эпоха, когда подобная шняга с десятикратным превышением всех разумных ПДК по содержанию кринжатины становится обыденностью. Господь, здесь уже нечего спасать, жги...
Уровень дизайнера легко определить по деталям. — а вот это, пожалуй, золотые хоть и банальные слова. Судя по "правилам", чтобы достичь уровня автора, нужно затариваться вагонами кислородных баллонов.Не все такие умные и прокачанные как ты.
Автору благодарность за труды и понятное донесения материала комьюнити, Молодец!
Глазам стало приятно).
Комментарий недоступен
Оказалось очень полезно и без пафоса. Спасибо!
Отлично!
Еще бы меньше англицизмов
Комментарий недоступен
В само сердечко
Интересно, спасибо.
Только вот тут как-то бросается в глаза разный радиус скругления
Но если финальный вариант вам не очень, то вот такой вам как? Приятнее ли для глаза?
Это из шага №1? В финальном вроде бы нормально:
В то же время у эпол:
так тут и угол экрана прямой
Очень хорошо
Все-таки на глаз проще
На каждый шаг круто было бы увидеть: было-стало, а не только для первого
Для тех кому тоже стало любопытно, как это в браузере делается:
https://codepen.io/alexandermzchiu/pen/jOyyNKR?editors=1100
Это на чистом CSS, и, как видим, управлять радиусом таким способом не так удобно. Поэтому есть всевозможные решения на базе JS, в том числе с использованием ультра-современных API браузера, например это:
https://css-houdini.rocks/smooth-corners/
(эта демка в Firefox и на iOS не работает, но в Chrome последней версии на ПК вроде всё ОК)
Прикольный материал, спасибо!
Согласен
Наконец что-то нормальное на vc
Статья топ 🔥
👋👋👋
Всегда на глаз делаю, но кратности соблюдаю. Правило можно и нарушать это не панацея. Кстати советую почитать Бирмана про скругления
https://ilyabirman.ru/meanwhile/all/metro-line-curves/
Грех - не подписаться.
Углы - это просто!
Скругляю углы, но не всегда сеньорски идеально!
Комментарий недоступен
Сейчас бы математику вспоминать… 😅спасибо.)
У меня как раз по этой теме вопросы появлялись.
Классная статья, спасибо!
Комментарий недоступен
Привет, у меня тоже есть телеграм канал, давай дружить.
Дружить только потому, что у тебя тоже телеграм канал? :)
Никого выключка сломанная по левому краю в карточке с текстом не бесит? Меня вот еще больше глаз режет чем неправильное скругление шильдика про "5 мин на прочтение"
Годнота, спасибо за статью
Я так понял, что дизайн нужно чувствовать. Кто-то его чувствует и понимает, что нужно делать, если дизайнер рисует херово, и программист верстает херово. Кто-то только чувствует, что что-то не так. А кто-то даже не замечает, что намакетил шляпу. Статьи такие даны нам, чтобы иметь простые слова, чтобы нести их в массы людей, которые не чувствуют дизайн.
Полезность, спасибо
Спасибо, Никита!
Вроде как хорошо, а с другой стороны теперь весь дизайн выглядит одинаково.
“Скругление кнопки — 16 pt, отступ от края — 24 pt.16 pt + 24 pt = 40 pt.” Значения перепутали
Боже мой, целая наука)
Комментарий удален модератором
Это очень грустно, что современным дизайнерам надо объяснять математику этого явления, это говорит о перенасыщении рынка непрофессионалами. Дизайнер без чувства прекрасного как обезьана на гитаре. Выучить можно, а толку?
К автору статьи вопросов нет, все находчиво объяснил, сам представляю обводку между скруглениями при проектировании. Но если такая проблема требует объяснения, не понятно как дизайнер будет решать более сложные задачи в своей работе
К чему эта архаика с pt. Мы что ли не пиксельную эпоху живём.
Огонь! Лови хорошую карму!