Секрет формы иконок iOS. Это сквиркл!?! — РАЗБОР

Давайте сыграем в игру. У нас есть два ряда знакомых всем пользователям iOS-иконок. На первый взгляд иконки сверху и снизу одинаковые. Но это не так. В одном ряду вы видите настоящие иконки, а в другом подделку.

Можете ли вы определить, где какие? Не торопитесь, посмотрите внимательно? Ну что, выбрали?

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

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

Но! В интерфейсе iOS нет ни одного квадрата с закруглёнными углами. Все элементы в iOS, это не квадраты и прямоугольники — это суперэллипсы!

Сегодня мы поговорим про секреты в дизайнах продуктов Apple. Что такое суперэллипс? В чём магия формы иконок? И почему HomePod — это суперяйцо.


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

Она называется суперэллипсом или кривой Ламе, в честь математика Габриеля Ламе, который в 19 веке внёс большой вклад в теорию упругости, разработал общую теорию криволинейных координат, и придумал суперэллипсы. Что же это такое?

Это геометрическая кривая, которая строится при помощи уравнения вот такого вида:

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

Увеличивая значение n, форма становится всё более выпуклой. При n=2 получается ровный круг. А при n равной 4 или 5 мы получаем привычную всем форму иконки.

У такой формы даже есть своё название — сквиркл. И, нет, сквиркл — это не ваш любимый раздел на PornHub. Это производное от слов square и circle. Т.е. по русски сквиркл — это квадрокруг или квадратный круг.

Кстати, формула описывающая иконку iOS выглядит вот так:

Т.е. иконка в iOS — это и не круг и не квадрат, а математически — это что-то среднее между ними.



Кольцо и суперяйцо

Историческая справка. Популяризировал суперэллипсы и сквирклы датский ученый Пит Хейн. В 60-х годах он спроектировал транспортное кольцо в Стокгольме в виде суперэллипса со значениями n = 2.5, a/b = 6/5.

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

Кстати, трехмерные суперэллипсы — это суперэллипсоиды. А всякие неправильные суперэллипсоиды — это суперквадрики.



Непрерывность кривизны

Но вернёмся к иконкам! Чем всё-таки квадрокруг отличается от скругленного квадрата? И чем он не угодил дизайнерами Apple? Давайте посмотрим!

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


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

Казалось бы, разница — пара пикселей. Но плавные переходы, позволяют добиться так называемой непрерывности кривизны. И это даёт потрясающий эффект — форма объекта из искусственной, как бы собранной из разных форм становится естественной и завершенной.

Именно поэтому Apple очень активно использует суперэллипсы не только в интерфейсе, но и в дизайне всех своих продуктов.

Mac Mini, Apple TV,  iPhone, iPad, MacBook и конечно HomePod — своего рода всё это суперэллипсы. Даже в их новом кампусе нет ни одной прямой стены.

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

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

Например если сравнить по дизайну HomePod и Яндекс.Станцию, становится понятно в почему станция выглядит менее привлекательно, её как будто только выпустили с завода. А HomePod будто нашел в своём саду японский мастер суйсэки — искусства любования камнями.

Хотя сама Яндекс.Станция — девайс отличный. А HomePod красивый, но туповатый (русского не знает) .



Примеры

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

Такая же история с Apple Watch. В Series 4 увеличили не только дисплей, но и обновили форму. Да-да, Apple Watch с четвёртой версии это тоже — суперэллипс (как сам экран).



Другие компании

Естественно, не только Apple играется с суперэллипсами. Те же иконки в One UI на смартфонах Samsung, гораздо более явные квадрокруги, чем у Apple. Но, на мой взгляд, у Samsung выбранная форма не работает.

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

Но это не самое главное. Основная проблема в интерфейсе Samsung. Я говорю про отсутствие единства. Плавные суперэллипсы тут соседствуют с грубоватыми скруглёнными. Как внутри интерфейса так и в дизайне самих девайсов.

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

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

Ну а если у вас есть желание прислать нам тему для ролика или готовый сценарий, давайте сделаем его вместе — пишите на idea@droider.ru.

droider.ru - Apple
Другие новости раздела: Лента про iOS

Лента про iOS

Apple собирается добавить ИИ в iPhone: весьма вероятно, что это будет Gemini от Google

По сообщениям известного инсайдера Марка Гурмана из издания Bloomberg, компания Apple ведет переговоры с Google о том, чтобы встроить искусственный интеллект Gemini в iPhone. На данный момент две

Лента про iOS

iPhone — самый продаваемый смартфон в мире. В этой гонке Apple обогнала Samsung впервые с 2010 года iPhone — самый продаваемый смартфон в мире. В этой гонке Apple обогнала Samsung впервые с 2010 года

2023 год оказался важным для iPhone от Apple. Сначала компания избавилась от давно устаревшего порта Lightning в актуальной линейке смартфонов, а теперь сообщает, что обогнала Samsung в борьбе за

Лента про iOS

Обновление iOS 17.2: приложение «Дневник» и поддержка пространственного видео

В обновлении iOS 17.2 компания Apple выпустила приложение для ведения фотожурнала на базе искусственного интеллекта (ИИ) для iPhone под названием «Дневник» и поддержку пространственного

Лента про iOS

Фейковый титановый iPhone 15 Pro Max за 12 000 рублей — КАК КИТАЙЦЫ ЭТО ДЕЛАЮТ?

Оформляй Tinkoff Black в дизайне «‎Король и Шут»‎ — Настоящие «айфоны» в Big Geek: Смотрим на новый «титановый» iPhone 15 Pro Max на 1 ТБ за 12 000 рублей! Китай — рулит? :) 0:00 Начинаем 0:24

Похожие публикации

Кратко по миру

Секрет формы иконок iOS | РАЗБОР

Подробнее про WiFi 6 Роутер HUAWEI WiFi AX3: ? Подписка! ↓ ↓ ↓ В плане дизайна своих продуктов, наверное никто не заморачивается больше чем Apple. И даже форма иконок в iOS взята не с потолка, а

Лента про iOS

9 самых удобных способов расставить иконки приложений на iPhone

Эти способы сортировки иконок помогут максимально быстро ориентироваться в приложениях и находить нужные.

Программы для macOS

IconJar

IconJar - это универсальный инструмент для менеджмента значков программ, используемый дизайнерами и разработчиками по всему миру. Ищите, упорядочивайте, предварительно просматривайте и извлекайте

Софт

HiddenMe прячет все иконки с рабочего стола Mac

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

Кратко по миру

Зачетные иконки для Linux и Android — FlatWoken

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

Лента про iOS

iBlank: расставляем иконки на рабочем столе как угодно

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

android

Materialize — бесплатная утилита для изменения иконок Android

После использования этой утилиты все ваши иконки будут стоять ровно в ряд и одинаково поблёскивать. Ну просто услада для глаз любителей идеального порядка!

android

Google планирует обновить дизайн иконок Android-приложений

Похоже, что в следующей версии Зеленого робота компания Google изменит дизайн иконок у некоторых Android-приложений. К такому выводу пришли журналисты портала Android Police на основе новых