Формула идеальных углов в дизайне карточек

Улучшайте восприятие пользователя

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

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

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

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

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

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

Как вы можете видеть, радиусы скругления углов, которые рассчитаны по формуле, концентрические. Центр окружности, которая лежит в основе углов, один и тот же, а вложенные элементы гармонично сочетаются друг с другом.

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

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

Перевод статьи The Formula for Perfect Corners on Cards из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!