Проектирование интерфейса проектов

В нашем процессе разработки отдельно стоит интерфейс. Его мы стараемся прорабатывать и делать даже раньше, чем будет написана первая строчка кода. Ведь сначала следует понять - а что мы будем программировать.

Для проектирования интерфейсов мы используем Mockplus. В нем накидываются элементы на форму и описывается не хитрая логика. Например, нажали на кнопку Создать и открылась новая форма. Нажали на кнопку Закрыть - форма закрылась. Пример такого интерфейса на картинке.

Чем такой подход полезен:
1. Его легко переделать. Например, если поймем, что выключатель «Правило используется» здесь не очень хорош и лучше использовать команду.
2. Можно составить весь сценарий работы и посмотреть где есть сложные места.
3. Его не обидно выкинуть. На создание вот такой формы ушло примерно минут 5 со всей логикой.

#Design

Кнопка очистки поля ввода

Кнопку очистки (крестик) в полях ввода следует использовать в тех реквизитах, где система учитывает незаполненное значение как одно из возможных значений.

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

Если поле не подразумевает пустое значение, то это кнопки очистки добавлять не следует. В этом случае в поле ввода будут лишь кнопка выбора и кнопка открытия (для ссылочных типов).

#Design

Заголовок у флажка справа

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

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

Полезные советы по Флажкам можно еще подсмотреть у КонтурГайды - https://guides.kontur.ru/components/selection-elements/checkbox/

#Design

Слабое и обычное отображение групп

У группы есть свойство - Отображение, которое может выделить элементы группы на форме.

И если с Сильным выделением все понятно, то вот разницу между слабым и обычным выделением заметить сложно. На картинке они выглядят практически одинаково.

Отличие в том, что у группы с Обычным выделением отступ вокруг становится больше. Она как бы «отпихивает» от себя остальные элементы и делается заметнее.

Разницу можно увидеть если менять свойство в EDT (смотри гифку).

Вот как это свойство используется в Бухгалтерия предприятия:
1. Сильное выделение встречается в 86 формах
2. Обычное выделение - 609 формах
3. Слабое выделение - 1595 формах. Причем большинство - это формы списка и выбора и группа СписокКомпоновщикНастроекПользовательскиеНастройки

#Design

Оформление табличной части

Правила оформления табличной части на форме:
1. Заголовок колонки размещайте так же как содержимое.
Делайте это для реквизитов с типом Число, потому что по умолчанию для всех полей заголовок устанавливается слева, а цифровые значения отображаются справа.

2. Заголовок формы делайте не больше 1 строки.
В случае если заголовок многоэтажный, то переработайте строку и добавьте колонки с описанием. Иногда помогает объединение близких колонок по смыслу, например, Услуга и Содержание услуги. В этом случае укажите подсказку ввода для каждой колонки.

3. В конце табличной части добавьте пустую колонку с растягиванием.
Эта колонка сделает табличную часть компактной и не будет растягивать форму на широких мониторах. У колонки установите свойство ТолькоПросмотр и отключите отображение заголовка (ну или задайте заголовок из одного пробела).

4. Для табличной части с одной колонкой не отображайте шапку.
Такая табличная часть будет выглядеть как список элементов и ей достаточно сделать описание с помощью декорации.

5. Если колонок много, то зафиксируйте часть важных колонок слева.
При прокручивании списка по горизонтали они останутся и будут идентифицировать строку табличной части.

Еще некоторые пункты оформления описаны в стандарте для проектирования интерфейсов - https://its.1c.ru/db/v8std/content/717/hdoc

#Design

⬆️⬆️⬆️

Для отображения заголовка в строке используйте событие ПриНачалеРедактирования с вот таким кодом:

Если НоваяСтрока Тогда 
  ТекущиеДанные = Элемент.ТекущиеДанные; 
  ТекущиеДанные.ЗаголовокСумма  = "Руб"; 
  ТекущиеДанные.ЗаголовокСуммаВВалюте = "USD"; 
КонецЕсли;

А также не забудьте заполнить уже существующие строки ПриЧтенииНаСервере:

Для Каждого Строка Из ТабличнаяЧасть Цикл
  Строка.ЗаголовокСумма = "Руб"; 
  Строка.ЗаголовокСуммаВВалюте = "USD"; 
КонецЦикла;

У этих полей установите Только просмотр, Шрифт текста - Наклонный и Цвет текста - RGB(128, 122, 89) и снимите флаг Отображать в шапке

