Скругленный квадрат: Отчаянный поиск квадрокруга / Хабр

Отчаянный поиск квадрокруга / Хабр

Поиск таинственной математики, на которой основана фигура в iOS

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

---

В знаменитом интервью 1972 года Чарльз Имз кратко ответил на несколько фундаментальных вопросов о природе дизайна. Отвечая на первый вопрос, он определил дизайн как «план компоновки элементов для достижения определённой цели».

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

Хотя я не дизайнер по профессии — я разработчик Figma, веб-инструмента совместного проектирования — несложно заметить, что замечания Имза относятся и к моей работе. Вместо элементов UI я компоную выраженные в коде математические концепции для создания инструментов и функций. И ограничения времени, простоты, поддержки и даже эстетики играют похожую доминирующую роль в моей работе.

Один недавний проект особенно хорошо подчёркивает эти параллели. Мне поручили каким-то образом добавить в Figma поддержку фигуры Apple с причудливым названием «квадрокруг» (squircle). Я начал изучать тему.

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

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

История началась задолго до того, как я основал Figma, а именно 10 июня 2013 года — в день выхода iOS 7. В новой ОС было некое едва заметное обновление: иконки приложений на главном экране стали более сочными, более органичными. Вместо квадрата с закруглёнными углами каждая иконка превратилась в квадрокруг (squircle, сочетание слов «квадрат/прямоугольник» и «круг»).

Вы спросите, какая разница? Если честно, то небольшая: за основу взят обычный прямоугольник со скруглёнными углами, но он немного обработан напильником в местах начала закруглений. Поэтому переход от прямой к изогнутой линии становится менее резким.

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

1.1. Сравнение округлого квадрата и квадрокруга: очевидно, разница невелика

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

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

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

К счастью, люди задаются таким вопросом с момента выхода iOS 7. Конечно, мы не первые, кто пошёл по этому пути! Исходная фундаментальная работа Марка Эдвардса содержала скриншот с указанием, что форма иконки представляет собой особое обобщение эллипса под названием суперэллипс. Следующая математическая формула описывает круги, эллипсы и суперэллипсы в зависимости от выбора

a, b и n:

2.1. Формула суперэллипса

Скажем, если выбрать n = 2, a = 5 и b = 3, то получится нормальный эллипс с большими полуосями 5, ориентированными вдоль оси x, и малыми полуосями 3, ориентированными вдоль y. Если оставить n = 2 и выбрать а = b = 1, то получится идеальная окружность единичного радиуса. Но если выбрать n больше двух, то получится суперэллипс — округлая эллиптическая форма, которая начинает сливаться с формой прямоугольника, в который она вписана, где углы становятся идеально прямыми, если

n стремится к бесконечности. Изначально предполагалось, что Apple выбрала форму с n = 5. Если вы попробуете такую формулу, то увидите, что она действительно очень близка к той, что используется в iOS 7+.

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

используются в качестве других иконок). Фактически, для всех вариантов n в вышеприведённом уравнении есть малое, но систематическое несоответствие по сравнению с реальной формой иконки.

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

Продвижение вперёд требует серьёзных усилий, и я снова рад собрать урожай, посеянный другими. Один исследователь Майк Свонсон из Juicy Bits выдвинул гипотезу, что углы квадрокруга построены на последовательности кривых Безье.

Он применил генетический алгоритм для оптимизации сходства с официальной формой Apple. Полученные результаты соответствуют оригиналу, как доказано отличным прямым сравнением Манфреда Швинда, который изучил код iOS, непосредственно генерирующий иконки. Таким образом, у нас есть два разных подхода, дающих одинаковую структуру кривых Безье: квадрокруги iOS 7 взломаны и дважды проверены независимыми исследователями, и нам даже не нужно ничего вычислять!

Остаются две важные детали, мешающие нам клонировать форму непосредственно в Figma.

Во-первых, удивительный факт, что версия формулы iOS (по крайней мере, во время исследования) сделана с некоторыми причудами — углы не совсем симметричны, а с одной стороны есть крошечный прямой сегмент, который явно здесь не должен быть. Нам он не нужен, потому что усложняет и код, и тесты, го его легко удалить простым зеркалированием половины угла, где баг отсутствует.

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

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

параметризуемое скругление, где определённое значение параметра очень близко соответствует форме Apple.

В качестве дополнительного бонуса, если мы cможем параметризовать превращение прямоугольника c закруглёнными углами в квадрокруг, то вполне можем применить такой же процесс в других местах Figma, где используется закругление: звёзды, многоугольники и даже углы в произвольных векторных сетях, нарисованных от руки.

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

Требование, чтобы наша схема закругления квадрокруга плавно регулировалась, но при этом соответствовала форме iOS 7 в определённой удобной точке из диапазона регулировки — это первое возникшее ограничение в нашей истории, и его трудно удовлетворить. Для балерины аналогичной задачей стало бы спроектировать целый прыжок по одной фотографии в полёте, чтобы в определённый момент фаза прыжка соответствовала фотографии. Звучит чертовски тяжело. Так может всё-таки понадобится какой-то расчёт?

Прежде чем погрузиться в параметризацию квадрокругов, отступим на шаг и сдуем пыль с некоторых формальных инструментов, которые помогут нам проанализировать происходящее. Прежде всего надо определиться, как описывать квадрокруг. Раньше в случае суперэллипсов мы использовали уравнение с x и y, где все точки (x, y) на плоскости, удовлетворявшие условиям уравнения, выводили суперэллипс. Это элегантно в случае простого уравнения, но реальные квадрокруги — это лоскутное одеяло соединённых вместе кривых Безье, что ведёт к неуправляемому нагромождению уравнений.

