В самом стиле есть только одна внутренняя тень с отступом в 1px в нужную сторону, нулевым размытием и полупрозрачным цветом, все остальные свойства слоя мы убиваем:
После мы просто создаем в нужном месте прямоугольник, делаем его высоту такой, сколько у нас должно быть от разделителя до элемента (в данном случае 16px) и применяем стиль "border / black-10 / top" — получаем бордер правильного цвета на фиксированном расстоянии до нужного элемента.
В Фигме, к сожалению, такой способ не сработает — там при выключении заливки у слоя также перестает быть видна внутренняя тень. Поэтому в ней придется обходиться прямоугольником высотой (или шириной) 1px с нужным полупрозрачным цветом. Поскольку оперировать такими прямоугольниками не очень удобно — его сложно подцепить курсором, к тому же он будет добавлять 1px в ровный счет отступов и сбивать вертикальную сетку, то вы можете завернуть этот разделитель в компонент, прибить его к одному из краев и использовать такие компоненты так же, используем в скетче прямоугольник со стилем.
Разделитель — это костыль
#layout
На самом деле разделитель — это костыль. Ну, знаете, Вилларибо и Виллабаджо не смогли договориться и провели на земле линию краской (привет читающим это старперам, заставшим раннее российское ТВ).
В идеальном интерфейсе все объекты скомпонованы так, что не требуется ни разделителей, ни цветового разделения зон — объекты и группы объектов хорошо считываются и без них. Мы живем не в идеальном мире, поэтому разделители приходится использовать — иногда не хватает времени или мотивации, чтобы как следует закомпоновать блок, иногда места на экране мало, а необходимых объектов слишком много. Кроме того разделители часто становятся стилистическим ходом — у меня как раз в соседней вкладке открыт Искусство кино (https://kinoart.ru/), в котором именно так и сделано.
Однако если у вас нет задачи сделать отсылку к швейцарскому стилю, или брутализму, то стоит хотя бы двигаться в направлении идеального интерфейса и по возможности избавляться от линовки. Вот, кстати, пример от Apple:
#layout
На самом деле разделитель — это костыль. Ну, знаете, Вилларибо и Виллабаджо не смогли договориться и провели на земле линию краской (привет читающим это старперам, заставшим раннее российское ТВ).
В идеальном интерфейсе все объекты скомпонованы так, что не требуется ни разделителей, ни цветового разделения зон — объекты и группы объектов хорошо считываются и без них. Мы живем не в идеальном мире, поэтому разделители приходится использовать — иногда не хватает времени или мотивации, чтобы как следует закомпоновать блок, иногда места на экране мало, а необходимых объектов слишком много. Кроме того разделители часто становятся стилистическим ходом — у меня как раз в соседней вкладке открыт Искусство кино (https://kinoart.ru/), в котором именно так и сделано.
Однако если у вас нет задачи сделать отсылку к швейцарскому стилю, или брутализму, то стоит хотя бы двигаться в направлении идеального интерфейса и по возможности избавляться от линовки. Вот, кстати, пример от Apple:
Интерфейс без разделителей выглядит более изящно. У меня есть теория о том, что это ощущение «изящества» вызывается некоторым умственным напряжением, когда ты видишь невидимое, улавливаешь закономерности, как охотник в природе, но это тема для отдельного большого поста.
В любом случае если вы налиновали в интерфейсе зон, то в свободное время стоит попробовать от них избавиться, заодно посмотреть — действительно ли конструкция собрана хорошо, или все держится на линейках. Если без разделителей и зонирования конструкция разваливается, значит с ней что-то не так и стоит еще подумать над отступами внутри блоков и между ними — верните разделители, подвигайте, потом попробуйте еще раз убрать. Если не разваливается — возможно стоит оставить так. Иногда бывает что мозг по привычке считает что было лучше — попробуйте перебороть это ощущение и посмотреть свежим взглядом.
При этом я сейчас говорю только о вопросе баланса графики. Важная задача дизайнера — управление вниманием пользователя и в частности отделение важного от второстепенного. Приоритетные объекты можно выделять, а второстепенные глушить — делать это можно и фоном и разделителями, но с их необходимым минимумом.
В общем алгоритм такой: собираешь «на костылях», убираешь, возвращаешь только необходимые. Круто, когда костыли уже не нужны и все получается сразу.
А еще разделители шумят. Если есть выбор между разделением объектов с помощью разделителя, или цветовой заливки фона, то часто второе будет выглядеть лучше, если это заливка крупной области, а не множества мелких.
В любом случае если вы налиновали в интерфейсе зон, то в свободное время стоит попробовать от них избавиться, заодно посмотреть — действительно ли конструкция собрана хорошо, или все держится на линейках. Если без разделителей и зонирования конструкция разваливается, значит с ней что-то не так и стоит еще подумать над отступами внутри блоков и между ними — верните разделители, подвигайте, потом попробуйте еще раз убрать. Если не разваливается — возможно стоит оставить так. Иногда бывает что мозг по привычке считает что было лучше — попробуйте перебороть это ощущение и посмотреть свежим взглядом.
При этом я сейчас говорю только о вопросе баланса графики. Важная задача дизайнера — управление вниманием пользователя и в частности отделение важного от второстепенного. Приоритетные объекты можно выделять, а второстепенные глушить — делать это можно и фоном и разделителями, но с их необходимым минимумом.
В общем алгоритм такой: собираешь «на костылях», убираешь, возвращаешь только необходимые. Круто, когда костыли уже не нужны и все получается сразу.
А еще разделители шумят. Если есть выбор между разделением объектов с помощью разделителя, или цветовой заливки фона, то часто второе будет выглядеть лучше, если это заливка крупной области, а не множества мелких.
Стеки
#layout #sketch
Стеки — это главное (пока еще) (но не единственное) преимущество Скетча перед Фигмой. Функция стеков экономит огромное количество человеко-часов, избавляет от рутины и сохраняет точность макета. Стеки — это божественно, а работа без них полна боли и постоянных детачей.
До недавнего времени в Скетче их можно было делать с помощью плагина Layout от Anima App. Сейчас Скетч выкатил свою версию стеков для символов (что, безусловно, хорошо) и попутно сломал стеки Анимы в символах. Я надеюсь что еще починят — конечно новые элементы удобно делать с нативными стеками, но старые макеты как-то надо поддерживать.
Итак, плагин от Анимы. У него три функции: стеки, паддинги и пины. Я пользуюсь только стеками — паддинги и пины работают криво и частенько конфликтуют со стандартными функциями Скетча.
Плагин делает вот так:
#layout #sketch
Стеки — это главное (пока еще) (но не единственное) преимущество Скетча перед Фигмой. Функция стеков экономит огромное количество человеко-часов, избавляет от рутины и сохраняет точность макета. Стеки — это божественно, а работа без них полна боли и постоянных детачей.
До недавнего времени в Скетче их можно было делать с помощью плагина Layout от Anima App. Сейчас Скетч выкатил свою версию стеков для символов (что, безусловно, хорошо) и попутно сломал стеки Анимы в символах. Я надеюсь что еще починят — конечно новые элементы удобно делать с нативными стеками, но старые макеты как-то надо поддерживать.
Итак, плагин от Анимы. У него три функции: стеки, паддинги и пины. Я пользуюсь только стеками — паддинги и пины работают криво и частенько конфликтуют со стандартными функциями Скетча.
Плагин делает вот так:
Где его использовать
Символы с разным количеством контента. Самый явный пример: карточки новостей с разными заголовками:
Символы с разным количеством контента. Самый явный пример: карточки новостей с разными заголовками:
Media is too big
VIEW IN TELEGRAM
Больше никакого детача, все работает как надо и сохраняет зависимость с мастер-символом