Почему у интерфейсов скруглённые углы: от QuickDraw до «сквиркла» в iOS

Май 1981 года. Энди Хертцфельд в рассказе «Round Rects Are Everywhere!» описывает, как Билл Аткинсон пришёл в офис команды Macintosh показать новые процедуры рисования овалов для QuickDraw — графической библиотеки, которая тогда ещё называлась LisaGraf.

Главное в этих овалах было не то, как они выглядели, а то, как они считались. Процессор Motorola 68000 не поддерживал операции с плавающей запятой. Аткинсон обошёлся сложением и вычитанием, опираясь на старое наблюдение: сумма последовательных нечётных чисел всегда даёт полный квадрат. 1 + 3 = 4, 1 + 3 + 5 = 9, 1 + 3 + 5 + 7 = 16. Из этой школьной закономерности получилась быстрая окружность — без умножения и деления.

Стив Джобс посмотрел демонстрацию и задал вопрос, с которого началась вся история.

«А как насчёт того, чтобы рисовать прямоугольники со скруглёнными углами?» — Стив Джобс, в рассказе Энди Хертцфельда на folklore.org

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

В этой истории обычно видят упрямство Джобса. Нам интереснее другое. Форма вошла в интерфейс не потому, что кто-то нарисовал красивую кнопку, а потому, что инженер нашёл способ сделать её дешёвой. Скругление стало нормой, когда почти ничего не стоило процессору. Эстетика и арифметика здесь не спорят, а договариваются.

Сама форма гораздо старше компьютеров. Кривую впервые описал математик Габриэль Ламе (1795–1870); Джон Кук относит её открытие к 1818 году. Записывается она просто: |x/a|^n + |y/b|^n = 1. При n = 2 получается обычный эллипс. Чем больше показатель, тем сильнее фигура тянется к прямоугольнику, но так и не обзаводится острыми углами. Всё семейство этих промежуточных форм называют суперэллипсом.

Почти полтора века кривая интересовала в основном математиков. Её эстетический и практический потенциал разглядел датчанин Пит Хейн (1905–1996) — поэт, математик и дизайнер в одном лице. Для кольцевой развязки на площади Сергельс торг в Стокгольме он предложил суперэллипс с показателем n = 2,5 и осями 1,2 и 1,0, то есть с соотношением 6:5. На сайте Fritz Hansen это решение описано как ответ на транспортную задачу, а сам Хейн, как пишет Джон Кук, называл суперэллипс компромиссом между кругом и прямоугольником.

Из города суперэллипс перешёл в предметы. Стол Superellipse Хейн сделал вместе со шведским дизайнером Бруно Матссоном, и Fritz Hansen выпускает его с 1968 года. О суперэллипсе Хейна писал и Мартин Гарднер — в книге «Mathematical Carnival».

В те же годы появилось и слово, которым сегодня называют иконки на телефоне. Термин squircle — от square и circle, квадрат и круг — придумал архитектор Питер Панхользер летом 1966 года. Он работал у Джеральда Робинсона, который прочитал о суперэллипсе Хейна в Scientific American. Так что «сквиркл» — не жаргон из мира приложений, а слово из архитектурной мастерской шестидесятых.

RoundRect Аткинсона и суперэллипс Хейна на первый взгляд почти неотличимы. Но устроены они по-разному. Скруглённый прямоугольник собран из кусков: четыре прямые стороны и четыре четвертинки окружности в углах. Сквиркл — одна непрерывная кривая без стыков.

Разница — в кривизне, то есть в том, насколько резко линия поворачивает в каждой точке. На прямой кривизна нулевая, на дуге окружности — постоянная. Там, где сторона переходит в скругление, она меняется скачком: линия идёт прямо и вдруг начинает поворачивать в полную силу. У суперэллипса поворот нарастает постепенно — как на дороге, где руль поворачивают плавно, а не рывком.

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

До iOS 7 маска иконки приложения была простой: квадрат со скруглёнными углами, заданными радиусом. В 2013 году Apple заменила его на сквиркл, построенный не по радиусу, а по формуле. Блог Cocoanetics тогда иронично описал решение так: Джони Айв постановил, что простой радиус слишком прост, — и теперь контур иконок следует сложной формуле.

Формулу пришлось восстанавливать со стороны. В блоге Figma Дэниел Фёрс в 2018 году рассказал, как это происходило. Иконки на домашнем экране, по его словам, стали «сочнее и органичнее». Первую работу проделал Марк Эдвардс: по скриншоту он показал, что новая форма — обобщение эллипса, то есть суперэллипс. Ранние предположения описывали её показателем n = 5. Но дальнейшая проверка показала, что и формула суперэллипса не вполне точна: остаётся небольшая систематическая ошибка. Форма Apple оказалась родственницей кривой Хейна, но не её копией.