С этим осложнением можно справиться, используя более явный подход: возьмём одну переменную t, ограничим её конечным интервалом и сопоставим каждое значение t в этом интервале с отдельной точкой на периметре квадрокруга (на самом деле кривые Безье почти всегда представлены таким образом). Если сконцентрироваться только на одном из углов, тем самым ограничивая наш анализ изогнутой линией с чётким началом и концом, то можно выбрать такое отображение между t и углом, чтобы t = 0 соответствовало началу линии, t = 1 соответствовало концу линии, а плавное изменение t от 0 до 1 плавно вычерчивало закруглённую часть угла. На математическом языке опишем наш угол кривой r(t), которая структурирована как

4.1. Биекция плоской кривой с [0,1]

где x(t) и y(t) являются отдельными функциями t для x и y компонентов r. Можем представить r(t) как своеобразную историю пути, скажем, вашей поездки на машине. Для каждого момента времени t между отправлением и прибытием вы можете оценить r(t) и получить положение вашего автомобиля на маршруте. Из пути r(t) можно вывести скорость v(t) и ускорение a(t):

4.2. Скорость и ускорение плоской кривой

Наконец, математическая кривизна, которая играет главную роль в нашей истории, в свою очередь может быть выражена в терминах скорости и ускорения:

4.3. Беззнаковая кривизна плоских кривых

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

1. Центр кривизны C в любой точке P вдоль кривой лежит на пересечении линии нормали к кривой в P и другой линии нормали, взятой бесконечно близко к P. (В качестве примечания, окружность с центром в C, называется соприкасающейся окружностью (osculating circle) в P, от латинского глагола osculare, что означает «поцелуй». Разве это не замечательно?)
2. Радиус кривизны R — это расстояние между С и P.
3. Кривизна κ является обратной величиной к R.

Как показано выше, кривизна κ неотрицательна и не различается поворотами вправо или влево. Поскольку нам важно такое отличие, то мы формируем из κ знаковую кривизну k, назначая положительный знак, если кривая поворачивает вправо, и отрицательный знак, если влево. Эту концепцию тоже можно сравнить с вождением автомобиля: в любой точке t знаковая кривизна k(t) — это просто угол, на который поворачивается рулевое колесо в момент времени t, со знаком плюс для поворота вправо и минус для поворота влево.

С введением кривизны осталось уладить только несколько деталей. Во-первых, представим на мгновение два автомобиля, движущиеся по углу квадрокруга; один автомобиль резко ускоряется, а потом всё время тормозит, а другой равномерно газует до самого конца. Эти два разных способа вождения породят весьма разные истории пути, даже с одинаковой траекторией. Нас волнует только форма угла, а не способ её достижения, так как их привести к общему знаменателю? Здесь главное при пометке точек истории использовать не время, а совокупное пройденное расстояние, то есть длину дуги. То есть вместо вопроса «Где находилась машина через десять минут пути?» лучше отвечать на вопрос «Где находилась машина через десять миль от начала поездки?». Такой способ описания траектории фиксирует только геометрию и ничего более.

Если у нас есть некоторая история пути r(t), мы всегда можем извлечь длину дуги s как функцию времени t пути, проинтегрировав скорость следующим образом:

5.1. Интеграл длины дуги

Если мы можем инвертировать это отношение и найти t(s), то можем подставить её вместо t в нашей истории пути r(t), чтобы получить желанную параметризацию длины дуги r(s). Параметризация длины дуги для пути эквивалентна истории пути автомобиля, движущегося с единичной скоростью, поэтому неудивительно, что скорость v(s) всегда является единичным вектором, а ускорение a(s) всегда перпендикулярно скорости. Следовательно, в варианте с параметризацией по длине дуги описание кривизны упрощается только до величины ускорения.

5.2. Кривизна в варианте с параметризацией по длине дуги

И можно установить соответствующий правый или левый знак, чтобы сформировать подписанную кривизну k(s). Очевидно, бóльшая часть осложнений в более общем определении кривизны заключалась просто в негеометрическом содержании истории пути. В конце концов, кривизна — чисто геометрическая величина, поэтому очень приятно видеть, что она выглядит простой в геометрической параметризации.

Теперь о другой детали. Мы только что разобрались, как перейти от описания истории пути r(t) к описанию по параметру длины дуги r(s) и как извлечь из неё знаковую кривизну k(s). Но можем ли мы сделать обратное? Спроектировать профиль кривизны — и из него вывести родительскую кривую? Давайте ещё раз рассмотрим аналогию с автомобилем: предположим, что когда мы ехали на постоянной единичной скорости по всему маршруту, то фиксировали положение рулевого колеса непрерывно на протяжении всего пути. Если возьмём эти данные рулевого управления и потом передадим другому водителю, сможет ли он полностью восстановить маршрут, если правильно воспроизведёт позиции рулевого колеса и будет ехать точно на такой же скорости? Интуитивно у нас достаточно информации, чтобы восстановить родительскую кривую, но как это вычисление выглядит математически? Хотя немного шероховато, но такое возможно благодаря Эйлеру с помощью параметризации длины дуги. Если мы выберем такую систему координат, чтобы кривая начиналась в начале координат и изначально направлялась вдоль оси x, тогда x(s) и y(s) можно восстановить из k(s) следующим образом:

6.1. Восстановление кривой по её кривизне

Наконец, обратите внимание на аргумент синусной и косинусной функций: это интеграл знаковой кривизны. Обычно у тригонометрических функций в качестве аргументов указываются углы в радианах. Так и есть в нашем случае: интеграл от a до b подписанный кривизны — это курс в b минус курс в a. Таким образом, если взять прямоугольник и закруглить угол как угодно, измерить кривизну закруглённой части и интегрировать результат, в итоге мы всегда получим π/2.

