Как создать красивый и удобный интерфейс в 1С: пошаговое руководство

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

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

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

1. Основы оформления: цветовые схемы и шрифты

Первое, что бросается в глаза при открытии формы — её цветовая гамма. В 1С 8.3 есть встроенные темы оформления (СтильОформления), но их можно дополнять своими настройками. Например, для корпоративных систем часто используют фирменные цвета компании.

Чтобы изменить стиль оформления глобально (для всех форм), перейдите в Администрирование → Печатные формы, отчеты и обработки → Стили оформления. Здесь можно:

• 🎨 Создать новый стиль на основе стандартного (например, СтильОформления.Синий)
• 🖌️ Настроить цвета для заголовков, текста, фона и кнопок
• 📏 Изменить шрифты (рекомендуемый размер для рабочих форм — 10–12 пт)
• 🔄 Применить стиль ко всем формам или только к выбранным

Для точечной настройки отдельной формы используйте свойство СтильОформления в конструкторе. Например, чтобы сделать форму карточки номенклатуры более контрастной, добавьте в модуль формы:

&НаКлиенте
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
ЭтотОбъект.СтильОформления = СтилиОформления.ПолучитьСтиль("МояТема");
КонецПроцедуры

⚠️ Внимание: Избегайте ярких цветов (например, чистого красного или зелёного) для фоновых элементов — они быстро утомляют глаза. Оптимальные варианты: #F5F5F5 (светло-серый фон), #2C3E50 (тёмный текст), #3498DB (акцентный синий).

Если вам нужно выделить критичные поля (например, остатки на складе при отрицательном значении), используйте УсловноеОформление:

&НаКлиенте
Процедура ПриИзмененииОстатков(Элемент)
Если Элемент.Значение < 0 Тогда
Элемент.ЦветФона = ВебЦвета.Красный;
Элемент.ЦветТекста = ВебЦвета.Белый;
Иначе
Элемент.ЦветФона = Неопределено;
КонецЕсли;
КонецПроцедуры

2. Работа с управляемыми формами: размещение элементов

Управляемые формы в 1С 8.3 — это основа гибкого интерфейса. Они позволяют динамически изменять расположение элементов в зависимости от ролей пользователей или данных. Главное правило: не перегружайте форму. Оптимальное количество полей на одном экране — 15–20 (без учёта табличных частей).

Основные приёмы компоновки:

• 📌 Группировка по вкладкам — разделите поля по логическим блокам (например, "Реквизиты", "Цены", "Складские остатки")
• 🔄 Динамическое скрытие — скрывайте ненужные поля с помощью свойства Видимость (например, поле "Себестоимость" только для бухгалтеров)
• 📱 Адаптивность — используйте контейнеры ГруппировкаГоризонтальная и ГруппировкаВертикальная для автоматического переноса элементов на маленьких экранах
• 🔍 Поиск и фильтры — добавьте поле быстрого поиска для табличных частей с большим количеством строк

Пример динамического скрытия поля в зависимости от роли пользователя:

&НаКлиенте
Процедура ПриОткрытии(Отказ)
Если НЕ РолиПользователя.Содержит("Бухгалтер") Тогда
ЭлементыФормы.Себестоимость.Видимость = Ложь;
КонецЕсли;
КонецПроцедуры

Тип элемента	Рекомендуемое использование	Пример
ПолеВвода	Для текстовых и числовых значений	Наименование номенклатуры, цена
ПолеВыбора	Для справочников и перечислений	Выбор контрагента, тип документа
Флажок	Для булевых значений (Да/Нет)	Флаг "Оплачено", "Помечено на удаление"
ТабличноеПоле	Для отображения списков и табличных частей	Строки документа "Реализация"

⚠️ Внимание: Если в форме больше 3-х уровней вложенности группировок (например, вкладка → группа → подгруппа → поле), пользователю будет сложно ориентироваться. Старайтесь ограничиться двумя уровнями.

Использованы вкладки для группировки полей|Критичные поля выделены цветом или рамкой|Поля отсортированы по частоте использования|Добавлены подсказки (ToolTip) для сложных реквизитов|Тестировано на разрешении экрана 1366×768-->

3. Командные панели и кнопки: делаем их заметными

Стандартные кнопки в 1С часто теряются на фоне других элементов. Чтобы сделать их более заметными:

• 🎯 Используйте иконки — добавьте SVG-изображения (можно взять из библиотеки Font Awesome или Material Icons)
• 🔘 Группируйте кнопки по действиям (например, "Создать", "Провести", "Печать" в одной панели)
• 🖱️ Настраивайте порядок — самые частые действия (например, "Сохранить") должны быть слева
• 🌈 Цветовые акценты — выделяйте основные кнопки ярким цветом (например, зелёный для "Провести", красный для "Удалить")

Пример добавления иконки к кнопке через Картинка:

&НаКлиенте
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
Картинка = Новый Картинка(ПолучитьИзВременногоХранилища(ЗагрузитьSVG("plus-circle")));
ЭлементыФормы.КнопкаДобавить.Картинка = Картинка;
КонецПроцедуры

