Повышение удобства использования мобильного приложения

03.04.20

Разработка - Мобильная разработка

Здесь представлены методы, которые помогут повысить удобство использования приложений на мобильной платформе. Разработка велась на платформе 8.3.13.64, но, возможно, они помогут и тем, кто разрабатывает на более новой.

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

 

1. Форма выбора перечислений. 

В мобильном приложении выбор перечислений реализован через барабан прокрутки. Нужно нажать на поле ввода, потом выбрать на барабане нужное перечисление и нажать на кнопку "Готово". При этом барабан прокрутки очень чувствителен и не факт, что вы попадете на нужное перечисление с первого раза.

Решение довольно спорное. По факту перечислений не бывает столько, чтобы они не поместились на 1 экран, поэтому достаточно вывести все перечисления на форму выбора и без всякой прокрутки ткнуть на нужное. Тут начинаются подводные камни. Даже если перечислению назначить форму выбора, указать её основной, то у нас всё равно появится барабан прокрутки при выборе. Даже если у поле ввода явно указать форму выбора, всё равно будет барабан. Даже если настроить выпадающий список, результат будет тот же.

Чтобы исправить эту ситуацию, создаем форму выбора у перечисления, если нужно вставляем декорации для того, чтобы поля сместились ближе к низу экрана (помним о нажатиях большим пальцем), У поля ввода на событие "НачалоВыбора" вешаем примерно такой код:

	СтандартнаяОбработка = Ложь;
	ОткрытьФорму("Перечисление.СтепениПоказателей.Форма.ФормаВыбора", , ЭтаФорма);	

  Стало удобнее и быстрее.

 

2. Кнопки "Готово" и "Добавить".

Стандартные кнопки в мобильном приложении тоже расположены не так как хотелось. Например у формы списка документа кнопка добавления документа расположена в правом верхнем углу узкой командной панели. Тоже самое и с кнопками "Готово", у табличных частей кнопки располагаются непосредственно под таблицей, а значит, если таблица пустая, то эти кнопки будут вверху экрана, что уже не удобно.

Решаем проблемы по порядку.

В форме списка располагаем кнопку под списком, растягиваем её и с помощью декорации делаем небольшой отступ от края экрана, чтобы пользователь случайно не нажал на кнопки навигации.

В кнопку помещаем стандартную команду добавления.

тоже самое можно проделать и с кнопками Готово у форм документа.

Исправляем кнопку таб части. Отключаем автозаполнение у командной панели таб части,

так же оставляем в составе команд только те кнопки, который нам нужны (например только кнопки "добавить" и "удалить").

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

Внизу страницы так же размещаем декорацию и стандартную кнопку добавления нужной нам таб части. 

3. Расположение колонок в таб части

Особенностью мобильного приложения является то, что у таб частей нет прокрутки по горизонтали, поэтому приходится изощряться, если есть задача "впихнуть невпихуемое". Существует 2 способа планировки колонок таб частей.

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

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

Разберем второй случай:

Первым делом у формы нужно поставить реквизит СворачиватьЭлементыПоВажности в "Использовать". По умолчанию оно и есть "Использовать", но я всё равно ставлю.

Далее нужно у необходимой нам табличной части поставить реквизит ПоведениеПриСжатииПоГоризонтали в "Переносить элементы по важности". 

Теперь настроим сами колонки. Необходимо у каждой колонки выставить реквизит ВажностьПриОтображении. Чем выше важность, тем ближе колонка будет к началу, а значит тем выше шанс, что колонка попадет в верхнюю строку. Если важность одинаковая, то в порядке очередности на форме.

Результат будет примерно такой:

4. Главный экран и подсистемы.

Главный экран приложения имеет ряд недостатков. На нем нельзя задать порядок и расположение кнопок, нельзя поменять иконки.

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

При этом в конфигураторе есть выбор на 1 или 2 окошка. По факту это не работает. Всегда одно окно. Если планируется заполнять только один документ, то можно на главный экран поместить только его форму списка.

Подсистемы служат для разграничения в боковом меню. Главный экран в левом меню помещается полностью, для каждой подсистемы добавляется отдельный пункт. Таким образом можно спрятать какие-нибудь административные кнопочки.

5. Форма ввода строки табличной части.