Разобравшись с деталями, применим эти аналитические инструменты к некоторым реальным формам. Начнём с закруглённого угла прямоугольника, с радиусом угла равным единице. Построим сначала сам угол, а затем кривизну как функцию длины дуги:

7.1. Анализ кривизны закруглённого прямоугольника

Теперь повторим процесс для углов реальных квадрокругов Apple — и увидим, что их кривизна сильно отличается:

7.2. Анализ кривизны квадрокруга iOS 7

Кривизна выглядит довольно зубчатой, но это необязательно плохо. Как мы увидим позже, можно найти компромисс между плавным графиком кривизны и небольшим количеством кривых Безье, а в угле iOS их только три. Как правило, дизайнеры готовы пожертвовать математически идеальным профилем кривизны ради уменьшения количества кривых Безье. Отбросив детали, на правом графике проявляется общая картина: кривизна поднимается вверх, выравнивается посередине, а затем возвращается вниз.

Бинго! В этом последнем наблюдении лежит ключ к тому, как параметризовать сглаживание угла нашего квадрокруга. При нулевом сглаживании профиль кривизны будет как у закруглённого прямоугольника: в форме столешницы. По мере постепенного усиления сглаживания высота столешницы остаётся неизменной, но её края превращаются в крутые наклоны, образуя профиль равнобедренной трапеции (конечно, по-прежнему с общим углом π/2). Когда сглаживание приближается к максимуму, плоская часть трапеции исчезает — и мы получаем широкий равнобедренный треугольник, высота которого соответствует высоте первоначальной столешницы.

8.1. Профили кривизны для различных значений параметра сглаживания

Попробуем выразить этот набросок профиля кривизны в математических терминах, используя ξ как параметр сглаживания, который изменяется от нуля до единицы. Чтобы предусмотреть использование с другими формами, где нет прямых углов, введём также угол поворота θ, который в случае прямоугольника равен π/2. Соединив их вместе, можно выразить кусочно-непрерывную функцию в трёх частях: одна для подъёма кривизны, вторая для плоской вершины и третья для спуска:

8.2. Параметризация профиля кривизны квадрокруга

Обратите внимание, что первая и третья части (подъём и спуск) исчезают при приближении ξ к нулю, а средняя часть (плоская вершина) исчезает при приближении ξ к единице. Выше мы показали, как перейти от профиля кривизны к родительской кривой. Попробуем сделать это на первом уравнении, описывающем линию, кривизна которой начинается с нуля и неуклонно увеличивается. Сначала сделаем простой внутренний интеграл:

8.2. Первый интеграл из 6.1 применительно к уравнениям 8.2

Пока что всё отлично! Можно продолжить и сформировать следующую пару интегралов:

8.2. Второй интеграл из 6. 1 применительно к уравнениям 8.2 (интеграл Френеля)

Увы, здесь мы попали в затор, потому что эти интегралы не такие простые. Если вы слышали о связи между тригонометрическими функциями и экспонентами, то можете догадаться, что эти интегралы связаны с функцией ошибки, которую нельзя выразить элементарными функциями. То же самое относится и к этим интегралам. Так что будем делать? Решение выходит за рамки этой статьи (см. этот пост на Math StackExchange для подсказки), но в данном случае можно заменить синус и косинус в степенных рядах, а затем поменять сумму и интеграл:

8.4. Разложение в ряд интегралов Френеля

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

8.5. Элементы низкого порядка (n < 3) из 8.3

Вот это уже конкретный результат! Мы можем реально начертить график этой пары уравнений (при разумном выборе ξ, θ и R) — и получить контур как функцию от s. Если бы у нас было произвольное количество элементов и возможность вычислить суммы, то мы бы увидели, что по мере возрастания s кривая закручивается в спираль, хотя это происходит далеко от интересующей нас области.

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

9.1. Клотоида до s = 5

Если использовать разложение только до n < 10, как указано в 8.5, то у нас наконец-то есть всё необходимое, чтобы произвести первый артефакт. Этот ряд представляет собой восходящую (первую) часть уравнения 8.2, но его легко адаптировать к нисходящей (третьей) части, и мы свяжем эти части между собой дуговым сегментом для плоской (второй) части. Такой метод обеспечивает математически идеальный угол квадрокруга, который точно соответствует конструкции кривизны, впервые представленной в уравнениях 8.2. Вот анализ кривизны, проведённый на клотоиде для угла квадрокруга с ξ = 0,4:

9.2. Угол квадрокруга при ξ = 0,4 при использовании клотоид девятого порядка и дуг окружностей

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

Ещё важнее, что степень длины дуги s в определённых нами условиях может достигать девяти. В Figma все непрерывные кривые должны быть представимы кубическими кривыми Безье (частные случаи которых — квадратичные кривые Безье и линии). Это ограничивает нас сохранением только кубических и членов нижнего порядка. То есть каждый из приведённых выше рядов для x(s) и y(s) будет усечён до одного элемента. Трудно надеяться, что после такого усечения сохранятся необходимые свойства фигуры.

К сожалению, недостаточно отбросить члены более высокого порядка, ибо полученная конструкция очень плохо работает при больших значениях ξ. На рисунке внизу показан результат для ξ = 0,9:

9.3. Угол квадрокруга при ξ = 0,9 с использованием клотоид третьего порядка и дуг окружностей

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

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