Для создания выпадающих меню в командной панели используйте элемент КнопкаСМеню:

<ЭлементыФормы>
    <КнопкаСМеню>
        <Имя>Действия
        <Заголовок>Действия
        <ЭлементыМеню>
            <ЭлементМеню>
                <Заголовок>Экспорт в Excel
                <Действие>ЭкспортВExcel
            
            <ЭлементМеню>
                <Заголовок>Отправить по email
                <Действие>ОтправитьПоEmail
            
        
    

4. Табличные части: как сделать их читабельными

Таблицы в 1С часто перегружены данными, что затрудняет восприятие. Чтобы улучшить читабельность:

• 📊 Чередуйте цвета строк — используйте свойство ЦветФонаЧередующихсяСтрок
• 🔍 Фильтрация по умолчанию — настройте автоматический фильтр по дате или статусу
• 📌 Фиксированные колонки — закрепите важные столбцы (например, "Номенклатура") при горизонтальной прокрутке
• 🖼️ Иконки статусов — добавьте графические индикаторы (например, ✅ для оплаченных строк)

Пример настройки чередующихся строк и фиксированных колонок:

&НаКлиенте
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
Таблица = ЭлементыФормы.ТабличнаяЧасть;
Таблица.ЦветФонаЧередующихсяСтрок = ВебЦвета.СветлоСерый;
Таблица.ФиксированныеКолонки.Добавить("Номенклатура");
Таблица.ФиксированныеКолонки.Добавить("Количество");
КонецПроцедуры

Для добавления индикаторов статуса используйте обработчик ПриАктивизацииСтроки:

&НаКлиенте
Процедура ТабличнаяЧастьПриАктивизацииСтроки(Элемент, Строка)
Если Строка.Оплачено Тогда
Элемент.ЭлементыФормы.СтатусОплаты.Картинка = КартинкаЧекмарк;
КонецЕсли;
КонецПроцедуры

⚠️ Внимание: Если в таблице больше 1000 строк, отключите автоматическое чередование цветов — это снижает производительность. Вместо этого используйте пагинацию или фильтрацию.

Как ускорить работу таблиц с большим количеством данных?

1. Отключите свойство АвтоПодборШириныКолонок — оно тормозит рендеринг.

2. Используйте ОтображатьТолькоВыделенныеСтроки = Истина для таблиц с детализацией.

3. Загружайте данные порциями (по 50–100 строк) при прокрутке (ленивая загрузка).

4. Для статических данных (например, справочников) кэшируйте результаты запросов в МенеджерВременныхТаблиц.

5. Динамические элементы и анимация

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

• 📈 Прогресс-бары — для отображения хода длительных операций (выгрузка данных, печать)
• 🔔 Всплывающие подсказки — с объяснением полей или предупреждениями
• 🔄 Анимация загрузки — вместо статичного "Подождите..."
• 📌 Контекстные меню — вызываемые правой кнопкой мыши

Пример добавления прогресс-бара для длительной операции:

&НаКлиенте
Процедура ВыгрузитьДанные(Команда)
Прогресс = ЭлементыФормы.ПрогрессПанель;
Прогресс.Видимость = Истина;
Прогресс.Максимум = 100;

Для Счетчик = 1 По 100 Цикл
ВыполнитьДлительнуюОперацию(Счетчик);
Прогресс.Значение = Счетчик;
КонецЦикла;

Прогресс.Видимость = Ложь;
КонецПроцедуры

Для создания всплывающих подсказок используйте обработчик ПриНаведении:

&НаКлиенте
Процедура ПолеНаименованиеПриНаведении(Элемент, Состояние)
Если Состояние = СостояниеНаведения.Начало Тогда
Подсказка = Новый Подсказка("Введите полное название номенклатуры без аббревиатур");
Подсказка.Показать(Элемент);
КонецЕсли;
КонецПроцедуры

Если вам нужна плавная анимация (например, появление панели), используйте таймер:

&НаКлиенте
Процедура ПоказатьПанельПлавно()
Панель = ЭлементыФормы.ДополнительнаяПанель;
Панель.Видимость = Истина;
Панель.Высота = 0;

Таймер = Новый Таймер("УвеличитьВысоту", 50, Истина);
КонецПроцедуры

&НаКлиенте
Процедура УвеличитьВысоту(Таймер)
Статическая ТекущаяВысота = 0;
ТекущаяВысота = ТекущаяВысота + 10;
Панель.Высота = ТекущаяВысота;
Если ТекущаяВысота >= 200 Тогда
Таймер.Остановить();
КонецЕсли;
КонецПроцедуры

6. Интеграция с внешними библиотеками (SVG, CSS)

Для продвинутого оформления можно подключать внешние ресурсы:

• 🖼️ SVG-иконки — загружайте через ПолучитьИзВременногоХранилища или храните в базе
• 🎨 CSS-стили — для веб-клиента 1С (ограниченная поддержка)
• 📊 JavaScript-графики — через внешние компоненты (например, AmCharts)

