Школа
Интерфейс

Привет! После выхода iOS 14 наткнулся на вот такой скриншот: виджеты чуть вылезают за колонки, на которых стоят приложения. Кажется, что это ошибка, но в комментариях это объясняют оптической компенсацией. Не могли бы вы объяснить и рассказать об этом чуть подробнее?

Артур Объяртель
28 июля 2020
👁 10092   🗩3
Интерфейс

Привет! После выхода iOS 14 наткнулся на вот такой скриншот: виджеты чуть вылезают за колонки, на которых стоят приложения. Кажется, что это ошибка, но в комментариях это объясняют оптической компенсацией. Не могли бы вы объяснить и рассказать об этом чуть подробнее?

Артур Объяртель
28 июля 2020
👁 10092   🗩3
Константин Мозговой
Дизайнер бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Артур!

У меня две версии, почему дизайнеры Эпла так сделали. Первая связана как раз‑таки с оптической компенсацией. Про неё важно не забывать при выравнивании круглых или скруглённых объектов. В большинстве случаев достаточно сдвигать такие объекты немного за границу линии выравнивания или, как в случае с Айосом 14, немного их увеличить. Рассмотрим на примерах, как это работает.

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

Идеально

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

Не очень

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

Лучше

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

Нормально

Можно слегка увеличить большой квадрат. На мой взгляд, в Айосе 14 с этим переборщили.

Тоже нормально

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

Плохо

Круг нужно увеличить намного сильнее.

Лучше

Вторая версия основана на предположении, что дизайнеры Эпла попытались увеличением виджетов выровнять надписи. На скриншоте, который вы прислали, странно подобраны отступы между иконками приложений. Они не образуют квадрат. Если выровнять виджет по ширине иконок, которые стоят снизу, то он не выровняется по высоте иконок, которые стоят сбоку, как и их подписи.

Если увеличить виджет, чтобы выровнять подписи, он получится слишком большим.

А в Айосе 14, судя по скриншоту, сделали странно: немного увеличили виджет и выровняли его по верху иконок, которые стоят сбоку. В результате подписи почти выровнялись, но не совсем.

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

Расскажите в комментариях, что вы думаете по поводу такого выравнивания виджетов и иконок.

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

Интерфейс
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы