ПРОЕКТИРОВАНИЕ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА ДЛЯ МОБИЛЬНОГО ПРИЛОЖЕНИЯ

№70-1,

Технические науки

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

Похожие материалы

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

Приложение SAP Fiori будет доступно через веб-браузер. Предполагается его разработка на основе java и HTML5. Основные задачи и возможности были рассмотрены выше. Но для успешной разработки данного приложения следует внимательно изучить проблемы, с которыми могут столкнуться мобильные бригады. Это нужно для того, чтобы максимально облегчить работу, увеличивая при этом производительность.

Таким образом, произведен анализ процесса проведения диагностики электросетевого оборудования мобильными бригадами. Поставлены задачи, которые следует решить, определены основные этапы работы мобильных бригад. Осуществлен выбор инструментальных средств реализации, и описаны основные характеристики платформы SAP Fiori для разработки мобильного приложения.

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

Требования к иконкам и кнопкам:

  1. Освещение должно быть направлено слева сверху.
  2. Не должно быть лини с небольшим наклоном.
  3. Расположение кнопок и иконок должно быть на видном месте.

Все это необходимо для удобства пользователя, следует учитывать то, что мобильные приложения — это в основном тачпады, соответственно кнопки должны реагировать в одно касание.

Предлагается рассмотреть примеры.

Если детализированный объект не удается задействовать в мелких масштабах, его следует разбить, как показано на рисунке 1.

Пример разбиения объектов
Рисунок 1. Пример разбиения объектов

Форма должна иметь четкие и сглаженные формы, как изображено на рисунке 2.

Пример представления объектов
Рисунок 2. Пример представления объектов

В ходе разработки интерфейса мобильного приложения будет применено блочное меню пример, на рисунке 3.

Пример блочного меню
Рисунок 3. Пример блочного меню

При проектировании пользовательского интерфейса приложения использовался сервис build.me с помощью которого был смоделирован будущий интерфейс пользовательского мобильного приложения для проведения технического обслуживания и диагностики оборудования, рисунок 4.

Интерфейс мобильного приложения на базе build.me
Рисунок 4. Интерфейс мобильного приложения на базе build.me

Проектирование пользовательского интерфейса было выполнено с помощью различных функций сервиса build.me.

С левой верхней стороны находятся базовые функции по добавлению кнопок, ссылок, переходов, дисплеев, рисунок 5.

Добавление функционала на базе build.me
Рисунок 5. Добавление функционала на базе build.me

С левой нижней стороны находятся созданные страницы, атрибуты, статусы и т.д, рисунок 6

Выбор объекта для изменения
Рисунок 6. Выбор объекта для изменения

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

Изменение данных
Рисунок 7. Изменение данных

Сервис Build.me также удобен тем, что с его помощью возможно просмотреть как будут отображаться элементы интерфейса на различных устройствах: планшет, телефон и компьютер, рисунок 8.

Просмотр интерфейса на различных устройствах
Рисунок 8. Просмотр интерфейса на различных устройствах

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

При осмотре объектов было принято решение указать дату и время начала осмотра, которая в последствии будет вноситься в сообщение о дефекте, также будет вводиться краткая информация об объекте, такая как: статус, номер заказа и техническое место рисунок 9.

Краткая информация об объекте
Рисунок 9. Краткая информация об объекте

На экране добавления дефекта было принято решение реализовать такие поля как: дефект, описание дефекта и дополнительная информация в виде прикрепленной фотографии, рисунок 10.

Экран добавления дефекта
Рисунок 10. Экран добавления дефекта

Интерфейс мобильного приложения будет состоять из следующих пунктов меню:

  1. Главная страница.
  2. Пункт меню «Выбор технического места».
  3. Пункт меню «Объекты, которые необходимо осмотреть».
  4. Пункт меню «Осмотреть выбранный объект».
  5. Пункт меню «Добавить дефект».
  6. Пункт меню «Выбор группы дефектов».
  7. Пункт меню «Созданные дефекты».
  8. Пункт меню «Расположение технических зон».

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

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