77
Заголовок второго уровня написаны 11 pt. Встретить можно в
большинстве разделов, так, например, обозначена дата дня, имеет полужирное
начертание (см. рис.2.36.). Заголовок третьего уровня имеют 10 pt. Их можно
встретить пример, в разделе «События» им написаны названия мероприятий,
используется курсивное и жирное начертание (см. рис.2.36.). Дополнительный
текст можно увидеть в разделе «Чат». Переписка написана 7 pt (см. рис.2.37.),
время и дата отправки 5 pt (см. рис.2.38.).
Рис.2.36. Пример заголовка второго уровня
Рис.2.37 Пример заголовка третьего уровня
Рис.2.38. Пример дополнительного текста
2.4.3. Разработка модульной сетки для
мобильного приложения
В начальном эскизе нужно было показать, что будет в приложении (см.
рис.2.39.). Но его необходимо было доработать из-за того, что не хватает
футера, где будут располагаться пиктограммы. В связи с этим элементы на
экранах будут располагаться по-другому.
78
В начальном эскизе нужно было передать информацию, которая будет
использоваться при разработке. Другими словами, показать, что будет
находиться в разделах. Необходимо было понять какие элементы будут
использоваться на экране. Перед тем как перенести эскиз в компьютер, нужно
построить модульную сетку. Благодаря нее можно выровнить элементы для
соблюдения баланса композиции.
Рис.2.39. Начальный эскиз мобильного
приложения-органайзера «Хелпер»
Был произведен поиск информации о том, сколько колонок должно быть
для разработки мобильного приложения. Ее можно построить самому,
поэтому прибегая к данным была создана сетка. Элементы должны быть
грамотно расставлены (см. рис.2.40.). Необходимо было определиться с
формами, которые будут использоваться в приложении. Они не должны быть
строгими и с острыми углами, таким образом треугольные форсы сразу были
отметены. Были варианты с кругом и квадратом с скругленными краями.
Вместе с этим нужно было использовать не один квадрат, потому что
требовались оформить список, как например, раздел – Лекции и Настройки.
79
Из-за этого было выбрана дополнительная фигура, которая будет
использоваться так же с скруглённые краями – прямоугольник.
Рис.2.40. Построение модульной сетки для мобильного
приложения-органайзера «Хелпер»
Для удобства при разработке были созданы прототипы экранов
мобильного приложения-органайзера «Хелпер» (см. рис.2.41.). Наверху
находятся основные разделы по порядку: Расписание, События, Лекции,
Контакты, Чат, Заметки и Настройки. Нижние ряды — это их подразделы,
показывают, куда перейдёт пользователь при нажатии на определенную
кнопку. Элементы были выстроены по модульной сетке.
80
Рис.2.41. Прототипы экранов мобильного
приложения-органайзера «Хелпер»
2.4.4. Разработка экранов мобильного приложения
Благодаря исследовательской части, можно понять какие параметры
стоит использовать для создания современного, удобного и простого
приложения, которое будет соответствовать своей целевой аудиторией.
В трендах обозначены данные, которое я буду использовать в своей
разработке. Скругленные края у форм, используемых объектов, поможет
создать более современный и стильный образ. Добавить стиля может цвет и
также использование градиента.
На экране мобильного телефона не так много места, как у компьютера,
поэтому нужно грамотно расставить все элементы для того, чтобы композиция
81
не вышла перегруженной. В этом мне поможет тренд «Перекрытия». В
приложении есть несколько разделов, которые можно убрать в «гамбургер»
для удобства. При нажатии на иконку появится меню, которая будет находится
поверх элементов, находящихся на экране.
Также необходимо внимательно следить за шрифтами, используемые в
приложении. Они не должны быть одинаковыми везде. Нужно применять
разные начертания для разделения их по типам: заголовок, основной и
дополнительный тексты. Заголовки должны быть написаны более жирным
начертанием или быть больше кеглем от основного теста или цветом. Данные
начертания могут комбинироваться. Основной текст должен быть написан
один начертанием, кеглем и цветом по смыслу. К дополнительному тексту
относятся не главные заголовки и другие необходимые для выделения из
общей массы текста. Он может также выделится начертаниями: более жирным
написанием или окрашенным цветом, или же более большим кеглем от
основного теста.
При разработке знака для мобильного приложения-органайзера
«Хелпер», было решено использовать желто-оранжевый градиент на фон
экранов приложения. Для контрастности и гармонии сине-голубой градиент
будет использоваться в блоках и в фоне футора. Название раздела необходимо
было выделить из общей массы, поэтому оно написано большим кеглем,
пиктограмма «бургер» была выровнена по названию, на нижней строке
располагалась дата, благодаря которой пользователь сразу мог узнать, какой
день сегодня (см. рис.2.42.).
82
Рис.2.42. Разработка экранов для мобильного
приложения-органайзера «Хелпер»
Формы были изменены для того, чтобы угол округления был везде
одинаковый. Такие формы отлично подошли и поэтому необходимо было
грамотно вставить необходимую информацию. Было изменено начертание
названия раздела для того, чтобы он смотреться более мягче. Также
пиктограмма «бургер» была выравнена по модульной сетку и поднята.
Необходимо было разработать один экран для того, чтобы последующие
оформить по уже итоговому варианту, поэтому нужно было заполнить блоки
текстом. В разделе «Расписание» должны быть показаны дни недели
совместно с количеством пар, так студенту будет проще ориентироваться и
понять насколько будет много «дел». Для экономии места дни недели будут
сокращены с – Понедельник на ПН. Такое сокращение встречается часто и не
возникнуть проблемы с понимаем. Под нею будет писаться количество пар: 0
пар, 1 пара, 2 пары, 5 пар и т.п. Пол количеством будет писаться дата для
быстрой ориентации пользователя. Так он не перепутает день с другим.
Вместе с этим для удобства можно будет прокрутить вниз и увидеть
расписание на последующие недели (см. рис.2.43.).
83
При нажатии на дату пользователя перенесет на другой экран, где будет
показываться расписание на выбранную дату. На экране покажут расписанный
день: время, название предмета и кабинет (при необходимости приписан
корпус здания). В дополнение к этому под ним будет располагаться перечень
заданий на этот день, другими словами задания с прошлого раза. Для удобства
день недели будет обозначен на экране на одном уровне с датой дня. При
разработке данного подзаголовка, было решено выровнить данный элемент по
сетке и сдвинуть его правее границ. Студенту ничего не нужно добавлять
сюда, преподаватель заполняет сам для быстрого доступа к заданию.
Рис.2.43. Разработка раздела «Расписание»
84
В разделе «События» нужно было использовать календарь. Для
упрощения было решено не использовать границы внутри календаря, потому
что это лишние детали и можно обойтись без них. Для экономии места также
как при разработке расписания, дни недели были сокращены. Там же было
выбрано место для подзаголовка, в событиях на этом месте будет
располагаться название месяца, который пользователь смотрит (см. рис.2.44.).
Для того добавить мероприятие, необходимо зайти в «бургер», где будет
находиться пиктограмма «Редактировать» вместе с ней там же можно найти
поиск. При нажатии на редактировать пользователя перекинет на другой
экран. Нужно заполнить информацию по новому мероприятию: название,
время (дата и отдельно время), напоминание, повторение и описание.
Рис.2.44. Разработка раздела «События»
85
Для радела «Лекции» необходимо было собрать информацию о
предметах на один курс. Они написаны в виде списка, который можно
прокрутить ниже. При нажатии на предмет, пользователь перейдет на другой
экран, где можно увидеть также список, но уже из тем прочитанных лекций.
Они отсортированы по дате, внизу находятся самые старые и чем выше, тем
более новым. Это удобно, можно быстро сориентироваться и найти нужную
лекцию. Название предмета можно увидеть под названием раздела. Можно
нажать на необходимую дату или же добавить, тогда приложение перебросит
к экрану загрузки. У него также как в предыдущем случае название предмета
находится под разделом, если оно большое, то переносит на вторую строку.
При этом остальные объекты на экране спускаются и выравниваются по
модульной сетке. С помощью окошка для написания текста можно записать
нужную информацию или же воспользоваться пиктограммой «Микрофон» и
получиться голосовая запись. При помощи скрепки можно прикрепить фото.
Это удобно, ведь не всегда можно успеть записать за педагогом (см. рис.2.45.).
Рис.2.45. Разработка раздела «Лекции»
86
Для разработки раздела «Контакты» был использован схожий дизайн с
расписанием. Можно увидеть списки, которые при желании можно изменить,
кроме основных (название группы и педагоги), или же добавить новые. При
нажатии на необходимый список, пользователь перейдет к нему. Для примера,
был показан список Группы ДБД-301. Сортироваться они будут по алфавиту
фамилий. При необходимости можно прокрутить вниз и просмотреть всех.
Если в списке много имен, то с помощью поиска можно найти нужного
человека (см. рис.2.46.).
Если необходимо просмотреть информацию о определенном человеке,
то нужно нажать на него (фото или же имя) и пользователь перенесет к
информации по выбранному контакту. На экране можно увидеть: фото
выбранного человека, ФИО, дату рождения, номер мобильного телефона,
почту, списки где он числиться у пользователя. Под всей информации можно
увидеть кнопку написать, которая откроет диалог с этим человеком.
Рис.2.46. Разработка раздела «Контакты»