Как адаптировать веб-интерфейс 1С под мобильный телефон для комфортной работы?

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← К списку

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

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

1. Использование мобильных технологий платформы 1С: Мобильная платформа и Мобильный клиент

Одним из наиболее очевидных путей для адаптации работы с 1С на мобильных устройствах является использование специализированных инструментов, предоставляемых самой платформой 1С:Предприятие. Рассмотрим подробнее два ключевых решения: Мобильная платформа и Мобильный клиент.

  1. Мобильная платформа 1С

    Начнем с Мобильной платформы 1С. Это мощный инструмент для создания полноценных мобильных приложений, которые устанавливаются непосредственно на устройства под управлением iOS или Android. Такие приложения могут работать как в онлайн-режиме, так и автономно, сохраняя данные на мобильном устройстве и периодически синхронизируясь с центральной информационной базой. Разработка ведется в привычной для нас среде 1С — либо в Конфигураторе, либо с использованием 1С:Enterprise Development Tools (EDT). Готовые приложения можно публиковать в официальных магазинах приложений, таких как App Store и Google Play. Этот подход позволяет достичь максимальной гибкости в дизайне и функциональности, создавая нативное мобильное приложение, полностью оптимизированное под сенсорное управление и небольшие экраны.

  2. Мобильный клиент 1С

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

  3. Адаптация форм для мобильного клиента и веб-клиента

    И для Мобильного клиента, и для Веб-клиента мы можем вручную проектировать формы, специально учитывающие особенности маленьких экранов и сенсорного ввода. Хотя платформа 1С и предоставляет механизмы автоматической адаптации форм, для достижения оптимального пользовательского опыта часто требуется ручная настройка и оптимизация форм. Мы можем создавать отдельные варианты форм для мобильных устройств, скрывать неактуальные элементы, увеличивать размер кнопок и полей ввода, чтобы обеспечить удобство использования.

2. Применение технологии "1С:Предприятие.Элемент"

Перейдем к следующему современному подходу – технологии "1С:Предприятие.Элемент". Это облачная low-code платформа, специально предназначенная для быстрой разработки веб-кабинетов, порталов, а также браузерных и мобильных приложений. 1С:Элемент позволяет создавать мобильные приложения для iOS и Android из единой кодовой базы, что значительно сокращает время и ресурсы на разработку, так как нет необходимости писать нативный код для каждой платформы.

Платформа ориентирована на веб-приложения и поддерживает предпросмотр на различных типах экранов, что упрощает разработку адаптивного дизайна. Как отмечалось в обсуждениях, по функционалу 1С:Элемент вполне подходит для мобильных решений, а примеры, подобные https://1sport.ru, демонстрируют его возможности. Этот подход идеален, если вы хотите быстро создать отдельное, современное и адаптивное веб-приложение или мобильное приложение, тесно интегрированное с вашей основной базой 1С, но с собственным пользовательским интерфейсом.

3. Разработка кастомного веб-интерфейса с использованием HTTP-сервисов 1С

Для тех, кто стремится к максимальной гибкости в дизайне и функциональности, существует подход, предполагающий разработку полностью кастомного веб-интерфейса. Разберем этот вариант по шагам:

  1. Создание фронтенда на современных веб-технологиях

    Мы создаем отдельный фронтенд (пользовательский интерфейс) на стандартных веб-технологиях: HTML, CSS, JavaScript. Для ускорения и упрощения разработки мы можем использовать современные JavaScript-фреймворки, такие как w2ui, Webix, React, Vue или Angular. Эти фреймворки предоставляют богатый набор компонентов и инструментов для создания красивых, интерактивных и, главное, полностью адаптивных интерфейсов, которые будут удобно отображаться на любых мобильных устройствах.

  2. Использование HTTP-сервисов 1С в качестве бэкенда

    Для обмена данными с основной информационной базой 1С мы используем HTTP-сервисы 1С. Мы создаем в конфигурации 1С необходимые HTTP-сервисы, которые будут предоставлять данные (например, списки товаров, заказы, остатки) и принимать команды (например, создание нового документа, изменение статуса). Фронтенд-приложение отправляет запросы к этим HTTP-сервисам и получает ответы, обрабатывая их для отображения информации пользователю.

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

4. Обновление платформы и адаптация стандартного веб-клиента

Не стоит забывать и о возможностях, которые предоставляет сама платформа 1С по мере своего развития. Проанализируем, как обновления платформы могут повлиять на мобильную адаптацию:

  1. Возможности современных версий платформы 1С:Предприятие

    Современные версии платформы 1С:Предприятие (например, 8.3.x) включают различные улучшения интерфейса, такие как "воздушный интерфейс" и "темная тема". Эти изменения могут улучшить общее восприятие приложения на мобильных устройствах, делая его более современным и удобным для глаз. Однако важно понимать, что это скорее косметические улучшения, которые не заменяют полноценной адаптации интерфейса под мобильные устройства. Стандартный Веб-клиент 1С, хоть и позволяет работать через браузер на мобильном телефоне, часто не обладает достаточным адаптивным интерфейсом, что делает его использование на маленьких экранах неудобным без дополнительных доработок.

  2. Использование 1С:Линк для удаленного доступа

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

Общие рекомендации по адаптивному дизайну для мобильных устройств

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

  1. Используйте гибкие сетки и пропорциональные единицы измерения: Вместо фиксированных пикселей применяйте относительные единицы, такие как проценты, em или rem. Это позволит элементам интерфейса автоматически подстраиваться под размер экрана.
  2. Применяйте медиа-запросы в CSS: С помощью медиа-запросов мы можем применять различные стили CSS в зависимости от характеристик устройства (ширина экрана, ориентация и т.д.). Это позволяет создавать специфичные стили для мобильных телефонов, планшетов и настольных компьютеров.
  3. Проектируйте по принципу "mobile-first": Начинайте разработку с дизайна для самых маленьких экранов, а затем постепенно добавляйте стили для больших разрешений. Такой подход заставляет нас сосредоточиться на самом важном контенте и функциональности, что в конечном итоге приводит к более чистому и эффективному дизайну.
  4. Оптимизируйте интерактивные элементы: Увеличивайте размер кнопок, ссылок и других интерактивных элементов, чтобы их было удобно нажимать пальцем. Минимальный рекомендуемый размер для таких элементов — 44x44 пикселя.
  5. Минимизируйте контент и оптимизируйте загрузку: Для мобильной версии старайтесь сократить объем текста, изображений и других медиафайлов. Оптимизируйте изображения для быстрой загрузки, чтобы пользователи не тратили лишний трафик и время.
  6. Осваивайте верстку адаптивных интерфейсов: Для создания красивого и современного дизайна мобильного приложения на 1С часто достаточно освоить верстку адаптивных интерфейсов на HTML и использовать возможности JavaScript для интерактивности.

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

← К списку