Полупрозрачные элементы
Бывает заходишь на какой-то сайт, и видишь что там применяются светло-серые разделители и различные заливки областей — белый, серый, возможно цветной. И разделители хорошо выглядят на белом, а на сером почти не видны, или явно выглядят инородно на цветном фоне. Пример, быстро состряпанный на коленке (см. разделители на желтом фоне):
Бывает заходишь на какой-то сайт, и видишь что там применяются светло-серые разделители и различные заливки областей — белый, серый, возможно цветной. И разделители хорошо выглядят на белом, а на сером почти не видны, или явно выглядят инородно на цветном фоне. Пример, быстро состряпанный на коленке (см. разделители на желтом фоне):
Что же делать?
Можно прорабатывать каждый случай отдельно, но на большом проекте это сожрет кучу времени, к тому же это несистемно. Удобнее в таких элементах применять прозрачность. Если тот же разделитель сделать не сплошным серым, а, например, черным с непрозрачностью 85%, то он автоматически на белом фоне будет выглядеть светлее, на сером чуть темнее и будет иметь оттенок фона на цветном фоне:
Можно прорабатывать каждый случай отдельно, но на большом проекте это сожрет кучу времени, к тому же это несистемно. Удобнее в таких элементах применять прозрачность. Если тот же разделитель сделать не сплошным серым, а, например, черным с непрозрачностью 85%, то он автоматически на белом фоне будет выглядеть светлее, на сером чуть темнее и будет иметь оттенок фона на цветном фоне:
Это может показаться несущественным для сайта на несколько страниц, но когда у тебя проект на 200 экранов, начинаешь ценить возможность не следить за каждым отдельным случаем применения элемента.
Используйте этот способ также в случае иконок, подложек и любых других элементов, которые могут быть на неравномерном фоне.
Используйте этот способ также в случае иконок, подложек и любых других элементов, которые могут быть на неравномерном фоне.
Важный момент. Аккуратно применяйте эту логику к шрифтам. Хак хорошо работает с векторными элементами и элементами верстки, но браузеры хуже рендерят полупрозрачные тексты — на неретиновых экранах на винде сглаживание полупрозрачного шрифта заметно хуже сплошного. Ниже скриншот из виндового хрома — в первом случае сплошной светло-серый, во втором аналогичный ему черный с прозрачностью. Как видно, эти два варианта заметно отличаются.
Оригинал картинки без артефактов: https://yadi.sk/i/7qEQv3g9ncqgrA
Оригинал картинки без артефактов: https://yadi.sk/i/7qEQv3g9ncqgrA
Yandex.Disk
[email protected]
View and download from Yandex.Disk
Способ организации разделителей в файле
В прошлом посте я рассказал, что лучше применять полупрозрачные разделители. В этом я напишу, как я их организую в Скетче и в Фигме.
В Скетче очень удобно завести группу стилей для разделителей, чтобы значения цвета были одинаковыми для всего интерфейса. При этом сам бордер мы задаем параметром Inner shadow — это удобно, т.к. прямоугольник с этим стилем является одновременно и бордером и отступом до него. То есть если нам нужен бордер на расстоянии 32px от элемента выше, то мы просто делаем прямоугольник с высотой 32px и применяем к нему стиль border / bottom.
Так вот, обычно я создаю группу для четырех бордеров — сверху, снизу, слева и справа. Структура этой группы показана на скриншоте ниже (black-10 обозначает, что это черный с непрозрачностью 10%)
В прошлом посте я рассказал, что лучше применять полупрозрачные разделители. В этом я напишу, как я их организую в Скетче и в Фигме.
В Скетче очень удобно завести группу стилей для разделителей, чтобы значения цвета были одинаковыми для всего интерфейса. При этом сам бордер мы задаем параметром Inner shadow — это удобно, т.к. прямоугольник с этим стилем является одновременно и бордером и отступом до него. То есть если нам нужен бордер на расстоянии 32px от элемента выше, то мы просто делаем прямоугольник с высотой 32px и применяем к нему стиль border / bottom.
Так вот, обычно я создаю группу для четырех бордеров — сверху, снизу, слева и справа. Структура этой группы показана на скриншоте ниже (black-10 обозначает, что это черный с непрозрачностью 10%)
В самом стиле есть только одна внутренняя тень с отступом в 1px в нужную сторону, нулевым размытием и полупрозрачным цветом, все остальные свойства слоя мы убиваем:
После мы просто создаем в нужном месте прямоугольник, делаем его высоту такой, сколько у нас должно быть от разделителя до элемента (в данном случае 16px) и применяем стиль "border / black-10 / top" — получаем бордер правильного цвета на фиксированном расстоянии до нужного элемента.
В Фигме, к сожалению, такой способ не сработает — там при выключении заливки у слоя также перестает быть видна внутренняя тень. Поэтому в ней придется обходиться прямоугольником высотой (или шириной) 1px с нужным полупрозрачным цветом. Поскольку оперировать такими прямоугольниками не очень удобно — его сложно подцепить курсором, к тому же он будет добавлять 1px в ровный счет отступов и сбивать вертикальную сетку, то вы можете завернуть этот разделитель в компонент, прибить его к одному из краев и использовать такие компоненты так же, используем в скетче прямоугольник со стилем.
Разделитель — это костыль
#layout
На самом деле разделитель — это костыль. Ну, знаете, Вилларибо и Виллабаджо не смогли договориться и провели на земле линию краской (привет читающим это старперам, заставшим раннее российское ТВ).
В идеальном интерфейсе все объекты скомпонованы так, что не требуется ни разделителей, ни цветового разделения зон — объекты и группы объектов хорошо считываются и без них. Мы живем не в идеальном мире, поэтому разделители приходится использовать — иногда не хватает времени или мотивации, чтобы как следует закомпоновать блок, иногда места на экране мало, а необходимых объектов слишком много. Кроме того разделители часто становятся стилистическим ходом — у меня как раз в соседней вкладке открыт Искусство кино (https://kinoart.ru/), в котором именно так и сделано.
Однако если у вас нет задачи сделать отсылку к швейцарскому стилю, или брутализму, то стоит хотя бы двигаться в направлении идеального интерфейса и по возможности избавляться от линовки. Вот, кстати, пример от Apple:
#layout
На самом деле разделитель — это костыль. Ну, знаете, Вилларибо и Виллабаджо не смогли договориться и провели на земле линию краской (привет читающим это старперам, заставшим раннее российское ТВ).
В идеальном интерфейсе все объекты скомпонованы так, что не требуется ни разделителей, ни цветового разделения зон — объекты и группы объектов хорошо считываются и без них. Мы живем не в идеальном мире, поэтому разделители приходится использовать — иногда не хватает времени или мотивации, чтобы как следует закомпоновать блок, иногда места на экране мало, а необходимых объектов слишком много. Кроме того разделители часто становятся стилистическим ходом — у меня как раз в соседней вкладке открыт Искусство кино (https://kinoart.ru/), в котором именно так и сделано.
Однако если у вас нет задачи сделать отсылку к швейцарскому стилю, или брутализму, то стоит хотя бы двигаться в направлении идеального интерфейса и по возможности избавляться от линовки. Вот, кстати, пример от Apple:
Интерфейс без разделителей выглядит более изящно. У меня есть теория о том, что это ощущение «изящества» вызывается некоторым умственным напряжением, когда ты видишь невидимое, улавливаешь закономерности, как охотник в природе, но это тема для отдельного большого поста.
В любом случае если вы налиновали в интерфейсе зон, то в свободное время стоит попробовать от них избавиться, заодно посмотреть — действительно ли конструкция собрана хорошо, или все держится на линейках. Если без разделителей и зонирования конструкция разваливается, значит с ней что-то не так и стоит еще подумать над отступами внутри блоков и между ними — верните разделители, подвигайте, потом попробуйте еще раз убрать. Если не разваливается — возможно стоит оставить так. Иногда бывает что мозг по привычке считает что было лучше — попробуйте перебороть это ощущение и посмотреть свежим взглядом.
При этом я сейчас говорю только о вопросе баланса графики. Важная задача дизайнера — управление вниманием пользователя и в частности отделение важного от второстепенного. Приоритетные объекты можно выделять, а второстепенные глушить — делать это можно и фоном и разделителями, но с их необходимым минимумом.
В общем алгоритм такой: собираешь «на костылях», убираешь, возвращаешь только необходимые. Круто, когда костыли уже не нужны и все получается сразу.
А еще разделители шумят. Если есть выбор между разделением объектов с помощью разделителя, или цветовой заливки фона, то часто второе будет выглядеть лучше, если это заливка крупной области, а не множества мелких.
В любом случае если вы налиновали в интерфейсе зон, то в свободное время стоит попробовать от них избавиться, заодно посмотреть — действительно ли конструкция собрана хорошо, или все держится на линейках. Если без разделителей и зонирования конструкция разваливается, значит с ней что-то не так и стоит еще подумать над отступами внутри блоков и между ними — верните разделители, подвигайте, потом попробуйте еще раз убрать. Если не разваливается — возможно стоит оставить так. Иногда бывает что мозг по привычке считает что было лучше — попробуйте перебороть это ощущение и посмотреть свежим взглядом.
При этом я сейчас говорю только о вопросе баланса графики. Важная задача дизайнера — управление вниманием пользователя и в частности отделение важного от второстепенного. Приоритетные объекты можно выделять, а второстепенные глушить — делать это можно и фоном и разделителями, но с их необходимым минимумом.
В общем алгоритм такой: собираешь «на костылях», убираешь, возвращаешь только необходимые. Круто, когда костыли уже не нужны и все получается сразу.
А еще разделители шумят. Если есть выбор между разделением объектов с помощью разделителя, или цветовой заливки фона, то часто второе будет выглядеть лучше, если это заливка крупной области, а не множества мелких.