Пример подключения SVG-иконки из файла:

&НаСервере
Функция ЗагрузитьSVG(ИмяФайла)
ПутьКФайлу = КаталогПрограммы() + "\Images\" + ИмяФайла + ".svg";
ДвоичныеДанные = Новый ДвоичныеДанные(ПутьКФайлу);
Возврат ПоместитьВоВременноеХранилище(ДвоичныеДанные);
КонецФункции

Для использования CSS в веб-клиенте добавьте стили в HTMLДокумент:

&НаКлиенте
Процедура ПриОткрытии(Отказ)
HTML = "";
ЭлементыФормы.ВебОбласть.УстановитьТекст(HTML);
КонецПроцедуры

⚠️ Внимание: Внедрение внешних библиотек может нарушить лицензионные соглашения 1С. Перед использованием проверьте совместимость с вашей версией платформы и условия лицензии сторонних компонент.

7. Тестирование и оптимизация интерфейса

Красивый интерфейс должен быть удобным. Проведите тестирование с реальными пользователями:

• 👥 Соберите фидбек — спросите, какие элементы неудобны или непонятны
• ⏱️ Замерьте время выполнения задач — сравните со стандартным интерфейсом
• 🖱️ Проверьте на разных разрешениях — от 1280×720 до 1920×1080
• 🔍 Используйте инструменты анализа — например, Hotjar для записи сессий (в веб-клиенте)

Оптимизируйте производительность:

• ⚡ Отключите ненужные обработчики — например, ПриИзменении для полей, которые не требуют мгновенной реакции
• 🗑️ Очищайте временные данные — используйте ОчиститьВременноеХранилище()
• 🔄 Кэшируйте часто используемые данные — например, справочники номенклатуры

Пример оптимизации загрузки формы:

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
// Загружаем справочник один раз при открытии
Если НЕ ЗначениеЗаполнено(МенеджерВременныхТаблиц.Номенклатура) Тогда
Запрос = Новый Запрос("ВЫБРАТЬ ПЕРВЫЕ 1000 Наименование ИЗ Справочник.Номенклатура");
МенеджерВременныхТаблиц.Номенклатура = Запрос.Выполнить().Выгрузить();
КонецЕсли;
КонецПроцедуры

FAQ: Частые вопросы по дизайну интерфейса в 1С

Можно ли в 1С использовать тёмную тему?

Да, начиная с версии 1С:Предприятие 8.3.18 появилась встроенная поддержка тёмной темы. Чтобы её включить, перейдите в Сервис → Параметры → Внешний вид и выберите Тёмная тема. Также можно создать свой тёмный стиль оформления через СтилиОформления.СоздатьСтиль() с цветовой схемой #1E1E1E (фон), #E0E0E0 (текст).

Как добавить свою иконку для кнопки?

Иконки можно добавлять в формате SVG или PNG. Шаги:

1. Поместите файл иконки в каталог расширения или конфигурации.
2. Загрузите её во временное хранилище:

   Картинка = Новый Картинка(ПолучитьИзВременногоХранилища(ЗагрузитьФайл("путь\к\иконке.svg")));

3. Присвойте картинку кнопке:

   ЭлементыФормы.МояКнопка.Картинка = Картинка;

Рекомендуемый размер иконок — 16×16 или 24×24 пикселя.

Почему моя форма тормозит при открытии?

Частые причины:

• Слишком много данных загружается сразу (например, табличная часть с 10 000 строк). Решение: используйте пагинацию или фильтрацию.
• Сложные обработчики ПриИзменении для полей. Решение: перенесите логику на сервер или отключите ненужные события.
• Большие картинки в элементах формы. Решение: оптимизируйте изображения (например, через TinyPNG).

Для диагностики используйте Профилировщик производительности в конфигураторе (Сервис → Профилировщик).

Как сделать адаптивный интерфейс для планшетов?

В 1С 8.3 поддерживается адаптивность через:

• Горизонтальные/вертикальные группировки — автоматически переносят элементы при изменении размера окна.
• Свойство МинимальнаяШирина — задаёт минимальный размер элемента.
• Динамическое скрытие колонок в таблицах:

  Таблица.Колонки.Номенклатура.Видимость = (ЭтотКомпьютер.ТекущийРазмерЭкрана.Ширина < 800);

Для тестирования используйте эмулятор мобильного устройства в браузере (например, в Google Chrome).

Можно ли в 1С использовать анимацию как в современных веб-приложениях?

Да, но с ограничениями. В тонком клиенте и веб-клиенте доступны:

• Плавное появление элементов через таймеры (см. пример в разделе 5).
• CSS-анимации (только в веб-клиенте, ограниченная поддержка).
• GIF-изображения для индикаторов загрузки.

Сложные анимации (например, на JavaScript) требуют подключения внешних компонент, что может нарушить лицензионные соглашения. Рекомендуем ограничиться базовыми эффектами.