Простой дизайн — скругление внутренних углов фигур
Простой дизайн- рубрика повышения скилов и знаний ux/ui дизайнера
Дизайнеры часто неосознанно создают дискомфорт пользователю, не учитывая природу вещей, одно из них — это неправильное внутреннее скругление форм
Примеры буду приводить с dribbble.com, чтобы не зацепить какого-нибудь влюблённого в свой продукт дизайнера)
первый плохой пример — комбо тройной вложенности с одинаковым скруглением
Итого нас ждёт плохая история с равнозначными углами
Второй плохой пример — одинаковое скругление экрана и карточки
Итого на выходе
А проблема внутреннего скругления решается элементарной формулой
Формула:
от формы наружного скругления необходимо отнять расстояние до формы внутреннего скругления — это и будет внутреннее скругление формы
Идеальное внутреннее скругление существует! Знайте и используйте)
Спасибо за внимание, до встречи CPO Productium Alex Gour
Вся идея, в принципе, естественна, и заключается в этом:
Автор так намудрил, хотя нужно было лишь написать, что расстояние между сторонами объектов всегда должны быть равным и по формуле +1px в скруглении.
Я очень пытался понять как сделать правильно, но не понял О_о.
Сама тема хорошая и полезная (в узких кругах), но добавьте пожалуйста больше писания того, как же правильно высчитывать углы и что есть "не правильно"?
Я смотрел как "правильный" вариант, так и "не правильный" и не особо понял различие. Словно много текста объяснения вы оставили у себя в голове, надеясь на то, что остальные всё и так знают.
Вы там в узких кругах неправильно скругляете. Вот и вся мораль.
А – В = С
Т.е. А=С+B? или В+С?
все просто, от наружного скругления необходимо отнять расстояние до формы внутреннего скругления- это и будет внутреннее скругление формы
спасибо за коммент, внесу пояснение)
Рассмотрим пример. Внешнее скругление 12, толщина рамочки 20. Размеры вложенной картинки, например, 800*800. Каким будет внутреннее? Я не поняла.
Что это я сейчас прочёл?!
шедевр))
А чего вы шедевр в статье не написали?
это больше совет. я не претендую на исправление мира, а только стараюсь пролить свет на некоторые моменты дизайна
Комментарий недоступен
элементы, которые расположены далеко, уже нет смысла подстраивать под наружный элемент, здесь необходимо больше руководствоваться правилом близости
а так да, такое скругление визуально более верное
Комментарий недоступен
В высчитывании пропорций возможен гибкий подход, считать от А, B и даже С. Главное придерживаться логики построения
Комментарий недоступен
как бы да, но руками быстрее, если знать )
Я тоже ничего не понял
добавил текстовое описание)
«от формы наружного скругления необходимо отнять расстояние до формы внутреннего скругления»
Шта? От формы отнять расстояние... Ох как чудесен этот мир художника...
Вроде бы скругления считаются радиусами. И если в вашей формуле радиусы, то Ваша формула это просто вариант когда центры окружностей совпадают. Что на самом деле, скорее всего, визуально приятно только на больших фигурах с узкой полосой фоновой фигуры.
Комментарий недоступен
Комментарий недоступен
Комментарий недоступен
Комментарий недоступен
Какой это приносит дискомфорт пользователям?
Какое отношение это имеет к природе вещей? Что это за природа вещей?
ну в смысле. Это очень некрасиво.
А где аргументы, что приведенные примеры скругления - это плохо?
То есть, если у меня наружное скругление 14px, а расстояние до внутреннего 20px, то внутреннее должно быть -6?
Действительно, лучше и не скажешь.
Проще на глаз сделать два одинаковых друг к дургу скругления
А чего не так в одинаковых скруглениях двух-трех карточек? Из статьи не ясно, при этом я видел полярное мнение европейских дизайнеров, где рекомендуют делать скругления одинаковыми.
Гениально! Спасибо
не за что)
А почему первые примеры плохие? А именно Ваш хороший? Мб у меня недостаточно развит вкус? Так у юзеров его вообще нету
Формула работает не всегда. Если у меня скругление 16пх внешнее, и отступ 16пх до внутреннего, то что делать? Нулевое скругление не вариант ставить.
ну тут уже визуально выставлять, но самое простое для неопытного дизайнера - просто делить на два внешнее
Короч.
1. Делаете у внутреннего объекта бордер такой толщиной, чтобы он доходил до внешнего объекта
2. Скругляете внешний объект на глаз, чтобы он совпал с бордером
3. Вы великолепны