Как стать автором
Обновить

Комментарии 44

НЛО прилетело и опубликовало эту надпись здесь

SVG / png-картинка фоном?

Да. У Apple на сайте для иконок слегка не так, там накладывают скругления поверх квадратной картинки.
itunes.apple.com/us/app/candy-crush-saga/id553834731?mt=8&ign-mpt=uo%3D4
Можно для сравнения понакладывать на неё, например, border-radius самый близкий (40px на моём экране) — разница есть, но нужно очень пристально вглядываться.
Что больше: 400-пиксельный квадрат или 400-пиксельный круг?


Не совсем понятно, что автор вкладывает в понятие «больше». Чуть ниже сравнивается «высота» фигур, тогда как у меня первая реакция — сравнение их площади. Очевидно, что при равной «высоте», площадь квадрата будет больше, поэтому он и кажется «больше». Увеличив «высоту» круга, мы увеличивает и его площадь, поэтому на следующей картинке фигуры уже кажутся «равновесными». Но это взгляд со стороны дилетанта, который дизайном не занимается чуть более, чем полностью.
Согласен. Причины того, что квадрат визуально больше очевидны дилетантам, видимо профессионалам не очень. По моему это называется профессиональная деформация.
Тоже самое об этом примере хотел написать.

ну они конечно будут равновеснее
400400 почти = π225*225

Так какой из кругов самый круглый? 3?

Да. Вполне чётко видно, что он круглее. Из-того, что некоторые люди не могут с ходу сказать который круглее и иногда выбирают наугад 4 вариант, вовсе не следует, что круг выглядит круглее, если у него есть немного жирка. Дальнейший тезис о том, что нужно делать круг менее круглым, чтобы не было заметно перехода, тоже не относится к степени округлости круга. Тут всё дело в скачкообразном изменении степени кривизны (с бесконечности до небольшой константы), что разумеется сложно не заметить. Сглаживание первой производной закономерно даёт более "гладкие" переходы. Но цена — прямые линии перестают быть прямыми.

Благодарю! Нужно принять на вооружение.
>>Что больше: 400-пиксельный квадрат или 400-пиксельный круг?
У меня глаз намётан, сразу вижу что одинаковые.
Видимо, кто-то в школе прогуливал геометрию и пошёл на дизайнера :) Конечно же, круг диаметром 450 и квадрат со стороной 400 кажутся «равновесными», ведь их площадь почти одинакова (в отличие от 400-400). Да и все эти скругления без изломов достигаются простым условием: угол наклона касательный с обеих сторон должен быть одинаковым (другими словами, первая производная должна быть без разрыва в этой точке)
угол наклона касательный с обеих сторон должен быть одинаковым (другими словами, первая производная должна быть без разрыва в этой точке)
С касательными тут всё хорошо, т.к. четверть груга входит в прямую ровно. Т.е. производная без разрыва. Но при этом график производной в точке касания будет иметь излом, то бишь разрывная вторая производная. И вот этот нюанс заметен глазом, собственно его и предлагается подправить.
Согласен. Забыл про вторую производную
Если мы наложим номер 3 на номер 4 (геометрический круг и модифицированный круг), то обнаружим, что второй объект слегка тяжелее первого и, следовательно, выглядит в наших глазах круглее.

Видимо, с моими глазами что-то не так, т. к. сразу подумал на 3.
Аналогично с квадратами в конце статьи. Сразу подумал, что второй квадрат квадратнее первого.
НЛО прилетело и опубликовало эту надпись здесь
Очевидно, что автору оригинала стоит познакомится с понятием площадь.
Но посыл статьи в том, что при проектировании дизайнов стоит больше внимание уделять площади, а не размерам. И за это СПАСИБО.
И за скругления, которые не скугления. И за вписывание в круг объектов сложной формы.
Спасибо. Хоть и не дизайнер закинул в избранное.
И да я теперь знаю что значит поиграйте с формой квадрата ) И на вопрос маркетолога чтооо? 90 градусов это максимум в квадрате? тоже можно найти ответ ))
Первую часть статьи про размеры квадратов и кругов читал с мыслью «О, в UI'е изобрели площадь»
НЛО прилетело и опубликовало эту надпись здесь
Конечно статья интересная, но первая половина полностью посещена площади и центру масс объектов, но при этом ни в одной строчке об этом не говорится. Как так?

Самое просто объяснение, которое приходит в голову — автор не знает что он говорит о площади и центре масс.

