Разработка мобильного приложения для развивающего образовательного центра
Прототипирование пользовательского интерфейса
жүктеу/скачать 1,62 Mb. Pdf көрінісі
|
22Yagypov2
| 2.3 Прототипирование пользовательского интерфейса
Прототипы стали незаменимым этапом профессиональной разработки программного обеспечения. Прототипы облегчают жизнь всем людям, вовлеченным в процесс создания того или иного проекта: клиенту, менеджерам, дизайнерам и разработчикам. Прототип визуализирует конечный продукт и помогает выявить серьезные проблемы на самых ранних этапах, помогая избежать проблем на поздних стадиях разработки. Конечно, первоначальные эскизы, выполненные, к примеру, на бумаге и воплощающие первые идеи дизайнера еще никто не отменял. Но всю дальнейшую работу, в которую будут вовлечены все члены рабочей группы, лучше всего проводить в специальном программном обеспечении, которое поддерживает редактирование, управление версиями и совместную работу. Прототип приложения будет создаваться в достаточно популярной графической программе Adobe Photoshop[27]. Эта программа является достаточно удобной в использовании и быстром освоении для построения прототипа. Начинать прототипирование мы начнем с разработки левого меню, так как данный функционал является главным в приложении. Первое, что будет добавлено в макет это так называемые StatusBar и Toolbar(Рис 3). Рис 3. Сверху Statusbar, снизу Toolbar Statusbar – это визуальный графический элемент системы Android для взаимодействия пользователя с системой. Toolbar - также известный как панели действий, является одним из наиболее важных элементов дизайна в деятельности нашего приложения, так 33 как он обеспечивает визуальную структуру и интерактивные элементы, которые знакомы пользователям. Для создания меню мы обратимся к Google Material Pattern[28], в котором описывается лучшие решения для построения дизайна приложения. В рекомендациях материального дизайна Google говорится, что объекты интерфейса пользователя должны отбрасывать тени, как и объекты реального мира. Когда для представления задается свойство elevation, Android автоматически генерирует тень от этого представления. Чем больше значение elevation, тем четче выражена тень. В рекомендациях материального дизайна приведены желательные значения elevation для разных экранных компонентов — например, для диалоговых окон рекомендуемое значение elevation равно 24dp, а для меню — 8dp. Разработчики приложений часто приводят цвета темы в соответствие с фирменным стилем компании. Если вам потребуется изменить цвета темы, рекомендации материального дизайна Google по использованию цвета советуют выбрать цветовую палитру, состоящую из основного цвета (не более чем с тремя оттенками) и акцентного цвета. Основные цвета обычно используются для окрашивания строки состояния и панели приложения в верхней части экрана; кроме того, они могут использоваться в графическом интерфейсе. Согласно рекомендациям дизайнеров Google, меню должно содержать элементы виде списка с иконками и надписями, так же иметь заголовок с необходимой функциональностью. Мы выбрали так называемый Navigation Drawer для реализации навигации в приложении. 34 Рис 4. Типовой вид меню приложения Значок в документации называется "гамбургером" (Hamburger menu). Это официальная позиция Google. При нажатии слева вылезет навигационная шторка. По высоте она занимает весь экран, включая системную область. Можете подвигать шторку вперёд-назад, чтобы увидеть, что верхняя кромка шторки в системной области полупрозрачна и не закрывает системные значки. Подобное поведение доступно на устройствах под Android 5 и выше. На старых устройствах шторка находится под системной панелью. Сама шторка состоит из двух основных частей - в верхней части находится картинка и текст, а в нижней - меню со значками. Меню в свою очередь жүктеу/скачать 1,62 Mb. Достарыңызбен бөлісу:
|