Простой дизайн — скругление внутренних углов фигур

Простой дизайн- рубрика повышения скилов и знаний ux/ui дизайнера

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

Примеры буду приводить с dribbble.com, чтобы не зацепить какого-нибудь влюблённого в свой продукт дизайнера)

первый плохой пример — комбо тройной вложенности с одинаковым скруглением

Итого нас ждёт плохая история с равнозначными углами

Плохая история одинакового скругления углов

Второй плохой пример — одинаковое скругление экрана и карточки

Итого на выходе

Опять плохая история

А проблема внутреннего скругления решается элементарной формулой

Формула правильного внутреннего скругления

Формула:
от формы наружного скругления необходимо отнять расстояние до формы внутреннего скругления — это и будет внутреннее скругление формы

Хорошая история)

Идеальное внутреннее скругление существует! Знайте и используйте)

Спасибо за внимание, до встречи CPO Productium Alex Gour

0
39 комментариев
Написать комментарий...
Alex Firssoff

Вся идея, в принципе, естественна, и заключается в этом:

Ответить
Развернуть ветку
Aleksei

Автор так намудрил, хотя нужно было лишь написать, что расстояние между сторонами объектов всегда должны быть равным и по формуле +1px в скруглении.

Ответить
Развернуть ветку
Nino Nekret

Что это я сейчас прочёл?!

Ответить
Развернуть ветку
alex gour
Автор

шедевр))

Ответить
Развернуть ветку
Nino Nekret

А чего вы шедевр в статье не написали?

Ответить
Развернуть ветку
alex gour
Автор

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

Ответить
Развернуть ветку
Дяченко Александр

Я очень пытался понять как сделать правильно, но не понял О_о.
Сама тема хорошая и полезная (в узких кругах), но добавьте пожалуйста больше писания того, как же правильно высчитывать углы и что есть "не правильно"?

Я смотрел как "правильный" вариант, так и "не правильный" и не особо понял различие. Словно много текста объяснения вы оставили у себя в голове, надеясь на то, что остальные всё и так знают.

Ответить
Развернуть ветку
ivan krapivin

Вы там в узких кругах неправильно скругляете. Вот и вся мораль. 
А – В = С

Ответить
Развернуть ветку
Nino Nekret

Т.е. А=С+B? или В+С?

Ответить
Развернуть ветку
alex gour
Автор

все просто, от наружного скругления необходимо отнять расстояние до формы внутреннего скругления- это и будет внутреннее скругление формы

спасибо за коммент, внесу пояснение)

Ответить
Развернуть ветку
Anna Alanicheva Levesque

Рассмотрим пример. Внешнее скругление 12, толщина рамочки 20. Размеры вложенной картинки, например, 800*800. Каким будет внутреннее? Я не поняла.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
alex gour
Автор

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

а так да, такое скругление визуально более верное

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
alex gour
Автор

В высчитывании пропорций возможен гибкий подход, считать от А, B и даже С. Главное придерживаться логики построения

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
alex gour
Автор

как бы да, но руками быстрее, если знать )

Ответить
Развернуть ветку
alex gour
Автор
Ответить
Развернуть ветку
Dima Khabibulin

Я тоже ничего не понял

Ответить
Развернуть ветку
alex gour
Автор

добавил текстовое описание)

Ответить
Развернуть ветку
Фомушка Фома

«от формы наружного скругления необходимо отнять расстояние до формы внутреннего скругления»

Шта? От формы отнять расстояние... Ох как чудесен этот мир художника... 

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Alex G

Какой это приносит дискомфорт пользователям?

Какое отношение это имеет к природе вещей? Что это за природа вещей?

Ответить
Развернуть ветку
LANA ANDERSON

ну в смысле. Это очень некрасиво.

Ответить
Развернуть ветку
Александр Кирсанов

А где аргументы, что приведенные примеры скругления - это плохо? 

Ответить
Развернуть ветку
Алина Фомина

Действительно, лучше и не скажешь. 

Ответить
Развернуть ветку
S.Z

Проще на глаз сделать два одинаковых друг к дургу скругления

Ответить
Развернуть ветку
Eugene Yuryev

То есть, если у меня наружное скругление 14px, а расстояние до внутреннего 20px, то внутреннее должно быть -6?

Ответить
Развернуть ветку
Александр Львов

А чего не так в одинаковых скруглениях двух-трех карточек? Из статьи не ясно, при этом я видел полярное мнение европейских дизайнеров, где рекомендуют делать скругления одинаковыми. 

Ответить
Развернуть ветку
Monkey Do
Ответить
Развернуть ветку
Кирилл Кунин

Гениально! Спасибо

Ответить
Развернуть ветку
alex gour
Автор

не за что)

Ответить
Развернуть ветку
Олег Степанчиков

А почему первые примеры плохие? А именно Ваш хороший? Мб у меня недостаточно развит вкус? Так у юзеров его вообще нету

Ответить
Развернуть ветку
Pavel Starozhuk

Формула работает не всегда. Если у меня скругление 16пх внешнее, и отступ 16пх до внутреннего, то что делать? Нулевое скругление не вариант ставить.

Ответить
Развернуть ветку
alex gour
Автор

ну тут уже визуально выставлять, но самое простое для неопытного дизайнера - просто делить на два внешнее

Ответить
Развернуть ветку
Filipp Lyakh

Короч.
1. Делаете у внутреннего объекта бордер такой толщиной, чтобы он доходил до внешнего объекта
2. Скругляете внешний объект на глаз, чтобы он совпал с бордером
3. Вы великолепны

Ответить
Развернуть ветку
36 комментариев
Раскрывать всегда