CC BY
61УДК 330.4
DOI 10.21685/2309-2874-2018-2-3
П. E. Аношкин, С. В. Рындина
РАЗРАБОТКА ИНТЕРФЕЙСА МОБИЛЬНОГО ПРИЛОЖЕНИЯ ДЛЯ УПРАВЛЯЮЩЕЙ КОМПАНИИ ЖИЛИЩНО-КОММУНАЛЬНОГО ХОЗЯЙСТВА
Аннотация.
Актуальность и цели. Мобильные приложения для управляющих компаний, согласно инициативе Минстроя РФ, должны стать в ближайшем будущем обязательным вариантом взаимодействия с владельцами квартир в многоквартирных домах под управлением компании. Для успешной работы мобильного приложения необходимо, чтобы им было удобно пользоваться, и эту задачу успешно решает прототипирование интерфейса мобильного приложения.
Материалы и методы. Рассмотрено проектирование интерфейса мобильного приложения с использованием программного обеспечения Fluid UI. Это программное обеспечение позволяет проектировать интерфейсы с поддержкой HTML5 и CSS3.
Результаты. Разработан прототип мобильного приложения для управляющей компании жилищно-коммунального хозяйства.
Выводы. Проектирование интерфейса мобильного приложения позволяет моделировать требования функциональные и нефункциональные на основе экранов приложения и отработать бизнес-логику приложения (какие бизнес-процессы поддерживаются).
Ключевые слова: интерфейс, мобильные приложения, управляющая компания, жилищно-коммунальное хозяйство.
P. E. Anoshkin, S. V. Ryndina
DEVELOPMENT OF AN INTERFACE OF A MOBILE APPLICATION FOR A HOUSING AND COMMUNAL SERVICES MANAGING COMPANY
Abstract.
Background. Mobile applications for managingt companies, according to the initiative of the Ministry of Construction of the Russian Federation, should become in the near future a mandatory option for interaction with apartment owners in multi-unit buildings under the management of the company. For successful operation of the mobile application, it is necessary that they are convenient to use, and this task is successfully solved by prototyping the interface of the mobile application.
Materials and methods. The article describes the design of the mobile application interface using the Fluid UI software. This software allows you to design interfaces that support HTML5 and CSS3.
Results. A prototype of a mobile application for a housing and communal services managing company was developed.
© 2018 Аношкин П. Е., Рындина С. В. Данная статья доступна по условиям всемирной лицензии Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), которая дает разрешение на неограниченное использование, копирование на любые носители при условии указания авторства, источника и ссылки на лицензию Creative Commons, а также изменений, если таковые имеют место.
Conclusions. Designing the mobile application interface allows you to model functional and non-functional requirements based on application screens and to work out the business logic of the application (which business processes are supported).
Keywords: interface, mobile applications, managing company, housing and communal services.
Изначально пользовательский интерфейс - это интерфейс командной строки, т.е. набор команд в строке ввода. И сегодня в популярных графических интерфейсах невозможно отказаться от наследства интерфейса командной строки: меню со списком текстовых вариантов выбора.
Графический пользовательский интерфейс (GUI) включают такие элементы, как окна, выпадающие меню, кнопки, полосы прокрутки и значки. Тренд в графическом интерфейсе сегодня - это преобладание мультимедиа: звук, голос, видео и виртуальная реальность.
Мобильные приложения изменяют каналы коммуникации и при условии, что интерфейсу уделено значительное внимание, вытесняют другие варианты взаимодействия. Если при звонке по телефону есть возможность очень сильно исказить смысл сообщения, забыть зафиксировать и т.п., то в мобильном приложении согласования происходят гораздо удобнее, а искажение информации случается реже.
Для разработки интерфейса мобильного приложения управляющей компании ЖКХ было выбрано лицензионное программное обеспечение Fluid UI (лицензия была приобретена). Fluid UI разработан компанией FluidSoftware и представляет собой браузерный механизм прорисовки и прототипирования, используемый для разработки мобильных сенсорных интерфейсов. В Fluid UI есть возможность добавлять графические активы в свои прототипы или сохранить их в своих личных библиотеках для дальнейшего использования (рис. 1).
Также в Fluid UI используется простой и удобный интерфейс для использования системы связывания (рис. 2).
Fluid UI построен с использованием новейших веб-технологий HTML5, CSS3 и JavaScript. Библиотеки с открытым исходным кодом интегрированы в первую очередь jQuery. Интерфейс редактора использует фиксированный пользовательский интерфейс масштабирования (ZUI) и модель макета холста Infinite для отображения содержимого.
Разработка интерфейса проводилась для Android. Начальный экран -окно авторизации (рис. 3).
После авторизации происходит переход в окно с приветствием (см. рис. 3). Это окно позволяет приложению произвести прогрузку личной информации клиента, не оставляя у него негативных эмоций, что приложение якобы тормозит. На самом деле, если что-то происходит не самым быстрым образом, лучше не объяснять пользователю технические подробности, а создать комфортную обстановку во время ожидания.
После окончания загрузки происходит переход на главную страницу мобильного приложения (рис. 4). В верхней строке реализован общий виджет с переходами на любые страницы, ниже присутствует переключатель для push уведомлений.
MIDGETS UPLOADS SYMBOLS
153
LAYOUTS
CO u
□ -
m Щ
L
r Я Е^Э
О Local Weather Forecast
Q Dublin, Ireland
♦ О £> Q 0
20° 19° 22° 18°
07:00 Ö Viry Cloudy 15*
Рис. 1. Стартовый интерфейс Fluid UI
Рис. 2. Внешний план во Fluid UI
Щ
Добро пожаловать
Рис. 3. Интерфейс входа в приложение и окно приветствия
Если пользователь согласится с тем, чтобы ему приходили push уведомления, то ему будут приходить смс о задолженностях, о новостях (отключение воды, опрессовка системы отопления, проверка оборудования и т.п.), напоминание о необходимости замены счетчиков. Нажав на сообшение, пользователь перейдет в приложение с более подробной информацией (см. рис. 4).
' А В 12:30
УК
Уведомление
У вас имеется задолженность за июнь этого года, чтобы узнать поподробнее нажмите на это сообщение.
Рис. 4. Интерфейс главной страницы и push уведомление
Рассмотрим одну из кнопок в виджете. При нажатии на крайнюю левую кнопку откроется небольшое меню (рис. 5). При нажатии на доступную в личном кабинете квартиру сразу появляется интерфейс «Начисления» (рис. 6). Это стартовый интерфейс для доступа к данным о квартире, доступным только зарегистрированным жильцам.
Рис. 5. Интерфейс открытого меню
12:30 I Android
Начисления
Показания
3 587 45 Р 06щая
о jo/ г задолженность
оплатить все
1 735,18 Р
Оплатить За июнь 2018
813,05 Р
Оплатить За июнь 2018
Холодная вода
Но кухне
оооооооо
*
Начисления Показания
0 I В
На карте I Начисления
Рис. 6. Интерфейс «Начисления»
В окне доступна информация об общей сумме задолженности, также реализована кнопка оплаты онлайн и расшифровывается общая сумма задолженности по месяцам. Нижняя панель навигации позволяет переходить в окна: «Начисления», «Показания» и «На карте». Нажимаем на кнопку «Показания» и переходим в следующий интерфейс (см. рис. 6), где представлены показания счетчиков, установленных в квартире, которые набираются вручную и отправляются нажатием клавиши «отправить» в управляющую компанию.
Рассмотрим вкладку главного меню «Новости» (см. рис. 5). В этом окне размещается актуальная информация, связанная с обслуживанием дома и его качественным функционированием (рис. 7). Также здесь можно разместить рекламу коммерческих лиц или организаций. На главной странице в верхней панели справа расположена кнопка дополнительного меню (см. рис. 5): «Поддержка» и «О приложении» (рис. 8).
Новости
28 Августа начнется ремонт в подъезде
Ремонт будет проходить с 7 утра и до 10 вечера. Просьба убрать личные вещи с лестничных площадок.
График опрессовок
С 10-00 часов 22 августа по 27 августа вводится ограничение горячего водоснабжения.
Рис. 7. Интерфейс с колонкой новостей
Нажав на кнопку «Поддержка», перейдем в окно выбора способа взаимодействия: онлайн-чат с консультантом или звонок в управляющую компанию (см. рис. 8).
Если выбирается пиктограмма телефон, то открывается окно дозвона в компанию (рис. 9), при выборе онлайн-чата - это общение в режиме реального времени посредством текстовых сообщений (см. рис. 9).
Таким образом, разработанный прототип мобильного приложения управляющей компании жилищно-коммунального хозяйства покрывает основные варианты обращения жильцов в управляющую компанию. При этом поддерживаются и традиционные каналы общения - «звонок» в управляющую компанию [1-3].
Android | 12 30 Android I 12 30
— Главная страница Q^ •
Поддержка "Поддержка
О приложении
Если возникли проблемы, напишите нашему консультанту онлайн.
Рис. 8. Интерфейс дополнительного меню и окно «Поддержка»
Василий Потапов
Консультант
'Здравствуйте, у меня дома в горячей воды
Рис. 9. Интерфейс окна «Звонок» и онлайн чата
Библиографический список
1. Богданов, М. Р. Основы разработки приложений для мобильных телефонов смартфонов / М. Р. Богданов, И. Н. Думчикова, Л. В. Миниярова, А. Р. Мухамедь-янов. - Уфа : БГПУ имени М. Акмуллы, 2012. - 312 с.
2. Семенчук, В. Мобильное приложение как инструмент бизнеса / В. Семенчук. -М. : Альпина Паблишер, 2017. - 240 с.
3. Соколова, В. В. Разработка мобильных приложений / В. В. Соколова. -Томск : Изд-во Томск. политех. ун-та, 2014. - 176 с.
References
1. Bogdanov M. R., Dumchikova I. N., Miniyarova L. V., Mukhamed'yanov A. R. Osnovy razrabotki prilozheniy dlya mobil'nykh telefonov smartfonov [Basic development of applications for mobile phones and smartphones]. Ufa: BGPU imeni M. Akmully, 2012, 312 p.
2. Semenchuk V. Mobil'noe prilozhenie kak instrument biznesa [Mobile applications as business tools]. Moscow: Al'pina Pablisher, 2017, 240 p.
3. Sokolova V. V. Razrabotka mobil'nykh prilozheniy [Mobile applications development]. Tomsk: Izd-vo Tomsk. politekh. un-ta, 2014, 176 p.
Аношкин Павел Евгеньевич студент, Пензенский государственный университет (Россия, г. Пенза, ул. Красная, 40)
E-mail: [email protected]
Anoshkin PavelEvgen'evich Student, Penza State University (40 Krasnaya street, Penza, Russia)
Рындина Светлана Валентиновна
кандидат физико-математических наук, доцент, кафедра экономической кибернетики, Пензенский государственный университет (Россия, г. Пенза, ул. Красная, 40)
E-mail: [email protected]
Ryndina Svetlana Valentinovna Candidate of physical and mathematical sciences, associate professor, sub-department of economic cybernetics, Penza State University (40 Krasnaya street, Penza, Russia)
УДК 330.4 Аношкин, П. Е.
Разработка интерфейса мобильного приложения для управляющей компании жилищно-коммунального хозяйства / П. Е. Аношкин, С. В. Рындина // Известия высших учебных заведений. Поволжский регион. Экономические науки. - 2018. - № 2 (8). - С. 21-28. - БОТ 10.21685/2309-2874-2018-2-3.