Во-первых, мы знаем, что у идеальной клотоидной конструкции именно тот профиль кривизны, который нам нужен, но центр кривизны центральной круговой секции меняет своё местоположение как функция от параметра сглаживания ξ. Это нежелательно, потому что в UI для cкругления прямоугольника указана точка прямо в центре кривизны. Пользователь устанавливает радиус угла, перетаскивая её. Будет немного странно, если эта точка начнёт перемещаться по мере изменения сглаживания. Кроме того, в форме iOS центральная секция находится там, где была бы в случае простого скруглённого прямоугольника, что ещё раз указывает на полную независимость местоположения центра от ξ. Таким образом, мы можем сохранить ту же основную цель проектирования кривизны и добавить ограничение, что круговая секция сохраняет фиксированный центр кривизны при изменении ξ.

Во-вторых, мы знаем, что дизайнерам не нужен слишком сложный инструмент создания углов квадрокруга. В фигуре Apple (после удаления странной крошечной прямой части) только одна кривая Безье, соединяющая круговую секцию с входящий частью кривой — может, и мы так сделаем?

В-третьих, у нас немного непонятные технические ограничения. Они не очевидны с самого начала, но становятся серьёзной проблемой реализации. Чтобы понять их, рассмотрим квадрат 100×100 пикселей, со стандартным скруглением для радиуса угла 20px. Это значит что на каждой стороне квадрата остаётся по 60px прямого отрезка. Если мы сплющим квадрат в прямоугольник 80×100px, то прямой участок короткой стороны будет только 40px. Что происходит, когда мы сужаем прямоугольник так сильно, что у нас заканчивается прямой фрагмент? Или если продолжаем его сужать дальше в прямоугольник, скажем, 20×100px? В данный момент Figma определяет максимально применимое значение скругления углов — и использует его. Таким образом, в прямоугольнике 20×100px будет скругление с радиусом 10px.

Если для сглаживания углов с радиусом R и параметром ξ задействуется p пикселей, то функция p(R,ξ) должна быть обратима в ξ(R,p).

Любой процесс сглаживания в квадрокруге съест ещё больше пикселей прямой стороны, чем простое скругление. Представьте тот же квадрат 100×100px, сделайте скругление 20px, а затем примените некоторую процедуру сглаживания, которая удаляет ещё по 12 пикселей с прямых сторон. Это оставляет нам всего 36px в прямой секции. Что происходит при сужении прямоугольника до 60×100px? По аналогии кажется почти очевидным, что следует уменьшить масштаб сглаживания до такого уровня, чтобы оно не превышало размер прямой секции. Но как вычислить величину ξ, удовлетворяющую определённому количеству пикселей? Вычисление должно быть быстрым, иначе мы не сможем реализовать данную функцию.

Опять же, проблема очень точно описывается математически: если сглаживание углов с радиусом R и параметром ξ потребляет p пикселей, то функция p(R,ξ) должна быть обратима в ξ(R,p). Это несколько скрытое ограничение, которое тоже исключает решение рядом клотоид высокого порядка.

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

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

11.1. Контрольные точки кубической кривой Безье для восходящей части угла квадрокруга

Некоторые свойства этой кривой Безье заслуживают дальнейшего объяснения. Во-первых, контрольные точки 1, 2 и 3 выстраиваются в линию. Это гарантирует нулевую кривизну в точке 1, которая соединяется с прямой частью квадрокруга. Вообще, если определить систему координат и связать точку 1 с P1, точку 2 с P2 и т.д., кривизна в точке 1 задаётся следующей формулой:

11.2. Неупрощённая кривизна в точке 1 на рис. 11.1

Хорошо видно сокращение дроби, если точки 1-3 выстроены в линию. Ту же формулу применяем к точке 4, указывая координаты в обратном порядке:

11.3. Упрощённая кривизна в точке 4 на рис. 11.1

В идеале, кривизна получится такой же, как в круговой секции, или 1/R, что приводит к ещё одному ограничению. Наконец, значения c и d зафиксированы из-за того факта, что конец этой кривой должен совпадать с круговой частью и затрагивать места соприкосновения. Значит, вышеуказанное ограничение кривизны просто даёт нам значение b:

11.4. Решение для b на рис. 11.1, обеспечивающее непрерывность кривизны

Если нам важно сохранить начальное линейное увеличение кривизны (которое является идеальным решением с клотоидами в точке 1), можно установить a равное b, что фиксирует все точки на кривой Безье и даёт нам потенциальное решение. Используя эти наблюдения, мы создаём простой квадрокруг на кривых Безье, используя сглаживание ξ = 0,6.

Выглядит неплохо, и здесь используется много подсказок от первоначального расчёта клотоид. К сожалению, разброс по всему диапазону ξ от 0 до 1 практически не заметен на глаз. Ниже показаны углы на двух уровнях масштабирования, с кривыми для ξ = 0,1, 0,3, 0,5, 0,7 и 0,9 разными цветами:

Несмотря на хорошие математические свойства, эффект едва заметен. Конечно, такой вариант ближе к реальному продукту, чем кривая, полученная ранее сокращением ряда клотоид. Если бы только настроить формулу для большей вариативности!

Можно отойти ещё на шажок и поразмыслить, как действовать дальше. Напомним, нам нужна обратимая связь между пикселями, которые используются при сглаживании, и параметром сглаживания ξ. Сначала можно сосредоточиться на этом преобразовании и сделать его максимально простым. Тогда посмотрим, что получится, когда мы попытаемся сделать из него параметризацию квадрокругов.

Мы уже кое-что знаем о том, как используются пиксели в простом скруглении углов. Не хочу упоминать необходимую тригонометрию, но угол раскрыва θ, скруглённый с радиусом R, задействует q пикселей от вершины угла, причём q задаётся следующим образом:

12. 1. Длина сегмента на скругление

Что если мы выберем p(R,ξ) на основе q самым простым способом, например:

