Разделитель — это костыль
#layout

На самом деле разделитель — это костыль. Ну, знаете, Вилларибо и Виллабаджо не смогли договориться и провели на земле линию краской (привет читающим это старперам, заставшим раннее российское ТВ).

В идеальном интерфейсе все объекты скомпонованы так, что не требуется ни разделителей, ни цветового разделения зон — объекты и группы объектов хорошо считываются и без них. Мы живем не в идеальном мире, поэтому разделители приходится использовать — иногда не хватает времени или мотивации, чтобы как следует закомпоновать блок, иногда места на экране мало, а необходимых объектов слишком много. Кроме того разделители часто становятся стилистическим ходом — у меня как раз в соседней вкладке открыт Искусство кино (https://kinoart.ru/), в котором именно так и сделано.

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

Первые попавшиеся под руку скриншоты эволюции Control Center от iOS 7 до iOS 10. В iOS 12–13 немного другая история, теперь для всего появились КОНТЕЙНЕРЫ, но сути вопроса про разделители это не меняет.

Интерфейс без разделителей выглядит более изящно. У меня есть теория о том, что это ощущение «изящества» вызывается некоторым умственным напряжением, когда ты видишь невидимое, улавливаешь закономерности, как охотник в природе, но это тема для отдельного большого поста.

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

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

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

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

Годы идут, названия меняются, а Apple Music все так же плох в деталях

Стеки
#layout #sketch

Стеки — это главное (пока еще) (но не единственное) преимущество Скетча перед Фигмой. Функция стеков экономит огромное количество человеко-часов, избавляет от рутины и сохраняет точность макета. Стеки — это божественно, а работа без них полна боли и постоянных детачей.

До недавнего времени в Скетче их можно было делать с помощью плагина Layout от Anima App. Сейчас Скетч выкатил свою версию стеков для символов (что, безусловно, хорошо) и попутно сломал стеки Анимы в символах. Я надеюсь что еще починят — конечно новые элементы удобно делать с нативными стеками, но старые макеты как-то надо поддерживать.

Итак, плагин от Анимы. У него три функции: стеки, паддинги и пины. Я пользуюсь только стеками — паддинги и пины работают криво и частенько конфликтуют со стандартными функциями Скетча.

Плагин делает вот так:

Где его использовать

Символы с разным количеством контента. Самый явный пример: карточки новостей с разными заголовками:

Больше никакого детача, все работает как надо и сохраняет зависимость с мастер-символом

Меню, таббары:

Страницы с динамическим контентом в одну колонку:

Экраны, полностью состоящие из символов:

(Кстати заметьте, как кайфово, когда внутри у каждого компонента уже заданы все необходимые отступы — это требует некоторого времени на старте, но зато потом вообще не нужно думать о том, какой в данном случае сделать отступ)

Короче все, что располагается в одну строчку или колонку, можно запихать в стек и мы будем знать наверняка, что расстояния между объектами не поплыли и все выравнивается как надо.

Если расстояния между объектами одинаковые, то отступ можно задать прямо в плагине. Если расстояния разные (например в странице блога отступ между абзацами обычно меньше чем над подзаголовком), то в плагине нужно задать отступ 0, а в макете сами отступы задавать прямоугольниками без заливки. Это классно, потому что мы можем схватить такой прямоугольник и скопировать его в новое место, там автоматически возникнет правильный отступ.

Плюсы:
• Поддерживается «гигиена» макета: мы абсолютно точно знаем что все отступы какие надо и после передачи на верстку у вас нигде не вылезет 53px потому что мы где-то случайно дернули или недотянули слой.
• При очередном небольшом изменении не нужно бегать по макету и вручную сдвигать те слои, которые оно затронуло — все происходит автоматически.
• Переходим от отступов «на глаз» к точной системе. Систематизация в больших проектах — это очень важно

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

Минус нативных стеков — они работают только в символах, но бывают часто нужны и в обычных страницах. Надеюсь допилят.

Фигма тоже анонсировала стеки (сразу после релиза Скетча, видимо чтобы не расстраивать фанатов), но пока не выкатили. В Фигме они особенно нужны, поскольку заменяющих плагинов нет, а двигать все вручную — это прямо боль.

Удивительный мир интерфейсов гугл

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