Сквирклморфизм: тренд 60-х и 20-х, который пропустили на vc

C 2020 года в дизайнерском сообществе пишут о сквирклморфизме. А в дизайнерской ветке на vc о нём ни слова. Почему вообще форма плашек получила целое название, мелькает в резюме, а Figma создаёт под них отдельную функцию? Рассказываем в статье.

Сквиркл по созвучности можно перепутать с категорией видосов. Но он даже круче — это производное от square и cirle. Это суперэллипс или квадрокруг, математически это форма между кругом и прямоугольником. Если не сталкиваться с дизайном регулярно, сквиркл можно легко перепутать со скруглённым прямоугольником.

Тему сквирклов начали форсить в зарубежных и российских источниках с 2020 года. На vc суперэллипсы мелькали в обзорах дизайна для iPhone X, а сервис для рисования квадрокруга включал в свой дайджест даже Юра Ветров.

Apple начали их активно использовать ещё в 2013, когда запустили iOS 7. Тогда это не привлекло большого внимания, на изменение обратили внимание преимущественно дизайнеры:

Они не только использовали его для значков приложений, но и задействовали форму в дизайне устройств.

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

Но если вы всё ещё сомневаетесь, что сквиркл приятнее глазу, то вот сравнение двух эпплвотч. После четвёртой версии они тоже приняли форму суперэллипса.

Форму сквиркла придумали задолго до Apple

В 60-е изобретатель Пит Хейн много писал о суперэллипсах: так он описывал компромиссную форму между эллипсом и прямоугольником. А если оси фигуры совпадали по длине, называл это «суперокружность». Саму же форму придумал математик Габриэль Ламе ещё в 1818 году.

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

Одну из статей о суперэллипсах в Scientific American увидел Джеральд Робинсон. Он попросил архитектора Питера Панхольцера, который тогда на него работал, использовать форму в одном из проектов. Панхольцер начал экспериментировать и вывел фигуру, которая по площади находится между кругом и квадратом.

Это создаёт визуальный интерес — наблюдатель остаётся в нерешительности, к какому типу фигур причислить изображение. Открытой фигуре архитектор в 1966 году дал название «сквиркл».

В шестидесятые суперэллипсы плотно вошли в дизайн…

…и понеслось

В 1967 на площади Сергельсторг в Стокгольме открывают первый известный объект в виде суперэллипса — большой фонтан. Такую форму предложил Пит Хайн, чтобы отказаться от классических для фонтанов квадрата или круга. Новая форма выглядела интереснее и выделялась на фоне других сооружений.

Пит Хайн пошёл дальше: он продвигал суперэллипсы в предметах мебели и декора, объектов городского экстерьера. В 1968 году идею реализовали другие дизайнеры: на переговоры по поводу войны во Вьетнаме для участников спроектировали суперэллиптический стол. А в том же 1968 году суперэллипс использовали для формы Олимпийского стадиона в Мехико.

В конечном счёте в реальном мире суперэллипсы не получили всеобъятного распространения. Это не интуитивное решение из тех, что сразу приходят в голову. Даже сам термин «суперэллипс» редко услышишь в повседневной жизни в отличие от квадрата или круга.

Но некоторые суперэллипсоидные вещи всё равно возникают в дизайне повседневных вещей. Например, умная колонка Маруся от mail.ru явно получила свою форму от суперэллипсоида. Всякие «неправильные» суперэллипсоиды — это суперквадрики или суперкадрики.

Хотя есть ощущение, что так далеко копать не нужно и Маруся просто «вдохновлялась» homepod

Суперэллипсоидные формы проникают и в дизайн аксессуаров. Например, в часы Jubelion:

Тренд на сквирклморфизм нельзя назвать и устаревшим. Он органично развивается с самой середины прошлого века. С двадцатых годов он начал переживать новую жизнь, ведь его всё чаще стали задействовать в интерфейсах. Тренд до сих пор в повестке специалистов по дизайну: например, пару месяцев назад о нём писал популярный конструктор сайтов WebFlow в своём блоге.

Инстаграм* использует сквикрлы и в логотипе, и в своей гарнитуре:
*входит в компанию Meta, признанной экстремистской в РФ

Плавные скругления окружают нас и в телеграме:

Дело в том, что нравится или не нравится людям дизайн — это не то, что они могут обосновать рационально. Мозг принимает решения гораздо быстрее, чем мы способны осознать, а зачастую и без нашего участия. Например, чтобы составить мнение о сайте, пользователю требуется всего 50 миллисекунд. Некоторые аспекты сайтов люди оценивали даже за 17 миллисекунд.

После моментальной оценки в дело вступают когнитивные искажения. Одно из них — эффект ореола, благодаря которому мы транслируем своё первое впечатление на весь продукт в дальнейшем. Больше о влиянии эстетики в веб-дизайне.

Конечно, цена и функциональность всё же важнее для принятия решений. Но чтобы полноценно простраивать пользовательский опыт, нужно предусматривать и те аспекты, которые наш мозг обрабатывает без нашего рационального согласия.

И чем сквиркл лучше?

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

Закруглённые углы также эффективнее при использовании в картах и диаграммах. Они позволяют нашим глазам легко следовать линиям, поскольку кривые лучше подходят для естественного движения головы и глаз. Острые углы наоборот, отвлекают внимание от пути линии. Когда она меняет направление, возникают резкие паузы. Но с закруглёнными углами линия ведет ваш взгляд по траектории естественно и плавно.

Закруглённые формы лучше подходят для размещения контента, поскольку они направлены внутрь к центру прямоугольника. Это означает, что человек будет естественным образом стремиться заглянуть в центр поля, где находится текст или изображение.

Проблема компьютерного скругления — его неестественность. Если построить в графическом редакторе прямоугольник, а затем прибавить ему скругление, в его угол просто впишут окружность. Из-за этого возникает форма, которая не встречается в реальном мире: линия идёт прямо, а затем делает резкий излом, на какое-то время повторяет круг, а затем ломается снова.

Чтобы изгиб выглядел естественно, линия должна менять форму постепенно. Когда прямая резко становится окружностью, а затем возвращается обратно, выходит грубо и неаккуратно:

Наложим фигуру здорового человека и фигуру курильщика друг на друга, для наглядности:

Интересно, что на своём сайте Apple не использует сквирклы — там обычные прямоугольники со скруглёнными краями и неэстетичными изломами:

Главная привлекательность сквирклов — в их естественности

В 2010 году нейробиологи из Института разума и мозга Занвила Кригера в объединили усилия с Художественным музеем Уолтерса в Балтиморе для проведения эксперимента. Группа выясняла, какие формы наиболее приятны для восприятия, и что происходит в мозгу, когда мы смотрим на них. У исследователей было три гипотезы:

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

Острые предметы также вызывают реакцию: зачастую они могут сигнализировать об опасности. Небольшая кривизна и выпуклости свойственны для живых организмов. Мозг распознаёт такие формы для поведения выживания: приема пищи, спаривания и уклонения от хищников. Формы с большой кривизной и зазубринами наоборот, часто неорганические, вроде камней — они менее важны для выживания.

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

Надо ли перестать использовать острые углы?

Если коротко, то нет. Во-первых, визуальная коммуникация подвержена моде, потому что люди устают от однотипного визуала. Этим, например, объясняются всплески любви к брутализм у и другим стилистикам с острыми углами и чёткими формами.

Вспомните, сколько шума наделал кибертрак Маска с его острыми углами и чёткими линиями.

Приятнее ли он на вид, чем другие модели Tesla?

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

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

В Figma:

Команда пролила немало пота, пока реализовывала эту фичу, но теперь всё просто. Чтобы сделать сквиркл в фигме, потребуется пару действий:

1. Создайте простой прямоугольник:

2. Поставьте скругление углов и откройте вкладку Independent Corners:

4. Зайдите в раздел Conrer Smoothing и в новом окне выставьте подходящее значение. 60% — показатель системы iOS по мнению разработчиков Figma.

Как реализовать в вёрстке, если разработчик говорит, что такого не бывает

Чтобы построить суперэллипс в разработке, уже есть готовое решение с примером вёрстки. Код можно заимствовать для своих проектов и лишь менять настройки размеров. Работает это так:

1. Рисуется обычный квадрат с небольшими закруглениями:

2. Поверх него отрисовывается два прямоугольника, которые по размерам немного выходят за рамки квадрата:

3. Внешне получается аккуратный сквиркл:

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

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