12.2. Длина сегмента на скругление и сглаживание

Это означает, что при максимальном параметре сглаживания будет использоваться та же длина сегмента, которую мы использовали при обычном округлении. Такой выбор зафиксирует количество a + b на рисунке выше. Напомним, что при любых обстоятельствах c и d прочно зафиксированы, поэтому дополнительная фиксация a + b означает, что нам осталось принять одно последнее решение: насколько велико a по отношению к b? Опять же, если сделать самый простой выбор, а именно a = b, то мы закончим с определением параметризации кривой Безье, углы и кривизны которой показаны ниже:

12.3. Форма угла и профиль кривизны для схемы простого сглаживания

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

Теперь перейдём к профилю кривизны, нашей последней нерешённой проблеме. Вместо того, чтобы равномерно разделить разницу между a и b, как мы это делали выше, почему бы не выделить две трети интервала a, а остальное b? Это помешает слишком быстрому увеличению кривизны, уменьшив длинные хвосты на профиле кривизны и обрезав пики. Такое изменение приводит к следующим формам:

12.4. Форма угла и профиль кривизны для улучшенной схемы простого сглаживания

Профили кривизны значительно улучшились, а визуальное разнообразие по-прежнему достаточно для выпуска реального продукта. Параметр сглаживания ξ = 0,6 почти идеально совпадает с формой iOS, а хороший вид кривых сохраняется несмотря на потрясающую простоту их генерации. Так что пора задать вопрос: что мешает выпустить это в релиз? Ничего.

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

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

как определить характер девушки по ее маникюру

Считается, что форма ногтей, которую мы выбираем в маникюрном салоне, может сказать о нас многое. Мы выяснили, что именно

Содержание

• Квадратная форма ногтей
• «Скругленный квадрат»
• Закругленные ногти
• Ногти овальной формы
• «Заостренный миндаль»
• Ногти формы «Стилет»
• Короткие заостренные ногти
• Ногти формы «Балерина»
• Ногти формы «Трапеция»
• Короткие ногти

Форма ногтей и характер человека сильно связаны. Не верите? Тогда прочитайте нашу статью и проверьте себя.

Длинные или короткие ногти? Ярко-красный лак или нейтральный нюдовый? Узнайте, какие секреты раскроет маникюр.

Пройти тест

Квадратная форма ногтей

Девушки, предпочитающие форму ногтей «квадрат», скорее руководствуются разумом и логикой, нежели чувствами. Они педантичны, в учебе часто становятся отличницами, очень ценят порядок и внимательны к мелочам. Они любознательны и остроумны, настойчивы, решительны и независимы. Часто могут дать хороший совет подругам. При появлении микроскопических трещин или потертостей стараются как можно скорее обновить маникюр.

© essie

© essie

Вернуться к оглавлению

ногти формы «Скругленный квадрат»

Любительницы формы ногтей «мягкий квадрат» весьма практичны. Такие женщины много времени посвящают работе, хобби и делам. Они постоянно чем-то заняты, их смело можно назвать трудоголиками. Зачастую они не ограничиваются одним талантом, а умеют практически все. Они добры, оптимистичны и открыты. Склонны идеализировать людей, оправдывать их до последнего и разочаровываться только в самых крайних случаях. Несмотря на то, что часто они верят в судьбу и удачу, девушки с такой формой ногтей прилагают большие усилия, чтобы добиться своего.

© essie

© essie

Вернуться к оглавлению

закругленные ногти

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

© essie

© essie

© essie

Советуем почитать:

• Что нужно для маникюра?
• Маникюр-2022: что модно в этом году?
• Уроки маникюра для начинающих

Вернуться к оглавлению

ногти овальной формы

Скорее всего, обладательницы такого маникюра предпочтут платье или классический костюм косухе и рваной майке. Эти девушки стремятся к элегантности во всем — в одежде, интерьере и даже способах проводить досуг. Они женственны, деликатны и предпочитают не вмешиваться в чужие дела. Иногда любят посплетничать. Романтичны и заботливы. Так же, как и любительницы круглой формы ногтей, не выносят ссор и стараются примирить враждующих. Еще больше идей для маникюра на овальных нотях мы собрали в этой статье.

© essie

© essie

Вернуться к оглавлению

ногти формы «Заостренный миндаль»

Характер девушек, предпочитающих форму «заостренный миндаль» или «горный пик», напоминает характер обладательниц классической овальной формы, но с тем лишь отличием, что они больше внимания уделяют внешности. Их чаще можно встретить на коррекции маникюра, ведь эта форма требует крепких, чаще акриловых ногтей. Они легко очаровывают, но могут быть инфантильными. Легче обижаются и больше склонны продумывать свои поступки с точки зрения выгоды для себя. Еще больше идей для маникюра на ногтях формы «заостренный миндаль» вы найдете в этой статье.

© essie

© essie

Вернуться к оглавлению

ногти формы «Стилет»

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

© nyxcosmetics

© stiletto__benestetica_castelfidardo

Вернуться к оглавлению

короткие заостренные ногти

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

© essie

© essie

Вернуться к оглавлению

ногти формы «Балерина»

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

© ballerina__apolishedlife

© essie

Вернуться к оглавлению

ногти формы «Трапеция»

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

© essie

© essie

Вернуться к оглавлению

Короткие ногти

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

© essie

© essie

А какую форму ногтей предпочитаете вы? Оставьте свой комментарий.

Вернуться к оглавлению

Скругленные квадраты вектор ai svg eps

Скругленные квадраты вектор ai svg eps | UIDownload Скругленные квадраты вектор ai svg eps

