Поговорим о том, что красивого мы можем сделать в интерфейсе 1С, чтобы привлечь людей к нашему приложению и преодолеть у них боязнь и негатив по поводу 1С.
Начну с достаточно простых вещей и потихоньку будем углубляться в более хитрые и изощренные варианты использования.
Скетч / мокап / прототип / user-flow – инструменты и методы проектирования и дизайна интерфейса
Начнем с прототипирования.
Интерфейс нужно продумать.
Пока вы его не продумали, не отрисовали вместе с пользователями или дизайнерами что-то подобное, а просто накидали кнопочки, это не интерфейс, а некий набор элементов, которыми пользователи могут оперировать, а ваши мужественные аналитики - пользователей обучить, как этим пользоваться.
Такой интерфейс используется, к примеру, в SAP, где пользователю нужно по инструкции для конкретной операции указать конкретный номер транзакции, потом ввести значения в несвязанные поля и нажать несколько кнопочек.
Это не наш путь – мы же хотим быть модными и молодежными. Поэтому продукт мы начнем создавать с рисования интерфейса продукта на бумаге или в сервисе для рисования набросков…
После рисунка обычно строится мокап.
В кейсе с 1С мокап, в принципе, можно пропустить. Можно использовать уже либо набросок интерфейса внутри 1С, либо тот же самый 1C:Maker, либо нарисовать интерфейс 1С в Figma (и даже ничего страшного, что он будет не похож).
Ваша задача – сделать ваш интерфейс максимально похожим на то, что вам сначала нарисовал дизайнер. В процессе перехода к этому вы сделаете очень много правильного, хорошего и полезного.
Кроме скетча, который представляет собой UI, нужно сделать ещё кое-что: продумать UX.
Если в вашем интерфейсе больше, чем одна форма или если форма в процессе заполнения меняется, вам перед началом разработки нужно нарисовать User Flow – схему с переходами от одного экрана к другому в зависимости от тех или иных событий.
Если вы этого не сделали, у вас опять интерфейса нет. У вас есть набор кнопочек, полей и переключателей, возможно даже весьма красивых…
Причем UX в 1С можно сделать нормальный, хороший и полноценный, но почему-то этим редко кто занимается.
И финал всей этой истории – прототип.
Для 1С появился замечательный инструмент 1С Maker, в котором может работать дизайнер.
Для дизайнера важна насмотренность. Он видит зумеров, которые смотрят одни и те же интерфейсы везде. У этих зумеров возникает диссонанс, когда они видят 1С и Тик-Ток. Не получается, мозг не воспринимает, не работает.
Дизайнер вам поможет, он немного подстроит интерфейс под то, как мыслит ваша целевая аудитория.
Если ваша целевая аудитория не зумеры, а бухгалтеры, то ваш интерфейс должен быть конечно максимально похож на 1С:Бухгалтерию. Но если вдруг в вашу целевую аудиторию внезапно входят не только бухгалтеры, начинаются проблемы, и здесь без дизайнера никак.
В качестве альтернативы 1C Maker для прототипа можно использовать ту же самую Figma.
Единственное – если у вас десять экранов, построить все переходы и грамотно продумать прототип в Figma – это, конечно, дорого. И в кейсе с 1С я бы уже либо ограничился какими-нибудь элементарными вариантами, либо вообще этого делать бы не стал.
Возможности платформы 1С «из коробки»
Следующая история – это возможности, которые есть в платформе «из коробки».
Чтобы их использовать, вам не нужно ничего придумывать, не нужно никак изворачиваться. Потом я расскажу, как можно еще извернуться. Но перед этим нужно убедиться, что все знают возможности, которые уже есть, потому что не всегда это так.
Во-первых, темы оформления.
Темы оформления появились недавно, но сколько вы видели розовых 1С? Это не моя картинка, она из какой-то публикации с Инфостарта. Выглядит – вырви глаз.
А вот этот вариант уже выглядит вполне прилично – если клиент вашего онлайн-сервиса представитель молодежи, такой интерфейс будет продаваться намного лучше.
Главное – правильно подобрать цветовую гамму, чтобы она не была «вырви глаз». Если не знаете, как это делать – заходите на сайт material.io, там есть все цветовые гаммы, разложенные по тому, как их рекомендует Google.
Используйте их, и проблем с интерфейсом не возникнет – это будет выглядеть стильно, современно, молодежно.
Еще мало кто знает про режим основного окна клиентского приложения. Он позволяет управлять окном 1С, и все 1С-ное из него исключить.
-
В режиме «Обычный» видно все.
-
В режиме «Рабочее место» отключены все панельки.
-
Режим «Встроенное рабочее место» нужен, когда у вас 1С встроен в сайт, он особо ничем от режима «Рабочее место» не отличается.
-
В режиме «Полноэкранное рабочее место» нет ничего, кроме кнопки «Закрыть».
-
В режиме «Киоск» кнопки «Закрыть» тоже нет.
Используя эту штуку, вы можете сделать из 1С чистый лист – что хотите, то в интерфейсе и рисуйте. Вы можете сделать 1С непохожим на 1С вообще. Даже используя штатные возможности платформы.
Как собрать аналитику действий пользователя
Собирайте аналитики по тому, какие данные у вас пользователи реально читают, какие формы они открывают, что они реально смотрят.
В 1С сделали этот механизм для вполне определенных целей – на слайде из контекста видно, что фиксируется информация о том, кто смотрел персональные данные.
Тем не менее этот механизм можно использовать везде – для любого документа и любого справочника. Ничего не нужно дописывать, просто включаете в журнале регистрации события, и, пожалуйста, у вас регистрируются все доступы к информации, как бы они не были совершены. Вы реально будете знать, какими данными в вашей системе пользуются. И это – обычный журнал регистрации.
Потом данные журнала регистрации можно проанализировать. Для этого их нужно выгрузить в ClickHouse – из текстового файла закинуть в табличку базы данных. С этим, я надеюсь, все справятся.
Все это подключается очень просто в пару кликов за достаточно небольшую сумму, в отличие от большого локального Elastic, который нужно разворачивать, настраивать, Kibana ставить.
Зато можно собрать всю аналитику – все, что анализируют по всем кликам, по всем формочкам. Это очень важно, вы будете знать, как вашей системой люди реально пользуются.
Графическая схема 1С – используйте по максимуму
Графическая схема недооценена.
Когда мы продаем платформу 1С клиентам, мы позиционируем ее как LowCode платформу, а в любой LowCode платформе графическая схема должна быть обязательно.
Но мы в 1С графическую схему используем крайне редко. Тем не менее, графической схемой можно оперировать программно, ее можно сериализовать, десериализовать, она может быть использована в пользовательском режиме. Даже картинки можно вставлять другие.
И чем больше в интерфейсе будет таких схем, чем больше процессов вы разложите именно так – тем дружелюбнее ваша система будет восприниматься для пользователя. Даже с учетом ограничений той же самой графической схемы.
Адаптация под разные типы устройств. PWA и мобильная платформа
Обязательно нужно сказать про мобильность. Казалось бы, мобильный клиент – что про него говорить?
Мобильный клиент недооценен.
Если сравнивать его возможности с популярной LowCode платформой Bubble, в которую вложили кучу денег, то Bubble не может того, что может 1С с мобильным клиентом. В Bubble есть вполне очевидные ограничения, которые связаны с бэкендом.
Возможности мобильной платформы реально шире.
Мобильная платформа 1С может один и тот же код использовать в вебе, в десктопе, в мобильной версии. И мобильная платформа может работать в офлайне.
А те LowCode-платформы, которые вам сейчас везде продают, только начинают этому учиться. 1С у нас уже это умеет! Это круто. Мы привыкли это обесценивать, а таких решений в мире практически нет.
Дальше – PWA, веб-клиент, который может работать в офлайне. Вы на рабочий стол мобильника добавляете ссылку на веб-клиент и он у вас запускается буквально за считанные секунды. Практически то же самое, что мобильная версия.
Пользователю PWA-приложения можно отправлять push-уведомления. И эти push-уведомления будут приходить даже тогда, когда страница закрыта. Казалось бы, ничего нового, но это прикольно – это одна из фич, которую сейчас далеко не каждый онлайн-сервис имеет.
Некоторые подходы и особенности работы с WebKit
Что мы можем сделать с WebKit? Здесь можно сделать очень многое, вплоть до рисования розовых пони. Но я буду говорить только про те фичи, которые в обычном интерфейсе платформы сделать трудно или нельзя.
Если вам кто-нибудь скажет, что 1С не подходит для SCADA-систем или еще чего-нибудь – неправда. Для всего подходит.
1С-никам осваивать SPA-решения бессмысленно. Вы и так SPA пишете, потому что веб-клиент 1С – это SPA. Вам Vue, React и Angular нужны в каких-то кейсах, но не так сильно. Вы уже это делаете, вы уже это умеете, у вас уже LowCode-фреймворк! Поэтому нужно учиться делать то, что базовый SPA из коробки не умеет.
Пишите на ванильном JS, а если хочется сделать что-то экстраординарное, используйте SVG и HTML/Canvas.
Чтобы использовать в 1С SVG, потребуется несколько библиотечек:
Первая из них – Raphael.js. Это основная библиотека, которая позволяет вам рисовать на экране что угодно и как угодно. Она прикольная и самая популярная. Рисуйте все, что хочется – закрашенные кружочки рисуются в три строки кода, и в принципе, если такая цель есть, то сделать круглые кнопки несложно :).
Примерно так люди могут без дизайнера накидать интерфейс на SVG для 1С. Если подключится дизайнер, можно сделать очень круто.
А вот пример SCADA-системы, когда у вас какой-то котел нагревается, а вы эти метрики где-то храните:
Все это рисуется в 1С с помощью Snap.svg. Более того, если вы выберите режим запуска «Киоск», у вас все лишнее по бокам уйдет, останется только основной экран, где вы будете все так же хранить и обрабатывать информацию – вводить метрики и вносить начисления. Более того, всем этим можно управлять. Это не проблемно, это быстро, это LowCode.
Animejs – это SVG-шная библиотека, которая позволяет делать красивую анимацию, если нужно что-то представить в крутом варианте:
Если SVG не хватает, есть HTML Canvas:
Вот его пример использования:
На Инфостарте много решений, где нужно выделить кусочек на экране через внешнюю компоненту, но это бессмысленно. Вместо внешних компонент можно использовать обычный HTML и библиотеку Fabric.js – она позволяет делать вот такие цветные рамочки.
На HTML Canvas можно делать даже игры. На картинке – пример с Инфостарта. Вы в 1С можете сделать даже онлайн-стратегию.
D3, Fabric, Conva, Pixi и прочие JS библиотеки, которые могут быть полезны
Есть еще ряд полезных библиотечек, которые позволят вам сделать что-то особенное на базе WebKit.
Самая известная библиотека, которую нужно знать каждому 1С-нику – это D3:
Через D3 вы можете сделать практически любое представление данных, которое только можно придумать. Хотите сделать пузырьковую диаграмму – пожалуйста. Хотите выделить связи графа – без проблем. Причем это все делается элементарно. Вы формируете некий JSON, отдаете его библиотеке, она его отрисовывает.
Для этого не нужно быть великим JS-разработчиком, нужно просто овладеть несколькими методами. Это осваивается за час, два, три.
И потом не нужно ныть, что у 1С некрасивые графики, которыми невозможно пользоваться. Сделайте красивые – это займет два-три часа.
Результат работы библиотеки Fabric я уже показывал на экране. Это абсолютно замечательная штука. Если у вас есть какая-то картинка, на которой нужно выделить какой-то элемент и куда-то его перетащить с помощью drag and drop – обратите внимание. Не нравится графическая схема 1С – пожалуйста, на Fabric.js сделайте сами за пару дней.
Практически ничего из JS для этого знать не нужно – вы просто используете конкретную библиотеку с конкретными методами со всеми решенными вещами.
Если сравнивать, сколько времени уйдет на освоение полностью DOM-модели графической схемы и сколько уйдет на освоение Fabric, на DOM-модель графической схемы вы потратите больше.
Если хочется сделать из 1С CAD-систему, чтобы пользователи вам что-то рисовали в форме заказа – пожалуйста, используйте библиотеку Konva.
Конечно, работать с CAD-системой немного сложнее, придется разобраться, как она все это рисует, куда что передает, но для построения 3D-модели склада сейчас уже не нужно использовать внешние компоненты для CAD. Все это делается без внешних компонент – легко осваивается стандартными средствами веба.
Если хочется сделать совсем крутую анимацию – есть Pixi:
В нем можно сделать анимацию с картинками, с раскраской, с видеоэффектами.
Набор, который я сейчас показал – это примерно все, что нужно знать из веба для 1С.
Дальше я перейду к главной теме – это Interface hack.
User Onboarding в 1С приложениях. Методы реализации
Какие примеры модификации интерфейса 1С можно привести?
Начнем с того, что есть такая штука как онбординг.
Я считаю, что онбординг должен быть практически в каждом сервисе – это прямо маст хэв.
Чтобы вашим онлайн-сервисом кто-то начал пользоваться, нужно сделать для него стартовый помощник с подсветкой отдельных элементов и расшифровкой, куда для какой цели нажимать.
Онбординг вы можете оформить в виде пошагового мастера, в котором советы листаются вперед/назад. Каждый совет можно ставить на паузу, добавлять к нему звуковое сопровождение, проигрывать в окне совета видео. Это позволит вам привлечь пользователей.
Все это делается при помощи библиотеки Driver.js. Есть другие варианты, но Driver.js – наиболее гибкий, он позволяет легко встраиваться в 1С.
Метрика и онлайн-чат
Сбор метрик. Если не хочется ковыряться в журнале регистрации, вы можете добавить в 1С Яндекс.Метрику. Это тоже не большая проблема – просто вставляете стандартный код, и все.
Более того, вы можете добавить онлайн-чат. Это позволит вам более быстро, качественно и хорошо коммуницировать с вашими пользователями.
Здесь видно, что Яндекс.Метрика может посчитать посетителей и их просмотры в 1С.
С метрикой есть определенные сложности – хочется, чтобы нормально вебвизор работал, но с 1С вебвизор все-таки пока что работает плохо.
Темы оформления и базовые настройки
Перейду к главной истории – это кастомное оформление:
Вы можете сделать 1С в стиле киберпанк.
Это – полчаса работы верстальщика.
Дальше – 1С в стиле material.
Более того, здесь есть кнопка «Visual Studio Code», при наведении на которую открывается элемент онбординга с картинкой, ссылкой и подсказкой. Вы кликнете по ссылке и сможете скачать Visual Studio Code.
Это дружелюбный интерфейс, который делается быстро, версткой. Это не те мифические js-разработчики, которые иногда получают даже больше чем 1С-ники. Это верстальщики, которых на зарплату 1С-ника можно нанять несколько…
Это тоже 1С в стиле material:
Причем здесь дизайнер не работал вообще. Он бы ужаснулся, если бы это увидел, но уже даже без дизайнера здесь интерфейс выглядит более современно.
Material – это официальная рекомендация от Google о том, как нужно делать интерфейсы. У Google есть material.io, где есть варианты гармоничных цветовых сочетаний.
Работы – полчаса креатива верстальщика без дизайнера, без разработчика. Просто люди посидели и поправили CSS, заинжектили ее потом в 1С. Конечно это можно сделать намного лучше…
Здесь я даже хотел сделать мем на тему: «Отличи 1С от не-1С», потому что не отличить. А это реально можно сделать просто правкой CSS. Конечно, есть нюансы, но я о них потом расскажу.
Еще один 1С интерфейс в стиле material:
Тут дизайнеры опять немного не доработали :) , но dark-тема выглядит уже намного лучше.
Хотите градиент в интерфейсе – пожалуйста. Достаточно уровня начинающего верстальщика – это первая ленивая проба модификации CSS.
Перечисленные примеры CSS к интерфейсу 1С выложены на GitHub в репозитории https://github.com/comol/1c_styles. Вы можете внедрить их у себя – дальше я покажу, как.
У этих примеров CSS есть нюанс. Поскольку это было полчаса работы, а не пару дней или неделя, некоторые стили привязаны непосредственно к ID элементов, а для CSS это плохо.
Чтобы привязать их универсально к классам, стили для некоторых элементов нужно генерировать автоматически – поэтому их еще нужно доработать, это не готовое решение.
Interface hack – как поменять в интерфейсе то, что нельзя менять. Работаем с внутренностями Web клиента
Теперь я расскажу про методы реализации. Всем, наверное, интересно узнать, как это делается.
Для изменения интерфейса 1С есть три варианта. Наверное, их больше, но основных – три.
Первый вариант – это расширение Chrome Live CSS Editor. Если хочется добавить оформление для всех пользователей вашей организации, скачиваете исходники этого расширения с GitHub, убираете из него интерфейсную часть и вместо нее вставляете вашу CSS. И потом всем пользователям через групповые политики устанавливаете расширение на Chrome. У вас будет 1С без извращений с инжектом в новом варианте. Причем, этот вариант еще можно отключать, отключая расширение.
В исходном варианте расширение Live CSS Editor удобно использовать для отладки и разработки CSS. Ставите расширение, добавляете туда CSS – можете взять мою с GitHub. Поскольку у меня привязка к ID-шникам, на ваших формочках ничего не заработает «из коробки», но на формах от OneRPA – получится.
Модифицируйте здесь все, что хотите. Я рекомендую material-темы, но можно придумать свои.
Для Live CSS Editor есть альтернатива – расширение Styler к Chrome. Его тоже можно использовать.
Второй вариант модификации интерфейса – фильтр Apache, его тоже можно взять на GitHub.
Его подключение нужно прописать в httpd.conf – тогда во все страницы, которые отдает Apache, будут подключены соответствующие CSS-стили.
Это подключение можно было бы делать командой sed налету, но 1С сжимает трафик, поэтому 90% исходного кода этого фильтра занимает расшифровка deflateStream.
У этого фильтра есть нюанс – он сейчас работает только под 32-битный Apache на Windows. Если вам нужно этот фильтр использовать для Apache на Linux, вы можете этот код скопировать и перекомпилить на .NET Core.
У Windows есть ограничение на длину буфера командной строки. У Linux таких ограничений нет, соответственно это будет работать с любым Apache, на любом варианте, стабильно без всяких проблем.
И третий, последний вариант модификации интерфейса – это отдельный прокси, пример которого можно скачать с GitHub.
Я как Жюль Верн в последний момент нашел, наверное, самый правильный вариант реализации – не использовать фильтр и не нагружать Apache, а просто поставить отдельный прокси на nginx, куда встроены варианты подмены любых HTML на Lua.
Единственный совет – подменяйте именно базовый 1С-ный HTML-документ. Когда F12 нажмете, все увидите – там сразу после setTimeout() можете вставить любую функцию, которая вам что-нибудь заинжектит, подменит CSS и т.д.
На этом у меня всё. Заботьтесь о своих пользователях, делайте крутые интерфейсы, которые будут частью лучших сервисов, не бойтесь экспериментировать.
*************
Данная статья написана по итогам доклада (видео), прочитанного на конференции Infostart Event 2021 Post-Apocalypse.