Ну это странно, писать статью на хабр без прочтения литературы по данной теме. Хотя бы минимально можно было ознакомиться, на том же хабре есть куча подобных статей.
Это ж перевод
Хорошо, согласен, был не прав.
Второе что приходит в голову — автор думает что его аудитория не знает что такое площадь и центр масс.
Может, и стоило упомянуть площади и центр масс. Но, по-моему, площадями тоже нельзя слепок руководствоваться. Например, в третьем примере, где прямоугольники с большим отношением сторон, «палочки». Если их сделать равными по площади с квадратами, они будут в два раза длиннее, что тоже будет смотреться плохо. Поэтому, видимо, следует руководствоваться собственным художественным вкусом.

Конечно все настолько индивидуально… То есть бывает например так, что в интерфейсе есть горизонтальные линии (меню например) и глаз уже начинает оценивать по другому.


Вообще конечно, такие тонкости порождают много головной боли верстальщикам. Ведь макет, в котором вот это вот все учтено, сверстать будет ой как не просто… И что мы возвращаемся к кнопкам из картинок? Нет уж баста!


По шрифтам вообще в пот бросает. Открываешь вот так макет в фотошопе. Верстаешь его. А шрифты выглядят вообще не так… И понятно, что рендеринг другой и то и се… НО, может все-таки найти общую схему?


Возможно я не достаточно крут в css и верстке, возможно фотошоп последних версий уже все может, возможно шрифты за приличные деньги универсальны… Но черт возьми, почему так все не просто?

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

В фотошопе много настроек рендеринга шрифтов, но ни одна из них вообще не соответствует тому, что будет в винде или линуксе. Мак еще более менее.
Все всегда было не просто. Для обычных продуктов подойдут стандартные шрифты и скругления, как правило этого достаточно. Но, если заказчик платит очень круглую сумму где много цифр и говорит сделайте мне самое лучшее, то будьте добры учитывать вообще все, что только возможно. Я как дизайнер, хочу отметить, наше дела сделать крутой макет, верстальщику нужно его сверстать, все и "."
Обсуждения по поводу как это делать, возможно ли это сделать, сложно ли это делать, какая это головная боль и для кого, выгодно ли использовать ту или иную технику или технологию, решается до дизайна всей командой! И если заплатили много денег и есть ресурсы делать качественно, то команда должна грамотно оценить все свои силы и проработать все нюансы.

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

image


2 — стройно, чётко и выглядит опрятно.
3 — какая-то неуверенная кривая, выглядит расхлябанно.


image


Изломы как изломы. Что плохого в чётком переходе — автор так и не сказал.


Проблема тут в том, что в жизни таких изгибов не бывает

Ох уж эти дизайнеры..


image

Когда нужно выровнять визуальный вес между квадратом и кругом, то я использую коэффициент 1,13 для круга. То есть в случае с квадратом 400×400, круг будет 452×452

А почему не 1.27 (отношение площадей)?

Потому что еще корень квадратный
Всегда считал, что «400-пиксельный квадрат» — это квадрат состоящий из 400 пикселей, а не со стороной в 400px (возможно неточности перевода).
Не знаю, кто как, но на CRT-монике я точно за 2 и 3 круги.
Излом кривой да, но — на трубке тоже не так уж и напрягает, я бы даже сказал, что это из разряда «теперь развидеть уже не получится». :)
Сдается мне, все эти дизайнерские уловки очень сильно притянуты для жк-матриц за последнюю декаду.
Давно интересуюсь визуальным весом, однако в некоторых случаях склонен не согласиться с приведёнными примерами. Возможно это уже мои заскоки как визуала, возможно у меня просто монитор достаточно хорошо отражает ситуацию и имеет квадратные пикселы, но мне кажется что в данной статье некоторые примеры не идеально сбалансированы. Те же треугольники можно было не так сильно расширять горизонтально чтобы получить приличный визуальный вес. Скорее правильнее было бы их с основания в сторону вершины поднять немного, если они так далеко от квадрата находятся.
Да и «квадратный квадрат» тоже правильный выбрал.
А про круги на стыке линий, чтобы сглаживать углы, вообще молчу. Всегда предпочитал геометрическое скругление.

Однако же приятно видеть что интерес к теме возрастает и всё больше и больше статей релизятся по теме.
На картинке с квадратами и ромбами, в правой паре, ромб меньше квадрата по площади. Поверните квадрат и сравните.
Полезная познавательная статья. спасибо автору и переводчику.
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.