Обратите внимание, что такие поля добавляются как реквизит табличной части на форме, а не объекте.

#Design

Управление размером формы (ключ сохранение положения окна)

Бывают ситуации когда форма открывается не в том размере, который ожидаешь и появляются скроллы слева и справа. Чтобы восстановить положение нужно поработать мышкой или нажать волшебное сочетание клавиш - Alt + Shift + R (восстановить положение окна).

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

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

Чтобы этого избежать, следует управлять специальным свойством формы - КлючСохраненияПоложенияОкна. В разрезе этих ключей хранится размер и положение окна. При управлении формой следует менять этот реквизит.
Форма в этом случае будет восстанавливать (или устанавливать новый) размер под текущий набор реквизитов для этого ключа. Затем при открытии формы мы укажем нужный нам ключ и форма построится корректно.

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

Пример кода:

&НаКлиентеНаСервереБезКонтекста 
Процедура УправлениеФормой(Форма, Шаг) 
  
 Элементы = Форма.Элементы; 
  
 Если Шаг = 1 Тогда  
   
  Элементы.ГруппаСтраницы.ТекущаяСтраница = Элементы.СтраницаВход; 
  Элементы.СтраницаВход.Видимость = Истина; 
  Элементы.СтраницаРеквизиты.Видимость = Ложь;
                Элементы.СтраницаУспешно.Видимость = Ложь; 
   
 ИначеЕсли Шаг = 2 Тогда 
   
  Элементы.ГруппаСтраницы.ТекущаяСтраница = Элементы.СтраницаРеквизиты; 
  Элементы.СтраницаВход.Видимость = Ложь; 
  Элементы.СтраницаРеквизиты.Видимость = Истина;
                Элементы.СтраницаУспешно.Видимость = Ложь; 
 Иначе 
   
  Элементы.ГруппаСтраницы.ТекущаяСтраница = Элементы.СтраницаУспешно; 
  Элементы.СтраницаВход.Видимость = Ложь; 
  Элементы.СтраницаРеквизиты.Видимость = Ложь;
                Элементы.СтраницаУспешно.Видимость = Истина; 
 
 КонецЕсли; 
 
 Форма.КлючСохраненияПоложенияОкна = СтрШаблон("СостояниеФормыШаг%1", Шаг); 
  
КонецПроцедуры

Обратить внимание следует на:
Форма.КлючСохраненияПоложенияОкна = СтрШаблон("СостояниеФормыШаг%1", Шаг);

#Design

Когда нужны кнопки без отображения фигуры?

У кнопки на форме есть свойство "Отображение фигуры" со значениями "Всегда", "При активности" и "Нет". Пожалуйста, не путайте это свойство с просто "Отображение", которое управляет выводом картинки.

По умолчанию кнопка всегда отображает вокруг себя контур. Это привычное нам отображение кнопки по умолчанию. Но если установить "При активности" или "Нет", то контур кнопки скрывается, делая ее менее заметной и выразительной.

Когда это может быть полезно?

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

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

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

#Design

В продолжении кнопок без фигуры отдельно хочу рассмотреть выбор стандартного периода в Бухгалтерии предприятия.

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

Но если все кнопки отобразить, то это выглядет перегруженно. Все таки нужно выбирать из 20 кнопок тяжеловато.

Поэтому скрытие фигуры в этом случае немного облегчает форму. Плюс и цветовая градация периода скрывается и не цепляет взгляд.

Что еще интересного в этой форме:
1. Выбор стандартного периода осуществляется в два клика. Буквально: 1й клик - Открыли форму выбора периода, 2й клик - Нажали на нужный период.

2. У кнопки «День…» не логичное расположение. Так как кнопки идут по такой логике: Месяцы, Кварталы, Нарастающий период. На месте кнопке «День...» должна быть кнопка «1 квартал». Кстати, раньше так и было.

3. Кнопка «День…» имеет многоточие, чтобы показать. что кнопка открывает новую форму, а не выполняет действие. Кстати, в этой форме выбор дня тоже осуществляется по 1 клику.

#Design

⬆️⬆️⬆️

Вот так бы выглядела форма выбора стандартного периода, если бы мы отображали фигуры у кнопок.

#Design

Диалоговое окно

Диалоговое окно открывается для вопроса или предупреждения пользователю. Это блокирующее сообщение, которое требует обязательного внимания пользователя. Обычно выводится для необратимых действий, например, очистка табличной части или установка особого режима работы.

