Как сделать красивый и удобный интерфейс в 1С

Внешний вид прикладного решения на платформе 1С:Предприятие складывается не только из цветов и картинок. Красивый интерфейс — это в первую очередь понятная структура форм, логичная группировка элементов, единообразное оформление и отсутствие визуального шума. Платформа предоставляет для этого богатый инструментарий: управляемые формы, систему такси, условное оформление, картинки и варианты отображения элементов.

Большинство проблем с «некрасивым» интерфейсом возникают не из-за ограничений платформы, а из-за того, что формы собраны по умолчанию: все реквизиты выведены сплошным списком, надписи не выровнены, группировки отсутствуют. При этом исправить ситуацию можно штатными средствами, без сторонних компонентов и сложной программной доработки.

Материал рассчитан на разработчиков и настройщиков, которые работают с конфигуратором и хотят привести интерфейс типовой или самописной конфигурации к аккуратному виду. Рассмотрим работу с формами, цветами, условным оформлением, командным интерфейсом и типичные ошибки, которые портят впечатление от решения.

С чего начать: аудит текущего интерфейса

Прежде чем что-то менять, полезно зафиксировать, что именно выглядит плохо. Откройте основные рабочие формы — список документов, карточку элемента справочника, рабочий стол — и выпишите конкретные претензии: перегруженность полями, непонятные заголовки, отсутствие группировки, разный размер кнопок, хаотичные цвета.

Отдельно проверьте, какие механизмы уже используются в конфигурации. В типовых решениях часто задействована подсистема настройки интерфейса, и часть проблем решается пользовательскими настройками без изменения конфигурации: «Изменить форму», настройка панелей, варианты отображения разделов. Это важно, потому что любые изменения в конфигураторе усложняют последующие обновления.

Определите целевую аудиторию каждой формы. Кассиру нужны крупные кнопки и минимум полей, а бухгалтеру — плотная таблица с деталями. Попытка сделать одну форму «красивой для всех» обычно заканчивается тем, что она неудобна для всех.

Структура формы: группы, страницы и компоновка

Основной инструмент «красоты» формы — правильная иерархия групп. В редакторе формы объединяйте связанные реквизиты в группы вида «ГруппаКолонки» или «ГруппаСтраницы». Например, в карточке контрагента логично выделить группы «Основное», «Контактная информация», «Реквизиты», а не вываливать двадцать полей подряд.

Используйте страницы (закладки), когда полей много и они делятся на смысловые блоки. Правило простое: на первой странице — то, что заполняется всегда, на остальных — редко используемое. Не прячьте на вторые страницы обязательные поля: пользователь не увидит ошибку заполнения и будет искать причину.

Для выравнивания применяйте свойства групп: Группировка (Горизонтальная/Вертикальная), Отображение, РастягиватьПоГоризонтали. У полей ввода задавайте осмысленную ширину через свойства формы, чтобы колонки выглядели ровно. Заголовки полей делайте краткими: «Телефон» вместо «Контактный номер телефона организации».

1. 1
   Откройте форму в конфигураторе и удалите лишние автоматически добавленные элементы
2. 2
   Создайте группы по смысловым блокам и перенесите в них реквизиты
3. 3
   Настройте порядок обхода и видимость редко используемых полей
4. 4
   Выровняйте ширину колонок и заголовки полей
5. 5
   Проверьте форму в режиме предприятия под учётной записью обычного пользователя

Цвета, шрифты и стили

Платформа 1С использует систему стилей: цвета и шрифты задаются централизованно в ветке «Общие — Стили» конфигурации. Ключевой принцип — не задавать цвета напрямую у элементов формы, а брать их из стиля. Тогда при смене оформления вся конфигурация обновится единообразно, а не по одной форме.

Для акцентов используйте условное оформление форм и динамических списков, а не жёсткую раскраску. Например, просроченные документы можно подсветить мягким красным фоном, оплаченные — нейтральным зелёным. Избегайте ярких «кислотных» цветов: они утомляют глаза и выглядят непрофессионально. Достаточно двух-трёх акцентных цветов на всё решение.

Со шрифтами действует то же правило: берите шрифты из стиля (ШрифтТекста, ШрифтЗаголовков и подобные), а не назначайте их вручную каждому элементу. Увеличивать шрифт имеет смысл только для действительно важных данных — итоговых сумм, статусов. Сплошной полужирный текст по всей форме визуально «кричит» и теряет смысл выделения.

