x
 
Артур Объяртель
28 июля 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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


Артур!

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

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

Идеально

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

Не очень

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

Лучше

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

Нормально

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

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

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

Плохо

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

Лучше

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

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

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

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

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

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

Поделиться
Отправить

Комментарии

Дмитрий Онофриенко
28 июля 2020

Интересный факт. Подпись виджета «Активитис» совпадает высотой с подписью иконок, которые рядом с ним. Но другие виджеты в своих рядах уже не попадают в одну линию подписями.

Алексей Келлер
30 июля 2020

Больше выглядит как ошибка разрабов (дизайнеров и/или прогеров) Эппла с попыткой выкрутиться объяснением. Потому что картинка «Нормально» смотрится действительно нормально и не требует оптической компенсации. В примере «Тоже нормально» и остальных большой квадрат неприятно вылезает за пределы сетки, вызывая неприятные ощущения, словно на картинках с оптическими иллюзиями.

Ещё одна проблема виджетов иос — скругления. Сейчас с ними явно перебор. Но если их чуть уменьшить… Например, если задать скругление виджета в 1,5 значения скругления иконок приложений, то сразу становится аккуратнее, виджет уверенно держит форму. И что вдвойне приятно — меньшие скругления обложки альбома.

Глеб Кемарский
30 июля 2020

Если сравнивать не с соседями сбоку, а смотреть сразу на несколько ярусов, то виджет выглядит слишком грузным по сравнению с маленькими иконками под ним. Из-за того, что он немного от них отодвинулся — «поджал ноги», потерялось выравнивание по горизонтали, зато по вертикали добавился воздух. Так композиция кажется легче и подвижнее.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

5 1 3 Чем заменить «Подробнее» в описании продуктов? 2




Недавно всплыло

Некоторые редакторы переписывают твои советы, а потом продают как свои курсы 2 Что делать, если меня, технического директора, потихоньку отстраняют от дел? 1 Висячие предлоги в английском 1 Мне пока ни разу не удалось выбрать человека, который написал бы правильный текст 1