Цель - улучшить качество интерфейсных решений в среде 1С
Гайд — это рекомендации по дизайну форм в 1С: как выбирать элементы интерфейса и располагать их на форме. Примеры и антипримеры помогают понять, как применять рекомендации на практике
Рекомендации и примеры в этом гайде относятся к интерфейсу «Такси». Для интерфейса «Версия 8.5» см. рекомендации 1С и методику перехода в разделе Дополнительные материалы
- Гайд для создания форм на 1С
Декорация - это базовый элемент для вывода текста
Обычно используется для подсказок на форме. Текст можно оформить с помощью форматированной строки
- Не ставьте точку в конце, если текст состоит из одного предложения
- Не используйте декорацию, если она не выполняет полезное действие
- Не используйте декорацию для установки заголовка простых полей. В этом случае не срабатывает автофокус на поле и часто забывают поставить двоеточие в заголовке поля
- Не используйте декорацию для выравнивания элементов. Используйте для этого свойства Групп
Обычно используется для иллюстраций и привлечения внимания пользователя
- Используйте картинку в составе форматированной строки или отдельным элементом
- Не используйте картинку из файла, добавьте ее в библиотеку картинок
Поле ввода - это базовый элемент для ввода значений
-
Установите ширину поля такой, чтобы вместилось самое длинное значение из списка
-
Добавьте кнопку очистки (x), если значение поля можно удалить или оставить пустым. Исключение — отборы на формах: для них используется флажок
-
Добавьте подсказку ввода, если поле можно оставить пустым
-
Добавьте кнопку выбора для строковых полей, если есть из чего выбрать, например путь к файлу или наименование
-
Используйте многострочное поле ввода для строковых значений длиннее 100 символов. Установите заголовок для многострочного поля сверху
-
Сохраняйте выбранные пользователем значения реквизитов формы, если они используются повторно, например период или организацию
-
Чтобы сэкономить место, например в шапке отчета, скройте заголовки полей Организация и Банковский счет. Пользователь знает свою организацию и может определить назначение поля по выбранному значению
-
Добавляйте подсказку ввода, если скрываете заголовок. Например, для поля Организация в отчете напишите "По всем организациям", чтобы объяснить, как работает отчет с пустым полем
-
Не используйте платформенный выбор типа для составных типов. Добавьте отдельный выбор типа, например, Контрагент или Физическое лицо
-
Если доступно только одно значение, заполните реквизит автоматически, а поле скройте функциональной опцией
Флажок используется для включения или выключения опции
- Установите заголовок флажка справа, изменив расположение по умолчанию
- Флажок влияет на небольшую часть интерфейса или не меняет его. Например, он может сделать доступным соседний реквизит или гиперссылку. Если требуется изменить большую часть формы, используйте Выключатель или Переключатель
- Используйте флажок для простой опции, в которой понятно, что означают оба состояния. Если из названия сложно понять действие флажка, то можно добавить подсказку снизу
- Не используйте флажок для сложных опций, в которых неочевидно, что означает каждое состояние. Используйте для этого Переключатель
- Не используйте в заголовке флажка отрицательные формулировки, например «Не проводить документ при записи»: пользователю сложнее понять, что произойдет, когда такой флажок снят
Выключатель переключает состояние формы, реквизита или настройки. Например, включает или выключает опцию. Это вид флажка, и к нему применяются правила Флажка
Выключатель заимствован из мобильных операционных систем, где он используется для включения и выключения настроек
- Используйте выключатель, если при переключении состояния действие происходит сразу и не нужны дополнительные подтверждения
- Выключатель ассоциируется с большим влиянием, чем флажок. Он может менять большую часть формы
- Не используйте на одной странице больше 2-3 выключателей
Переключатель используется для выбора одного значения из перечисленных
-
Используйте переключатель, когда значений немного - от 2 до 5, если значений больше, используйте Поле ввода со списком значений
-
Установите значение по умолчанию первым в списке, например, 🔘 Все ⚪ С ошибками ⚪ Без ошибок
-
Добавьте подсказки к значениям переключателя для сложных опций
Для этого создайте два элемента формы с путем к одному реквизиту, у каждого элемента можно сделать свою подсказку
Как выглядит в конфигураторе
-
Выносите повторяющиеся тексты значений переключателя в заголовок
-
Переключатель действует на то, что находится справа и под ним
Тумблер используется для выбора одного значения из перечисленных. Аналогичен Переключателю
- Используйте тумблер для 3-5 значений
- Используйте тумблер, если от выбранных значений перестраивается форма под ним или выполняется какое-то действие, потому что тумблер выглядит как кнопки
- Тумблер выглядит компактнее, чем Переключатель и подходит для коротких значений
- Не используйте в значениях тумблера повторяющиеся слова, вынесите их в заголовок
- Не используйте тумблер для 2 значений - неясно, какой пункт выбран
Гиперссылка используется для перехода к другой форме. Пользователь ожидает, что по нажатию откроется другая форма и фокус перейдет на нее
- Используйте для открытия подчиненных и служебных форм. Например, настройка НДС
- Давайте осмысленное и достаточно длинное название гиперссылке, чтобы на нее было удобно нажать
- Из гиперссылки должно быть понятно, куда она ведет
- Не выполняйте действия на форме с помощью гиперссылки. Используйте для этого Кнопки
- Не пишите в гиперссылке слова "здесь", "тут" или "подробнее"
- Не ставьте две ссылки подряд - трудно заметить переход между двумя ссылками
- Не меняйте цвет гиперссылки, за исключением ссылок с предупреждением
Кнопка используется для выполнения действия на форме
-
Используйте кнопку для выполнения действия по запросу пользователя
-
Используйте кнопку с пометкой для команды, связанной со строкой списка (табличная часть или динамический список), например "Использовать как основной"
-
Сделайте понятный заголовок для кнопки, не пытайтесь сделать его коротким. Если кнопка открывает новую форму (не рекомендуется), сообщите об этом в ее названии. Например, "Показать настройки"
-
Используйте кнопку Без фигуры для команд, которые не рекомендуется выполнять или когда кнопок слишком много. Используйте такие кнопки с осторожностью Подробнее про отображение кнопок без фигур
-
Не используйте кнопку для перехода к другой форме, используйте для этого Гиперссылку
Табличные части используются для хранения и управления множеством связанных записей внутри одного объекта
-
Делайте заголовок табличной части в 1 строку. Если заголовок получается сложным, добавьте пояснения в строке таблицы. Пример — Корректировка реализации
-
Уберите заголовок табличной части, если в ней всего одна колонка. Опишите декорацией содержание табличной части, если это требуется
-
Добавьте в табличной части пустую последнюю колонку, чтобы управлять шириной табличной части. Отключите заголовок у этой колонки, включите "Только просмотр" и установите "Растягивать по горизонтали"
-
Выравнивайте заголовок колонки так же, как ее значения: для типа Число — справа, для типов Строка и Ссылка — слева (по умолчанию)
-
Ознакомьтесь со стандартом для проектирования интерфейсов - https://its.1c.ru/db/v8std/content/717/hdoc
Диалоговое окно используется для вопросов и предупреждений. Оно блокирует работу с формой, пока пользователь не ответит или не закроет его. Обычно выводится для необратимых действий, например, очистка табличной части или установка особого режима работы. Следует использовать с осторожностью!
-
Объясните в тексте диалогового окна, что требуется от пользователя. Задайте четкий вопрос и предложите однозначные варианты ответа
-
Назовите кнопку подтверждения так, чтобы пользователь понимал, что произойдет после нажатия. Текст кнопки должен повторять запрашиваемое действие
-
Обрабатывайте закрытие диалогового окна по крестику справа вверху. Для этого установите одну из команд диалогового окна как КодВозвратаДиалога.Отмена
&НаКлиенте Асинх Процедура ЗадатьВопрос() ТекстВопроса = "Для отключения уведомлений и комфортной работы рекомендуем использовать режим тишины. |В этом режиме будут приходить только важные уведомления | |Установить режим тишины?"; Кнопки = Новый СписокЗначений; Кнопки.Добавить(КодВозвратаДиалога.Да, "Установить режим тишины"); Кнопки.Добавить(КодВозвратаДиалога.Отмена, "Нет, оставить как есть"); Результат = Ждать ВопросАсинх(ТекстВопроса, Кнопки); Если Результат = КодВозвратаДиалога.Да Тогда Сообщить("Режим тишины установлен"); КонецЕсли; КонецПроцедуры
У большинства элементов есть свойство Подсказка. Способ ее вывода задается свойством Отображение подсказки. Подсказка - это обычная строка, но можно включить Расширенную подсказку, чтобы использовать форматированную строку. Для этого нажмите правой кнопкой мыши на элементе формы и выберите пункт Показать расширенную подсказку
-
Используйте для разовых подсказок отображение через кнопку. Если пользователь видит новый ему элемент и сомневается, что с ним делать, ему достаточно один раз посмотреть подсказку по кнопке, чтобы разобраться. Позже он сможет вернуться к этой подсказке, если потребуется
-
Используйте подсказку сверху о всей форме, если она используется нечасто. У пользователя такая подсказка будет всегда перед глазами. Например, если это форма с настройками правил
-
Сделайте подсказку снизу для сложных элементов, чтобы объяснить пользователю, что этот реквизит означает. Добавляйте пояснения к важным элементам формы, чтобы пользователь обратил на них внимание
-
Используйте оформление, например желтый фон или картинки, чтобы привлечь внимание к конкретному реквизиту
-
Подсказок много не бывает, но они не должны быть навязчивыми
Группы используются для объединения элементов вместе. Группы позволяют управлять расположением и выводом элементов
-
Проверьте уместность отображения заголовка у группы, в большинстве случаев он не требуется
-
Уберите из заголовка слово "Группа", которое добавляет платформа
-
Уберите подсказки группы, созданные платформой по умолчанию - они выводятся при удержании курсора над группой
-
Избегайте значения Горизонтально, если возможно у свойства Расположение. Ориентируйтесь на минимально допустимое разрешение экрана 1280 × 768 пикселей
-
Изучите типы выделения обычной группы. Сильное выделение - добавляется полоса и отступ у подчиненных реквизитов, Обычное выделение и Слабое выделение - крупный заголовок
-
Используйте обычное выделение, если нужно сделать больший отступ вокруг группы. Подробнее о слабом и обычном отображении групп
-
Используйте свойство - Выравнивание элементов и заголовков для прижатия элементов к одному из краев
Свертываемая группа позволяет скрыть реквизиты внутри сворачиваемого блока
-
Используйте свертываемую группу, чтобы скрыть элементы - это делает форму компактнее и удобнее для работы. См. также стандарт - Оформление групп разделов с настройками и справочниками
-
Опишите содержимое свертываемой группы в ее заголовке, например, Банковский счет и Адрес:
Если в группе находятся только команды или гиперссылки (см. пример в разделе Администрирование в БСП), заголовок свернутой группы можно не заполнять. Это упрощает навигацию по форме
-
Снимите флаг "Отображать отступ слева" у свертываемой группы, чтобы элементы были вровень с остальными реквизитами формы
-
Для программного управления состоянием группы используйте методы Группа.Показать() и Группа.Скрыть()
-
Не помещайте в свертываемую группу элементы, которые требуются часто или являются обязательными
-
Не размещайте свертываемую группу выше обычных групп
Всплывающая группа может использоваться для размещения необязательных или справочных реквизитов, чтобы форма была компактнее
-
Используйте элемент с осторожностью, так как для пользователя такая группа не является привычным элементом и он может пропустить ее
-
Покажите значения в заголовке группы, чтобы пользователь мог увидеть их, не открывая группу
-
Установите Отображение управления = Картинка, чтобы появилась соответствующая пиктограмма у группы. Это позволит пользователю узнавать поведение таких элементов
-
Используйте всплывающую группу как подсказку, на которой можно разместить не только форматированную строку, но и дополнительные реквизиты. Сделайте говорящий заголовок, побуждающий пользователя на него нажать
-
Используйте всплывающую группу как открываемую форму по гиперссылке, для этого установите цвет текста заголовка как у гиперссылки
-
Не помещайте во всплывающую группу обязательные реквизиты, а также реквизиты, которые часто используются
-
Не экономьте на заголовке у всплывающих групп. Пользователь должен понимать, что ожидать при нажатии на заголовок
Командную панель можно собрать самостоятельно, если требуется добавить свои команды
- Установите Источник команд - Форма для стандартных команд объекта
- Установите Источник команд - Глобальные команды командной панели формы для глобальных команд, например Структура подчиненности, Дополнительные сведения и История изменений
- Чтобы разбить табличную часть на две, продублируйте стандартные команды формы и отключите их в составе команд формы
-
Расположите основную кнопку слева вверху в формах на весь экран, например, Провести и закрыть
-
Расположите основную кнопку справа внизу в формах (модальных) не на весь экран, например, ОК
-
Используйте только одну кнопку по умолчанию на форме. Если нужно выделить несколько важных и равнозначных действий, оформите их кнопки как кнопку по умолчанию: шрифт — Жирный и цвет фона кнопки — Золотой RGB(255, 255, 0)
-
Переназначайте кнопку по умолчанию при переключении страниц, если на форме их несколько
- Располагайте элементы сверху вниз, слева направо в порядке важности
- Расположите справа поля, которые нужно редко менять: Например, поля Организация и Подразделение обычно заполняются значениями по умолчанию и не требуют внимания пользователя. Проверьте, что они заполняются автоматически или сохраняют предыдущие значения
- Не стремитесь сделать левую и правую части симметричными. Главное, чтобы слева были важные поля, а справа неважные. Нормально, если с правой стороны будет больше полей, чем с левой
- Скрывайте поля по Функциональным опциям, например, Организация или Подразделение, чтобы упростить форму
- Не допускайте, чтобы нижние поля влияли на элементы, находящиеся выше. Например, не размещайте сначала Договор, а потом Контрагента. Пользователь может изменить это поле и не обратить внимание на то, что поменялось выше
- Не размещайте поля, которые изменяют форму, ниже других реквизитов. Расположите условный Вид операции самым первым полем
-
Расположите в подвале наименее важные реквизиты или справочную информацию в виде итогов
-
В Бухгалтерии предприятия в формах документов последними реквизитами обычно идут Комментарий и Ответственный
Условное оформление используется для визуального выделения данных на основе заданных условий
- Применяйте одни и те же стили для аналогичных условий, например в динамическом списке новые элементы выделяются жирным
- Не используйте много различных стилей и цветов
- Не используйте условное оформление для управления видимостью строк
- Стандарты по оформлению форм
- Хитрости и советы по созданию форм от Рарус
- Контур.Гайды
- Репозиторий UX-1C:Элементы интерфейса 1С
- Алан Купер об интерфейсе. Основы проектирования взаимодействия
- Стек технологий для 1С
- Рекомендации 1С по переходу на интерфейс «Версия 8.5»
- Методика перевода конфигураций на интерфейс «Версия 8.5»
Добавляйте вопросы и пожелания в Issues к этому репозиторию.
При необходимости гайд будет дополняться
Подпишитесь на мой Телеграм-канал или купите мне кофе
Прочитайте и поставьте + этой статье на Инфостарт - Гайд для создания форм на 1С