Создание пользовательского интерфейса в Android

Размещено на http://www.allbest.ru/

Создание пользовательского интерфейса в Android

Содержание

пользовательский интерфейс программный контент

Введение

1. Архитектура приложения

2. Разработка пользовательского интерфейса

2.1 Разработка интерфейса

2.2 Оформление

2.3 Принципы навигации

3. Навигация

Заключение

Список использованной литературы

Введение

В настоящее время большое количество людей владеют мобильными устройствами, что всегда в курсе дел выводят информационные технологии на прямую линию по созданию все новых девайсов и гаджетов. Неудобство эксплуатации компьютеров и ноутбуков обуславливает появление различных нетбуков, планшетов, смартфонов и коммуникаторов, в основе которых лежит все та же операционная система. Лидирующие позиции на сегодняшний день занимают платформы Windows Phone, Android и iOS. Но эти платформы могут работать полноценно только при одном условии - если для них осуществлеться разработка мобильных приложений.

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

Android - операционная система для коммуникаторов, планшетных компьютеров, цифровых проигрывателей, цифровых фоторамок, наручных часов, нетбуков и смартбуков, основанная на ядре Linux. Основным языком для разработки служит Java, однако существуют библиотеки позволяющие вести разработку на языке С++. Пользователей данной операционной системой насчитывается больше двух трети пользователей мобильных устройств. Н втором месте - iOS (Apple). На третьем, и очень мало кто пользуется - это Windows Phone.

Продажа приложений для мобильных устройств производиться через специальные магазины такие как:

Android - Play Market;

iOS - App Store;

Windows Phone - Market Place.

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

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

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

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

1. Архитектура приложения

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

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

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

Eclipse - это бесплатная программная платформа с открытым исходным кодом, контролируется организацией Eclipse Foundation. Написана на языке программирования Java и основной целью её создания является повышение продуктивности процесса разработки программного обеспечения. Претендует на статус наиболее популярной Java IDE и является единственным конкурентом такой мощной платформы как Net Beans Технология Java, применяемая на стороне сервера, обеспечивает такие возможности, как подключение к реляционным СУБД, многопоточная обработка запросов на обслуживание и оптимальное масштабирование в случаях увеличения нагрузки. Совместное использование этих двух технологий дает мощную техническую основу для создания RIA-приложений.

В основе серверной части приложения лежит фреймворк Qt Framework. Фреймворк - программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.

Qt Creator - одна из самых популярных и надежных основ для построения мобильных приложений любой сложности. QT используется во многих крупных корпорациях, таких как IBM, Adobe, Panasonic, Samsung и многие другие.

В основе простейшего мобильного приложения лежит архитектура MVC, сокращенное от «model-view-controller», которое переводится как «модельпредставление-контроллер».

Можно сказать, что MVC является «сердцем» любого приложения на основе Flex. Суть этой архитектуры сводится к разделению модели данных (model), пользовательского интерфейса (view) и управляющей логики (controller).

На рисунке 1, изначально запрос пользователя поступает на тестирующий сервер, который определяет, к какому мобильному приложению относится запрос. Далее, запрос транслируется на контроллер, который, как правило, запрашивает некоторую информацию из базы данных. Для этого контроллер направляет запрос в модель, в ответ получает массив данных, транслирует полученные данные от модели в графический интерфейс и после всех этих операций возвращает готовый документ тестирующему серверу. Тестирующий сервер на основе полученных данных формирует HTTP-ответ, который содержит запрашиваемый документ и ряд параметров в заголовке документа [6].



Рисунок 1. Архитектура MVC

2. Разработка пользовательского интерфейса

2.1 Разработка интерфейса

Внешний интерфейс приложения будет состоять из 4 разделов:

начать (Get Started);

стиль (Style);

шаблоны (Patterns);

строительные блоки (Building Blocks).

В свою очередь раздел «Начать» поделен на 3 части. Первая часть носит название «Vision», и не несет в себе информацию, где разработчика подталкивают к тому, чтобы интерфейс его ПП был максимально красив, удобен и довольно прост в понятие. Чтобы приложение было оригинально, помогало решать поставленную задачу быстро и легко.

Вторая часть называется «Design» - методы дизайна или методы проектирования. Здесь также содержаться довольное общие рекомендации для разработчика, с образцами на примерами удобной версией Android 2.2 Froyo.

Третья часть именуется «UI» и описывает основные системные элементы интерфейса ОС, такие как панель навигации, шторка уведомлений и т.д.

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

Раздел «Шаблоны» содержит информацию по оформлению различных элементов интерфейса, а также рекомендации о навигации в приложении и взаимодействии с ним.

