Сквирклморфизм: тренд 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. Внешне получается аккуратный сквиркл:
Итог
Сквирклморфизм — это устойчивый тренд в дизайне, который постепенно развивается ещё с шестидесятых годов. Сейчас он вновь привлекает много внимания: дизайнеры внедряют суперэллипсы в интерфейсы и проектируют гаджеты похожих форм.
Подобные формы могут нравиться нам даже в обход собственного опыта: эволюционно сложилось, что мозг получает удовольствие, когда видит плавные линии. Это помогает производить первое впечатление, которое пользователь может распространять и на весь остальной дизайн.
Этот ваш сквиртоморфизм задолго до Apple.
Есть такая профессия - квадраты скруглять.
мем смешной, но если серьёзно его комментировать, то у работяг есть свои технологии, о которых мы знать не знаем, и в целом многим эти знания не нужны
Да-да, физический труд - хорошо, интеллектуальный - плохо.
Ну надо же нам иногда и что-то совсем дизайнерское писать)
Обе хороши 😍
попробуйте поскользить взглядом по сквирклу, и вы поймете разницу.
а такой контент на VC мне нравится
Вы, пожалуйста, указывайте источник статьи.
https://99percentinvisible.org/article/circling-square-designing-squircles-instead-rounded-rectangles/
еще небось и на chatGPT статью насквиртили?
Все-таки в этой статье гораздо больше материала и тут со ссылками на исследования
Если прочитать текст, то увидите, что мы взяли только изображения и отметили их источник :)
Короче, берём прямоугольник, дорабатываем его напильником - это скругленный прямоугольник. Теперь берём скругленный прямоугольник, дорабатываем его наждачкой - это суперэллипс. А разговоров, блять, на целую диссертацию.
Но вообще, это какой-то дизайнерский онанизм, где всё, включая как бы исследования всяких других дизайнеров, притянуто за уши.
Насколько вообще эволюционный подход к дизайну оправдан? Эволюционно мужчинам женская грудь нравится. Еë нужно на главную ставить?
О, серьёзные вопросы подъехали. Мне кажется, что оправдан. Наш мозг формировался значительно дольше, чем любой тренд в дизайне, поэтому мы не можем его исключать из рассуждений.
В случае с женской грудью — если у вас сайт начинается на po, а заканчивается на hub, то почему нет :) В остальных случаях, скорее всего, получится кринж вроде такого
Конечно нужно, так интереснее читать
Эволюционно людям нравится бегать голыми по саванне. Почему нет таких туристических увисилений?
Потому что CSS пока умеет только border-radius.
Предлагаемое “решение” с :before и :after на самом деле костыль и лажа.
В этом можно убедиться открыв сайт с “решением” на мобиле:
Width и вообще всё, поехало к хуям.
https://pavellaptev.github.io/squircle-houdini-css/ есть альтернативы и наверняка не одна.
Ладно уж придираться! В альбомной ориентации не слипается и выглядит норм, ну немного не досмотрели, бывает.
История рабочая для однородного фона.
Когда-то и закруглений в css не было, вставляли уголки картинками. Это же не было поводом не использовать закругления в дизайне сайтов!
Уж тем более что поддержка стремится к 100%, а для реализации достаточно одного миксина.
Плюс фон может быть только одного сплошного цвета.
Однозначно согласен, НО! все же движения уже есть в эту сторону с помощью Houdini в частности Paint API можно реализовывать сквирклы, но не везде. А так сквриклы хуйня во всех формах кроме квадратов, а логотипчики и кнопочки можно на свгшках хуярить, как это делает Яндекс
Всего лишь более скругленные углы, а сущностей наплодили на целую диссертацию.
Самое главное не рассказали. Всë-таки сквиркл-димпл лучше или поп-ап?)
Об этом спорят лучшие умы, мы не готовы высказывать своё мнение, но нашли старые скрижали, в которых высказаны экспертные мнения. Скрижали прилагаем
Про спиннер забыли(
Тинки-Винки лучше однозначно!)))
Задолго до фигмы, в скетче, когда он был еще сильно популярен, уже была эта функция мягких углов. И да, смотрится приятнее
Комментарий недоступен
По факту - насрать всем кроме дизайнеров. Дизайн ради дизайна.
Сильные факты!
Комментарий недоступен
Тут речь не о том. В геометрии непрерывность кривых может быть разной. Вы говорите про непрерывность типа G1 – когда в точке соприкосновения совпадает направление касательных. У «скврикла» же непрерывность G2 – когда в точке соприкосновения совпадает не только направление касательной, но и кривизна.
При проектировании автомагистралей и железных дорог, например, G1 недостаточна, нужна минимум G2. Да и в природе обычно встречается именно G2.
Проблема просто в том, что автор статьи этого не знал, поэтому и возникли такие странные попытки объяснений по типу «линия ломается».
https://www.youtube.com/watch?v=jvPPXbo87ds
дроч на пустом месте
эргономика, скорость - хуйня, вот круглые квадраты это да!
и похеру всем, что у 99% людей современный телефон на уровне ДЦ годов 90х, а КПД использования стремится к нулю.
КПД глубоко отрицательный - телефон тупо сжирает время, силы, здоровье давая взамен жиденький суррогат эмоций
Когда в Android Studio новый проект создаешь, он там примерный процент показывает.
Советские танки были самыми передовыми но крайне неудобными. Когда залезаешь внутрь танка то должен наступить на кресло командира, таким образом испачкав его. В советских танках управление было двумя рычагами, очень тяжелыми. В западных управление легким рулем. А еще в западных корпус шире и просторнее.
Танкисту плевать на эргономику скругления его Эпл вотч. А часами с острыми углами будет беление бросятся в вероятного противника.
Отличный дизайн. Отличный от того, что уже всех в край заебало. Еще есть момент в том, что все новое часто воспринимается враждебно, а потом вроде и замыливается и норм становится (дуров верни стену, дизы на vc), и так по кругу.
Спасибо за дополнение! Всё так, нужно искать баланс между необычным и привычным. Мы уже писали об этом в статье о ментальных моделях: https://vc.ru/marketing/545068-kak-v-interfeyse-uchest-privychki-klienta-chtoby-privesti-ego-k-pokupke
Отличная статья. Прям вдумчиво все разобрано. Я не диз, но часто приходится в фигме возиться. Тоже замечала, что есть некоторые углы хорошо скруглены, а некоторые — как-то похуже). Но, кстати, момент с этими гребнями не очень поняла. Иллюстрация какая-то не очевидная, почему в в одном месте гребень строится так, а в другом эдак. Такое ощущение, что вариант с правильным гребнем нарисовали просто от балды.
P.S.: у самой первой иллюстрации качество не очень, поэтому визуально сложно понять, в чем там отличие. А не только потому что у людей глаз не наметан)
Гребни рисуются не от балды, но, похоже, дизайнеры сами неособо понимают, что они значат.
На самом деле, каждая чёрточка в гребне – это направление нормального (перпендикулярного) вектора к кривой в данной точке, а длина этой чёрточки равна кривизне кривой в данной точке. При этом кривизна кривой в какой либо точке – это величина, обратная радиусу окружности, являющейся соприкасающейся для этой кривой в данной точке. Таким образом, в прямоугольнике со скруглёнными углами получается, что кривизна резко менятся с 0 до какой-то постоянной величины, на участке скругления остаётся одной и тоже же, а затем опять резко меняется в 0. В «сквиркле» же кривизна постепенно растёт от 0 до какой-то величины, а затем так же плавно уменьшается до 0. Как видите, нужно немного уметь в геометрию, чтобы быть по-настоящему хорошим дизайнером.
Сквиркл по созвучности можно перепутать с категорией видосов.
Я сначала так и перепутал
Комментарий недоступен
То есть скругляем как обычно, а потом ещё немного скругляем?
полируем
и потом еще чуть
Есть такая профессия - квадраты скруглять.
Как там лошадки, задал им овса?
Если кто в Тильде дизайнит, то есть специальная модификация для энтого вашего сквирта:
dsgnmax.ru/squircle
В Тильде. Дизайнит. Говорят, там ещё и программируют 🤦♂️
Интересно. На самом деле, это один из недавних трендов, который стал возможен в интерфейсе только благодаря высокому разрешению и новым алгоритмам сглаживания.
Вот пример часов в виде сквиркла (нет) из Windows 3.1:
Это абсолютно верно! Без технологий никаких сквирклов в интерфейсах не узнали бы
А это Сквиркл или не Сквиркл ?
это равносторонний треугольник вписанный в окружности
Да 🤩
Однозначно!
Мы еще увидим иконки с контурами ягодиц!
Сквиркл по созвучности можно перепутать с категорией видосов. Но он даже круче — это производное от square и cirle. Это суперэллипс или квадрокруг, математически это форма между кругом и прямоугольником-язык можно сломать когда читаешь
Надеемся, ваш язык в порядке!
Картинка 2 пикселя на километр, еще бы
Меня и так разработчики ненавидят, если им еще сквиркл дам, они меня воще вздернут. Нуевонах
Squirrelmorphism
Не очень понял фишку. Вместо того, чтобы просто угол скруглить, нужно математическую формулу писать? А разница в чëм?
А вы где в статье формулы вообще увидели?
А вы где в статье формулы вообще увидели?
А вы где в статье формулы вообще увидели?
А вы где в статье формулы вообще увидели?
в интерфейсах - ни в чём, просто очередная фишечка с лёгкой руки яблока
а вот в архитектуре и промдизайне выглядит и впрямь интересно
Огонь . Хочу , чтобы моя жизнь была тоже сквирклморфической со всеми спокойными элементами
Обратитесь к сквиркломорфологу
Чувствую себя совсем неправильной какой-то. Никогда не нравились скругленные углы
Каждый человек индивидуален, мы пишем про большинство, но с вами всё в порядке, не переживайте ❤️
Ох, а может помнит кто последний выходы господина Palm? Когда они пытались вскочить в последний вагон смартфонов и прям подчеркивали то, что у нас такие вот приятные сквиркл телефоны, а не эти ваши квадратики. Судя по тому, что не все Palm вспомнят, не такая уж это и киллер фича.
Безусловно, не киллерфича. Просто небольшая деталь, которая может сделать интерфейс приятнее глазу. Строить на её основе целую маркетинговую кампанию — затея, обречённая на провал. Так и случилось :)
Целая статья о скруглениях, наконец внимание к деталям и к первому впечатлению. Так еще и ссылки на исследования есть. Ое
Ееееее, подписывайтесь, уверены, что мы найдём ещё что-то интересное :)
Прочитала цитаты из статьи друзьям тоже не дизайнерам) Угарнули с похожести термина на имя героини ГП, получилось: Плакса Сквиркл
А вообще прикольно, спасибо за интересную статью)
Спасибо, Татьяна! В целом, сходство есть
"Дело в том, что нравится или не нравится нам дизайн — это не то, что они могут обосновать рационально." - кто они?) Это видимо перевод какой-то англоязычной статьи?
Спасибо за внимательность!
Англоязычной статьи, которую мы могли бы просто перевести, не существует. Всё сами, всё сами, хотя мы, естественно использовали разные источники в процессе подготовки фактуры :)
Это последствия редактуры. В одном месте поправили, в другом нет. Теперь поправили везде
На канале Дроидер делали разбор этой темы где-то год назад
Мы тщательно изучили все источники, спасибо!
Теперь понятно, почему все любят айфоны
Мы бы не сказали, что все, но среди дизайнеров таких людей много. Правда, дело не только в сквирклах
https://habr.com/ru/post/517362/
Да, тоже читали. Спасибо!
Зачем придумывать сквирикл, если такая форма называется суперэллипс?
Прям армия вспомнилалась ..... Кгулое катаем . Квадратное носим ! Глупые вопросы не задаем ...
Это просто тренд, кто-то авторитетный задает моду - все начинают повторять, мода поменяется и все забудут эти "еще более скругленные квадраты" и откуда они там пошли.
Мы, как раз, постарались показать, что есть в этом тренде и кусочек вполне понятного и обоснованного с точки зрения нашего зрения :)
И снова мир.
Как равнодушье, как овал.
Я с детства не любил овал!
Я с детства угол рисовал!
(с) П.Д. Коган...
Поэтично...
Да это жестко, целую статью пикселям уделили
Умеем, можем!
Сквиркл? Не не слышали.
Очень смелый шаг от МТС, посмотрим, как будут использовать новую айдентику
Уже несколько лет как пользуюсь, не понял статью, зачем столько текста?
Вы — молодец! Мы любим глубоко погружаться в вопрос, о котором пишем, поэтому столько текста :)
А как называется прямоугольник, у которого скруглены только два противоположных угла? Уж очень популярна везде и очень интересно, почему оно привлекательно для мозга.
Классная статья
Все это старо как мир... Народ пытается изобретать велосипед. Боже Поглядите на Да Винчи или Микеланджело... У них не было понятия маркетинг. Они пытались прекрасное запечатлеть. В скульптуре, живописи и прочем...
Витрувианский человек... Тим Кук и его команда - нервно курит в сторонке....