Protraktor

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

Визуализация ветра и его порывов Шведским гидрометеорологическим институтом Ссылка

(К репосту ниже) Мне очень нравится этот подход по визуализации ветра на карте. Потрясающая плотность с сохранением чистоты вида — часто для того, чтобы показать среднюю скорость ветра и скорость максимальных порывов (для моряков, как и много кого еще, важны оба параметра) используются две разных визуализации. Тут же ребята просто подчеркнули штриховкой те места, где порывы значимо выше (больше чем на 10 узлов) — это отличный баланс, избавляющий от избыточности с сохранением пользы и понимания ситуации.

https://www.pushconf.tv/dark-mode-is-wrong/ — не смотря на кликбейтный заголовок, довольно примечательное выступление по поводу «а так ли нужен темный режим?» с отсылками к академическим исследованиям. Далеко не все факторы и ситуации рассмотрены (на днях на новой работе я был очень рад услышать поддержку коллеги «ну постойте, мы ж обсуждаем ночной, а не темный режим» — а это совсем не затронуто), но всё равно хорошая попытка привлечь внимание к определенной мифологизации тех или иных подходов в проектировании интерфейсов, особенно в масс-маркете. Особенно понравилось (актуально для мониторинговых и аналитических систем), что по одному исследованию, если упростить, инверсные палитры хороши для детекции изменений, а светлые — для анализа информации. Короче, стоящий способ потратить 30 минут

Микрохак с Фигмой, которая, как известно, работает чуть менее чем плохо с организацией страниц и ассетов. Используя капсы, разделители и стрелочки “↳“ с пробелами, можно получить видимость структуры (например, дробить финальные макеты и итерации, страницы с компонентами и т.п., ну или как тут с компонентами моего UI-Kit) Но вообще, реквест добавить папки и иерархию страниц висит уже сто лет. Но мы же знаем, как быстро в ней появилась темная палитра.

Спасибо всем за внимание! В след раз попробую делать запись, ну и менее сумбурно/хаотично, но это требует большей подготовки (для чего нужна мотивация, конечно, но с этим придумаем что). Надеюсь, что для присутствующих было лучше так, полезно, чем совсем никак :)

Live stream finished (50 minutes)

Live stream scheduled for Nov 3, 2022 at 16:00

Live stream started

Так, друзья, напомню, что уже через пару часов будем говорить про семантику в интерфейсах. Ради такого дела подготовил простенькую презентацию уже на примерно 40 слайдов, поглядим что получится (и сколько придёт). Если опыт будет удачным — а об этом судить только вам — можно будет периодически продолжать. P.S. Как минимум постараюсь чтобы не было скучно, как всегда в своей манере буду с шутками и прибаутками рассказывать о не самом очевидном — те кто застал мои лекции знают

А вообще, давайте попробуем поговорить о всей этой семантической интерфейсной истории в четверг, в 19:00 МСК. Я еще не пробовал тут, в телеге, но говорят что вещаю я лучше чем пишу. Затронем такие темы: - Эксплицитные и имплицитные сообщения - Когда “Хорошо” равно и не равно “Не плохо” - Потрогаем цветовые коды и почему светофор зеленый - И, быть может, затронем еще вопрос инерции — что происходит между “вкл” и “выкл”. Будут как абстрактные слайды, так и примеры из живых продуктов. Сейчас попробую запланировать, но поскольку первый блин может выйти комом, не судите строго если будет корявее, чем хотелось бы, буду учиться.