diff --git a/public/uf_notes/img/blankColumn.png b/public/uf_notes/img/blankColumn.png deleted file mode 100644 index 21b3282..0000000 Binary files a/public/uf_notes/img/blankColumn.png and /dev/null differ diff --git a/public/uf_notes/img/button.png b/public/uf_notes/img/button.png deleted file mode 100644 index 2bac1ec..0000000 Binary files a/public/uf_notes/img/button.png and /dev/null differ diff --git a/public/uf_notes/img/buttonHint.png b/public/uf_notes/img/buttonHint.png deleted file mode 100644 index 65f9015..0000000 Binary files a/public/uf_notes/img/buttonHint.png and /dev/null differ diff --git a/public/uf_notes/img/buttonUseAsDefault.png b/public/uf_notes/img/buttonUseAsDefault.png deleted file mode 100644 index 4d619c6..0000000 Binary files a/public/uf_notes/img/buttonUseAsDefault.png and /dev/null differ diff --git a/public/uf_notes/img/checkboxTitle.png b/public/uf_notes/img/checkboxTitle.png deleted file mode 100644 index e809b57..0000000 Binary files a/public/uf_notes/img/checkboxTitle.png and /dev/null differ diff --git a/public/uf_notes/img/collapsibleGroupTitle.png b/public/uf_notes/img/collapsibleGroupTitle.png deleted file mode 100644 index 0ff66de..0000000 Binary files a/public/uf_notes/img/collapsibleGroupTitle.png and /dev/null differ diff --git a/public/uf_notes/img/commandPanel.png b/public/uf_notes/img/commandPanel.png deleted file mode 100644 index bb42722..0000000 Binary files a/public/uf_notes/img/commandPanel.png and /dev/null differ diff --git a/public/uf_notes/img/comment.png b/public/uf_notes/img/comment.png deleted file mode 100644 index a40cdb1..0000000 Binary files a/public/uf_notes/img/comment.png and /dev/null differ diff --git a/public/uf_notes/img/complicateTitle.png b/public/uf_notes/img/complicateTitle.png deleted file mode 100644 index e47cdd5..0000000 Binary files a/public/uf_notes/img/complicateTitle.png and /dev/null differ diff --git a/public/uf_notes/img/designGuide.png b/public/uf_notes/img/designGuide.png deleted file mode 100644 index d667198..0000000 Binary files a/public/uf_notes/img/designGuide.png and /dev/null differ diff --git a/public/uf_notes/img/dialog.png b/public/uf_notes/img/dialog.png deleted file mode 100644 index f98923d..0000000 Binary files a/public/uf_notes/img/dialog.png and /dev/null differ diff --git a/public/uf_notes/img/formatString.png b/public/uf_notes/img/formatString.png deleted file mode 100644 index 37c3ec0..0000000 Binary files a/public/uf_notes/img/formatString.png and /dev/null differ diff --git a/public/uf_notes/img/groupTitle.png b/public/uf_notes/img/groupTitle.png deleted file mode 100644 index 2924132..0000000 Binary files a/public/uf_notes/img/groupTitle.png and /dev/null differ diff --git a/public/uf_notes/img/highlightGroup.png b/public/uf_notes/img/highlightGroup.png deleted file mode 100644 index 56b75ef..0000000 Binary files a/public/uf_notes/img/highlightGroup.png and /dev/null differ diff --git a/public/uf_notes/img/hyperlink.png b/public/uf_notes/img/hyperlink.png deleted file mode 100644 index aa41315..0000000 Binary files a/public/uf_notes/img/hyperlink.png and /dev/null differ diff --git a/public/uf_notes/img/inputClearButton.png b/public/uf_notes/img/inputClearButton.png deleted file mode 100644 index bb2441f..0000000 Binary files a/public/uf_notes/img/inputClearButton.png and /dev/null differ diff --git a/public/uf_notes/img/inputField.png b/public/uf_notes/img/inputField.png deleted file mode 100644 index f94c6ce..0000000 Binary files a/public/uf_notes/img/inputField.png and /dev/null differ diff --git a/public/uf_notes/img/okButton.png b/public/uf_notes/img/okButton.png deleted file mode 100644 index c822015..0000000 Binary files a/public/uf_notes/img/okButton.png and /dev/null differ diff --git a/public/uf_notes/img/organization.png b/public/uf_notes/img/organization.png deleted file mode 100644 index 9ea4758..0000000 Binary files a/public/uf_notes/img/organization.png and /dev/null differ diff --git a/public/uf_notes/img/pictureLabel.png b/public/uf_notes/img/pictureLabel.png deleted file mode 100644 index ab325d9..0000000 Binary files a/public/uf_notes/img/pictureLabel.png and /dev/null differ diff --git a/public/uf_notes/img/popupGroup.png b/public/uf_notes/img/popupGroup.png deleted file mode 100644 index 9c01b6c..0000000 Binary files a/public/uf_notes/img/popupGroup.png and /dev/null differ diff --git a/public/uf_notes/img/popupGroupHyperlink.png b/public/uf_notes/img/popupGroupHyperlink.png deleted file mode 100644 index 9734811..0000000 Binary files a/public/uf_notes/img/popupGroupHyperlink.png and /dev/null differ diff --git a/public/uf_notes/img/postAndClose.png b/public/uf_notes/img/postAndClose.png deleted file mode 100644 index 3e28b6d..0000000 Binary files a/public/uf_notes/img/postAndClose.png and /dev/null differ diff --git a/public/uf_notes/img/radiobuttonPeriods.png b/public/uf_notes/img/radiobuttonPeriods.png deleted file mode 100644 index b3c0db9..0000000 Binary files a/public/uf_notes/img/radiobuttonPeriods.png and /dev/null differ diff --git a/public/uf_notes/img/radiobuttons.png b/public/uf_notes/img/radiobuttons.png deleted file mode 100644 index 08b0418..0000000 Binary files a/public/uf_notes/img/radiobuttons.png and /dev/null differ diff --git a/public/uf_notes/img/radiobuttonsWithHints.png b/public/uf_notes/img/radiobuttonsWithHints.png deleted file mode 100644 index 671ab85..0000000 Binary files a/public/uf_notes/img/radiobuttonsWithHints.png and /dev/null differ diff --git a/public/uf_notes/img/representationGroup.gif b/public/uf_notes/img/representationGroup.gif deleted file mode 100644 index 2d5f14e..0000000 Binary files a/public/uf_notes/img/representationGroup.gif and /dev/null differ diff --git a/public/uf_notes/img/results.png b/public/uf_notes/img/results.png deleted file mode 100644 index 7c14796..0000000 Binary files a/public/uf_notes/img/results.png and /dev/null differ diff --git a/public/uf_notes/img/switcher.png b/public/uf_notes/img/switcher.png deleted file mode 100644 index 44859b1..0000000 Binary files a/public/uf_notes/img/switcher.png and /dev/null differ diff --git a/public/uf_notes/img/table.png b/public/uf_notes/img/table.png deleted file mode 100644 index 3ebc629..0000000 Binary files a/public/uf_notes/img/table.png and /dev/null differ diff --git a/public/uf_notes/img/titleOnGroup.png b/public/uf_notes/img/titleOnGroup.png deleted file mode 100644 index 5338cc9..0000000 Binary files a/public/uf_notes/img/titleOnGroup.png and /dev/null differ diff --git a/public/uf_notes/img/toggle.png b/public/uf_notes/img/toggle.png deleted file mode 100644 index 2219c9e..0000000 Binary files a/public/uf_notes/img/toggle.png and /dev/null differ diff --git a/public/uf_notes/img/underHint.png b/public/uf_notes/img/underHint.png deleted file mode 100644 index a0bc42e..0000000 Binary files a/public/uf_notes/img/underHint.png and /dev/null differ diff --git a/public/uf_notes/img/usualLabel.png b/public/uf_notes/img/usualLabel.png deleted file mode 100644 index 962572c..0000000 Binary files a/public/uf_notes/img/usualLabel.png and /dev/null differ diff --git a/src/content/docs/knowledge-base/Общие/Управляемые формы/Общие рекомендации.md b/src/content/docs/knowledge-base/Общие/Управляемые формы/Общие рекомендации.md deleted file mode 100644 index cedc694..0000000 --- a/src/content/docs/knowledge-base/Общие/Управляемые формы/Общие рекомендации.md +++ /dev/null @@ -1,440 +0,0 @@ ---- -title: Общие рекомендации -slug: общие-управляемые-формы/общие-рекомендации ---- - -[Спизжено отсюда](https://github.com/Oxotka/1CDesignGuide/blob/main/README.md) - -# Гайд для создания форм на 1С - -**Цель** - улучшить качество интерфейсных решений в среде 1С - -**Гайд** - это инструкция по дизайну форм в среде 1С. Он охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна - -- [Гайд для создания форм на 1С](#гайд-для-создания-форм-на-1с) - - [Элементы формы](#элементы-формы) - - [Декорация](#декорация) - - [Декорация-надпись](#декорация-надпись) - - [Декорация-картинка](#декорация-картинка) - - [Поле ввода](#поле-ввода) - - [Флажок](#флажок) - - [Выключатель (Тогл, Свитчер)](#выключатель-тогл-свитчер) - - [Переключатель](#переключатель) - - [Тумблер](#тумблер) - - [Гиперссылки](#гиперссылки) - - [Кнопка](#кнопка) - - [Табличная часть](#табличная-часть) - - [Диалоговое окно](#диалоговое-окно) - - [Подсказка и расширенная подсказка](#подсказка-и-расширенная-подсказка) - - [Компоновка формы](#компоновка-формы) - - [Группы](#группы) - - [Обычная группа](#обычная-группа) - - [Свертываемая группа](#свертываемая-группа) - - [Всплывающая группа](#всплывающая-группа) - - [Командная панель](#командная-панель) - - [Команды формы](#команды-формы) - - [Шапка формы](#шапка-формы) - - [Подвал формы](#подвал-формы) - - [Условное оформление](#условное-оформление) - - [Дополнительные материалы](#дополнительные-материалы) - - [Вопросы и пожелания](#вопросы-и-пожелания) - - [Благодарность](#благодарность) - -## Элементы формы - -### Декорация - -Декорация - это базовый элемент для вывода текста - - - -#### Декорация-надпись - -Обычно используется как подсказка на форме с помощью форматированной строки - - - -1. Не ставьте точку в конце, если текст состоит из одного предложения -2. Не используйте декорацию, если она не выполняет полезное действие -3. Не используйте декорацию для установки заголовки простых полей. В этом случае не срабатывает автофокус на поле и часто забывают поставить двоеточие в заголовке поля -4. Не используйте декорацию для выравнивания элементов. Используйте для этого свойства [Групп](#группы) - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -#### Декорация-картинка - -Обычно используется для иллюстрации чего-либо, а также для привлечения внимание пользователя - - - -1. Используйте картинку в составе форматированной строки или отдельным элементом -2. Не используйте картинку из файла, добавьте ее в библиотеку картинок - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Поле ввода - -Поле ввода - это базовый элемент для ввода значений - - - -1. Установите ширину поля такой, чтобы вмешалось самое длинное значение из списка -2. Добавьте кнопку Очистки (x), если в поле ввода предусмотрено удаление или пустое значение, кроме отборов на формах, там используется флажок -3. Опишите подсказку ввода для пустого значения на форме, если предусмотрено пустое значение - - - -4. Добавьте кнопку выбора для строковых полей ввода, если есть из чего выбрать, например, выбор Пути к файлу или Наименования -5. Используйте многострочное поле ввода для строковых значений длинее 100 символов. Установите заголовок для многострочного поля сверху -6. Сохраняйте значения выбранные пользователем для реквизитов формы, если они повторяются, например, поля с периодом или Организацией -7. Не показывайте заголовок у поля Организация или Банковский счет для сокращения места, например, в шапке отчета. Пользователь знает свою организацию и может понять что в этом поле по выбранному значению -8. Добавляйте подсказку ввода, в случае если не показываете заголовок. Для Организаций в отчете напишите "По всем организациям" - покажите поведение пустого поля - - - -9. Не используйте платформенный выбор типа для составных типов. Добавьте отдельный выбор типа, например, Контрагент или Физическое лицо -10. Не делайте поле выбора для одного значения - заполните реквизит самостоятельно, а поле скройте функциональной опцией - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Флажок - -Флажок используем для включения или выключения опции - - - -1. Установите заголовок флажка справа. Отойдите от умолчания платформы -2. Зона действия флажка, с точки зрения интерфейса, небольшая или отсутствует. Например, при включении флажка можно включить доступность соседнего реквизита или гиперссылки. Если требуется влиять на форму сильнее, используйте [Выключатель](#выключатель-тогл-свитчер) или [Переключатель](#переключатель) -3. Используйте флажок для простой опции, в которой понятно, что означают оба состояния. Если из названия сложно понять действие флажка, то можно добавить подсказку снизу -4. Не используйте флажок для сложных опций, в которых не очевидны оба состояния. Используйте для этого [Переключатель](#переключатель) -5. Не используйте в заголовке флажка отрицательные формулировки, потому что пользователю сложнее понять выключенный флажок, например, «Не Не проводить документ при записи» - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Выключатель (Тогл, Свитчер) - -Выключатель переключает состояние формы, реквизита или настройки. Например, включает или выключает опцию. Это вид флажка и к нему применяются правила [Флажка](#флажок) - -Выключатель заимствован из мобильных операционных систем, где он используется для включения и выключения настроек - - - -1. Используйте выключатель, если при переключении состояния действие происходит сразу и не нужны дополнительные подтверждения -2. Выключатель ассоциируется с большим влиянием, чем флажок. При изменении состояния действие на форму может быть более обширным -3. Не используйте на одной странице больше 2-3 выключателей - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Переключатель - -Переключатель используется для выбора одного значения из перечисленных - - - -1. Используйте переключатель когда значений немного - от 2 до 5, если больше, используйте [Поле ввода](#поле-ввода) со списком значений -2. Установите значение по умолчанию первым в списке, например, 🔘 Все ⚪ С ошибками ⚪ Без ошибок -3. Добавьте подсказки к значениям переключателя для сложных опций - - Для этого создайте два элемента формы с путем к одному реквизиту, у каждого элемента можно сделайте свою подсказку - -
Как выглядит в конфигураторе - -
- -4. Выносите повторяющиеся тексты значений переключателя в заголовок - - - -5. Переключатель действует на то, что находится справа и под ним - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Тумблер - -Тумблер используется для выбора одного значения из перечисленных. Аналогичен [Переключателю](#переключатель) - - - -1. Используйте тумблер для 3-5 значений -2. Используйте тумблер, если от выбранных значений перестраивается форма под ним или выполняется какое-то действие, потому что тумблер выглядит как кнопки -3. Тумблер выглядит компактнее, чем [Переключатель](#переключатель) и подходит для коротких значений -4. Не используйте в значениях тумблера повторяющиеся слова, вынесите их в заголовок -5. Не используйте тумблер для 2 значений - не ясно какой пункт выбран - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Гиперссылки - -Гиперссылка используется для перехода к другой форме. Пользователю привычно, что по гиперссылке он куда-то перейдет или откроется новая форма и будет потерян фокус с основной формой - - - -1. Используйте для открытия подчиненных и служебных форм. Например, настройка НДС -2. Давайте осмысленное и достаточно длинное название гиперссылке, чтобы в нее можно было удобно нажать -3. Из гиперссылки должно быть понятно, куда она ведет -4. Не выполняйте действия на форме с помощью гиперссылки. Используйте для этого [Кнопки](#кнопка) -5. Не пишите в гиперссылке слова "здесь", "тут" или "подробнее" -6. Не ставьте две ссылки подряд - трудно заметить переход между двумя ссылками -7. Не меняйте цвет гиперссылки, за исключением ссылок с предупреждением - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Кнопка - -Кнопка используется для выполнения действия на форме - - - -1. Используйте кнопку для выполняения действие по запросу пользователя -2. Используйте кнопку с пометкой для команды, связанной со строкой списка (табличная часть или динамический список), например "Использовать как основной" - - - -3. Сделайте понятный заголовок для кнопки, не пытайтесь сделать его коротким. В случае если по кнопке будет открываться новая форма (не рекомендуется), то название кнопки должно сообщать об этом. Например, "Показать настройки" -4. Используйте кнопку Без фигуры для команд, которые не рекомендуется выполнять или когда кнопок слишком много. Следует использовать с осторожностью -Подробнее про [отображение кнопок без фигур](https://t.me/AriN1C/46) -5. Не используйте кнопку для перехода к другой форме, используйте для этого [Гиперссылку](#гиперссылки) - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Табличная часть - -Табличные части используются для хранения и управления множеством связанных записей внутри одного объекта - - - -1. Делайте заголовок табличной части в 1 строку. При необходимости вывести сложный заголовок выводите подсказки в самой таблице, в строке. Например, см. Корректировка реализации - - - -2. Уберите заголовок табличной части, если в ней всего одна колонка. Опишите декорацией содержание табличной части, если это требуется -3. Добавьте в табличной части пустую последнюю колонку, чтобы управлять шириной табличной части. Отключите заголовок у этой колонки, включите "Только просмотр" и установите "Растягивать по горизонтали" - - - -4. Прижимайте заголовок колонки табличной части к значению, например, для Числа прижмите вправо, а для Строка или Ссылка - слева (по умолчанию) - -5. Ознакомьтесь со стандартом для проектирования интерфейсов - - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Диалоговое окно - -Диалоговое окно открывается для вопроса или предупреждения пользователю. Это блокирующее сообщение, которое требует обязательного внимания пользователя. -Обычно выводится для необратимых действий, например, очистка табличной части или установка особого режима работы. -Следует использовать с осторожностью! - - - -1. Уделите особое внимание тексту в диалоговом окне. Опишите подробно в тексте, что требуется от пользователя, добавьте четкий вопрос с однозначным ответом -2. Опишите утвердительное действие, чтобы пользователь однозначно понял о том, что будет выполнено. Для этого установите текст этой кнопки, чтобы он повторял запрашиваемое действие -3. Обрабатывайте закрытие диалогового окна по крестику справа вверху. Для этого установите одну из команд диалогового окна как КодВозвратаДиалога.Отмена - - ```BSL - &НаКлиенте - Асинх Процедура ЗадатьВопрос() - - ТекстВопроса = - "Для отключения уведомлений и комфортной работы рекомендуем использовать режим тишины. - |В этом режиме будут приходить только важные уведомления - | - |Установить режим тишины?"; - - Кнопки = Новый СписокЗначений; - Кнопки.Добавить(КодВозвратаДиалога.Да, "Установить режим тишины"); - Кнопки.Добавить(КодВозвратаДиалога.Отмена, "Нет, оставить как есть"); - - Результат = Ждать ВопросАсинх(ТекстВопроса, Кнопки); - - Если Результат = КодВозвратаДиалога.Да Тогда - Сообщить("Режим тишины установлен"); - КонецЕсли; - - КонецПроцедуры - ``` - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Подсказка и расширенная подсказка - -У большинства элементов есть свойство Подсказка, которая выводится в зависимости от свойства Отображение подсказки. -Подсказка - это обычная строка, но можно включить Расширенную подсказку, чтобы использовать форматированную строку. Для этого на элементе формы следует нажать на правую кнопку мыши и выбрать пункт Показать расширенную подсказку - -1. Используйте для разовых подсказок отображение через кнопку. Если пользователь видит новый ему элемент и сомневается, что с ним делать, ему достаточно один раз посмотреть подсказку по кнопке, чтобы разобраться. Позже он сможет вернуться к этой подсказке, если потребуется - - - -2. Используйте подсказка сверху о всей форме, если она используется не часто. У пользователя такая подсказка будет всегда перед глазами. Например, если это форма с настройками правил - - - -3. Сделайте подсказку снизу для сложных элементов, чтобы объяснить пользователю, что этот реквизит означает. Важно давать подсказки на важные элементы формы, чтобы подчеркнуть их важность -4. Используйте различные средства оформления для акцентирования внимания на конкретный реквизит, например, желтый фон или картинки -5. Подсказок много не бывает, но они не должны быть навязчивыми - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -## Компоновка формы - -### Группы - -Группы используются для объединения элементов вместе. Группы позволяют управлять расположением и выводом элементов - -#### Обычная группа - -1. Проверьте уместность отображения заголовка у группы, в большинстве случае он не требуется -2. Уберите из заголовка слово "Группа", которое добавляет платформа - - - -3. Уберите подсказки в группе созданные платформой по умолчанию - они выводится при удержании курсора над группой -4. Избегайте Расположение - **Горизонтально, если возможно**. Исходите из минимально допустимого расширения 1280х768px -5. Изучите типы выделения обычной группы. Сильное выделение - добавляется полоса и отступ у подчиненных реквизитов, Обычное выделение и Слабое выделение - крупный заголовок - - - -6. Используйте обычное выделение, если нужно сделать больший отступ вокруг группы. [Подробнее о слабом и обычном отображении групп](https://t.me/Aripovn/31) - - - -7. Используйте свойство - **Выравнивание элементов и заголовков** для прижатия элементов к одному из краев - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -#### Свертываемая группа - -Свертываемая группа позволяет скрыть реквизиты внутри сворачиваемого блока - - - -1. Используйте свертываемаю группу, чтобы скрыть элементы - это делает форму компактнее и удобнее для работы. -Также смотри стандарт - [Оформление групп разделов с настройками и справочниками](https://its.1c.ru/db/v8std/content/753/hdoc) - -2. Давайте описание содержащихся реквизитов в заголовке свертываемой группы, например, Банковский счет и Адрес: - - - - В случае если в группе находятся только команды или гиперссылки (см. пример в Администрирование в БСП), то заголовок свернутой группы необязательно заполнять. В этом случае мы упрощаем навигацию по форме для пользователя - -3. Снимите флаг "Отображать отступ слева" у свертываемой группы, чтобы элементы были вровень с остальными реквизитами формы - -4. Используйте для программного управлением свойства группы Свернута методы Группа.Показать() и Группа.Скрыть() - -5. Не помещайте в свертываемую группу элементы, которые требуются часто или являются обязательными - -6. Не размещайте свертываемую группы выше обычных групп - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -#### Всплывающая группа - -Всплывающая группа может использоваться для размещения необязательных или справочных реквизитов, чтобы форма была компактнее - - - -1. Используйте элемент с осторожностью, так как для пользователя такая группа не является привычным элементом и он может пропустить ее -2. Давайте описание содержащихся значений в заголовке группы, чтобы пользователь мог посмотреть их не открывая -3. Установить Отображение управления = Картинка, чтобы появилась соответствующая пиктограмма у группы. Это позволит пользователю узнавать поведение таких элементов -4. Используйте всплывающую группу как подсказку, на которой можно разместить не только форматированную строку, но и дополнительные реквизиты. Сделайте говорящий заголовок, побуждающий пользователя на него нажать -5. Используйте всплывающую группу как открываемую форму по гиперссылке, для этого установите цвет текста заголовка как у гиперссылки - - - -6. Не помещайте во всплывающую группу обязательные реквизиты, а также реквизиты, которые часто используются -7. Не экономьте на заголовке у всплывающих групп. Пользователь должен понимать, что ожидать при нажатии на заголовок - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Командная панель - -Командную панель можно собрать самостоятельно если требуется добавить свои команды - - - -1. Установите Источник команд - Форма для стандартных команд объекта -2. Установите Источник команд - Глобальные команды командной панели формы для глобальных команд, например Структура подчиненности, Дополнительные сведения и История изменений -3. Для того, чтобы разбить табличную часть на две, следует продублировать стандартные команды формы, при этом отключить их в составе команд формы - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Команды формы - -1. Расположите основную кнопку слева вверху в формах на весь экран, например, **Провести и закрыть** - - - -2. Расположите основную кнопку справа внизу в формах (модальных) не на весь экран, Например, **ОК** - - - -3. Используйте только одну кнопку по умолчанию на форме. Если требуется сделать несколько, например, если действия важные и равнозначные, то этим командам установите оформление как у кнопки по умолчанию: шрифт - Жирный и цвет фона кнопки - Золотой RGB(255, 255, 0) - -4. Переназначайте кнопку по умолчанию при переключении страниц, если на форме их несколько - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Шапка формы - -1. Располагайте элементы сверху вниз, слева направо в порядке важности -2. Расположите справа поля, которые нужно редко менять: -Например, поле Организация или Подразделение заполняется значениями по умолчанию и не требуют внимания пользователя, поэтому размещайте их справа. -Проверьте, что они заполняются автоматически или сохраняются предыдущие значения -3. Не стремитесь сделать левую и правую часть симметричной. Главное чтобы слева были важные поля, а справа неважные. Нормально, если с правой стороны будет больше полей, чем с левой -4. Скрывайте поля по Функциональным опциям, например, Организация или Подразделение, чтобы упростить форму -5. Не допускайте, чтобы нижние поля влияли на элементы, находящиеся выше. Например, не размещайте сначала Договор, а потом Контрагента. Пользователь может изменить это поле и не обратить внимание на то, что поменялось выше -6. Не размещайте поля, которые изменяют форму ниже других реквизитов. Расположите условный **Вид операции** самым первым полем - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Подвал формы - -1. Расположите в подвале наименее важные реквизиты или справочную информацию в виде итогов - - - -2. В Бухгалтерии предприятия в формах документов последними реквизитами обычно идут Комментарий и Ответственный - - - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -### Условное оформление - -Условное оформление используется для визуального выделения данных на основе заданных условий - -1. Применяйте одни и те же стили для аналогичных условий, например в динамическом списке новые элементы выделяются жирным -2. Не используйте много различных стилей и цветов -3. Не используйте условное оформление для управления видимостью строк - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -## Дополнительные материалы - -1. [Стандарты по оформлению форм](https://its.1c.ru/db/v8std#browse:13:-1:11) -2. [Хитрости и советы по созданию форм от Рарус](https://rarus.ru/publications/20220530-ot-ekspertov-hitrosti-po-sozdaniyu-form-1c-532555/) -3. [Контур.Гайды](https://guides.kontur.ru/) -4. Репозиторий [UX-1C:Элементы интерфейса 1С](https://github.com/shch-anna/ux-1c) -5. Алан Купер об интерфейсе. Основы проектирования взаимодействия -6. [Стек технологий для 1С](https://github.com/Oxotka/StackTechnologies1C) - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -## Вопросы и пожелания - -Добавляйте вопросы и пожелания в [Issues к этому репозиторию](https://github.com/Oxotka/1CDesignGuide/issues). - -При необходимости гайд будет дополняться - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -## Благодарность - -Подпишитесь на мой [Телеграм канал](https://t.me/AriN1C) или [купите мне кофе](https://boosty.to/1cnik/donate) - -[↑ Наверх](#гайд-для-создания-форм-на-1с) - -[](https://infostart.ru/1c/articles/2167324/) - -Прочитайте и поставьте + этой статье на Инфостарт - [Гайд для создания форм на 1С](https://infostart.ru/1c/articles/2167324/) - -[↑ Наверх](#гайд-для-создания-форм-на-1с) \ No newline at end of file