• Коллекция золотых квадратов eps
• org/ImageObject»> Глянцевая инфографика прямоугольника со скругленными углами svg ai
• Четыре прямоугольника со скругленными углами инфографики ai svg
• абстрактный фон квадратов ai eps
• Красочный абстрактный фон с квадратами eps
• Синие квадраты абстрактный фон eps ai
• Зеленый квадрат фон eps ai
• абстрактный фон квадратов eps ai
• Современные инфографические квадраты eps
• org/ImageObject»> Деловой буклет с красочными квадратами eps
• Блестящие квадраты фон eps
• Фон с белыми 3d квадратами eps
• Инфографический дизайн с четырьмя закругленными квадратами ai eps
• Заголовок с красочными квадратами eps
• Вектор квадрат текстуры полутонов ai svg
• Оранжевые маленькие квадраты фон eps
• Красочный алфавит в квадрате eps
• org/ImageObject»> Абстрактный квадрат с красочным фоном cdr ai
• Фон черные квадраты eps
• Блестящий металлический фон серые квадраты украшения eps ai
• Скругленные квадраты ai
• Красочная графика квадратов ai
• Скругленные квадраты ai
• Орнамент с мандалами и квадратами eps
• Абстрактный фон с синими квадратами ai eps
• org/ImageObject»> Шаблон фона синие квадраты ai eps
• Футуристический синий квадрат фон eps ai
• Фон модель квадратов eps
• Обложка буклета с квадратами eps
• Глянцевая инфографика прямоугольника со скругленными углами svg ai
• Красочные абстрактные квадраты eps ai
• Золотой узор с линиями и квадратами eps
• Монохромный абстрактный квадратный узор фона — геометрический векторный графический дизайн из диагональных скругленных квадратов eps
• org/ImageObject»> Красный квадрат узор фона — графический вектор eps ai
• Скругленный прямоугольник деревянные рамы вектор eps
• Скругленные кнопки воспроизведения и следующие векторные ai
• Красочный бизнес-буклет с квадратами eps
• Вектор синие квадраты. Абстрактный фон. eps
• Черно-золотая визитка в квадрате svg ai
• Современный геометрический фон красочных квадратов дизайн ai eps
• org/ImageObject»> Современные абстрактные синие и белые квадраты фон ai eps
• Абстрактный фон с полутоновыми квадратами eps
• Элементы дизайна инфографики округлые квадраты украшения eps ai
• 3d квадраты с фоном дизайн вектор eps
• Вектор синие квадраты. Абстрактный фон. eps
• минимальный пока фон с 3d квадратами eps
• Открытый квадрат журнала или макет каталога psd
• Скругленные квадратные инфографические шаги eps
• org/ImageObject»> Инфографический дизайн с четырьмя белыми квадратами eps ai
• Абстрактный фон с красочными квадратами eps

дизайнов, тем, шаблонов и графических элементов Rounded Square, загружаемых на Dribbble

1. Посмотреть логотип XPRO

   Логотип XPRO

2. Посмотреть Formcarry Logo Exploration 03 (Неиспользованный для продажи)

   Formcarry Logo Exploration 03 (Неиспользованный для продажи)

3. Посмотреть SQUARZ — дизайн логотипа квадратной формы

   SQUARZ — дизайн логотипа квадратной формы

4. Посмотреть Альбомы. Приложение

   Альбомы.Приложение

5. Просмотр основного шаблона

   Основной шаблон

6. Посмотреть узор Squircle (розовые оттенки)

   Squircle Pattern (Розовые оттенки)

7. Посмотреть Матис, часть I

   Матис, часть I

8. Посмотреть собаку и кошку — вариант 2

   Собака и кошка — Вариант 2

9. Просмотреть иконку Тукан

   Значок тукана

10. Посмотреть коллекцию логотипов 3D Eye Candy

    Коллекция 3D Eye Candy Logo

11. Просмотр набора иконок — Classroomscreen

    Набор значков — экран для занятий

12. Посмотреть Antigravity — Концепция логотипа // ПРОДАЕТСЯ

    Antigravity — концепция логотипа // ПРОДАЕТСЯ

13. Посмотреть предложение по дизайну логотипа saleloop

    Предложение по дизайну логотипа saleloop

14. Просмотреть Девима — Дизайн логотипа

    Devima — Дизайн логотипа

15. Посмотреть НУКО

16. Просмотр геометрических петель

    Геометрические петли

17. Просмотр макета страницы

    Макет страницы

18. Посмотреть Буба Раунд

    Буба Раунд

19. Посмотреть логотип максистенциализма

    Логотип максистенциализма

20. Посмотреть букву Q + обновить + воспроизвести (не используется для продажи)

    Letter Q + Refresh + Replay (не используется для продажи)

21. Просмотр концепции логотипа

    Концепция логотипа

22. Просмотр абстрактных геометрических блоков

    Абстрактные геометрические блоки

23. Просмотр денег

24. Посмотреть зефирные сны

    Зефирные мечты

Зарегистрируйтесь, чтобы продолжить или войдите в систему

Загрузка еще…

Закругленные углы и почему они здесь, чтобы остаться

Поделиться

• Доля
• Твитнуть
• Поделиться
• Приколи

Ресурсы Кит Брайант • 06 июня 2016 г. • 6 минут ПРОЧИТАТЬ

В наши дни их можно увидеть почти повсюду. Трудно думать о них как о тренде, поскольку они, по сути, стали отраслевым стандартом. Мы видим их в оборудовании, в пользовательском интерфейсе и в Интернете. Закругленные углы никуда не денутся, и не только потому, что они красивы. В них есть нечто большее, чем кажется на первый взгляд. Почему же тогда мы любим закругленные углы?

Закругленные углы приятны для глаз (и для мозга)

