Дипломная работа: Дизайн-концепция для мобильного приложения-органайзера для студентов
Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам
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.).
Источник: https://baza.diplomsite.ru/previewfile/600