Вот несколько правил, которые помогут сделать хорошее диалоговое окно:
1️⃣ Сообщение диалога должно быть понятным (спасибо, Кэп!).
Важно рассказать, что планируется сделать и что требуется от пользователя.
Сам вопрос лучше начинать с новой строки, чтобы явно выделить действие.

2️⃣ Описания действий на кнопках должны быть четкие.
В утвердительной кнопке лучше повторить действие из вопроса, которое запрашивается у пользователя. Стоит обратить внимание на действия со словом Отмена, чтобы избежать ситуаций, когда будет две кнопки «Да, отменить» и «Отменить».

3️⃣ У пользователя должна быть возможность закрыть диалог без выбора действия.
Обычно пользователь для этого закрывает диалог по крестику в правом верхнем углу. Но если нет кнопки с КодВозвратаДиалога.Отмена, то иконка будет доступна. Стоит такую кнопку добавлять самостоятельно, например, вместо негативного действия.

Пример на оповещениях:

ТекстВопроса = 
    "Для отключения уведомлений и комфортной работы рекомендуем использовать режим тишины.   
     |В этом режиме будут приходить только важные уведомления 
     | 
     |Установить режим тишины?";

Кнопки = Новый СписокЗначений;
Кнопки.Добавить(КодВозвратаДиалога.Да, "Установить режим тишины");
Кнопки.Добавить(КодВозвратаДиалога.Отмена, "Нет, оставить как есть);

ОписаниеОповещения = Новый ОписаниеОповещения("УстановитьРежимТишиныЗавершение", ЭтотОбъект);
ПоказатьВопрос(ОписаниеОповещения, ТекстВопроса, Кнопки);

Пример на Асинх:

&НаКлиенте 
Асинх Процедура ЗадатьВопрос() 
  
 ТекстВопроса =  
  "Для отключения уведомлений и комфортной работы рекомендуем использовать режим тишины.   
  |В этом режиме будут приходить только важные уведомления 
  | 
  |Установить режим тишины?"; 
  
 Кнопки = Новый СписокЗначений; 
 Кнопки.Добавить(КодВозвратаДиалога.Да, "Установить режим тишины"); 
 Кнопки.Добавить(КодВозвратаДиалога.Отмена, "Нет, оставить как есть"); 
  
 Результат = Ждать ВопросАсинх(ТекстВопроса, Кнопки); 
  
 Если Результат = КодВозвратаДиалога.Да Тогда 
  Сообщить("Режим тишины установлен"); 
 КонецЕсли; 
  
КонецПроцедуры

#Design

Подсказка и расширенная подсказка

💡 У большинства элементов есть свойство Подсказка, которая выводится рядом с элементом в зависимости от свойства Отображение подсказки. По умолчанию подсказка - это обычная строка, но можно включить Расширенную подсказку, чтобы использовать форматированную строку.

Для этого на элементе формы следует нажать на правую кнопку мыши и выбрать пункт Показать расширенную подсказку. В форматированной строке уже можно указывать ссылки и менять шрифт текста.

1️⃣ Для разовых подсказок хорошо подходит отображение через кнопку. Например, если пользователь видит новый ему элемент и сомневается, что с ним делать. В этом случае ему достаточно один раз посмотреть подсказку по кнопке, чтобы понять, что делать. Позже он сможет вернуться к этой подсказке, если потребуется

2️⃣ Если форма используется не часто, то можно расположить подсказку сверху о всей форме, чтобы у пользователя она всегда была перед глазами. Например, если это форма с настройками каких-то правил. В этом случае пользователь при открытии формы сразу видит, что нужно сделать

3️⃣ Для некоторых сложных элементов стоит сделать подсказку снизу, чтобы объяснить, что этот реквизит означает и для чего используется. Важно давать подсказки на важные элементы формы, чтобы подчеркнуть их важность

4️⃣ Для акцентирования внимания на конкретный реквизит допустимо использовать различные средства выделения, например, желтый фон или картинки

5️⃣ Подсказок много не бывает, но они не должны быть навязчивыми.



#Design

Флажок

Флажок используем для включения или выключения какой-либо опции (у него два состояния)

1️⃣ У Флажка следует установить заголовок справа. Следут отойти от умолчания платформы

2️⃣ Зона действия флажка, с точки зрения интерфейса, небольшая или отсутствует. Например, при включении флажка можно включить доступность соседнего реквизита или гиперссылки. В случае если требуется влиять на форму сильнее, то лучше использовать Выключатель или Переключатель

3️⃣ Флажок следует использовать для простой опции, в которой понятно, что означают оба состояния. Если из названия сложно понять действие флажка, то можно добавить подсказку снизу

4️⃣ Не следует использовать флажок для сложных опций, в которых не понятны оба состояния. В этом случае лучше использовать Переключатель, чтобы явно описать включенное и выключенное состояние

5️⃣Не следует в заголовке флажка использовать отрицательные формулировки, потому что потребуется дополнительное усилие, чтобы понять выключенный флажок, например, «Не Не проводить документ при записи»

Больше в Дизайн гайде по 1С

#Design

Переключатель

В других языках этот элемент называется Радиокнопки (radiobutton). Он получил название от кнопок старых радиоприемников: при нажатии на кнопку включалась определенная частота, остальные кнопки отскакивали вверх. Визуально, такие кнопки больше похожи на переключатель, но среди дизайнеров название не прижилось, а вот в 1С используем именно его - для пользователя понятнее «переключатель», а не «радиокнопка»

Переключатель используется для выбора одного значения из нескольких перечисленных

1️⃣ Переключатель лучше использовать когда значений немного - от 2 до 5
Если значений больше, то используется Поле ввода со списком значений

2️⃣ Переключатель действует на то, что находится справа и под ним
Не следует по переключателю менять форму выше этого элемента

3️⃣ Выбранное значение по умолчанию должно идти первым в списке
Например:
🔘Все ⚪ С ошибками ⚪ Без ошибок

4️⃣ Для сложных опций рекомендуется добавлять подсказки к значениям переключателя
Чтобы это сделать следует использовать два элемента формы с путем к одному реквизиту. В этом случае для каждого элемента можно добавить свою подсказку

5️⃣ Не следует в значениях переключателя делать повторяющийся текст, его лучше вынести в заголовок

Больше в Дизайн гайде по 1С

#Design

Поле ввода

Базовый элемент для ввода значений

1️⃣ Ширина поля должна вмешать самое длинное значение из списка выбора

2️⃣ Кнопка Очистки (x) должна быть включена, если в поле ввода предусмотрено удаление или пустое значение. Включать ее нужно самостоятельно, так как по умолчанию она выключена. При этом в отборах на форме она не нужна, так там используется флажок

3️⃣ Должна быть подсказка ввода для пустого значения на форме, если логикой формы предусмотрено, что оно может быть не заполнено. Например, если пустое поле означает, что будут использованы все значения - По всем контрагентам

4️⃣ Кнопка выбора для строковых полей нужна, если пользователь может из чего-то выбрать. Например, путь к файлу или выбор наименования. Такую кнопку и обслуживающий код следует добавить самостоятельно

5️⃣ Для строковых значений больше 100 символов лучше использовать многострочное поле ввода. Для таких полей лучше всего подходит заголовок сверху

6️⃣ Если в поле выбора всего одно значение, то обеспечьте самостоятельное заполнение этого реквизита, а поле скройте, например, функциональной опцией. Выбор из одного элемента - не выбор

7️⃣ В формах обработки реквизиты, которые повторяются между открытиями лучше сохранять, например, поля с периодом или организацией. Настройка сохранения реквизитов формы выполняется в палитре свойств формы

8️⃣ Не используйте платформенный выбор типа для составных типов. Добавьте отдельный выбор типа, например, Контрагент или Физическое лицо в форму перед выбором элемента

Больше в Дизайн гайде по 1С

#Design

Кнопка

Кнопка используется для выполнения действия на форме

1️⃣ Используйте кнопку для выполнения действия по запросу пользователя. Если можно выполнить действие без подтверждения пользователя, то кнопка не нужна. Например, если мы делаем ипотечный калькулятор, то расчет суммы можно выводить сразу после введения пользователем параметров расчета. Не нужно для этого нажимать кнопку «Рассчитать»

2️⃣ Используйте кнопку для выполнения длительных действий с предупреждением пользователя. Если процесс занимает много времени, то лучше пользователя предупредить об этом при или перед нажатием на кнопку

3️⃣ Используйте кнопку с пометкой для команды, связанной со строкой списка (табличная часть или динамический список), например "Использовать как основной".
Пример кода отображения пометки:

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

КонецПроцедуры

4️⃣ Сделайте понятный заголовок для кнопки, не обязательно делать его коротким. Например, "Рассчитать сумму платежа" звучит лучше, чем просто "Рассчитать". В случае если по кнопке будет открываться новая форма (не рекомендуется), то название кнопки должно сообщать об этом. Например, "Показать настройки"

5️⃣ Используйте кнопку Без фигуры для команд, которые не рекомендуется выполнять или когда кнопок слишком много. Следует использовать с осторожностью. Подробнее про отображение кнопок без фигур

6️⃣ Используйте только одну кнопку с действием по умолчанию на форме. Если требуется сделать кнопку похожей на действие по умолчанию, то установите оформление:
- шрифт - Жирный
- цвет фона кнопки - Золотой RGB(255, 255, 0)

7️⃣ Не используйте кнопку для перехода к другой форме, используйте для этого Гиперссылку
Больше в Дизайн гайде по 1С

#Design

Гиперссылки

Гиперссылка используется для перехода к другой форме. Пользователю привычно, что по гиперссылке он куда-то перейдет или откроется новая форма и будет потерян фокус основной формы

1️⃣ Используйте для открытия подчиненных и служебных форм. Например, настройка НДС или счетов учета

2️⃣ Давайте осмысленное и достаточно длинное название гиперссылке, чтобы в нее можно было удобно нажать.
Например, плохо «Читайте об этом в статье 1, 2 и 3»

3️⃣ Из гиперссылки должно быть понятно, куда она ведет.
Например, плохо Настройки, потому что это могут быть и настройки программы, и настройки налогов и отчетов, и настройки учетной политики, и настройки функциональности программы, и настройки администрирования и еще какие-нибудь настройки формы

4️⃣ Не выполняйте действия на форме с помощью гиперссылки. Используйте для этого Кнопки
При нажатии на ссылку пользователь ожидает смену фокуса, если этого не происходит, то выглядит как ошибка

5️⃣ Не пишите в гиперссылке слова "здесь", "тут" или "подробнее".
Например, вместо «Подробнее здесь» пишите «Подробнее в статье на GitHub», еще лучше «Подробнее в статье Дизайн гайд на GitHub»

6️⃣ Не располагайте две ссылки подряд.
Потому что сложно заметить переход между двумя ссылками в виде пробела или запятой.
Например, плохо Настройки программы, учетная политика. Запятая плохо разделяет ссылки при беглом чтении.

7️⃣ Не меняйте цвет гиперссылки. Исключение: ссылки с предупреждениями

Больше в Дизайн гайде по 1С

#Design

Шапка формы

Документ или обработка обычно состоят из следующих частей: Шапка, Табличная часть и Подвал.
Шапка формы предназначена для размещения ключевых реквизитов, которые влияют на табличную часть.

При компоновке шапки формы придерживайтесь следующих правил:

1️⃣ Расположение элементов по важности
Размещайте элементы сверху вниз и слева направо, начиная с самых важных. Самый важный реквизит должен находиться в левом верхнем углу, наименее важный — в правом нижнем

2️⃣ Редко изменяемые поля — справа
Поля, которые редко требуют изменений (например, Организация или Подразделение), размещайте справа. Убедитесь, что они заполняются автоматически или сохраняют предыдущие значения.

3️⃣ Поля с необязательным заполнением — тоже справа
Реквизиты, которые можно оставить пустыми или для которых пустое значение допустимо (например, отбор по договору или контрагенту), также размещайте справа. В этом случае обязательно укажите в Подсказке ввода, как форма будет себя вести при пустом значении

4️⃣ Ассиметрия — это нормально
Не стремитесь к симметрии левой и правой сторон. Главное, чтобы слева находились важные поля, а справа — менее значимые. Допустимо, если справа окажется больше полей, чем слева

5️⃣ Скрывайте ненужные поля
Если поле не требуется заполнять или его можно заполнить автоматически, скрывайте его для упрощения формы. Например, если Организация или Подразделение одни, их можно скрыть. Используйте свойства Видимость или Функциональные опции

6️⃣ Учитывайте зависимость реквизитов
Не допускайте, чтобы нижние поля влияли на верхние. Например, не размещайте сначала поле Договор, а затем Контрагента — пользователь может изменить нижнее поле и не заметить изменений выше. Поля, глобально влияющие на форму (например, Вид операции), располагайте в самом верху

Больше в Дизайн гайде по 1С

#Design