Введение
Визуальные интерфейсы в программном обеспечении стали важным аспектом пользовательского опыта. Но многие стандартные интерфейсные решения 1С становятся морально устаревшими, особенно с приближающимся обновлением на платформу 8.5.
Во второй части смотрим, как же, используя стандартные средства 1С (без svg, без html полей), можно реализовывать формы карточек справочников (на примере справочника Номенклатура).
Примечание
Была большая дискуссия в первой части по поводу "Зачем интерфейс? Важен функционал ведь!". Хотел бы ответить - "ДА, ВЫ ПРАВЫ!". Но я обратного и не утверждал. Интерфейс позволяет сделать ваш продукт не только рабочим, но и визуально приятным+удобным (UI/UX никто не отменяет ведь).
Появление потребности
При реализации форм справочников зачастую перечень реквизитов расположены логически, но при первом просмотре глаза разбегаются не знают за что ухватиться. Это может вызвать отторжение у потенциальных покупателей, никогда не имеющих дело с 1С.
Мы занимаемся как проектной деятельностью, так и развитием наших собственных продуктов. Вопросы презентабельности и удобстве интерфейсов для нас являются важным аспектом успешных продаж.
P.S. Данный пример это концепт, а не внедренный рабочий функционал. Рассматриваем пример "Как можно сделать".
Реализация
Начнем с проектирования формы. Обозначим, какие области будем отображать на форме:
- Наименование
- Краткий набор нерегулярных значений
- Основные реквизиты
- Дополнительные реквизиты
- Сворачиваемые группы реквизитов
- Данные в Учете
- Изображение
- Командная панель
Далее расположим эти блоки в логической последовательности.
Области Наименование и Основные реквизиты справочника являются ключевыми, так как содержат часто используемую информацию об объекте.
Под областью Наименование расположили Краткий набор нерегулярных значений. Здесь располагаются не длинные поля реквизитов, которые носят больше информативный характер.
Следующая группа областей это Дополнительные реквизиты справочника и Учетные данные. Здесь будет располагать важные связанные данные объекта, которые больше детализируют объект, чем его описывают.
Теперь перейдем детальней к каждому блоку
Основная информация об объекте
Используемые решения:
Основные изменения, которые были применены к реквизитам
- Цвета рамок: 222, 222, 222
- Размер шрифта: 9 (при компактном масштабе формы)
- Вертикальный интервал реквизитов: Полуторный
Поле наименование объекта позволяет однозначно определить, что же это за объект. Его значение определяется во время создания карточки и в дальнейшем практически не редактируется. Поэтому было принято:
- Установить размер шрифта наименования значительно больше
- Убрать рамку реквизита, установив значение Цвета рамки в Белый
Под полем наименования добавили небольшую группу, отображающую нередактируемые информативные значения (Код, Ответственный, Принят, Исключен). Для этих реквизитов:
- Понизили яркость цветов заголовков и значений
- Реквизиты остались полями ввода для удобства копирования их значений
- Убрали рамку реквизита (белый цвет рамки)
- Прижали расположение этих значений ближе к наименованию (Вертикальный интервал = Половинный)
Поле реквизита Описание переделаем в Форматированный документ, так как иногда требуется даже реквизиты, хранящие обычную строку, как-нибудь структурировать (выделять слова жирным, курсивом, реализовывать списки и т.д.).
Для работы с Форматированным документом требуется вывести её командную панель. Автоматически это поле формируется примерно так:
Поэтому решено вывести все команды вручную, убрав рамку команды.
В результате мы намного уменьшили вертикальное пространство, занимаемое командной панелью и сделали элементы намного элегантней.
Следующим шагом переделали сворачиваемые группы.
Вместо стандартных элементов Группа с признаком Сворачиваемая добавили команду с картинкой (треугольник с верхушкой вниз и треугольник с верхушкой вправо) и группу реквизитов. При нажатии на эту команду мы просто отключаем/Включаем видимость группы реквизитов, подойдет самый базовый код:
&НаКлиенте
Процедура РаскрытьСкрытьГосЗакупки(Команда)
Развернуто = Не Элементы.ГруппаГосЗакупкиРеквизиты.Видимость;
Элементы.ГруппаГосЗакупкиРеквизиты.Видимость = Развернуто;
Элементы.РаскрытьСкрытьГосЗакупки.Картинка = ?(Развернуто, БиблиотекаКартинок.ОбщаяКартинкаРазвернуть, БиблиотекаКартинок.ОбщаяКартинкаСвернуть);
КонецПроцедуры
Результат
После проведения всех манипуляций, работе с вертикальными интервалами и т.д. мы получаем следующую форму:
Итоги
Используя такие небольшие манипуляции стандартными элементами формы мы смогли добиться существенного визуального улучшения интерфейса. Реквизиты сгруппированы и визуально отделены друг от друга. Никакой элемент не "кричит" о себе, каждый знает своё место.
Буду рад конструктивному общению в комментариях :)
Вступайте в нашу телеграмм-группу Инфостарт
