Пример адаптации формы к интерфейсу Такси » АСД Днепр

[http://www.asd-dnepr.com] Главная Статьи 1С:Предприятие Инструкции 1C 8.3 1С Вопросы и ответы Зарплата Технология внедрения Электронная отчетность 1С:Предприятие 7.7. Управление распределенными базами данных Установка и настройка распределенной базы УРБД в 1С:Предприятие 7.7 «с нуля» Проекты Автоматизация Реклама Контакт О нас 8.3 9 Апр Пример адаптации формы к интерфейсу Такси 1C 8.3 | 0 Comments Предыстория Однажды в конференции нам задали такой вопрос: «Очень хотелось бы посмотреть на форму «Подготовка сведений для ПФР» в интерфейсе ТАКСИ помещающуюся в 1366х786 разрешении… ну или в 1280х800″. Мы решили посмотреть, о какой форме идёт речь, и в текущей версии 2.5 конфигурации «Зарплата и управление персоналом» увидели следующее (размер картинки 1024х856): После беседы с разработчиками выяснилось, что эта форма им самим тоже не нравится. И при подготовке следующей версии 3.0 они решили переделать эту форму. Сделать её более простой и понятной. Поэтому для примера, показывающего адаптацию старой формы к интерфейсу Такси , мы решили взять не исходную форму, о которой шла речь в конференции, а улучшенную форму, которую разработчики подготовили для версии 3.0. Её рабочий вариант в старом интерфейсе выглядел следующим образом: Отсюда можно сделать первый важный вывод . Прежде чем пытаться адаптировать форму к интерфейсу Такси нужно посмотреть, а хороша ли эта форма сама по себе? Потому что проблема может быть не в том, что в старом интерфейсе форма выглядит хорошо, а в новом — плохо. Проблема может быть глубже. В том, что и в старом интерфейсе форма выглядит плохо. А значит, при адаптации её к новому интерфейсу придётся сначала «привести форму в чувство». Чтобы с ней просто было удобно работать. И это не имеет никакого отношения к интерфейсу Такси или какому-либо другому интерфейсу. И уже после этого нужно смотреть, какие изменения внести в форму, чтобы она хорошо выглядела в интерфейсе Такси . В нашем случае первую часть этой работы, «приведение формы в чувство», уже выполнили разработчики конфигурации «Зарплата и управление персоналом 3.0″. Поэтому мы просто перечислим основные идеи, которыми они руководствовались. А затем уже подробно опишем соображения, которых придерживались мы, когда адаптировали улучшенную форму к интерфейсу Такси . Приведение формы «в чувство» Чтобы понять суть улучшений, нужно немного рассказать о том, что представляют собой данные, отображаемые в этой форме. Это отчетность, передаваемая в Пенсионный фонд РФ. Она формируется автоматически и содержит общий отчёт (РСВ) и индивидуальные сведения: несколько пачек СЗВ и объединяющий их все документ опись АДВ. В общем случае документов АДВ может быть несколько (например, если организация имела задолженность по уплате взносов): Документы АДВ и СЗВ имеют некоторый набор собственных реквизитов, и кроме этого существует набор действий, которые можно выполнить с комплектом документов: проверить, напечатать и так далее: Документы СЗВ содержат список застрахованных лиц с данными, относящимися к каждому застрахованному лицу: Все эти данные отображаются в форме одновременно, что делает её очень громоздкой и сложной для восприятия. Поэтому разработчики решили упростить форму и собрать все документы (РСВ, АДВ, СЗВ) в один список: В этом же списке выводятся основные итоговые значения по каждому документу. Кроме этого для РСВ и АДВ в нижней части формы выводятся подробные итоговые сведения, а для документов СЗВ там выводятся списки застрахованных лиц: По щелчку на фамилии сотрудника открывается отдельная форма, в которой содержатся подробные сведения по этому сотруднику: В результате этих изменений форма стала легче и понятнее. Но это совсем не означает, что она будет хорошо выглядеть в интерфейсе Такси . Мы попытались запустить её в новом интерфейсе и увидели, что она, мягко говоря, «далека от совершенства»: Адаптация формы к интерфейсу Такси Итак, что мы видим? Мы видим четыре блока информации: «Управление» (поля Организация , Отчетный период , Состояние , кнопки управления); Список пачек документов (первая таблица); Информация по пачке, зависит от типа пачки (вторая таблица); Итоговая информация по пачке. Зависит от типа пачки, есть не для каждого типа пачки. Какие проблемы сразу же бросаются в глаза: 1. Неправильные размеры таблиц. Отображается недостаточное количество строк. Ширины колонок не соответствуют данным; 2. Пустая верхняя командная панель с одинокой кнопкой Еще ; 3. Пустая строка в блоке управления пока не выбрана организация; 4. Слишком большой блок итоговой информации; 5. Неправильный шрифт у кнопки Обновить . Первые шаги, которые можно сделать практически всегда и безболезненно , это: 1. Отключить пустую командную панель формы; 2. Включить вертикальную прокрутку у формы; 3. Исправить шрифт у кнопки Обновить . Вместо Шрифт диалогов и меню установить Авто ; Кроме этого будет полезно сразу же настроить отображение панелей интерфейса. Поскольку мы предполагаем, что с формой будут работать при малом разрешении экрана (1024х768), имеет смысл настроить панели следующим образом: панель разделов и панель инструментов разместить сверху рядом; для этого сначала нужно добавить группу, а уже в неё перенести панели; остальные панели отключить; А после запуска для панели разделов включить показ в виде текста. Это поможет высвободить дополнительное место по-вертикали. Посмотрим на то, что получилось: Стало немного лучше с высотами таблиц, но почти все остальные проблемы остались. Теперь, чтобы понять, с какой стороны приступить к дальнейшему улучшению формы, нужно найти самые важные элементы этой формы. То есть те элементы, которые участвуют в большинстве сценариев её использования. Для этого нужны сценарии. Это самый важный момент в нашей работе. Сценарии нельзя выдумывать из головы, потому что есть вероятность, что мы ошибёмся. Сценарии нужно выяснить с максимальной степенью достоверности. У пользователей. Или у разработчиков. В нашем случае существуют три типовых сценария работы с этой формой. Сценарий 1: Пришло время сформировать сведения в ПФР; Заходим, формируем пачки. Сверяем результаты по начислениям и по уплатам; Если результаты не сходятся, корректируем данные учета и переформируем пачки; Если необходимо подать корректирующие сведения, то формируем пачки для них; Печатаем, записываем файл. Сценарий 2: Всё уже сформировано и выверено. Нужно только напечатать и записать файл Сценарий 3: Нужно посмотреть, какие сведения передавали за предыдущие кварталы, их состав, и указанные в них суммы. Исходя из этих сценариев понимаем, что один из главных элементов формы, это документы. И операции с документами. Поэтому в первую очередь займёмся ими. Количество документов (пачек) может быть различным. От 3-7 в небольших организациях, до 50 в крупных. При этом вторая табличная часть всегда оказывается внизу, что сокращает высоту таблицы документов. Поэтому попробуем расположить таблицы не вертикально, а горизонтально, рядом друг с другом . Такое решение уменьшит ширину первой таблицы. Но если посмотреть на неё внимательно, но можно заметить, что та информация, которая содержится в колонках первой таблицы, для некоторых видов документов дублируется в подвале. Это суммы начисленных и уплаченных взносов. Поэтому оставим в таблице документов только самые важные колонки: документ, номер, тип сведений, корректируемый период, категорию застрахованных лиц и тип договора . Чтобы эти сведения хорошо читались в узкой таблице, расположим их в две строки: Документ , под ним Номер ; Тип сведений , под ним Корректируемый период ; Категория ЗЛ , под ней Тип договора . Кроме этого для всей таблицы установим РежимВыделенияСтроки = Строка . Итак, смотрим на то, что получилось: Левая таблица стала гораздо лучше, но её командная панель выглядит плохо. Во-первых, командная панель не масштабируется вместе с формой. Это сделано специально, так как справа от командной панели программно выводятся некоторая информация, сигнализирующая о том или ином состоянии документов. Это решение нельзя признать хорошим, да и сами разработчики планируют выводить эту информацию в другом месте. Поэтому мы не обращаем внимания на эту деталь, и командную панель делаем растягиваемой по-горизонтали . Во-вторых, в командной панели присутствуют два отдельных подменю, содержащие наборы команд для формирования исходных документов и для формирования корректирующих документов. Поскольку форма не предназначена для массового ввода данных, два эти подменю можно объединить в одно — Добавить . И у первого подменю оставить отображение только в виде текста. В-третьих, кнопка Удалить попала в подменю Еще , а это некрасиво. Поэтому мы принудительно разместим её на командной панели ( ТолькоВоВсехДействиях = Нет ), но не как надпись, а как картинку ( Отображение = Картинка ). Во-первых, для экономии места, а во-вторых потому, что картинка у кнопки Удалить достаточно наглядная, и у пользователя не будет сомнений в том, что это за команда. В результате этих действий командная панель примет такой вид: Итак, левая таблица выглядит достаточно хорошо. Займёмся теперь верхней частью формы, которую мы определили раньше как Управление . А конкретно — её командной панелью. Кнопок на ней очень много, выглядит она очень тяжело. Вдобавок, особенность этой командной панели заключается в том, что состав команд меняется в зависимости от состояния комплекта документов. Например, если он Не сформирован , то в командной панели будет всего две команды: А если он Сформирован но не отправлен , то количество команд будет совсем другим: Причём существует три различных набора команд, которые расположены каждый на отдельной панели. В зависимости от состояния документов отображается одна из этих панелей. Однако примечательным является тот факт, что данная форма не подразумевает массового ввода данных, и все эти команды нужны разово. Нет смысла всё время держать их «под рукой». Для исправления ситуации в каждой из этих панелей мы создадим командную панель, а в ней — подменю Комплект . И перенесем в это подменю все команды панели. С точки зрения удобства пользования от этого не должно стать хуже: Итак, мы заменили командную панель одним подменю . Теперь возникает естественное желание разместить его где-нибудь в шапке, а не отдельно. Потому что отдельно — некрасиво. Оно занимает целую строку. И потому, что логически эти команды относятся ко всему набору документов. Но для этого нужно сначала «привести в чувство» шапку. Что плохого в шапке? 1. Гиперссылка Все комплекты . Она просто открывает список документов. Меняем её на кнопку Список . Кажется, что с таким названием она будет более понятна; 2. Надпись Отчетный период кажется лишней, т.к. отчетный период всегда заполнен и назначение этого поля понятно из его значения. Поэтому надпись убираем ; 3. Поле, отображающее состояние комплекта документов, меняем на гиперссылку, которая при нажатии предлагает выбрать из списка. Для реализации этого нам придётся дописать небольшой фрагмент кода — обработчик события « Нажатие «: Текст обработчика события и вспомогательной процедуры будет выглядеть следующим образом: &НаКлиенте Процедура КомплектОбъектСостояниеКомплектаНажатие(Элемент, СтандартнаяОбработка) СтандартнаяОбработка = Ложь; ВЗ = ВыбратьИзМеню(СписокСостоянийКомплекта(), Элемент); Если ВЗ <> Неопределено Тогда СостояниеКомплекта = ВЗ.Значение; КомплектОбъектСостояниеКомплектаПриИзменении(Элемент); КонецЕсли; КонецПроцедуры Функцию СписокСостоянийКомплекта() , которая формирует на сервере список возможных состояний комплекта, следует разместить в общем модуле с повторным использованием возвращаемых значений. Для того чтобы минимизировать количество серверных вызовов: &НаСервереБезКонтекста Функция СписокСостоянийКомплекта() СЗ = Новый СписокЗначений(); Для Каждого ЗП Из Перечисления.СостояниеКомплектаОтчетностиПерсучета Цикл СЗ.Добавить(ЗП, Строка(ЗП)); КонецЦикла; Возврат СЗ; КонецФункции Тут нужно оговориться, что мы не можем рекомендовать это (п. 3) как стандартное решение, которое можно применять в любом случае. Правильнее сказать, что это довольно нестандартное решение. Но иногда, если конкретная ситуация позволяет, так можно поступить. В результате шапка примет такой вид: Теперь в конец шапки мы можем добавить наше подменю Комплект , содержащее команды работы с комплектом документов. Чтобы подменю не прокручивалось по горизонтали, зададим фиксированную ширину (12) для его панели страниц и отключим растягивание по горизонтали. В результате шапка примет следующий вид: И чтобы визуально выделить группу управляющих команд добавим для группы Шапка обычное выделение. В результате увеличится интервал между шапкой и командными панелями таблиц. Теперь займемся правой таблицей. Особенность формы заключается в том, что «правая» часть представляет собой три разные страницы, из которых показывается одна, соответствующая типу документа, выбранного в левой таблице. Для РСВ картину портит заголовок таблицы Итоги по тарифам . Отключим этот заголовок . Но таблицы всё равно оказались не на одном уровне. Так происходит потому, что левая командная панель — это действительно командная панель, а правая — это обычная группа, в которой размещены кнопки. Поэтому разместим «правые» команды так же в командной панели. Теперь посмотрим на АДВ. У её правой части нет команд, и есть заголовок. В результате таблицы так же находятся на разных уровнях: Поскольку справа совсем нет команд, мы не будем опускать правую таблицу вниз, на один уровень с левой таблицей. Вместо этого мы уберем заголовок и тем самым наоборот, поднимем таблицу вверх: Теперь посмотрим на правую часть для документа СЗВ. Здесь мы только поправим кнопки на командной панели. Вынесем их из Еще , и некоторые из них отобразим только в виде картинки. Кнопку Редактировать сразу удалим, так как в дальнейшем мы немного изменим эту таблицу, и необходимость в этой кнопке исчезнет. Теперь займемся подвалом правой таблицы. Как и командная панель, подвал свой для каждого вида документов. Например, для документа РСВ подвал выглядит так: Оформим подвал. Поля ввода заменим на надписи, выделим группы данных, расположим их вертикально. Для отображения важных данных используем увеличенный масштаб шрифта (120%) и для всех чисел укажем формат пустого значения ( ЧН = —— ). Аналогичным образом оформим подвал для документа АДВ: И в заключение для документов СЗВ также добавим подвал Взносы : В конце установим для правых таблиц растягивание по вертикали, чтобы убрать ненужные полосы прокрутки: Также, поскольку правые таблицы стали уже, зафиксируем у них первые столбцы, чтобы они не исчезали с экрана при прокрутке таблицы: Ну и для пущего удобства в таблице документа СЗВ тип колонки Сотрудник изменим на надпись. И покажем её гиперссылкой ( ГиперссылкаЯчейки = Истина ), чтобы открытие формы с дополнительными сведениями по сотруднику происходило не по двойному, а по одинарному щелчку на фамилии сотрудника. В принципе получившийся вариант можно считать вполне приемлемым для работы в интерфейсе Такси . Конечно, и в нём есть моменты, которые можно улучшать дальше, но они уже не носят принципиального значения, а больше относятся к «гармонизации» внешнего вида формы. Например, надпись с гиперссылкой в шапке документа можно заменить на кнопку. И, конечно же, любые решения нужно проверять тестированием на пользователях. На наш взгляд получилось неплохо, но тестирование может выявить неудачные или неработающие решения и оставшиеся проблемы. Например, спорным решением может быть «сжатие» правой таблицы. В исходном варианте она занимала всю ширину формы и всё равно имела прокрутку. Напомним: Мы сжали её ещё больше. С одной стороны можно сказать: «Она и раньше прокручивалась, теперь она тоже прокручивается». С другой стороны преобладающим сценарием работы с документом может быть проверка и корректировка данных, которые получаются в результате автоматического заполнения документа. Тогда, конечно, хорошо бы видеть как можно большее количество колонок этой таблицы на экране. Для этого можно изменить компоновку формы с «горизонтальная» на «вертикальная», когда таблицы расположены одна под другой. И чтобы не перегружать форму двумя таблицами, поместить вторую таблицу в скрытую группу: Тогда, при необходимости анализа индивидуальных данных таблица будет раскрываться вниз, и в форме появится вертикальная прокрутка: Ну и для того, чтобы окончательно «облагородить» второй вариант формы, в верхней таблице можно расположить данные не в две строки, а в одну. Командную панель сделать более подробной, поместив скрытые группы команд на первый уровень. А панель инструментов приложения разместить не наверху, а слева, так как места по-горизонтали теперь вполне достаточно: В результате мы получили второй возможный вариант той же формы. Чтобы было легче оценить результаты, посмотрим ещё раз на все четыре формы. Первоначальный, «действующий» вариант формы (1024х856): Рабочий вариант формы, «приведённой в чувство» (1121×768): Адаптированный вариант 1 (1024х768): Адаптированный вариант 2 (1024х768): В заключение хочется сказать, что представленные формы ни в коем случае не являются эталоном, к которому нужно стремиться абсолютно и всегда. Они являются одним из возможных вариантов адаптации форм к новому интерфейсу. Они иллюстрируют основные подходы, которых нужно придерживаться при переработке старых форм. Свежие записи 1С:Вопросы и ответы. Расчет заработной платы Случай из практики: об одной нетривиальной ситуации при обмене УНФ-БП Пример адаптации формы к интерфейсу Такси Этапы выполнения проектных работ Управление проектом Свежие комментарии Оборачиваемость дебиторской задолженности (Receivable turnover) » АСД Днепр к записи Коэффициент оборачиваемости Рубрики 1C 8.3 1С Вопросы и ответы 1С:Предприятие Web Design Без рубрики Зарплата Инструкции Термины Технология внедрения Управление Торговым Предприятием для Украины Электронная отчетность Автоматизация предприятий на базе 1С © 2004-2012 ASD Dnepr, тел:(044) 237-22-00; e-mail: office @ asd-dnepr.com