Как уже отмечалось выше, форма ввода таб части имеет ряд недостатков, поэтому, если требуется тонкая настройка, нужно будет создавать свою форму. Её нужно будет вешать на События табличной части "Выбор" и  "ПередНачаломДобавления"

6. Оптимизация выбора у поля ввода.

По умолчанию у поля ввода есть возможность ввода по строке. Жмем на поле, выезжает клавиатура. А справа от поля располагается круглая кнопочка выбора. Частенько пользователю не нужна возможность ввода по строке, но он тычет туда по ошибке, потом долго матерится и уже прицелившись тыкает в кнопку выбора. Чтобы исправить этот недочет, нужно у поля ввода убрать галочку РедактированиеТекста 

Так же, чтобы очищать поле ввода, нужно добавить кнопку очистки

Пока всё, будет приятно, если кому-то поможет моя публикация. 

Мобильное приложение юзабилити повышение удобства разработка полезные советы

См. также

"Штрихкод-информер" - мобильный ТСД и прайс-чекер в смартфоне

Мобильная разработка Сканер штрих-кода Терминал сбора данных Управляемые формы Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

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

2880 руб.

03.12.2018    54610    137    102    

161

SALE! 25%

Что нам стоит бота построить? Нарисуем - будет жить! Графический конструктор телеграм-ботов/Telegram

Мобильная разработка Мессенджеры и боты Платформа 1С v8.3 Платные (руб)

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

13200 9900 руб.

27.12.2021    33278    80    157    

174

"Мобильный ТСД" - инвентаризация и сбор штрихкодов для iOS и Android

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Платформа 1С v8.3 Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Простой мобильный терминал сбора данных для смартфонов на iOS и Android, не требующий сложных настроек и установки дополнительных программ. Обмен между Вашей 1С и мобильным приложением осуществляется через облачный сервис и расширение конфигурации. Работает с конфигурациями УТ 11, ERP, КА2, Розница 2, Розница 3, УНФ 1.6, УНФ 3.0. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически.

2000 руб.

22.04.2019    91943    511    186    

293

Магазин 15 - приемка товара по штрихкодам или инвентаризация в торговом зале

Логистика, склад и ТМЦ Мобильная разработка Платформа 1С v8.3 1С:Комплексная автоматизация 1.х 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 Розничная и сетевая торговля (FMCG) Россия Платные (руб)

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

12950 руб.

30.05.2023    3388    2    0    

4

Работа с графикой в браузере (SimpleWEB). Векторный редактор

Мобильная разработка WEB-интеграция Мобильная платформа Абонемент ($m)

В SimpleWEB добавились средства для работы с графикой и отслеживание событий мыши, в онлайн редактор https://seditor.ru:1555/ добавился «Векторный редактор» на этом API. Теперь можно нарисовать схемы складов на ПК, сделать карты (*.sug-файлы) для мобильной платформы SimpleUI, выводить данные из 1С в графическом виде. Таким образом, API для работы с векторными файлами теперь есть и в веб- и в мобильной платформе, а также средства для создания и редактирования векторных файлов есть тоже в обеих платформах.

1 стартмани

20.03.2024    1471    0    informa1555    1    

39

Зачем нам 1С:Элемент

Мобильная разработка Языки и среды Бесплатно (free)

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

19.03.2024    6851    ROk_dev    56    

37

JavaScript в Simple

Мобильная разработка Бесплатно (free)

В SimpleUI и SimpleWEB, наряду с обработчиками на python и онлайн (1С и т.д.) добавляется интерпретатор JavaScript. В андроид платформе он скорее играет на поле python, т.к. является оффлайновым решением для самостоятельной обработки и расширяет аудиторию разработчиков для разработки самостоятельных решений. Дополнение к основной статье https://infostart.ru/1c/tools/1153616/

12.02.2024    1628    informa1555    0    

25
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. FesenkoA 57 03.04.20 14:04 Сейчас в теме
За пп3 огромный лайк тебе, думал это только в МК так можно))

А вообще если чего-то 2,3 ну или 4 - то лучше прописать создание кнопок динамически, даже если это форма выбора белой/черной организации или одного из 2 видов операций. Лично я для себя упоролся, и сделал весь справочник на кнопки. То есть в настройках выбираем сколько рядов ты хочешь видеть, и все элементы справочника превращаются в ряды по 3 кнопки. Закончились ряды - создается еще одна страничка и погнали дальше. Могу показать с телефона как это выглядит. Потому что один клик всегда лучше чем выбор
2. user602678_maxipunchik 95 03.04.20 17:49 Сейчас в теме
(1) Не за что. Да, конечно, покажи, любой опыт полезен
3. FesenkoA 57 04.04.20 19:21 Сейчас в теме
(2)
https://ibb.co/3yqQWSv
https://ibb.co/rMgQB6W
https://ibb.co/v4JZh9n

