Офтоп
Дарья Хохлова

«Устройства Apple минималистичные, но не простые»: дизайнер о том, как скругления определяют внешний вид техники Статьи редакции

Дизайнер Марк Стэнтон опубликовал в блоге на Medium заметку о том, какой принцип определяет внешний вид продуктов Apple. По его мнению, компания старается делать переходы между гранями устройств как можно более плавными — и это делает их привлекательными для пользователей.

«Если вы никогда не сталкивались с дизайном iOS-иконок — взгляните на них, и вы увидите, что по форме они представляют собой квадрат с закруглёнными краями. Если вы дизайнер интерфейсов, то знаете, что такая форма называется squircle — гибрид квадрата и круга. Если же вы промышленный дизайнер, то знаете, что именно такая форма является отличительным знаком продукции Apple», — пишет Марк Стэнтон.

С выпуском версии операционной системы iOS 7, продолжает он, иконки обрели более сложную форму, чем квадрат с округлыми краями. «Все знают, что Apple обращает внимание на мельчайшие детали, но при этом не замечают очевидной логики за этим небольшим изменением. Ответ — последовательность. Apple согласовала дизайн своего программного и аппаратного обеспечения».

Иконки Apple не обладают формой прямоугольников с закруглёнными углами. Как и её устройства.

«Apple придерживается минималистичного дизайна, но не стоит путать минимализм с простотой. В дизайне от Apple нет простоты», — объясняет автор материала. «Секрет аппаратных продуктов от компании заключается в том, что дизайнеры избегают форм, в которых скругление переходит в прямую линию грани в одной точке — и создают плавные переходы между гранями». Этот принцип называется Curvature Continuity.

В качестве примера Стэнтон приводит два устройства со скруглёнными краями. «Обратите внимание, насколько резким выглядит угол у первого гаджета. Это результат как раз такого перехода от скругления к самой грани», — объясняет он.

«Посмотрите на Macbook — это ещё одно устройство, в котором используется тот же принцип. Ноутбук выглядит так здорово не только из-за своего матового покрытия (хотя и оно помогает, конечно). Вся форма устройства поддаётся этому принципу плавности переходов — и это одна из причин, по которым мы так любим продукцию Apple», — продолжает дизайнер.

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

На изображении справа показатель кривизны постоянно меняется — с нуля до своего экстремума.

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

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

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

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

{ "author_name": "Дарья Хохлова", "author_type": "editor", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 16, "likes": 18, "favorites": 23, "is_advertisement": false, "subsite_label": "flood", "id": 21584, "is_wide": true, "is_ugc": false, "date": "Fri, 27 Jan 2017 15:33:00 +0300", "is_special": false }
0
16 комментариев
Популярные
По порядку
Написать комментарий...

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

11

Шок! Эпл крадёт у РЖД как художник.

8

«Обратите внимание, насколько резким выглядит угол у первого гаджета. Это результат как раз такого перехода от скругления к самой грани»
Обратите внимание, насколько разным выглядит угол съемки закруглений гаджетов

6

какая чудесная и познавательная статья

0

А чего ты ждал, открывая статью "«Устройства Apple минималистичные, но не простые»: дизайнер о том, как скругления определяют внешний вид техники"?

0

Похоже, вы нашли сарказм там, где его не было :grin:

10

Да, так и было

1

Че? Я вот не знал что там такие непростые скругления, вот почему девайсы от эппл смотрятся круто и приятно, в отличие от говносамсунгов. Дьявол кроется в деталях

1

Комментарий удален

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

1

Возможно стоит учитывать, что это не основная и не единственная фишка? ;)

1
Семейный самолет

Нет, в одной статье должны быть перечислены все преимущества, чтобы ни один хейтер не подкопался (нет)

1

Автор узнал про ease-in и ease-out, познает мир. Скоро он про кривые безье и градиенты узнает, ждем статьи.

1

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

0

что за статья?

0

на левой картинке "гаджет" в два раза толще, а радиус закругления в два раза меньше.

0

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

0
Читать все 16 комментариев
Разбор: «Яндекс» действительно притворяется системным сообщением iOS на iPhone

Чтобы убедиться, так ли это, я решил открыть сайт одиозной компании «Яндекс» на компьютере в браузере Safari, включив режим отладки и используя «юзер-агент» iPhone. И проверить, действительно ли это системное сообщение или «Яндекс» имитирует системное сообщение iOS, используя фишинговый методы?

Саморазвитие: путь к саморазрушению
38 миллиардов долларов США
Объем рынка self-help в 2019
Шпаргалка для инвестора: главное о ETF

Рассказываем основные принципы инвестирования в ETF.

Как сделать рынок лома прозрачным: рассказывает QIWI Business

Делимся опытом создания платежной инфраструктуры для целой отрасли

«Сбермегамаркет», «Сберлогистика» сперва не могли доставить заказ, а потом не дали осмотреть его — курьер вёл себя грубо

История моя начинается 8 октября. Оформленный и оплаченный заказ на 29 тысяч рублей, успешно был отправлен продавцом и поехал в мой город который далеко за МКАД.

«Яндекс.Маркет» добавил в приложение просмотр 3D-моделей крупной бытовой техники в режиме дополненной реальности Статьи редакции

Можно посмотреть, поместится ли она в комнате.

30 стартапов прошли в финал конкурса SaaS Factory Московского инновационного кластера

Конкурс SaaS Factory нацелен на поиск готовых инновационных программных решений для бизнеса и внедрение продуктов и сервисов в корпорации. Эксперты оценили 206 заявок, из них отбор прошли 30 стартапов. Теперь основателей технологических проектов ждет программа развития, где они смогут приступить к совместной работе над инновационными решениями с…

Что пугает в резюме?

Сейчас ищу технического кофаундера (подробнее тут: «Как найти кофаундера?»), получаю достаточно много писем и обращений самого разного содержания. Хотел поделиться впечатлениями, это не руководство и не критика.

Власти Москвы обсудили введение локдауна с 30 октября по 7 ноября, QR-коды действовать не будут — Forbes Статьи редакции

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

Сделай сам: умная камера для наблюдения за питомцами

Обучаем нейросеть на котиках.

null