Нас научили доверять закругленным углам

Закругленные углы и когда их использовать

Кодирование закругленных углов: CSS3

HTML

CSS

Кодирование закругленных углов: старый путь ниндзя

Изображение

HTML

CSS

Вывод

Скругленные углы приятны для глаз (и для мозга)

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

Прямоугольник с острыми краями действительно требует немного больше когнитивных визуальных усилий, чем, например, эллипс того же размера. Наш «ямочный глаз» еще быстрее записывает круг. Края включают дополнительные инструменты нейронного изображения. Поэтому процесс замедляется.

Острые углы прерывают мысли. Чтобы визуализировать фигуру с острыми углами, мозг обрабатывает точку от А до точки В, делает небольшую паузу, а затем переходит от точки В к С и так далее, пока не завершит круг. В случае с прямоугольником вашему мозгу требуется 4 вычисления, чтобы распознать его. С закругленными углами резких пауз никогда не бывает, и ваш мозг выполняет только одно единственное вычисление, когда ваши глаза плавно сканируют его края.

Какой из них приятнее для глаз?

Нас научили доверять закругленным углам

Шел 1981 год, и Macintosh все еще находился на ранней стадии разработки. Местному мастеру графики Биллу Аткинсону только что удалось заставить свою ОС рисовать круги и эллипсы, и он гордился этим. Однако у Стива Джобса, отца Macintosh, была другая, более насущная просьба: прямоугольников со скругленными углами .

Для Джобса скругленные прямоугольники были дружественными, и он настаивал на том, что скругленные углы уже были повсюду. Джобс взял Аткинсона на прогулку, чтобы показать, что его просьба не была простой эстетической прихотью. Несколько круглых предметов и «Парковка запрещена» знак позже, Аткинсон был убежден.

Аткинсону удалось разработать необходимый код для рендеринга прямоугольников со скругленными углами с молниеносной скоростью. Кнопки и окна стали круглыми. Это помогло определить «безопасный» интерфейс Macintosh. Для клиентов Mac был более мягким и приветливым, что контрастировало с пугающей аурой продуктов IBM и Microsoft.

Наследие Apple со скругленными углами выходит за рамки программного обеспечения. Когда представили, iPhone был больше «карманный» , чем другие телефоны того времени. Точно так же iMac не был таким пугающим, как стандартный «персональный компьютер» того времени: Mac казался непринужденным другом; компьютер, мужчина в темном костюме.

Джобс понял. Apple понимает. Мы запрограммированы избегать острых предметов и не любим их.

Какой из них вы бы позволили своему 4-летнему ребенку потрогать?

Острые углы говорят, «Уходи», «Не трогай меня» или «Я тебя поцарапаю» ; закругленные углы говорят: «Можешь меня обнять». В детстве нас учили держаться подальше от ножей и острых предметов, потому что они могут причинить нам боль.

Нейробиологи называют наше отвращение к острым углам «реакцией избегания», или «предвзятостью контура». Мы склонны к негативному отношению к визуальному объекту на основании его семантического значения (например, «используется для резки») и эмоций, которые он вызывает (например, угроза, боль, страх) . Нашему современному мозгу тысячи лет, но мы до сих пор не переросли эту первобытную реакцию.

Закругленные углы и когда их использовать

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

Закругленные углы вызывают теплоту и доверие. По этой причине многие называют их «дружественными прямоугольниками» . Именно поэтому многие кнопки призыва к действию (также известные как кнопки «купить сейчас» или «зарегистрироваться») разработаны таким образом. Это заставляет клиентов чувствовать себя в безопасности при ведении бизнеса с брендом.

Удобная домашняя страница Wufoo позволяет вам чувствовать себя уверенно при ведении бизнеса с ними.

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

Кодирование закругленных углов: CSS3

Многие дизайнеры избегают использования CSS3 из-за его ограниченной совместимости с браузерами, особенно с IE. Тем не менее, есть основные свойства CSS3, которые уже работают во всех современных браузерах, включая IE 9 и выше. Одним из них является border-radius , который позволяет нам добавлять скругленные углы к элементу, просто указав радиус.

Радиус границы — одно из основных свойств CSS3, поддерживаемое большинством современных браузеров.

HTML

Разметка для блока состоит из одного div и двух классов. Класс Box определяет размеры блока, а класс Rounded имеет дело с углами.

<div class="закругленный прямоугольник">
   <p>Позволь мне не допускать препятствий к браку истинных умов</p>
</дел>
 

CSS

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

.коробка {
ширина: 200 пикселей;
высота: 150 пикселей;
цвет фона: #FC5D8A;
цвет: #fff;
поле: 3em авто;
}

.круглый {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
радиус границы: 10px;
}
 

По сути, используя border-radius , например, наложив четыре круга с радиусом 10 пикселей на углы блока и вырезав область переполнения, как показано на изображении ниже (щелкните его, чтобы просмотреть демонстрацию ) .

Поскольку браузеры постепенно внедряют совместимость с CSS3, некоторые из них предоставляют только экспериментальную поддержку, которую можно реализовать с помощью префиксов поставщиков . В нашем случае мы использовали -webkit для Safari и Chrome и -moz для Firefox. IE использует стандартное свойство без префикса.

Порядок имеет значение. Всегда ставьте актуальное CSS-свойство без префикса последним. Это гарантирует, что ваш код будет работать в будущем, когда браузеры, наконец, реализуют официальную поддержку этого свойства. Реальное свойство, как только браузер его поддержит, переопределит экспериментальные объявления над ним.

Кодирование закругленных углов: старый путь ниндзя

До появления CSS3 были углы карате. Дизайнер Кайл Шеффер популяризировал эту технику, в которой используется только одно изображение в формате PNG и не используются сценарии.

