Левон, а если в компании несколько стеков, например Vue, React, а ещё есть мобильные приложения, как бы ты автоматизировал управление UI'ем всех проектов компании?
Для начала нужно забыть про повышенные плотности экранов (retina) и считать их в дипах (dp у Андроида) или поинтах (pt у Айос).
За отправную точку для сетки вы взяли количество постеров, которые хотим видеть на том или ином экране. На телефонах получилось от 2 до 4 колонок. На всём остальном от 3 (Андроид фаблеты шириной 600 dp) до 7 (1280). Ширину всех телеэкранов мы решили считать равной 960 dp (5 колонок), поэтому им подходят макеты среднего планшета. В зависимости от платформы (Android TV, tvOS, Smart TV) вёрстка просто умножается на коэффициент (скейлится) и всегда выглядит одинаково.
У сетки по сути есть один основной параметр — минимальная ширина одной колонки и один формальный — максимальная ширина всей сетки (мы решили, что не будем заполнять контентом экраны десктопов шире 1280 pt). Запускаясь на устройстве, приложение/сайт измеряет ширину экрана/окна и считает сколько колонок в неё помещается. При расположении элементов на экране, их привязка и ширина задаётся не в хардкодных пикселях, а в колонках, вот и всё. Например промо блок вверху главной страницы ivi.ru всегда занимает все колонки и сетка сама ему передаёт нужную ширину для того или иного окна. Галерея рисует столько постеров в подборке, сколько есть колонок. А размер каждого постера берётся из текущей ширины колонки.
Да, примеряли Abstract и осознанно отказались. Это прилично усложняло наши процессы, а смысла поддерживать мастер-макет = продакшн мы не увидели. К тому же это ещё один сторонний инструмент, а значит зависимость от чужой технологии и её багов. Наш источник «правды» для UI — дизайн-система, для UX — продакшн. Минусы нашего подхода тоже есть. Со временем макетов становится много и найти актуальное состояние сложно. Сделают подобное в Скетче, может попробуем ещё раз.
Спасибо.
Да, для универсализации UI, вёрстка под телеэкраны умножается на различные коэффициенты, в зависимости от платформы. А на этапе дизайна мы считаем их все равными шириной в 960 pt.
Речь про широкие экраны веба, как я понимаю? Текущая сетка адаптируется до 1280 pt и мы пока думаем, что делать с бо́льшими размерами.
Sketch. Да, не всё гладко с версионностью и нет командного доступа к одному проекту, но почти весь UI подключён библиотекой, а остальное обещают скоро докатить.
Левон, а если в компании несколько стеков, например Vue, React, а ещё есть мобильные приложения, как бы ты автоматизировал управление UI'ем всех проектов компании?
За отправную точку для сетки вы взяли количество постеров, которые хотим видеть на том или ином экране. На телефонах получилось от 2 до 4 колонок. На всём остальном от 3 (Андроид фаблеты шириной 600 dp) до 7 (1280). Ширину всех телеэкранов мы решили считать равной 960 dp (5 колонок), поэтому им подходят макеты среднего планшета. В зависимости от платформы (Android TV, tvOS, Smart TV) вёрстка просто умножается на коэффициент (скейлится) и всегда выглядит одинаково.
У сетки по сути есть один основной параметр — минимальная ширина одной колонки и один формальный — максимальная ширина всей сетки (мы решили, что не будем заполнять контентом экраны десктопов шире 1280 pt). Запускаясь на устройстве, приложение/сайт измеряет ширину экрана/окна и считает сколько колонок в неё помещается. При расположении элементов на экране, их привязка и ширина задаётся не в хардкодных пикселях, а в колонках, вот и всё. Например промо блок вверху главной страницы ivi.ru всегда занимает все колонки и сетка сама ему передаёт нужную ширину для того или иного окна. Галерея рисует столько постеров в подборке, сколько есть колонок. А размер каждого постера берётся из текущей ширины колонки.
Надеюсь объяснил хоть немного!)
Да, для универсализации UI, вёрстка под телеэкраны умножается на различные коэффициенты, в зависимости от платформы. А на этапе дизайна мы считаем их все равными шириной в 960 pt.
Речь про широкие экраны веба, как я понимаю? Текущая сетка адаптируется до 1280 pt и мы пока думаем, что делать с бо́льшими размерами.