Справочник "Статьи затрат и доходов" красные кнопки - затраты (реквизит справочника) зеленое - доходы, белое - долг (там сложно)
user602678_maxipunchik; +1 Ответить
4. TerveRus 07.04.20 13:47 Сейчас в теме
Одно неудобно, второе, третье... Интересно, о чем думают разработчики мобильной платформы? Обратная связь с ними есть?
5. user602678_maxipunchik 95 08.04.20 06:42 Сейчас в теме
(4) Тоже задавался этим вопросом. Такое ощущение, что немного подзабили на мобильное приложение.
Crazy_Max; +1 Ответить
6. Ukubaeva 03.11.20 15:18 Сейчас в теме
Добрый день! А кто нибудь в курсе, как в мобильном клиенте сделать отображение кнопок регулирования в табличной части? Оформление табличной части целиком происходит платформенно и сложно подвергается управлению, платформа в основном сама располагает все элементы, и кнопки вообще никакие не вывести. Как сделать, например, чтобы Количество было в строке возможно изменить кнопками регулирования без необходимости открывать каждую строку. Вот как в прикрепленном скриншоте, как то же они сделали? Но вот как?
Прикрепленные файлы:
8. user602678_maxipunchik 95 03.11.20 17:34 Сейчас в теме
(6) в мп можно кнопки вешать на таб часть. Только будет не так как на картинке, а при сжатии строки влево с правой стороны строки появляются кнопки. Теоретически это можно использовать
Ukubaeva; +1 Ответить
9. Ukubaeva 03.11.20 20:37 Сейчас в теме
(8)делала так, но пользователи хотят именно, как на картинке...
10. user602678_maxipunchik 95 04.11.20 05:31 Сейчас в теме
(9) Тогда вам не на 1с надо делать. Но как вариант можно программно насоздавать поля ввода и кнопки, каждой строке таб части соответствует поле ввода и 2 кнопки, там уже как нарисуете, перед записью сливать данные полей ввода в таб часть. Только есть минус, если нужно будет добавлять строки, то нужно сразу создавать кучу таких вот полей ввода и потом управлять их видимостью, потому что нельзя после открытия формы добавлять на неё новые элементы
Ukubaeva; +1 Ответить
7. Mayakovskiy 03.11.20 15:53 Сейчас в теме
Добрый день. Я полагаю, программно(ПриСозданииНаСервере) добавляют элементы для каждой строки табличной части.
Ukubaeva; +1 Ответить
11. Mayakovskiy 04.11.20 10:54 Сейчас в теме
Можно и добавлять и удалять. Можно сделать полноценное отображение табличной части за счет програмно созданных элементов.
12. Ukubaeva 06.11.20 18:06 Сейчас в теме
(11)сделала так, картинки не отображаются в таб. части... Добавила колонки, без разницы, хоть программно добавлять, хоть из формы, но в итоге - если поле картинки - оно просто не отображается, а если поле надписи - просто также, как все остальное, добавляется в конец через запятую. Платформа делает в итоге свое дело все равно.
13. Mayakovskiy 06.11.20 19:48 Сейчас в теме
У меня в мп были неуютно замороченные табличные части. Я их отобразил следующим образом : стал просто конструировать одну строку такой как я ее хочу видеть - группы вериткальные, горизонтальные, кнопка, декорация и т.д. Потом, когда меня все устроило повторил все программно в цикле по табличной части. Трудности с картинками и кнопками в таком случае никак не связаны с табличной частью. Картинки показываю на кнопке или декорации. Фотографии - в поле HTML . Оформление через поля HTML - об это регулярно пишут, но как-то урывками , мало деталей, с удовольствием бы поучился этому.
Ukubaeva; +1 Ответить
14. starik-2005 3033 27.10.21 18:02 Сейчас в теме
По поводу третьего пункта, то никак не смог добиться подобного поведения на 8.3.19. ЧЯДНТ?
Оставьте свое сообщение