![](https://habrastorage.org/getpro/habr/post_images/13a/e8a/004/13ae8a00480f1d0e631c4181ea648153.png)
![](https://habrastorage.org/getpro/habr/post_images/2a6/813/2f1/2a68132f127358c929fbbc2f53773e72.png)
Можете ли вы определить, где какие? Не торопитесь, посмотрите внимательно? Ну что, выбрали?
Настоящие иконки находятся сверху. Думаю многие из вас заметили, что с нижними иконками что-то не так. По какой-то причине их форма выглядят не аккуратно, будто где-то был отрезан лишний пиксель. Почему так происходит?
Дело в том, что поддельные иконки по форме — это квадраты с закруглёнными углами, ну и прямоугольник если говорить о серой подложке.
Но! В интерфейсе iOS нет ни одного квадрата с закруглёнными углами. Все элементы в iOS, это не квадраты и прямоугольники — это суперэллипсы!
Сегодня мы поговорим про секреты в дизайнах продуктов Apple. Что такое суперэллипс? В чём магия формы иконок? И почему HomePod — это суперяйцо.
Продукты Apple часто получаются противоречивыми и не лишенными недостатков. Но думаю никто не будет спорить, что в плане дизайна Apple заморачиваются наверное больше всех на рынке. И даже форма иконок в iOS взята не с потолка, а вычислена математически.
Она называется суперэллипсом или кривой Ламе, в честь математика Габриеля Ламе, который в 19 веке внёс большой вклад в теорию упругости, разработал общую теорию криволинейных координат, и придумал суперэллипсы. Что же это такое?
Это геометрическая кривая, которая строится при помощи уравнения вот такого вида:
![](https://habrastorage.org/getpro/habr/post_images/b54/910/2d2/b549102d23f6e0da26f0ca6b21760b14.png)
Это уравнение задаёт замкнутую кривую, ограниченную прямоугольником. При этом меняя значение n мы можем регулировать степень выпуклости каждого угла (можно поиграться тут). При n меньше единицы, мы получаем вогнутые стороны, а форма напоминает звезду.
![](https://habrastorage.org/getpro/habr/post_images/dac/d9b/3e7/dacd9b3e7f30c1fd66599570c89dcb3d.png)
Увеличивая значение n, форма становится всё более выпуклой. При n=2 получается ровный круг. А при n равной 4 или 5 мы получаем привычную всем форму иконки.
![](https://habrastorage.org/getpro/habr/post_images/260/374/024/26037402468487209d08f5ff7967a713.jpg)
У такой формы даже есть своё название — сквиркл. И, нет, сквиркл — это не ваш любимый раздел на PornHub. Это производное от слов square и circle. Т.е. по русски сквиркл — это квадрокруг или квадратный круг.
Кстати, формула описывающая иконку iOS выглядит вот так:
![](https://habrastorage.org/getpro/habr/post_images/018/bed/76f/018bed76f5a5dbc745f0e7ff87e91920.png)
Т.е. иконка в iOS — это и не круг и не квадрат, а математически — это что-то среднее между ними.
Кольцо и суперяйцо
Историческая справка. Популяризировал суперэллипсы и сквирклы датский ученый Пит Хейн. В 60-х годах он спроектировал транспортное кольцо в Стокгольме в виде суперэллипса со значениями n = 2.5, a/b = 6/5.
![](https://habrastorage.org/getpro/habr/post_images/d3d/9e4/84f/d3d9e484f259fac3ab5cd28f623bc7e9.png)
Форма развязки стала хитом. И он начал делать, столы, посуду, но вершиной его творчества стало суперяйцо. Как понимаете — это трёхмерный суперэллипс, по форме похожий на яйцо.
![](https://habrastorage.org/getpro/habr/post_images/724/a08/367/724a08367f2ea8b5580991e6e87298f3.png)
Кстати, трехмерные суперэллипсы — это суперэллипсоиды. А всякие неправильные суперэллипсоиды — это суперквадрики.
Непрерывность кривизны
Но вернёмся к иконкам! Чем всё-таки квадрокруг отличается от скругленного квадрата? И чем он не угодил дизайнерами Apple? Давайте посмотрим!
Если сравнить настоящие иконки с фейковыми, мы увидим, что закругление у квадрокруга начинается раньше и степень закругления нарастает постепенно.
![](https://habrastorage.org/getpro/habr/post_images/20e/4d5/eca/20e4d5eca86d707851ab0e51ec537265.jpg)
![](https://habrastorage.org/getpro/habr/post_images/920/a5c/bdf/920a5cbdfa26494b31ba91a18721e6dc.png)
![](https://habrastorage.org/getpro/habr/post_images/fbd/618/732/fbd6187326cc4c439ef1a18752e9e07e.jpg)
![](https://habrastorage.org/getpro/habr/post_images/5c9/335/92f/5c933592fcef17958738e8b8f433092c.jpg)
Лучше всего это можно визуализировать при помощи вот таких гребней кривизны.
![](https://habrastorage.org/getpro/habr/post_images/92c/d7b/48d/92cd7b48d3519311b967c0ed4025e057.png)
Казалось бы, разница — пара пикселей. Но плавные переходы, позволяют добиться так называемой непрерывности кривизны. И это даёт потрясающий эффект — форма объекта из искусственной, как бы собранной из разных форм становится естественной и завершенной.
Именно поэтому Apple очень активно использует суперэллипсы не только в интерфейсе, но и в дизайне всех своих продуктов.
Mac Mini, Apple TV, iPhone, iPad, MacBook и конечно HomePod — своего рода всё это суперэллипсы. Даже в их новом кампусе нет ни одной прямой стены.
Плавное перетекание форм и отсутствие резких переходов делает продукты Apple не только привлекательными внешне. На этот счёт есть отличная статья Николая Геллара, которую я процитирую:
Вместо того, чтобы напоминать нам о промышленных цепочках поставок, конвейерном производстве и химических лабораториях, эти более мягкие формы напоминают о красоте природы. Это кажется органичным и вызывает приятные ощущения.
Например если сравнить по дизайну HomePod и Яндекс.Станцию, становится понятно в почему станция выглядит менее привлекательно, её как будто только выпустили с завода. А HomePod будто нашел в своём саду японский мастер суйсэки — искусства любования камнями.
![](https://habrastorage.org/getpro/habr/post_images/668/6be/f7e/6686bef7e188eb1900ef10b543b586ab.png)
![](https://habrastorage.org/getpro/habr/post_images/dc7/f55/4eb/dc7f554eb8df1cb7a00ed5da542f27be.png)
Хотя сама Яндекс.Станция — девайс отличный. А HomePod красивый, но туповатый (русского не знает).
Примеры
Но, конечно, Apple тоже не сразу к этому пришли. Например, иконки и другие элементы интерфейса стали суперэллипсами только в начиная с iOS 7.
![](https://habrastorage.org/getpro/habr/post_images/305/c32/1cf/305c321cfaa47978bb96f54ce47ad3fa.png)
Такая же история с Apple Watch. В Series 4 увеличили не только дисплей, но и обновили форму. Да-да, Apple Watch с четвёртой версии это тоже — суперэллипс (как сам экран).
![](https://habrastorage.org/getpro/habr/post_images/7cf/5a8/528/7cf5a852852c8eef335951def04ea180.png)
![](https://habrastorage.org/getpro/habr/post_images/a77/553/118/a77553118b511b2f58cfa4043997649a.png)
Другие компании
Естественно, не только Apple играется с суперэллипсами. Те же иконки в One UI на смартфонах Samsung, гораздо более явные квадрокруги, чем у Apple. Но, на мой взгляд, у Samsung выбранная форма не работает.
Во-первых, потому, что иконки закруглены уж очень сильно, из-за чего они выглядят неустойчиво, как будто в любой момент они могут укатиться с рабочего стола. Кстати, в физическом мире такой же ошибкой грешит колонка от Mail.ru, она просто неустойчивая.
![](https://habrastorage.org/getpro/habr/post_images/a8f/e23/456/a8fe2345648588f94f9f5fbd70ef6c31.png)
Но это не самое главное. Основная проблема в интерфейсе Samsung. Я говорю про отсутствие единства. Плавные суперэллипсы тут соседствуют с грубоватыми скруглёнными. Как внутри интерфейса так и в дизайне самих девайсов.
![](https://habrastorage.org/getpro/habr/post_images/141/a11/db5/141a11db53b13089929b743312fbca53.jpg)
А именно единство подхода начиная от самого простого элемента интерфейса, заканчивая дизайном всей линейки продуктов, делает устройства Apple такими привлекательными и доставляющими в использовании. Да, наверное, это звучит рекламно. Но, мне пофиг, просто хочется отдать должное дотошности подхода ребят из Купертино.
Эти чуваки показали миру, что красивыми могут быть не только автомобили и предметы роскоши, но обычные ноутбуки и и телефоны. Поэтому вся техника щас так круто выглядит.
podivilov
Исправьте заголовок, пожалуйста. «!?!» — это вообще что? «?!» — это уже ужас, достаточно одного знака. И ими вообще лучше не злоупотреблять в заголовках.
Error1024
Лучше уж "неправильные" заголовки, чем мертвая сеть "medium" и проекты вида "wct lang".
podivilov
Извините, но всё-таки лучше уж мёртвая сеть «medium» и проекты вида «wct lang», чем токсичные комментарии на Хабре.
Error1024
От токсичных комментариев на хабре люди время/деньги не потеряют, в отличие от траты времени на развитие таких «проджектов» как Medium. Кроме того, ваш первый комментарий — крайне токсичный наезд на знаки препинания в заголовке, такие вещи принято в лс писать.
А вообще — авторы удаляющие свои посты, к которым люди оставили кучу интересных комментариев, потратив на это своё время, вызывают у меня личную неприязнь, так что да, буду припоминать.