Figma ищет идеальные сфероквадраты в дизайне

Краткая сводка

Статья «Desperately Seeking Squircles» исследует геометрическую форму, известную как сфероквадрат, которая занимает промежуточное положение между квадратом и кругом. В ней изучаются математические основы этой формы, в частности уравнение суперэллипса, и проводится сравнение с кривыми Безье, используемыми в большинстве программ для проектирования.

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

Геометрия сфероквадрата

Термин сфероквадрат (squircle) является словосочетанием слов «square» (квадрат) и «circle» (круг) и описывает форму, которая промежуточна между этими двумя фигурами. В отличие от простого скругленного квадрата, который использует круговые дуги, примыкающие к прямым линиям, сфероквадрат следует непрерывной кривой, определенной специальным математическим уравнением. В статье подчеркивается, что уравнение суперэллипса, часто приписываемое Пейту Хейну, является определяющей формулой для этой формы.

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

Ключевые характеристики сфероквадрата включают:

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

Эстетические и функциональные применения

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

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

Дизайнеры часто испытывают трудности с созданием истинного сфероквадрата в таких программах, как Figma или Adobe Illustrator, поскольку эти инструменты основаны на математике Безье. Следовательно, дизайнеры часто используют плагины для суперэллипсов или математические аппроксимации для достижения желаемой формы, вместо того чтобы рисовать ее вручную.

Математическая задача

Создание идеального сфероквадрата требует решения уравнения суперэллипса, которое не поддерживается стандартными инструментами векторных путей. В статье подробно описывается сложность создания пути, который строго соответствует формуле |x/a|^n + |y/b|^n = 1, где n обычно равно около 4 для сфероквадрата.

Сложность заключается в том, что большинство программ для проектирования рассматривают кривые как сегменты кругов или эллипсов (дуги) или используют контрольные точки Безье. Чтобы воспроизвести уникальную кривизну сфероквадрата, необходимо вычислить точные координаты точек пути. В статье упоминается работа Стива Джобса и команды раннего Macintosh, которые были одержимы «сфероквадратом» для значка загрузочного диска, используя специальный алгоритм для его отображения.

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

Заключение: Стремление к совершенству

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

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