Методика перевода приложений

на новый интерфейс 1С:Предприятие 8

Влад Дмитриев
vdmi@1c.ru
• Материалы этой презентации носят конфиденциальный характер
• Копирование, фотографирование, передача - запрещены
 Сегодня поговорим о…

• Новый интерфейс
• Для развития интерфейса были разработаны новые подходы и концепция в виде дизайн-системы
• Ориентация на облака, веб и мобильные устройства
• 1С:Предприятие.Элемент – реализация дизайн-системы нового интерфейса
• 1С:Предприятие 8
• Добавляем в платформу возможности нового интерфейса
• теперь будет не только Такси
• Считаем, что адаптация под новый интерфейс потребуется
• вспомните переход на управляемые формы
• Сегодня расскажем что и почему работает по-новому, и что надо менять в конфигурации
 Новый интерфейс

• Цели создания нового интерфейса

• Быть в трендах современного дизайна для веб и облачных приложений
• При меньших затратах разработчика (автоматически) получать более красивый интерфейс
• Средства
• Другие отступы, оформление и концепция организации элементов на форме
• Убираем тонкие настройки внешнего вида, чтобы нельзя было «испортить»
• Там где надо, они остаются (печатные формы, условное оформление, …)
• Важно привести в конфигурации устаревшие настройки к новым требованиям
или знать как по-другому это теперь будет работать
• Новые возможности и настройки
• Оформление в виде карточек
• Новые места для расположения команд
• Правильная автоматическая трансляция в мобильный интерфейс
 Цвета

• Для красивого интерфейса не нужен миллион цветов, много – это плохо

• Палитра - ориентируемся на базовые цвета, «отлаженные» в дизайне
• Web, Windows и почти все системные стилевые цвета становятся устаревшими
• Выделены два цвета для брендирования (вместо пяти)
• Можно добавлять свой цвет палитры (например, серый)
• Цвета автоматически преобразуются и меняются
• Каждый цвет раскладывается на набор вариантов для каждого случая
• Светлая и темная тема
• Затемнение и градиенты
• В конфигурации оставляем только использование цветов палитры
• Для совместимости остаются абсолютные цвета (их надо минимизировать)
• Вместо старых стилевых цветов выбирайте новые из палитры
• При необходимости добавляйте свои цвета палитры, но только «если очень надо»
 Темная тема

• Темная тема генерируется автоматически

• Для абсолютных цветов тоже, есть формула расчета
 Картинки

• Новый стиль иконок

• Хорошо смотрятся в любой теме и на любых устройствах
• Обновили все иконки в платформе
• Есть рекомендации по внешним библиотекам, если нужно еще
• Векторные и одноцветные (по возможности)
• Легко подстраиваются под размер экрана
• Признак «Шаблонная» если одноцветная
• Если цветная, то можно настраивать для светлой и темной темы
• В конфигурации заменяем
на новые векторные из библиотеки картинок
 Расположение элементов на форме

• Меняем подход к расположению элементов

• Должно быть удобно на компьютере и на телефоне, для мыши и сенсорного экрана
• Боремся с горизонтальной прокруткой, вертикальная – это не страшно
• Приоритет вертикальной группировке элементов
• Горизонтальная только для больших экранов, где есть место
• Для мобильных строго вертикально
• В конфигурации
• Берем пример, как автоматически создаются формы для объекта
• Меняем по возможности группировку на вертикальную
 Если элементов много (как всегда)

• Группы на форме Основное и

Дополнительно
• Слева колонка с реквизитами элемента
• Если много реквизитов, то тут оставляем только
основные
• Теперь есть возможность вертикальной
прокрутки
• Справа дополнительная информация
• Табличные части
• Если надо, разбиваем по страницам
• Если много реквизитов,
то страница с дополнительными реквизитами
• В мобильном интерфейсе блоки будут идти

вертикально друг под другом

 Положение заголовка и текста

• Приводим к единому дизайну и виду

отображения
• Меняются отступы
• Заголовки по умолчанию сверху
• Стандартные элементы для подсказки и ввода
даты+времени
• В конфигурации проверить настройки и
расположение элементов на форме
 Начальная страница

• Теперь нельзя разместить несколько

форм на начальной странице
• Часто использовали и было одной из
причин медленного запуска конфигураций
• В конфигурации
• Убрать старый вариант начальной
страницы, заменить на одну форму
• Использовать карточки и другие
элементы формы, чтобы было удобно и
быстро
 Команды и командные панели

• Боремся с изобилием команд в одном месте (много – это не удобно)

• Сделали пять мест для разнесения команд по их предназначению
• Команды будут ближе к месту своего использования
• Команды создания
• На формах списка сверху рядом с названием
• Команды терминального действия
• Кнопки справа внизу
• «Провести и закрыть», «Записать» и связанные с ними
• Идеология Wizard, по терминальным действиям переходим с формы на форму
• В конфигурации
• Настраиваем команды создания или терминального действия
• Убираем кнопку команды «Закрыть», есть крестик у формы
• Вместо «ОК» даем описание действия кнопки,
например «Сохранить»
 Команды таблицы

• Команды для выделенных строк

• Команды для текущей строки таблицы
• В конфигурации распределите команды таблицы по соответствующим местам
 Карточки

• Современный и популярный элемент

дизайна
• Во многих типовых конфигурациях
используется
• Теперь встроено в настройки групп и
кнопок
• В конфигурации
• Используйте новые настройки вместо
старых конструкций
• Подумайте, где можно использовать в новых
местах
• Используйте для начальной страницы
вместо множества форм
Методика перевода приложений
на новый интерфейс 1С:Предприятие 8

Спасибо за внимание!

Влад Дмитриев
vdmi@1c.ru