Сквирклморфизм (Squirclemorphism) в дизайне интерфейсов.
WAYUP
Ты заметил рост популярности этого тренда?
Последние годы богаты на новые стили UI дизайна. Начиная с простого плоского дизайна, Material дизайна и заканчивая неоморфизмом, и глассморфизмом. Давай погрузимся в мир сквирклов (суперэллипсов) и разберемся что это такое!
Сквиркл? Что это?
Это не прямоугольник с закругленными углами и не круг. Эта фигура уникальна, но имеет огромное значение. Впервые она была замечена в цифровом дизайне с появлением iOS 7. К иконкам приложений была применена маска в форме сквиркла. С тех пор дизайнеры полюбили эту фигуру.
Рассвет сквирклморфизма.
Первоначально сквиркл использовался для воссоздания иконок iOS-приложений. Разница между стандартным прямоугольником с закругленными углами и суперэллипсом небольшая, но заметная. Мы всегда стремимся к тому, чтобы наши дизайны выглядели современно, поэтому можно применять к иконкам приложений маску в виде этой новой фигуры.
Потом дизайнеры поняли, что его можно использовать для других элементов. Некоторые из нас начали использовать его в углах карточек, другие сделали элегантные иконки. Это было только начало…
Теперь мы можем повсюду встретить сквирклы в различных формах UI-дизайна. Маска в форме суперэллипса применяется к целым страницам мобильных приложений!
Повсеместное распространение сквирклов побудило назвать этот тренд – Сквирклморфизм (Squirclemorphism)! Что интересно, сам стиль заключается только в использовании формы суперэллипса. Он может быть связан с нейоморфными или глассморфными элементами.
Ты можешь увидеть их в Instagram.
Также на Dribbble.
Как вы наверняка заметили, большинство дизайнов создаются только для демонстрации навыков своих создателей. Они не используются в реальных приложениях.
Как создать в Figma.
По умолчанию закругленные углы указывают на правильный радиус. Но это касается только закругленных прямоугольников, а не суперэллипсов.
Чтобы добиться особой формы, тебе нужно добавить «Corner Smoothing» (Сглаживание углов) к радиусу скругления угла. Чтобы активировать сглаживание, ты должен нажать иконку радиуса скругления угла, чтобы отобразить подробные настройки радиус для каждого угла. Затем под иконкой меню с тремя точками вы найдете параметр «Corner Smoothing». Кликни по нему, и ты увидишь всплывающее окно с ползунком.
Если хочешь добиться эффекта, подобного iOS, установи значение примерно на 60%, для максимального эффекта используй 100%. Все просто!
Сквирклы в Sketch.
Создавать сквирклы в Sketch еще проще. Когда у тебя есть слой в форме прямоугольника с закругленными углами, все, что нужно сделать, это перейти на панель Inspector (та, что справа) и выбрать раскрывающийся список «Radius (Round Corners»). Измени параметр на «Smooth Corners». Все, твой сквиркл готов!!
Вывод.
В последние месяцы появилось много трендов. Сквирклморфизм начался с небольшого элемента – иконок приложений iOS7. Сейчас он применяется практически ко всем элементам, имеющим закругленные углы. Очевидно, что не все сквирклы хороши в реальных приложениях, но эта тенденция, безусловно, вдохновляет.