Post #115

Давно я не писал про свою “дизайн-систему” — да и занят был кучей дел. Но последние недели я, выкраивая время и пытаясь поработать над личными проектами, буксовал от некоторых проблем с пиктограммами (накопилось страшно много косяков, включая баги в Figma, заставлявшие мучиться каждый раз, когда мне надо было добавить иконку). Решил сделать волевое усилие, и, наконец, прибраться в библиотеке иконок, которую я потихоньку делал для себя. Не только прибрался, но и сделал некий пайплайн, чтобы всё это можно было поддерживать (рисуется иконка, далее генерируются SVG и PNG, делается иконочный шрифт для обхода косяков с цветами в фигма-компонентах), и, что может заинтересует, сделал некое подобие сайта с иконками — вдруг они понадобятся и вам. Вот эти игры в бисер: icons.protraktor.design Пара слов о том, почему всё такое: 1. Я, как всегда, хотел сделать максимально невыразительную стилистику иконок. Если лучший интерфейс — это отсутствие интерфейса, то я считаю, что лучший дизайн утилитарных систем — это отсутствие дизайна (и пусть меня побьют маркетологи). Иными словами, многие доступные библиотеки слишком трендовы и обладают явным настроением, характером (и сиюминутностью) — как шрифты в модных журналах. Я же люблю, когда системы общаются со мной на чистом языке без акцентов, выпендрежа и настроения. Как дорожный знак или надпись Ариалом — они не пытаются быть дружелюбными, игривыми, грустными или какими-то ещё. Это я и попытался сделать в стилистике иконок — максимально выкинуть (насколько это возможно, конечно, при моих ресурсах) любые игривости и трендовость. Конечно, полностью это невозможно сделать, у всего есть характер, даже у самых скучных людей, справочников и автомобилей. Но я попытался —(хотя, конечно, видны хвосты Material Design, иконками из которого я пользовался годами. 2. Часто для приборных человеко-машинных интерфейсов (HMI) нужны иконки разных размеров в одном экране (не говоря о разных платформах — мобильных, встроенных, настольных). Но если просто их масштабировать, то вырастает не только иконка, но и все её обводки и линии становятся кратно жирнее, плюс могут не попадать в пиксельную сетку — а экраны в профсистемах часто не хвастаются высокими DPI. Просто увеличивать размер — нормально, но иногда хочется, чтобы единственным способом контраста был размер, без изменения толщин штрихов или закруглений — опять же, для минимизации выразительности и визуального шума. Поэтому в библиотеке четыре размера, и все они используют (опять же, скучно и формально) один подход к штрихам, закруглениями и т.п. Размер в 18 пикселей я потом, вероятно, грохну, но это мой эксперимент по предельным состояниям — и пусть пока будет (иногда и он нужен для низкокачественных встроенных сенсорных экранов). Вообще, для некоторых пиктограмм нужны даже ещё более крупные размеры, типа 96px, но не всё сразу. 3. Но при всем желании оставаться скучным, я также немного добавил и немного нюансировки. Изменение размера допускает изменение детализации иконки — чем она больше, тем больше можно добавить нюансов, что особенно важно для навигационных иконок на каком-нибудь дэшборде (как меню Пуск или главный экран телефона). Поэтому в этом эксперименте некоторые иконки крупных размеров содержат больше деталей, чем иконки поменьше. 4. Понятно, что мои ресурсы очень ограничены, поэтому набор очень базовый, а сам сайт примитивный — скорее демонстратор, чем то, что могут предложить materialdesignicons.com и другие ресурсы. Но се ля ви. 5. Есть некоторые другие соображения про полиграфичность (использование для печати и физических органов управления), пиксельность на Low-density дисплеях и т.п., но они пока не полностью выражены, есть только задел, поэтому опущу эти мелочи. В принципе всё. Это отсечка номер ноль — там полно пространства для улучшения (например, хромает ощущение масштаба разных иконок одного размера, не хватает некоторых очевидных иконок, плюс названия еще нужно чистить), но с созданным пайплайном, наконец, смогу это улучшать и пополнять стабильно. Если вам они, вдруг, тоже пригодятся — пользуйтесь на здоровье.