Условное оформление списков и таблиц

Динамические списки — самое заметное место интерфейса: пользователи проводят в них большую часть времени. Условное оформление списка настраивается в конструкторе формы (закладка «Условное оформление») или программно через объект УсловноеОформление формы. С его помощью можно выделять строки по статусу, скрывать ненужные колонки для отдельных значений, менять цвет текста и фона.

Типовой сценарий — раскраска по состоянию документа: проведённые обычным текстом, непроведённые серым, помеченные на удаление зачёркнутым. Другой сценарий — подсветка критичных значений: отрицательный остаток, просроченная дата, пустое обязательное поле. Такие визуальные маркеры заменяют пользователю ручную проверку каждой строки.

Не злоупотребляйте количеством правил. Если на один список наложено десять условий оформления с разными цветами, список превращается в «попугая» и перестаёт быть информативным. Оптимально — три-четыре правила на список, каждое с понятной логикой.

// Программное условное оформление списка
ЭлементОформления = УсловноеОформление.Элементы.Добавить();
ЭлементОформления.Оформление.УстановитьЗначениеПараметра("ЦветТекста", WebЦвета.Красный);
ЭлементОтбора = ЭлементОформления.Отбор.Элементы.Добавить(Тип("ЭлементОтбораКомпоновкиДанных"));
ЭлементОтбора.ЛевоеЗначение = Новый ПолеКомпоновкиДанных("Просрочен");
ЭлементОтбора.ВидСравнения = ВидСравненияКомпоновкиДанных.Равно;
ЭлементОтбора.ПравоеЗначение = Истина;

Командный интерфейс и навигация по разделам

Красивый интерфейс начинается ещё до открытия форм — с начальной страницы и панели разделов. В конфигураторе настройте подсистемы так, чтобы пользователь видел только свои разделы: лишние пункты меню — это визуальный шум. Для подсистем задайте понятные синонимы и картинки, они отображаются в панели разделов.

Командный интерфейс каждой подсистемы редактируется через команду «Командный интерфейс» в палитре свойств. Уберите из панели навигации редко используемые объекты, а частые действия вынесите в панель действий. Порядок команд имеет значение: самые востребованные — в начале списка.

Для рабочего стола можно создать начальную страницу (рабочий стол) с формами мониторинга: остатки, задачи, напоминания. Аккуратная стартовая форма с двумя-тремя информативными блоками производит гораздо лучшее впечатление, чем пустое окно или перегруженный дашборд.

Картинки, пиктограммы и мелкие детали

Картинки заметно оживляют интерфейс, если применять их последовательно. Общие картинки добавляются в ветке «Общие — Картинки» и затем назначаются кнопкам, командам, подсистемам, колонкам таблиц. Используйте картинки из библиотеки картинок платформы или единый набор в одном графическом стиле — смешение разных наборов выглядит небрежно.

Полезные мелочи, которые формируют ощущение аккуратности: подсказки у неочевидных полей (свойство «Подсказка» и «ОтображениеПодсказки»), кнопка с картинкой вместо длинной текстовой надписи, признак «ТолькоПросмотр» у служебных полей, отключение видимости пустых декоративных элементов. Каждая такая деталь по отдельности мелка, но в сумме они создают ощущение продуманного продукта.

Декорации формы (надписи, рамки) помогают визуально отделить блоки: например, информационную надпись о состоянии документа в шапке. Но не превращайте форму в набор рамок — чаще достаточно заголовков групп и отступов.

Проверка результата и типичные ограничения

Готовность интерфейса проверяйте не в конфигураторе, а в режиме предприятия и желательно под учётной записью реального пользователя с его правами. Под администратором видны все элементы, а у рядового пользователя часть кнопок и полей может быть недоступна — форма должна выглядеть аккуратно и в этом случае, без пустых дыр и «осиротевших» надписей.

Проверьте форму при разных разрешениях экрана и масштабах. Форма, идеально выглядящая на мониторе разработчика, на ноутбуке с меньшим разрешением может обрезаться. Свойства растягивания и привязки элементов решают большинство таких проблем, если настроены заранее.

Учитывайте ограничения платформы: управляемые формы не дают полной свободы вёрстки, как веб-страницы. Попытки «перехитрить» платформу сложными программными манипуляциями с элементами обычно приводят к тормозам и глюкам отображения. Лучше принять логику платформы и работать в её рамках — так интерфейс получится и красивым, и стабильным.

Частые вопросы