Презентация
серверов от Acer
До начала осталось:
Смотреть
Дизайн
alex Gour

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{ "author_name": "alex Gour", "author_type": "self", "tags": [], "comments": 35, "likes": 37, "favorites": 134, "is_advertisement": false, "subsite_label": "design", "id": 218103, "is_wide": false, "is_ugc": true, "date": "Tue, 09 Mar 2021 12:51:42 +0300", "is_special": false }
0
35 комментариев
Популярные
По порядку
Написать комментарий...
8

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

Ответить
2

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

Ответить
6

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

Ответить
–2

шедевр))

Ответить
0

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

Ответить
2

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

Ответить
6

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

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

Ответить
2

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

Ответить
1

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

Ответить
0

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

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

Ответить
4

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

Ответить
0

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

Ответить
3

Решил проверить: у белого прямоугольника скругление 40 px (A), расстояние до серого — 24 px (B) => скругление у серого 40-24=16 px (C).

Ну то есть работает конечно, но при условии, что скругление A достаточно большое, иначе C (как на первом примере из статьи) часто будет получаться 0. Не знаю, необходима ли тут прям формула)

Ответить
–1

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

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

Ответить
2

Так а на деле, как предлагаете улучшить первый плохой пример, где комбо тройной вложенности с одинаковым скруглением? Получается, следует взять за основу размер B (предположим, у нас везде в интерфейсе скругления, равные B) и от него высчитать A и C?..

Ответить
0

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

Ответить
1

Уже тянет на идею для отдельного плагина!

Ответить
0

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

Ответить
3

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

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

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

Ответить
1

Дожились. До скругления уже доебались ) Дизайн должен оставаться искусством, а не математикой ) 

Ответить
3

Я если что тоже считаю, что именно эта тема со скруглениями надуманная, но про искусство — это сильно! Тут была попытка обсуждения мелкой, сугубо технической фишки, это иногда познавательно, поэтому заинтересованные люди доебываются до плагинов, шрифтов, нового софта и всего остального, на что вы пишете обзоры. Это про искусство значит все?

Ну и до слова "должен" хочется отдельно доебаться, кому он там что должен!.. Цитата из вашей статьи, которую прочитал сегодня; обзор на лучшую по вашему мнению книгу на эту тему:

Ответить
0

Это был сарказм. Сама идея находить пропорцию идеальных и гармоничных скруглений относительно других объектов очень хорошая.  

Ответить
0

Фух, ну и хорошо, я признаться сарказм тут определенно не разглядел, потому что я точно встречал людей, не умеющих разделять эти два понятия!

Ответить
2

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

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
1

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

Ответить
0

не за что)

Ответить
0

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

Ответить
0

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

Ответить

Комментарии

null