Раздел «Строительные Блоки» несет в себе информацию о формах использующихся в приложении.

2.2 Оформление

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

Рисунок 2. Форм-факторы устройств

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

· Holo Light.

· Holo Dark.

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

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

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

Рисунок 3. Шаблоны кнопок

Использовать жесты любой сложности для навигации в приложении или же совершения каких-либо действий.

При использовании прокручиваемых элементов интерфейса, использовать эффект границы экрана.

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

Существуют DPI различных размеров, для простоты они поименованы LDPI, MDPI, HDPI, XHDPI, XXHDPI и XXXHDPI, и изначально в прошивке каждого устройства прописан соответствующий ему уровень плотности.

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

На рисунке 4 представлены возможные варианты плотности экрана.

Рисунок 4. Макеты плотности экрана

Все элементы интерфейса выполняются в размере кратном 48dp, то есть от 48х48 dp и выше. Данный размер соответствует примерно 9мм. на экране и является оптимальным по удобству. На рисунках 5 и 6 отображены рекомендуемые размеры для элементов интерфейса.

Рисунок 5. Пример значка и кнопки



Рисунок 6. Пример элементов размером 48dp в интерфейсе

В качестве системного шрифта в Android версии 2+ используется шрифт Roboto различных видов (Roboto Thin, Roboto Light, Roboto Regular, Roboto Medium, Roboto Bold, Roboto Black, Roboto Condensed Light, Roboto Condensed и Roboto Condensed Bold).

Android UI использует следующие цветовые стили по умолчанию: textColorPrimary и textColorSecondary. Для легких тем используется textColorPrimaryInverse и textColorSecondaryInverse. Рамки, используемые вокруг текста также поддерживают светлую и темную темы, а также имеют графическую обратную связь при нажатии. Размер же варьируется от 12sp до 22sp. На рисунке 7 изображены примеры светлой и темной тем текста.

Рисунок 7. Примеры светлого и темного текстов

При работе с цветом предлагается использование так называемых «Holoцветов», которая изображена на рисунке 8.



Рисунок 8. Палитра цветов

Значок (иконка) приложения - небольшой графический ярлык расположенный в меню приложений или же вынесенный на один рабочих столов домашнего экрана, служащий для запуска приложения, а также его графического отображения в системе. При проектировании значка необходимо учитывать, что ваше приложение может быть установлено на различных устройствах, с различной плотностью экрана, а также необходимо его отображение в магазине Google Play. Поэтому используя макеты плотности экрана создайте несколько иконок разных размеров, для разных экранов. За отправную точку следует брать экраны с MDPI плотностью, с дальнейшим увеличением в пропорция равных 1,5x для HDPI, 2x для XHDPI, 3x для XXHDPI и 4x для XXXHDPI. Исходный размер должен быть равен 48dp, в результате на экранах с плотность MDPI размер значка будет равен 48х48 точек, для экранов HDPI - 72х72 точек, для XHDPI - 96х96 и т.д. Для публикации в Google Play также требуется изображение размером 512х512 точек.

Для значков различных действий непосредственно в приложении рекомендуется использование стандартных Holo-иконок, предоставляемых Google в векторном формате для графического редактора Adobe Illustrator.

Физический размер таких элементов должен составлять 32х32 точек, а видимая часть 24х24.

