Сквирклморфизм (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
Как в Figma скруглить конец линии
Для концов линии в Фигма предусмотрена настройка «Cap», включающая следующие предустановленные значения:
- Round — конец линии будет скруглен
- Square — конец линии будет квадратным
- Line Arrow — на конце будет контурная стрелка
- Triangle Arrow — на конце будет треугольный указатель
Назначить можно как значение для всей фигуры, так и для одной точки. Например, на одном конце линии может быть закругление, а на втором — стрелка.
Помогла ли вам эта статья?
Нравится +1 Не нравится -2 Вы уже голосовали
Как закруглить углы в Фигме: основные способы
Закругление углов является одним из важных элементов современного веб-дизайна. В статье «Как закруглить углы в Фигме: основные способы» вы узнаете, как создавать закругленные элементы в графическом редакторе Фигма быстро и легко.
—>
В Фигме есть несколько способов скругления углов у объектов и фигур. В текущей статье мы рассмотрим основные из них. Стоит отметить, что в различных ситуациях при отрисовке дизайна может быть удобен тот или иной способ, поэтому лучше иметь в арсенале несколько решений задачи.
Способ 1: задаем Round в свойствах объекта
- Выберите фигуру, у которой вы хотите закруглить углы.
- В верхней панели инструментов найдите и нажмите на кнопку «Свойства» (Properties) или нажмите на клавиатуре сочетание клавиш «Ctrl» + «Enter» (для Windows) или «Cmd» + «Enter» (для Mac).
- В открывшейся панели «Свойства» найдите раздел «Углы» (Corners) .
- Установите желаемый радиус закругления углов, перемещая ползунок или вводя нужное значение в поле «Радиус» (Radius) .
Способ 2: скругление во время создания фигуры
Скруглить края у фигуры можно также во время её создания. Для этого требуется выполнить следующее:
- Создайте фигуру через инструмент.
- После поместите курсор внутрь фигуры, как на фото выше. Внутри области фигуры появятся маленькие круги с надписью Round при наведении
- Зажмите круг и двигайте мышью вврех/вниз для изменения размера закругления.
Заключение
Итак, скругление углов — это одна из важных функций Figma, которой должен уметь пользоваться дизайнер. Используйте всю полноту инструментов и настроек Фигмы, чтобы отрисованный дизайн выглядел максимально современно и привлекательно для потенциального потребителя. Читайте наши статьи и совершенствуйте свои навыки с нашим порталом!
Векторные объекты в Figma
Создание дизайна начинается с освоения стандартных фигур. Грамотное использование и владение этими элементами позволит вам в будущем создавать более сложные дизайны. Основные векторные объекты в Figma находятся в верхнем меню во вкладке «Rectangle». Рассмотрим, как добавлять и работать с этими фигурами.
Первый в этом списке объектов – «прямоугольник» (горячая клавиша «R»). Это наиболее распространенный элемент, и в 75% случаев в работе используется именно он. Данный инструмент необходим для создания кнопок, панели, меню, и других элементов интерфейса сайта.
Выбрав прямоугольник кликните по рабочей области фрейма, в которой появится этот объект. Вы сразу сможете менять размер прямоугольника мышкой, или задавая его размеры вручную в правой части меню.
Обратите внимание, что внутри прямоугольника будут круглые точки, при помощи которых вы можете закруглять все углы пропорционально. Это делается прямым перетаскиванием точки внутрь прямоугольника. Если вам необходимо закруглить углы по отдельности, то это делается при помощи клавиши «Alt». Можно задать градус закругления в специальной строке в правой части меню. Как вращать и трансформировать объекты, в том числе и векторные объекты, мы рассмотрели в первом уроке.
Что касается функций доступных в правой части меню, то здесь вам будет доступно выравнивание объектов относительно фрейма, или если у вас выделено несколько объектов, то выравнивание относительно друг друга.
Далее обратим внимание на размеры объектов. X и Y – это положение объекта внутри фрейма. Я рекомендую использовать дополнительную функцию линейки, которая находится в разделе «Yiew» в пункте «Rulers». Выбрав эту функцию в верхней части появится линейка, при помощи, которой удобно видеть размеры ваших объектов, которые выделены синим цветом, а также видеть какое расстояние составляет промежуток от края объекта до края фрейма. То же самое будет и в левой части – синим выделен размер объекта, а белым расстояние до краев фрейма. Эти же размеры будут повторяться и в правой части меню.
W и H – это размер самого объекта. Вы тоже можете менять его при помощи мышки, или задавать более точные данные в этих строках.
В разделе Fill можно сразу задавать цвет добавленного вами объекта, а также его прозрачность. Более подробно о цветах мы поговорим в следующих уроках.
Кроме того, в правом меню, ниже находится функция «Stroke» — это обводка объекта. Здесь вы также можете выбрать цвет обводки и ее размер.
Нажав на вкладку «Advanced stroke settings» появятся дополнительные возможности для обводки. Таким образом, ее углы можно делать не только прямыми, но и полукруглыми, а также со стрелкой.
Еще одна функция в правом меню интерфейса – «эффекты». Здесь вы сможете добавлять прозрачность, цвет, размытие, тени, и т.д.
Свойства векторных объектов можно копировать. Например, для того чтобы скопировать все свойства объекта нажмите на него правой кнопкой мыши, и вберите «Copy properties». Затем выберите объект, в который вы хотите скопировать все свойства, нажмите на него правой кнопкой мыши, и выберите пункт «Paste properties». Таким образом, вы сможете быстро добавлять свойства в новые объекты.
Далее в списке векторных объектов вы найдете Line (линия) и Arrow (линия со стрелочкой с одной стороны). Как видно при добавлении этих объектов их размер также можно регулировать вручную в правой части настроек или при помощи мышки. Если у вас включена функция линейки, то вы также увидите их расстояние до края фрейма. Горячая клавиша Line – «L», а Arrow — «Shift+L».
Следующий объект – круг или овал. Горячая клавиша – «O». Для создания ровного круга необходимо зажать «Shift», и затем выбрать его размер. Для выбора круга во все стороны, зажмите «Alt».
В правом меню настроек вы найдете те же функции, что и в прямоугольнике. Однако есть отличие в том, что у прямоугольника имеется дополнительная функция закругления углов. Ее нет у круга, так как у него нет углов. Однако в круге есть дополнительная функция делающая разрез в круге. Это может быть полезно для создания диаграмм.
Следующий векторный объект – «Polygon» (треугольник). Внутри него есть две точки, отвечающие за разные эффекты. Верхняя точка предназначена для закругления углов, а нижняя за добавление углов.
Таким образом, двигая нижнюю точку вверх при помощи мышки вы сможете создавать многоугольник, а при помощи верхней точки выбирать градус закругления углов.
Еще один векторный объект – «Star» (звезда). Используется он не часто, но в некоторых случаях, например, при создании логотипа, он может оказаться полезным.
Управление данным объектом происходит при помощи трех точек. Верхняя точка отвечает за закругление углов звезды. Зажимая левую кнопку мыши и двигая внутрь, вы сможете создавать закругление. Средняя точка отвечает за смену внутреннего радиуса вершины. И третья точка отвечает за добавление или удаление углов звезды при помощи зажатия левой кнопки мышки, и движения вверх или вниз.
И последний элемент из списка векторных объектов – «Place image». Горячие клавиши – Ctrl+Shift+K. Например, вы можете создать несколько объектов – звезда, прямоугольник и круг. Если вам необходимо вставить картинку в данные объекты, то нажмите на «Place image», затем выберите из жесткого диска вашего устройства подходящую иллюстрацию, после чего кликните на элемент. Таким образом, ваша картинка вставится внутрь этого элемента.
Итак, теперь вы знаете как использовать примитивы, а также стандартные формы в фрейме. Это первый шаг к приобретению навыка создания сложного дизайна.
Полезные ссылки:
- Бесплатный видеокурс по Figma от GeekBrains;
- Профессиональный курс Figma 2.0 для новичков от SkillBox;
- Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.