При разработке под мобильные платформы начинающие специалисты часто сталкиваются с ситуацией, когда свежесобранный мобильный клиент выглядит на экране смартфона не как современное нативное приложение, а как «растянутая» версия веб-интерфейса. Это создает неудобства: элементы управления становятся мелкими, формы — перегруженными, а навигация — неочевидной. В этой статье мы подробно разберем, почему так происходит, и по шагам настроим интерфейс, чтобы он выглядел профессионально и адекватно возможностям платформы 1С.
Прежде всего, проанализируем ситуацию с технической стороны. Важно понимать разницу между мобильным приложением и мобильным клиентом. Мобильный клиент 1С — это, по сути, «тонкий клиент», адаптированный для мобильной операционной системы. Как справедливо замечено в обсуждении, технически он представляет собой специализированный браузер (использующий движок WebKit), который отрисовывает управляемые формы «на лету».
Если вы просто поставили галочку Использовать для мобильной платформы в свойствах конфигурации, платформа даст вам возможность запустить приложение на телефоне, но она не сможет автоматически перестроить сложную десктопную форму в удобный мобильный вид. Весь «веб-подобный» вид — это следствие того, что формы не были оптимизированы под мобильный UI/UX.
Рассмотрим первый и самый важный механизм — Компактный интерфейс. В системе 1С существует специальный режим отображения, предназначенный для устройств с небольшим экраном. Если этот режим не активен, мобильный клиент пытается отобразить форму так, как если бы это был полноразмерный монитор.
Выясним, как управлять этим режимом. Обычно платформа сама определяет тип устройства, но разработчик может влиять на это через свойства конфигурации или программно. В компактном интерфейсе элементы управления (кнопки, поля ввода) увеличиваются в размерах для удобного нажатия пальцем, а системные отступы корректируются.
Проанализируем свойства самой формы. Если форма в конфигураторе выглядит хорошо в режиме превью, но плохо на телефоне, значит, мы не учли динамическое изменение размеров. Разберем основные настройки, которые нужно изменить:
ПоложениеКоманднойПанели в значение Низ. Это сразу придаст приложению более нативный вид.Группировка в значение Вертикальная. Это заставит элементы выстраиваться в колонку, что естественно для смартфонов.
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
// Проверяем тип клиента и скрываем ненужные колонки
Если СистемаИнформации.ТипПлатформы = ТипПлатформы.Android
Или СистемаИнформации.ТипПлатформы = ТипПлатформы.iOS Тогда
Элементы.ГруппаПодробнаяИнформация.Видимость = Ложь;
КонецЕсли;
КонецПроцедуры
Посмотрим на структуру формы. Для мобильного интерфейса критически важно использовать Группы - Страницы с видом Закладки или Пролистывание. Это позволяет разбить перегруженную форму на несколько экранов, между которыми пользователь может легко переключаться свайпами. Если оставить все элементы на одной длинной форме, она неизбежно будет выглядеть как бесконечная веб-страница.
Стандартная таблица с множеством колонок — главный признак того, что приложение не адаптировано. Выясним, как сделать списки удобными. В свойствах Таблицы (связанной с динамическим списком) следует настроить режим отображения. Вместо классической таблицы используйте возможности группировки данных в иерархию или применяйте оформление строк, чтобы важная информация (например, Сумма и Дата) выделялась жирным шрифтом и располагалась в две строки внутри одной ячейки (используя ПутьКДаннымПодвала или объединение ячеек).
Разберем ситуацию, когда шрифты кажутся слишком мелкими или, наоборот, огромными. Мобильный клиент 1С чувствителен к системным настройкам шрифта в Android или iOS. Проанализируем настройки в Конфигураторе: убедитесь, что вы используете Авто размеры для шрифтов и элементов. Если жестко задать ширину кнопок в пикселях, на экранах с высоким DPI они превратятся в крошечные точки, что и создаст эффект «неправильного» отображения.
Напоследок проанализируем этап сборки в Сборщике мобильных приложений. Чтобы приложение не выглядело как вкладка в браузере, необходимо правильно настроить:
ЦветФона и ЦветТекста в стиле конфигурации, чтобы интерфейс соответствовал вашему бренду и не выглядел как стандартный серый интерфейс «веб-инструмента».Подведем итог: «веб-вид» мобильного клиента — это не ошибка платформы, а сигнал разработчику о необходимости более глубокой проработки интерфейса. Используя вертикальную группировку, перенос командных панелей вниз и адаптацию видимости элементов, мы превращаем «странный браузер» в полноценное и удобное мобильное решение.