Лого vc.ru

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

«Устройства 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 — по его словам, эта функция позволяет сглаживать переходы между гранями устройств описанным образом.

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

0

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

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

0

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

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

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

0

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

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

0

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

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

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

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

Прямой эфир
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления