Protraktor Kit: причины и цели задумки
Небольшой анонс про (недо)дизайн-систему Protraktor Kit, которой я занимаюсь и о деталях разработки коей я буду делиться тут.
Эта статья открывает череду материалов, посвященных моему pet-проекту — попытке выработать дизайн-систему, отражающую мои ценности и опыт по проектированию интерфейсов профсистем (то есть что я описываю здесь). Судя по комментариям в телеграм-канале (где жизни несколько больше сейчас), это вызвало определенный интерес.
Конечно, дизайн-системой в общепринятом смысле это сложно будет назвать еще долгое время, учитывая ограниченность моих ресурсов — вряд ли я дойду без сторонней помощи до создания переиспользуемых программных компонентов. Скорее, это будет визуальное воплощение различных принципов и идей в компонентах Figma и их поведении, поэтому и называется это kit, а не design system.
С другой стороны, делаю я это не из чистого абстрактного интереса, а чтобы использовать в своих многочисленных проектах, типа лодочного инструмента, о котором я пишу в другом блоге, поэтому какая-то степень имплементации в коде мне все же нужна — хотя бы в CSS или Qt Stylesheet (QSS). Но это не единственная причина.
Другая заключается в том, что в коммерческой разработке мы часто еще более ограничены ресурсами, вынужденно прибегаем к компромиссам, и многие вещи не удается сделать достаточно системно и осмысленно — работает правило «сойдёт» «достаточно». Здесь же, учитывая что я не ограничен сроками (то есть скорее умру или совершу акт воинствующего неповиновения «уйти-из-айти»), я волен отражать подходы настолько глубоко, насколько мне хочется, а не «надо сдать в срок». Поэтому же я надеюсь, что многие из моих идей и желаний экспериментов, которые возникали в процессе коммерческой работы, но никогда не были реализованы, найдут тут своё место.
Ну и последняя причина — крайне сложно найти дизайн-системы, хорошо работающие для профсистем и удовлетворяющие еще и моим запросам и широте охвата (например, покрывать и яркий солнечный свет, падающий на дисплей, и ночь в море — если это, например, яхтенный прибор). А раз такую фиг найдешь, волей не волей придется сделать её самому. Иначе говоря, Material Design хорошо работает с мобильными телефонами, IBM Carbon с веб-интерфейсам, но все они откровенно плохи со встроенными (embedded) системами, не очень органичны с родным десктопом, да и с плотностью информации (особенно у Material) или ситуациями работы в реальном времени у них есть определенные беды (например, модные кислотные цвета, из-за которых не заметишь что где-то загорелся индикатор-лампочка и от которых утомляется восприятие). Бед вообще много для кейсов, покрытых профессиональным контекстом.
Но пока хватит о причинах, перескочу к целям, которые я ставлю, хотя они уже частично понятны.
Цели
Итак, вот что я хочу когда-нибудь достичь, от тривиального к более сложному:
- Система должна поддерживать цветовые палитры, покрывающие самые разные условия естественного и искусственного освещения. То есть светлой и тёмной, подходящих больше для дома и офиса мне явно не хватит. Например, система должна принципиально покрывать ночное зрение в условиях открытого моря (или ночного шоссе), то есть будет чисто красная палитра.
- Также kit должен поддерживать различную плотность информации — для десктопных сценариев (где кнопка высотой 20 логических пикселей и базовый шрифт 11 кегля являются нормой), веба (допустим, 14 кегль), мобильных приложений (16-ый и кнопки высотой 48 пикселей), специфической встройки, где приборная панель с парой виджетов и несколькими кнопками на полэкрана — норма. Термин «плотность» тут не просто так — всё зависит как от количества информации, которую мы хотим видеть одновременно, так и от размеров экрана, в который мы хотим это упихнуть.
- Kit должен быть максимально консервативным, юзабельным и спокойным, заточенным под долгие взаимодействия, а значит нейтральным. «Эффективность важнее эффектности» тут как принцип — который в том числе значит, что в условиях реального времени вспыхнувшая тревога должна быть заметной на общем спокойном фоне, а значит никаких насыщенных тонов и прочей трендовой мишуры для элементов, не являющихся критическими или семантическими индикаторами. Конечно, полностью отойти от текущих трендов я не могу, ибо они сами по себе являются пользовательским опытом, который нужно учитывать, но все же это будет скорее страшная и унылая система, чем запоминающаяся и рассчитанная на первичную «вау» реакцию.
- Элементы kit должны подходить для различных технических средств взаимодействия – мыши, клавиатуры, сенсорных экранов, а также, в светлом идеальном будущем, джойстиков или расположенных вокруг экрана кнопок, крутилок и т.п. Разумеется, невозможно сделать один элемент для всего этого — поэтому в системе будет большая вариативность одного и того же компонента (например, слайдер под палец и слайдер под мышь).
- Kit должен содержать элементы, характерные для промышленных HMI, типа SCADA-систем. То есть различные виды круговых и столбчатых индикаторов, графиков и прочих виджетов, средств уведомлений и тревог и проч. То же относится и к элементам управления — переключателям, шкалам времени, средствам ввода по маске и проч.
- Понятно, что весь этот массив должен быть документирован — описаниями пограничных условий для выбора тех или иных элементов управления, паттернов взаимодействия и т.п. Иначе можно свихнуться.
Другие цели тоже есть, но они куда более частные, поэтому о них буду писать по ходу.
Ограничения и доступность kit’а
Как на большом судне всегда что-то сломано просто потому что оно большое, а экипаж перегружен разными обязанностями, так и в случае с kit’ом, понятно, не получится достичь всего даже за большое время. Но буду выкладывать что-то вместо ничего — и, разумеется, шлифовать все придется по несколько раз. Надеюсь, что как минимум какие-то задумки и ход размышлений будут кому-нибудь полезными.
Писать о проработке Protraktor Kit я буду как в самостоятельных статьях, так и в статьях на темы каких-то принципов. На мой взгляд это лучшая синергия (ой, стоп-слово) — рассказать о проектировании индикаторов и приложить ссылки на фигму с ними же из kit’а. Посмотрим, как это пойдёт (хотя имеющиеся статьи уже используют в картинках некоторые компоненты из задумок кита)
Сейчас в Инвентаре уже выложена старая альфа-версия кита. Она мне во многом не нравится (большая часть целей не достигнуты, а масштабируемость/поддерживаемость/переиспользуемость того что есть — никакие), поэтому я ее уже активно переделываю и буду как раз и делиться процессом. Впрочем, на базовом уровне это будет внешне очень похожая система компонентов, просто более системная и навороченная. Старье через какое-то время будет убито, а структура сайта немного поменяется, когда будет хоть какой-то результат. Зря я что ли ради этого личную Фигму оплачиваю с учетом всех санкций и прочих ограничений.
И последнее. Разумеется, весь kit будет доступен в виде MVP как библиотека Figma, описание, а также файлы CSS и QSS на гитхабе. Напомню, что я совсем не разработчик, поэтому последние скорее будут странными полу-референсами, чем готовыми к использованию компонентами.
Следите за обновлениями, что ещё сказать.