Изображение

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

HTML

Код HTML сложнее, чем эквивалент CSS3, но все же достаточно прост. Здесь у нас есть внешний div для представления самой коробки и еще 4 внутри нее для представления углов. Пятый div служит оболочкой для текста.

<div class="круглая рамка">
    <div class="угол СЗ"></div>
    <div class="угол северо-восток"></div>
    <div class="угол ЮЗ"></div>
    <div class="угол ЮВ"></div>
    <div class="содержимое с закругленными углами">
        <p>Любовь – это не та любовь, которая меняется, когда ее находят изменения. </p>
    </дел>
</дел>
 

Класс NW представляет верхний левый угол коробки, NE представляет верхний правый угол, и так далее для SW и SE . Мы будем использовать CSS для размещения классов в каждом из углов контейнера.

УСБ

.круглая коробка {
положение: родственник;
фон: #FC5D8A;
ширина: 100%;
}

.угол {
положение: абсолютное;
ширина: 10 пикселей;
высота: 10 пикселей;
фон: url('corners.gif') без повторов;
размер шрифта: 0%;
}

.rounded-box-content {
отступ: 10 пикселей;
}

.NW {
сверху: 0;
слева: 0;
фоновая позиция: 0 0;
}
.NE {
сверху: 0;
справа: 0;
фоновая позиция: -10px 0;
}
.SW {
внизу: 0;
слева: 0;
фоновая позиция: 0-10px;
}
.SE {
внизу: 0;
справа: 0;
фоновая позиция: -10px -10px;
}
 

При желании вы можете добавить несколько дополнительных стилей для настройки текста. Вот результат, аналогичный тому, что мы получили с помощью CSS3 (нажмите на изображение ниже, чтобы увидеть живую демонстрацию):

Ограничение этого метода, однако, заключается в том, что внешние части вашего углового изображения должны соответствовать любому фону. содержимое отображается за прямоугольником. Если это пустая белая страница (как в демо), это не проблема. Если у вас есть изображение, узор или какой-либо другой более сложный дизайн на заднем плане, это может стать очень сложным, если не невозможным. Вот почему метод CSS3 является предпочтительным подходом.

Заключение

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

Закругленные углы над острыми углами | by Andrea Perera

Почему закругленные углы в тренде

Вы заметили, что самые популярные продукты, такие как Facebook, Netflix и Spotify, чаще используют закругленные/закругленные углы в пользовательском интерфейсе?

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

Некоторые из вас, возможно, уже сталкивались с сообщениями в LinkedIn от дизайнеров UI/UX, спрашивающих: «Какой UI лучше?».

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

Однако самый волнующий вопрос заключается в том, стоит ли за этим какая-то наука?

По мнению экспертов, визуальная обработка прямоугольников с кривыми углами намного проще, чем прямоугольников с острыми краями, поскольку они требуют меньше когнитивных усилий.

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

Но, с другой стороны, изогнутые углы создают дружелюбную и безопасную атмосферу. Следовательно;

Изогнутые углы выглядят более привлекательно просто потому, что они приятнее для глаз 👀.

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

Кнопки (отдельные)

После проведения опроса я обнаружил, что 65% предпочитают изогнутые углы для сравнения пользовательского интерфейса кнопок.

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

Слева: Острый угол | Центр: Изогнутый угол | Справа: Полностью изогнутый угол

Диалоговые окна (отдельные)

Когда дело доходит до информационных диалоговых окон, многие предпочитают центральное диалоговое окно с умеренными изогнутыми углами.

Слева: Острый угол | Центр: Изогнутый угол | Справа: полностью изогнутый угол

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

Но значит ли это, что мы должны избегать использования острых углов?

Нет! Существуют варианты использования острых углов. Давайте узнаем, когда людям нравится видеть Острые углы, на основе результатов моего опроса.

Кнопки и диалоговые окна (отдельно)

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

• Ящики с важным и внимательным содержанием.
• Кнопки, которые должны быть заметны.

Слева: Полностью изогнутый угол | Центр: Изогнутый угол | Справа: острый угол

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

Затем я провел тот же опрос, сгруппировав эти кнопки, чтобы понять их действие.

Группировка кнопок

Интересно, что когда мы группируем несколько кнопок, люди начинают менять свои предпочтения.

Слева: Острый угол | Центр: Изогнутый угол | Справа: полностью изогнутый угол.

Большинство участников опроса предпочли кнопку с острыми углами (самая левая на изображении ниже) даже в тех случаях, когда она не требует пристального внимания.

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

Слева: Острый угол | Центр: Изогнутый угол | Справа: полностью изогнутый угол

Результаты оказались намного интереснее. Большинство предпочло иметь контейнер Sharp Corner для групп кнопок с изогнутыми углами.

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

Кнопка группировки: поэкспериментируйте с компонентами фильтра

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

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

1-й раздел: Теги фильтра острых углов

Кроме того, важно отметить, что при выборе различных типов углов могут быть и другие контекстуальные воздействия. Например, люди, работающие в медицинской отрасли, могут предпочесть что-то одно, а в творческой работе — другое.

Поэтому не делайте поспешных выводов и принимайте результаты опроса за эмпирическое правило. Вместо этого я настоятельно рекомендую вам провести дополнительные A/B-тесты для аудитории вашего приложения.

Тем не менее, я обобщил результаты опроса для вашего быстрого ознакомления, как показано ниже.

Примечание: Выбор углов может различаться в зависимости от устройства или режима, например, мобильной версии или веб-версии.

Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых средах, таких как React или Node. Создавайте масштабируемые интерфейсы и серверные части с мощным и приятным опытом разработки.