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

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

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

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

Сквирклморфизм: тренд 60-х и 20-х, который пропустили на vc
Какая картинка симпатичнее?
Верхняя
Нижняя
Я не замечаю разницы

Сквирклы на первой

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

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

В новой ОС было некое едва заметное обновление: иконки приложений на главном экране стали более сочными, более органичными

Дэниел Фурс, бывший инженер-физик Figma

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

Источник: Mark Stanton
Источник: Mark Stanton

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

Источник: kompas.com<br />
Источник: kompas.com

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

Источник: tomsguide.com
Источник: tomsguide.com

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

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

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

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

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

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

…и понеслось

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему дизайнеров вообще должны заботить сквирклы

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

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

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

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

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

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

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

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

Изгиб — это выразительный элемент. Если выразительный элемент лишний, это сразу шум

Илья Бирман, дизайнер, арт‑директор дизайн-бюро Артёма Горбунова

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

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

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

Источник: Mark Stanton
Источник: Mark Stanton

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

Кажется, что изменения незначительные, но если попробуете «скользить» взглядом по сквирклу и по прямоугольнику, то почувствуете, что у сквиркла «скольжение» проходит проще
Кажется, что изменения незначительные, но если попробуете «скользить» взглядом по сквирклу и по прямоугольнику, то почувствуете, что у сквиркла «скольжение» проходит проще

Квадрат не похож на квадрат после операции [превращения в сквиркл], он регистрируется как самостоятельная сущность, как форма гладкой гальки в русле реки, единое и элементарное целое.

Дэниел Фурс, бывший инженер-физик Figma

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

Источник: Apple Store Online
Источник: Apple Store Online

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

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

  • формы, которые мы больше всего любим вызывают интенсивную мозговую активность;
  • наши любимые формы — те, что переводят мозг в состоянии безмятежности и спокойствия;
  • люди могут тяготеть к формам, которые вызывают чередование сильной и слабой мозговой активности.

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

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

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

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

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

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

Однако и здесь используются скруглённые формы, правда не сквирклы
Однако и здесь используются скруглённые формы, правда не сквирклы

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

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

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

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

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

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

Практика: как довести дизайн до сквиркла

В Figma:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ануар Мендубаев, лид разработчиков Antro

Итог

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

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

Ещё больше постов о дизайне — в нашем Telegram-канале. В нём мы пишем о пользовательском опыте, делимся дизайнерскими исследованиями и рассказываем о работе нашей команды.

241241
165 комментариев

Этот ваш сквиртоморфизм задолго до Apple.

128
Ответить

Есть такая профессия - квадраты скруглять.

57
Ответить

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

24
Ответить

Да-да, физический труд - хорошо, интеллектуальный - плохо.

9
Ответить
Автор

Ну надо же нам иногда и что-то совсем дизайнерское писать)

6
Ответить
56
Ответить

Обе хороши 😍

11
Ответить