Файл: М инобрнауки россии федеральное государственное бюджетное образовательное учреждение высшего образования Национальный исследовательский университет мэи.docx

Рисунок 2.3 – Физическая схема БД

---

2.3 Проектирование интерфейса

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

Поскольку разработка данного проекта проходит на платформе Xamarin то необходимо определиться с инструментом создания пользовательского интерфейса: первый способ использование язык разметки XAML, данная технология является развитием XML и используется в большом количестве ПО компании Microsoft, XAML удобен тем, что явно отделяет код программы от непосредственно самого интерфейса это является преимуществом, когда в разработке GUI принимают участие люди далёкие от программирования, вторым способом создания пользовательского интерфейса является описывание его с помощью языка программирования C#, данный подход позволяет не тратить время на изучение сторонних языков разметки таких как XAML, что ускоряет процесс разработки пользовательского интерфейса, тем самым более подходит для реализации небольших проектов разрабатываемых одним человеком.

Традиционно интерфейс делится на страницы, таким образом можно определить, что данное приложение будет обладать четырьмя страницами:

1. 
   стартовая;
   
2. 
   поиск;
   
3. 
   быстрый поиск;
   
4. 
   о приложении;
   
5. 
   избранное.
   

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

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

---

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

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

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

Страница избранного должна отображать адреса, добавленные пользователем в раздел: «избранное», которые можно будет как просмотреть, так и скопировать для дальнейшего распространения.

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

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



Рисунок 2.4 – Стартовая страница первый набор элементов интерфейса



Рисунок 2.5 – Стартовая страница второй набор элементов интерфейса

---

Рисунок 2.6 – Стартовая страница третий набор элементов интерфейса

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



Рисунок 2.7 – Страница поиска по БД

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



Рисунок 2.8 – Страница быстрого поиска по БД
Страница о приложении представляет из себя иконку приложения с текстовым описанием приложения рис. 2.9.



Рисунок 2.9 – Страница о приложении

Страница избранного отражает все элементы, добавленные пользователем в данных, раздел рис. 2.10.



Рисунок 2.10 – Страница избранного

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

---

Рисунок 2.11 – Боковое меню

---