Figma решила вопрос по-инженерному и добавила в редактор corner smoothing — сглаживание углов. Это ползунок от 0 до 100%: при нуле получается обычный скруглённый прямоугольник, с ростом значения угол становится всё плавнее. Положение 60% в Figma отмечено как пресет iOS, и, по оценке стороннего блога Squircle.js, оно совпадает с геометрией иконок Apple.

Сквиркл в iOS 7 был не новой формой, а новой степенью точности. Разница между дугой и плавной кривой, которую раньше знали математики, стала узнаваемой чертой продукта — и рабочим инструментом в редакторе дизайнера.

Ещё до iOS 7 скруглённый прямоугольник успел побывать в суде. Дизайн-патент США D504889 описывает прямоугольное электронное устройство со скруглёнными углами. Заявку подали в 2004 году, патент выдали в 2005-м, среди авторов указаны Стив Джобс и Джони Айв. Freakonomics назвал его формулу из двух строк «удивительно широкой».

В решении Апелляционного суда Федерального округа США от 14 мая 2012 года пересказано, как суд первой инстанции описал визуальное впечатление от этого дизайна: прямоугольник с четырьмя равномерно скруглёнными углами, плоской стеклянной поверхностью и рамкой. Эксперт Samsung утверждал, что для дизайнера средней квалификации такое решение очевидно, и ссылался на более ранний образец Fidler.

Судья Люси Кох предварительно признала, что Samsung Galaxy Tab 10.1 нарушает D504889. Но присяжные решили иначе, и запрет на продажи сняли. В августе 2012 года присяжные присудили Apple 1,05 млрд долларов за нарушение трёх патентов и трёх дизайн-патентов. Единственным патентом из спора, который Samsung не нарушила, оказался D504889 — в заявлении Samsung его так и назвали: «прямоугольник со скруглёнными углами».

История на этом не закончилась. По данным Gigazine со ссылкой на Ars Technica, в ноябре 2012 года Apple получила ещё один дизайн-патент, D670286, уже на «настоящий» скруглённый прямоугольник. Ли Шейвер из Университета Индианы заметил, что нового преимущества компании это не даёт.

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

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

• Экономика: со времён Аткинсона скругление почти ничего не стоит — ни процессору, ни верстальщику.
• Предметность: Джобс убеждал Аткинсона примерами из окружающих вещей, и экранная форма до сих пор напоминает предмет, который держат в руке.
• Привычка: после Macintosh и iOS скруглённый прямоугольник читается как «интерфейс по умолчанию», а всё остальное — как отступление от нормы.

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

Долгое время сквиркл жил только в макетах: в Figma его рисовали ползунком, а в вёрстке приходилось обходиться обычным радиусом или масками. Теперь в CSS появилось свойство corner-shape. По описанию блога Squircle.js, оно задаёт форму угла через функцию superellipse(K), а кривая в углу описывается уравнением x^(2K) + y^(2K) = 1. Иначе говоря, кривая Ламе и Хейна попадает в браузер напрямую.

Оговоримся: данных о том, какие браузеры уже поддерживают свойство, в наших источниках нет. Прежде чем закладывать corner-shape в рабочий проект, поддержку стоит проверить по спецификации и актуальным таблицам совместимости, а для остальных браузеров оставить обычный радиус.

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

• Начинать с роли элемента: кнопка, карточка и модальное окно редко должны иметь одинаковый радиус.
• Согласовывать вложенные радиусы: внутренний меньше внешнего примерно на величину отступа, иначе рамка «гуляет».
• Включать сглаживание там, где формы крупные и их много: иконки, карточки, обложки.
• Проверять угол в вёрстке, а не только в макете: сглаживание из Figma само в CSS не переносится.

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

Если собрать все эпизоды вместе, получится история не про моду, а про компромиссы. Хейн искал форму, которая устроит и площадь, и транспорт. Аткинсон — форму, которую выдержит процессор без плавающей запятой. Apple — форму, которая не выдаст стыка в сетке иконок. CSS — способ записать всё это одной строкой. Каждый раз скругление было ответом на конкретную задачу, а не украшением.

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

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

• Folklore.org: Round Rects Are Everywhere!
• Hacker News: ветка о скруглённом прямоугольнике
• Chalkdust: Piet Hein: the pirate
• John D. Cook: Swedish superellipse
• John D. Cook: History of the Squircle
• Fritz Hansen: Piet Hein
• Piet Hein Trading: Superellipse table
• Cocoanetics: iOS 7 Icon Squircle
• Jim Nielsen: Creating iOS Icon Masks in the Browser
• Figma: Desperately seeking squircles
• Squircle.js: Figma Corner Smoothing on the Web
• Squircle.js: Squircles in CSS — corner-shape, superellipse()