Сквирклморфизм (Squirclemorphism) в дизайне интерфейсов
Вы заметили рост популярности этого тренда? Последние годы богаты на новые стили UI дизайна. Начиная с простого плоского дизайна, Material дизайна и заканчивая неоморфизмом, и глассморфизмом. Хотя я не настолько хороший охотник за трендами, как Michal Malewicz, я уверен, что нашел кое-что . Давайте погрузимся в мир сквирклов (суперэллипсов)!
Сквиркл? Что это?
Это не прямоугольник с закругленными углами и не круг. Эта фигура уникальна, но имеет огромное значение. Впервые она была замечена в цифровом дизайне с появлением iOS 7. К иконкам приложений была применена маска в форме сквиркла. С тех пор дизайнеры полюбили эту фигуру. Если вы хотите узнать формулу, лежащую в ее основе, ознакомьтесь с описанием из Википедии или исследованиями, проведенными Figma Engineere.
Рассвет сквирклморфизма
Первоначально сквиркл использовался для воссоздания иконок iOS-приложений. Как я уже упоминал, разница между стандартным прямоугольником с закругленными углами и суперэллипсом была небольшой, но заметной. Мы всегда стремимся к тому, чтобы наши дизайны выглядели современно, поэтому мы хотели, чтобы к иконкам приложений была применена маска в виде этой новой фигуры. Потом дизайнеры поняли, что его можно использовать для других элементов. Некоторые из нас начали использовать его в углах карточек, другие сделали элегантные иконки. Это было только начало. Теперь вы можете повсюду встретить сквирклы в различных формах в UI дизайне. Маска в форме суперэллипса применяется к целым страницам мобильных приложений! Шот от Fireart Studio Повсеместное распространение сквирклов побудило меня назвать этот тренд – Сквирклморфизм (Squirclemorphism)! Что интересно, сам стиль заключается только в использовании формы суперэллипса. Он может быть связан с нейоморфными или глассморфными элементами.
Вы можете увидеть их в Instagram
Изначально я заметил, что суперэллипсы становятся все более популярными в Instagram, потому что в ленте полно новых творений. На Dribbble я обычно ищу определенные элементы или категории, и было труднее заметить новый восходящий тренд. Aweka Design Дизайн от Amjad
Вы можете увидеть их на Dribbble
Я люблю просматривать дизайны на Dribbble, чтобы найти вдохновение или интересные стили и композиции. Введите «squircle» в поиске Dribbble, и вы увидите сотни результатов. Шот от Cuberto Шот от Halo Lab Как вы наверняка заметили, большинство дизайнов создаются только для демонстрации навыков своих создателей. Они не используются в реальных приложениях.
Сквирклы в Figma
По умолчанию закругленные углы указывают на правильный радиус. Но это касается только закругленных прямоугольников, а не суперэллипсов. Чтобы добиться особой формы, вам нужно добавить «Corner Smoothing» (Сглаживание углов) к радиусу скругления угла. Чтобы активировать сглаживание, вы должны нажать иконку радиуса скругления угла, чтобы отобразить подробные настройки радиус для каждого угла. Затем под иконкой меню с тремя точками вы найдете параметр «Corner Smoothing». Кликните по нему, и вы увидите всплывающее окно с ползунком. Создание сквирклов в Figma Если вы хотите добиться эффекта, подобного iOS, установите значение примерно на 60%, для максимального эффекта используйте 100%. Все просто!
Сквирклы в Sketch
Создавать сквирклы в Sketch еще проще. Когда у вас есть слой в форме прямоугольника с закругленными углами, все, что вам нужно сделать, это перейти на панель Inspector (та, что справа) и выбрать раскрывающийся список «Radius (Round Corners»). Измените параметр на «Smooth Corners». Все, ваш сквиркл готов!! Создание сквирклов в Sketch
Вывод
В последние месяцы появилось много трендов. Сквирклморфизм начался с небольшого элемента – иконок приложений iOS7. Сейчас он применяется практически ко всем элементам, имеющим закругленные углы. Очевидно, что не все сквирклы хороши в реальных приложениях, но эта тенденция, безусловно, вдохновляет. Что вы думаете о сквирклморфизме? Вы используете фигуры со сглаженными углами? Перевод статьи blog.prototypr.io
Как закруглить углы в Фигме: основные способы
Закругление углов является одним из важных элементов современного веб-дизайна. В статье «Как закруглить углы в Фигме: основные способы» вы узнаете, как создавать закругленные элементы в графическом редакторе Фигма быстро и легко.
—>
В Фигме есть несколько способов скругления углов у объектов и фигур. В текущей статье мы рассмотрим основные из них. Стоит отметить, что в различных ситуациях при отрисовке дизайна может быть удобен тот или иной способ, поэтому лучше иметь в арсенале несколько решений задачи.
Способ 1: задаем Round в свойствах объекта
- Выберите фигуру, у которой вы хотите закруглить углы.
- В верхней панели инструментов найдите и нажмите на кнопку «Свойства» (Properties) или нажмите на клавиатуре сочетание клавиш «Ctrl» + «Enter» (для Windows) или «Cmd» + «Enter» (для Mac).
- В открывшейся панели «Свойства» найдите раздел «Углы» (Corners) .
- Установите желаемый радиус закругления углов, перемещая ползунок или вводя нужное значение в поле «Радиус» (Radius) .
Способ 2: скругление во время создания фигуры
Скруглить края у фигуры можно также во время её создания. Для этого требуется выполнить следующее:
- Создайте фигуру через инструмент.
- После поместите курсор внутрь фигуры, как на фото выше. Внутри области фигуры появятся маленькие круги с надписью Round при наведении
- Зажмите круг и двигайте мышью вврех/вниз для изменения размера закругления.
Заключение
Итак, скругление углов — это одна из важных функций Figma, которой должен уметь пользоваться дизайнер. Используйте всю полноту инструментов и настроек Фигмы, чтобы отрисованный дизайн выглядел максимально современно и привлекательно для потенциального потребителя. Читайте наши статьи и совершенствуйте свои навыки с нашим порталом!
Как скруглить один угол треугольника в Figma/Photoshop?
у меня при наведении и при нажатии на фигуру не высвечиваются эти точки для закругления.
Остальные ответы
Зажми команд перед тем, как потянешь за кружочек для изменения радиуса скругления, ты можешь любой из углов скруглить независимо от других )
В Figma можно сделать закругления определённых углов с помощью встроенной функции. При нажатии на квадрат справа (я его обвёл красной линией). Ниже появится меню с градусами углов
Похожие вопросы
Как в Figma скруглить конец линии
Для концов линии в Фигма предусмотрена настройка «Cap», включающая следующие предустановленные значения:
- Round — конец линии будет скруглен
- Square — конец линии будет квадратным
- Line Arrow — на конце будет контурная стрелка
- Triangle Arrow — на конце будет треугольный указатель
Назначить можно как значение для всей фигуры, так и для одной точки. Например, на одном конце линии может быть закругление, а на втором — стрелка.
Помогла ли вам эта статья?
Нравится +1 Не нравится -2 Вы уже голосовали