Комментарии 44
SVG / png-картинка фоном?
itunes.apple.com/us/app/candy-crush-saga/id553834731?mt=8&ign-mpt=uo%3D4
Можно для сравнения понакладывать на неё, например, border-radius самый близкий (40px на моём экране) — разница есть, но нужно очень пристально вглядываться.
Что больше: 400-пиксельный квадрат или 400-пиксельный круг?
Не совсем понятно, что автор вкладывает в понятие «больше». Чуть ниже сравнивается «высота» фигур, тогда как у меня первая реакция — сравнение их площади. Очевидно, что при равной «высоте», площадь квадрата будет больше, поэтому он и кажется «больше». Увеличив «высоту» круга, мы увеличивает и его площадь, поэтому на следующей картинке фигуры уже кажутся «равновесными». Но это взгляд со стороны дилетанта, который дизайном не занимается чуть более, чем полностью.
Да. Вполне чётко видно, что он круглее. Из-того, что некоторые люди не могут с ходу сказать который круглее и иногда выбирают наугад 4 вариант, вовсе не следует, что круг выглядит круглее, если у него есть немного жирка. Дальнейший тезис о том, что нужно делать круг менее круглым, чтобы не было заметно перехода, тоже не относится к степени округлости круга. Тут всё дело в скачкообразном изменении степени кривизны (с бесконечности до небольшой константы), что разумеется сложно не заметить. Сглаживание первой производной закономерно даёт более "гладкие" переходы. Но цена — прямые линии перестают быть прямыми.
У меня глаз намётан, сразу вижу что одинаковые.
угол наклона касательный с обеих сторон должен быть одинаковым (другими словами, первая производная должна быть без разрыва в этой точке)С касательными тут всё хорошо, т.к. четверть груга входит в прямую ровно. Т.е. производная без разрыва. Но при этом график производной в точке касания будет иметь излом, то бишь разрывная вторая производная. И вот этот нюанс заметен глазом, собственно его и предлагается подправить.
Если мы наложим номер 3 на номер 4 (геометрический круг и модифицированный круг), то обнаружим, что второй объект слегка тяжелее первого и, следовательно, выглядит в наших глазах круглее.
Видимо, с моими глазами что-то не так, т. к. сразу подумал на 3.
Но посыл статьи в том, что при проектировании дизайнов стоит больше внимание уделять площади, а не размерам. И за это СПАСИБО.
И за скругления, которые не скугления. И за вписывание в круг объектов сложной формы.
И да я теперь знаю что значит поиграйте с формой квадрата ) И на вопрос маркетолога чтооо? 90 градусов это максимум в квадрате? тоже можно найти ответ ))
Самое просто объяснение, которое приходит в голову — автор не знает что он говорит о площади и центре масс.
Конечно все настолько индивидуально… То есть бывает например так, что в интерфейсе есть горизонтальные линии (меню например) и глаз уже начинает оценивать по другому.
Вообще конечно, такие тонкости порождают много головной боли верстальщикам. Ведь макет, в котором вот это вот все учтено, сверстать будет ой как не просто… И что мы возвращаемся к кнопкам из картинок? Нет уж баста!
По шрифтам вообще в пот бросает. Открываешь вот так макет в фотошопе. Верстаешь его. А шрифты выглядят вообще не так… И понятно, что рендеринг другой и то и се… НО, может все-таки найти общую схему?
Возможно я не достаточно крут в css и верстке, возможно фотошоп последних версий уже все может, возможно шрифты за приличные деньги универсальны… Но черт возьми, почему так все не просто?
В фотошопе куча настроек рендеринга шрифтов, и за использование нестандартных в макетах дизайнеров надо бить по рукам.
Обсуждения по поводу как это делать, возможно ли это сделать, сложно ли это делать, какая это головная боль и для кого, выгодно ли использовать ту или иную технику или технологию, решается до дизайна всей командой! И если заплатили много денег и есть ресурсы делать качественно, то команда должна грамотно оценить все свои силы и проработать все нюансы.
Спасибо автору за полезную статью с отличным визуалом!
В дополнение:
Про скругления Бирман хорошо написал: ilyabirman.ru/meanwhile/all/metro-line-curves
Про выравнивания была очень хорошая подробная статья: habrahabr.ru/company/badoo/blog/333992
Излом кривой да, но — на трубке тоже не так уж и напрягает, я бы даже сказал, что это из разряда «теперь развидеть уже не получится». :)
Сдается мне, все эти дизайнерские уловки очень сильно притянуты для жк-матриц за последнюю декаду.
Да и «квадратный квадрат» тоже правильный выбрал.
А про круги на стыке линий, чтобы сглаживать углы, вообще молчу. Всегда предпочитал геометрическое скругление.
Однако же приятно видеть что интерес к теме возрастает и всё больше и больше статей релизятся по теме.
[Перевод] Круглее круга: оптические эффекты при проектировании интерфейсов