Цвета также рекомендуется использовать стандартные. Более светлый (#333333) для темного фона, с прозрачностью 40% и более темный (#FFFFFF) для светлого фона, с прозрачностью 20%.

На рисунке 9 показаны примеры иконок действий и их размер.

Размещено на http://www.allbest.ru/

Рисунок 9. Примеры иконок для действий

При использовании контекстных иконок, следует использовать физический размер равный 16х16 с видимой частью 12х12, как показано на рисунке 10.

Размещено на http://www.allbest.ru/

Рисунок 10. Пример контекстной иконки

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

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

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

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

res /... drawable - ldpi /...

finished_asset . png drawable - mdpi /...

finished_asset . png drawable - hdpi /...

finished_asset . png drawable - xhdpi /... finished_asset . png

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

2.3 Принципы навигации

Главным элементом управления в современных смартфонах и планшетах является сенсорный экран. У ОС Android есть набор жестов, на которые особым образом реагирует система. Некоторые из них зарезервированы системой, такие как нажатие кнопки «домой» на навигационной панели, другие же зависят от приложения, запущенного в данный момент. Однако во избежание путаницы пользователя рекомендуется использование стандартных действий и жестов, работающих в системе.

Так, например, одиночное, кратковременное нажатие активирует элемент, на который направленно данное действие. Длительное удержание активирует выбор объекта или нескольких. Длительное нажатие и движение пальца по экрану - перемещение объекта. «Свайп» (сдвиг) в сторону вызывает переключение на соседнюю вкладку. Двойное нажатие на активирует увеличение масштаба в 2 раза (например, в галереи, при просмотре изображений), а «Свайп» вверх или вниз вызывает пролистывание списка.

Разведение или сведение двух пальцев вызывает увеличение, или уменьшение изображения соответственно.

Возможные жесты показаны на рисунке 11.

Размещено на http://www.allbest.ru/

Рисунок 11. Пример жестов

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

Должное внимание при этом следует уделить клавише «назад». Она должна выполнять следующие функции:

если пользователь находится на главном экране приложения, то нажатие клавиши «назад» вызовет закрытие приложения;

если пользователь находится в какой-либо вкладке ПП, на 1 уровень, то нажатие клавиши возвращает его на главный экран приложения;

если пользователь последовательно перешел на несколько уровней, то нажатие клавиши возвращает его на предыдущий уровень (Рисунок 12).

Рисунок 12. Нажатие клавиши «назад» при нахождении на 1 уровне

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



Рисунок 13. Возврат к главному экрану

В случае, если у приложения несколько главных экранов (вкладок), то обходимо организовать динамическую клавишу, находящуюся сверху, слева (Рисунок 14).

Рисунок 14. Возврат к разным главным экранам

Ниже, на рисунке 15 приведена схема действия клавиши «назад» при переходе в приложения с виджета на экране.

Рисунок 15. Возврат после активизации виджета

Рисунок 16. Работа клавиши «назад» со шторкой уведомлений



Рисунок 17. Работа клавиши «назад» с всплывающими уведомлениями

При переходе из приложения «А» по ссылке в приложение «Б», после завершения действий в приложении «Б», оно автоматически свернется, и пользователь вернется к приложению «А». В случае отмены действия, нажатие клавиши «назад» работает также, как и обычно, за исключением того момента, когда вы достигните главной вкладки приложение «Б», дальнейшее нажатие клавиши «назад» вызовет закрытие приложения «Б» и возврат к «А».

На рисунках 12-17 продемонстрированы основные правила навигации для приложений Android.

3. Навигация

Шаблоны первичной навигации. Хорошая навигация, как и грамотный подход к проектированию, является невидимой вещью. Приложения с хорошей навигацией интуитивно понятны и позволяют с легкостью справиться с любой задачей, начиная с просмотра списка друзей и заканчивая обращением за кредитом на приобретение автомобиля. Вариантов навигации по содержимому в рамках приложения может быть много (Рисунок 18).

Рисунок 18. Шаблон первичной навигации

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

Заключение

В ходе выполнения данного дипломного проекта разрабатывалось мобильное приложение. Приложение позволяет пользователям смартфонов с операционной системой Android в любое время (главное чтоб было подключение к сети Internet):

просматривать свой текущий счет по номеру телефона;

оплачивать свой счет через платежную карту;

просматривать услуги, которые предоставляет компания, после чего можно подключиться/отключиться к/от услуг;

просмотр новостей компании.

Для достижения поставленной цели и решения предложенной задачи была проделана следующая работа:

досконально изучена методика создания приложений, которая в дальнейшем использовалась при разработке данного приложения;

детально изучены наиболее популярные и оптимальные инструментальные средства разработки приложений: Java, Eclipse, Android, MySql, XML;

подобраны инструменты для создания приложения.

Практическую ценность своего проекта вижу в том, что:

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

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

Список использованной литературы

1. Сайт http://ru.wikipedia.org/wiki.

2. Сайт http://electroniccity.ru/news.php/.

3. Сайт http://android.ru/.

4. Стив Суэринг, Тим Конверс, Джойс Парк. PHP и MySQL. Библия программиста. - М.: Диалектика, 2010. - 912 с.

5. Мамаев Е. МySQL Server. Проектирование и реализация баз данных. Сертификационный экзамен. - СПб.: ВНV, 2004. - 416 с.

6. Сайт http://startandroid.ru/ru/.

7. Сайт http://www.damu.kz/428.

8. Правила пожарной безопасности при производстве строительно-монтажных работ: ППБ-05-86: Утв. 26 февраля 1986 г./М-во внутренних дел СССР. Гл. упр. пожарной охраны. - М.: Стройиздат, 1988.

9. Сайт http://www.ohranatruda.ru/ot_biblio/normativ/data_normativ/.

10. Сайт https://docs.google.com/document/.

11. Хакимжанов Т.Е. Безопасность жизнедеятельности. Расчет аспирационных систем. Дипломное проектирование: Методические указания для студентов всех форм обучения специальности. - Алматы: АИЭС, 2002. 30 с.

Размещено на Allbest.ru

...