87
В разделе «Чат», нужно было показать диалоги с другими людьми. Будет
видно фото человека, его имя и начало диалога. Если сообщение не
просмотрено, то перед текстом будет кружок с номером непрочитанных
сообщений. При нажатии на диалог, то пользователя перенесет к переписке с
ним. В личном чате отсутствует футер с пиктограммами, вместо него идет
окошко для написания сообщения. Рядом с ним будут пиктограммы
микрофона и скрепки (см. рис.2.47.).
Вверху можно увидеть фото и имя человека, справа от них располагается
стрелка сниз. При нажатии на нее можно увидеть дополнительные функции к
диалогу, такие как: переход к контакту (просмотр информации о человеке),
материалы к беседе, отключение уведомления и удаление переписки.
Рис.2.47. Разработка раздела «Чат»
88
В разделе «Заметки» дизайн экрана будет схожий как для расписания и
контакты. Пользователь сможет создать новую запись с помощью скрытой
пиктограммой «Редактировать». Сортироваться они будут по времени
создания, наиболее старые находятся ниже и правее. Нажав на нужную
заметку или создав новую, пользователя перенесет к подробностям записи.
Можно ввести отдельно название и текст. Удалить заметку можно либо при
нажатии и удержании ее или нескольких в их скоплении, либо находясь в
нужной пользователю записи (см. рис.2.48.).
Рис.2.48. Разработка раздела «Заметки»
89
В разделе «Настройки» нужно было показать несколько моментов.
Можно зайти в профиль пользователя, уведомление и для выхода из профиля.
Элементы на экране представлены в виде списка. При нажатии на профиль,
пользователя перенесет на другой экран, где можно будет отредактировать
фото и некоторую информацию о себе. Неизменным останется: ФИО, дата
рождения и название группы. При нажатии на уведомление, пользователя
перенесет на другой экран, где можно будет отредактировать приходящие
уведомления: предметы, события и не беспокоить. Первые два идентичны для
настраивания, третье же нужно для того, чтобы пользователя не мучали
постоянные уведомления, поэтому можно установить временные рамки (см.
рис.2.49.).
Рис.2.49. Разработка раздела «Настройки»
90
2.4.3. Разработка элементов навигации
Для быстрой и удобной навигации было необходимо сделать футер с
пиктограммами. В прототипе он обозначает прямоугольником внизу экрана,
так будет на большинстве страниц по мимо диалога, потому что там будет
располагаться место для написания сообщения. На каждый раздел своя
пиктограмма. Так как они не должны быть через чур меленького размера, то
было решено поместить на футер лишь их часть: Расписание, Лекции,
Контакты, Чат и Заметки. Также на экране будет пиктограмма «бургер», где
будут располагаться все разделы вместе со своими пиктограммами. «Бургер»
будет находится на всех экранах, это позволит быстро переместиться с одного
раздела в другой (см. рис.2.50.).
Рис.2.50. Разработка меню мобильного
приложения-органайзера «Хелпер»
При нажатии на кнопки они будут затемняться, это позволит визуально
показать, куда именно нажал пользователь (см. рис.2.51.). Меняться также
буду не только пиктограммы для разделов, но и «бургер». При нажатии
появиться плашка темно-синего цвета и кнопка станет желтой для
контрастности (см. рис.2.52.).
91
Рис.2.51. Демонстрация нажатия на пиктограммы
Рис.2.52. Демонстрация нажатия
на пиктограммы и на выбор раздела
2.5. Визуализация мобильного приложения
Для того, чтобы продемонстрировать разработанные экраны, были
созданы мокапы (см. рис.2.53. - 2.57.). На них можно увидеть просмотр меню,
вход для использования мобильного приложения, просмотр списка предметов
и экран загрузки приложения.
92
Рис. 2.53. Визуализация мобильного
приложения. Раздел «Расписание»
Рис. 2.54. Визуализация мобильного
приложения. Экран загрузки
93
Рис. 2.55. Визуализация мобильного
приложения. Раздел «Лекции»
Рис. 2.56. Визуализация мобильного
приложения. Раздел «Заметки»
94
Рис.2.57. Визуализация мобильного
приложения. Раздел «Контакты»
95
ГЛАВА 3. ТЕХНОЛОГО-ЭКОНОМИЧЕСКАЯ
3.1. Технологическая часть
Таблица 5
Технологическая карта
№
Стадии дизайн
проектирован
ия
Виды работ
Обо
руд
ова
ние
Инстру
менты
Матери
алы
1.
Исследовательс
ко-
аналитическая
Сбор информации
Составление
ментальной карты
Поиск конкурентов и
аналогов и информации
о них
Определение ЦА
ПК
Интерне
т,
каранда
ш
Бумага,
Word
2.
Разработка
идеи
Проведение мозгового
штурма
Создание набросков
Выбор итогового
варианта
Каранда
ш
Бумага,
альбом
3.
Типография и
цвет
Подбор гарнитуры
Подбор цветовой
гаммы
ПК
Палитра
цветов,
интерне
т
Illustrat
or
4.
Разработка
знака
Перенос данных на ПК
Исправление
элементов
ПК
Сканер,
ПК
Illustrat
or
5.
Создание
айдентики
Разработка
пиктограмм
Разработка структуры
мобильного приложения
Разработка навигации
мобильного приложения
Создание экранов
мобильного приложения
ПК
Програм
ма
Illustrat
or
6.
Оформление
проекта
Создание мокапов
ПК
Програм
ма
Photosh
op
3.1.1. Технологические аспекты изготовления
мобильных приложений
Существуют различные инструменты для разработки мобильного
приложения. У них есть свои особенности, которые помогут для создания
96
приложения под свою идею. Первое с чем нужно определиться это платформа.
Приложение может разрабатываться с помощью готовой платформы или же с
нуля. Сначала стоит рассмотреть разработку с готовой платформой.
TheAppBuilder. Судя по информации платформа простая в
использовании, потому что этим продуктом могут пользоваться не только
специалисты, но и сам клиент для редактирования деталей. Благодаря онлайн-
инструментам можно настроить структуру мобильного приложения и
заполнить нужной информацией.
Appery.io. Это облачный сервис, который имеет фреймворк Phone Gap
и встроенные инструменты. Его можно подключить к Rest api, который может
помочь с добавлением облачной базы и соответственно связь с приложением.
С помощью данной платформы можно создать свои плагины.
Appmakr. Для того, чтобы пользоваться данной платформой не нужно
знать языки программирования. Есть возможность создать несколько
мобильных приложений, обновляя их при надобности. Есть также доступ для
отправления уведомлений, различных файлов, таких как: фото, видео, аудио.
Mobile Roadie. При использовании данной платформы есть
возможность увидеть заранее как будет выглядеть итоговый вариант
приложения, то как пользователь будет им пользоваться. Можно перенести
информацию с приложения на сайт и наоборот. Изменять вид мобильного
приложения и использоваться на других платформах.
Также можно рассмотреть инструменты, благодаря которым можно
создавать приложения и их преимущества.
App Watch. Это облачный инструмент для аналитики и обеспечения
безопасности для мобильного приложения. Он может помочь разработчикам
защитить от хакеров приложение.
Преимущества:
Сканирует мобильное приложение, для обнаружения проблем
Создает пользовательские отчеты с описанием