67
может дать ассоциацию, но образ не подошел. При поиске нужного предмета,
была трибуна, где стоит человек рассказывая доклад. Образ плохо читался,
поэтому также был убран. Торговым вариантом стал список, который
обозначал порядок книг.
Рис.2.20. Эскиз пиктограммы раздела – Лекции
Четвертый раздел – Контакты (см. рис.2.21.). Обозом могли служить
человечки один или несколько, «визитка», телефонная книга. Обычно для
такого раздела изображают человека одного или несколько. Но проблема была
в том, что формы такие больше бы нигде не использовались, а значит не
подходит. Знак был упрощен до прямоугольника и круга, но для общей
стилистики необходимо было отказаться от круглой формы, поэтому он был
изменен на квадрат. Добавив к человеку текст, показывающий данные о
определенном субъекте, стал итоговым вариантом.
Рис.2.21. Эскиз пиктограммы для раздела – Контакты
Пятый раздел – Чат (см. рис.2.22.). Можно было использовать
диалоговое окно, точки, общение. В наше время уже существует иконка,
68
обозначающая чат, но для того, чтобы она не выбивалась из обще стилистики,
ее необходимо было сделать схожей с другими пиктограммами. Из-за этого
были сделаны разные варианты, которые считывалось правильно. Итоговым
вариантом стал вписанный в прямоугольник три квадратные точки.
Рис.2.22. Эскиз пиктограмма для раздела – Чат
Шестой раздел – Заметки (см. рис.2.23.). Ассоциируются с блокнотом,
листом бумаги, ручкой, стикером. Заметки часто изображают как список,
поэтому нужно было найти подходящий образ. Итоговым вариантом стал
список с верхней плашкой.
Рис.2.23. Эскиз пиктограммы для раздела – Заметки
Седьмой раздел – Настройки (см. рис.2.24.). Используется для
обозначения шестеренка и регулировка «баланса». Для соблюдения
стилистики был выбран образ с регулировкой баланса.
69
Рис.2.24. Эскиз пиктограммы для раздела – Настройки
Необходимо определиться с тем какими они будут: линейными,
линейно-пятновыми или же пятновыми. Линейные не подходили, из-за того,
что в формах, находящихся на экранах обводка не используется вовсе (см.
рис.2.25.).
Рис.2.25. Линейные пиктограммы для мобильного
приложения-органайзера «Хелпер»
Исходя из этого было решено попробовать линейно-пятновой, но
минимум использования обводки, больше для декорации. Но тем не менее
вариант такой тоже не дошел (см. рис.2.26.-2.28.), поэтому пиктограммы стали
пятновыми.
Рис.2.26. Разработка пиктограмм для мобильного
приложения-органайзера «Хелпер»
70
Рис.2.27. Разработка пиктограмм для мобильного
приложения-органайзера «Хелпер»
Рис.2.28. Разработка пиктограмм для мобильного
приложения-органайзера «Хелпер»
Данные варианты не подошли из-за того, что силуэты были слишком
упрощены и не все узнавались, поэтому необходимо было решено начать
разработку заново. Форма фона осталась прежней. Сложность состояла в том,
что, упросив до простых форм было трудно подобрать композицию для
создания узнаваемого образа. В связи с этим нужно было усложнить формы
для того, чтобы их можно быть правильно считать.
Итоговыми образами стали отредактированные образы, выравненные по
сетке (см. рис.2.30.), это позволило найти подходящие изображения, которые
не будут спорить между собой (см. рис.2.29.). Для расписания был выбран
ежедневник. События представлены в виде календаря с цифрой последнего
71
месяца. Лекции выполнены в виде списка литературы. Контакты обозначены
как информация о человеке. Чат изображен как точки, которые имеют форму
квадрата. Заметки представлены в виде списка с местом для галочки.
Настройки показаны как регулировки баланса.
Рис.2.29. Итоговые пиктограммы для мобильного
приложения-органайзера «Хелпер»
Рис.2.30. Пример модульной сетки для пиктограммы
В приложениях аналогов, которое нужно было исследовать, находились
пиктограммы для быстрого перехода из одного раздела в другой. Где-то они
были убраны в «бургер», а где-то располагались внизу экрана. Для
разрабатываемого приложения было решено использовать часть пиктограмм
внизу те, которые чаще всего должны использовать, и скопировать их полный
состав в «бургер». Также в мобильном приложении будут использоваться
также дополнительные пиктограммы: редактировать, поиск, микрофон и
72
прикрепление. Их можно встретить на некоторых экранах. Для сохранности
места, было решено убрать пиктограмму «Поиск» в меню.
Также были использованы дополнительные пиктограммы, которые
были использованы в приложении. Они были нужны для обозначения
следующих действий: редактировать, добавить, отправить, записать
(голосовое сообщение/запись), прикрепить файл (фото, видео, документ и
т.п.), найти. Для обозначения редактирования была выбрана пишущая ручка.
Для добавления использовался плюс. Для отправки был использован значок
стилизованного самолета, который часто используется в мессенджерах.
Запись голоса представлена в виде упрощенного микрофона, а прикрепление
в виду скрепки, что также часто используются в диалогах различных
социальных сетей. Поиск же всегда изображается в виде лупы. Для лучшего
восприятия, данные пиктограммы показаны в том виде, в котором будут
использоваться, со своим фоном и форме (см. рис.2.31.).
Рис.2.31. Дополнительные пиктограммы для мобильного
приложения-органайзера «Хелпер»
2.4. Разработка мобильного приложения
Благодаря исследовательской части, можно понять какие параметры
стоит использовать для создания современного, удобного и простого
приложения, которое будет соответствовать своей целевой аудитории. В
трендах обозначены данные, которые я буду использовать в своей разработке.
73
Скругленные края у форм, используемых объектов, поможет создать более
современный и стильный образ. Добавить стиля может также цвет и
использование градиента.
В экране мобильного телефона не так много места, как в компьютере,
поэтому нужно грамотно расставить все элементы для того, чтобы композиция
не вышла перегруженной. В этом может помочь тренд «Перекрытия». В
приложении есть несколько разделов, которые можно убрать в «гамбургер»
для удобства. При нажатии на иконку появится меню, которая будет находится
поверх элементов, находящихся на экране. Также необходимо внимательно
следить за шрифтами, используемые в приложении. Они не должны быть
одинаковыми везде. Нужно использовать разные начертания для разделения
их по типам: заголовок, основной и дополнительный текст.
Заголовки должны быть написаны более жирным начертанием или быть
больше кеглем от основного текста или цветом. Данные могут
комбинироваться. Основной текст должен быть написан одним начертанием,
одном кеглем и цветом. К дополнительному тексту относится не главные
заголовки и другие необходимые для выделения из общей массы текста. Он
может также выделиться начертанием: более жирными начертанием или
окрашенным цветом.
Исходя из трендов для мобильных приложений, можно понять, что
форма самого приложения и элементов внутри сейчас делают с скругленными
краями. Это смотрится более мягко и современно.
2.4.1. Структура приложения
Задача приложения состоит в том, чтобы необходимые данные, которые
могут быть связано как с учебой, так и с личным времяпрепровождением,
находились рядом.
Приложением смогут пользоваться не только студенты, но и
преподаватели и деканат. Из-за этого необходимо разделить профили для
каждой группы: студенты, преподаватель и деканат (см. рис.2.32.). У них
74
будут отличаться разделы, это было необходимо расписать. Некоторые
разделы будут взаимосвязаны и из одного быстро можно будет перейти в
другое (см. рис.2.33.). К таким относятся: люди и чат. Подробно будет описан
и проработан именно профиль студент, два других можно доработать в
дальнейшем.
Рис.2.32. Структура мобильного приложения-органайзера
Из поискового исследования было выяснено, что не всем удобно
пользоваться расписанием. Некоторым необходимо постоянно заходить на
сайт своего учебного учреждения, другие делают скриншоты. Но если вдруг
произойдут изменения, студенты могут не узнать. Из-за этого один из разделов
приложения будет – Расписание. Руководства учебных учреждений могут
загрузить туда расписания своих студентов. В доступе будет также для
преподавателей.
Важно знать, когда занят и соответственно, когда свободен. Для этого
лучше всего использовать электронный календарь. Там можно сохранить все
необходимые мероприятия, поэтому следующий раздел – События.
Лекции нужно записывать в тетради, но не всегда можно успеть
записать. В этом помогают студентам их мобильные телефоны. Несмотря на
то, что сделаны фото, не факт, что они сохранятся до нужного момента. Это
проблема, которую можно решить простым способом. Для этого может
75
пригодиться важный раздел – Лекции. Можно сохранить фото, по
определенным критериям: дата и название предмета.
В поисковом исследовании выяснилась еще одна проблема. Не все с
легкостью запоминают имена своих одногруппников и преподавателей.
Можно записывать отдельно, но это мало кто сделает. Данную проблему
можно решить с помощью раздела – Контакты. В нем будут находится
данные по нескольким группам людей: группа (название своей),
преподаватели и деканат.
Через студентов приходит много информации, будь то данные
связанные с учебной или личной жизнью. Необходимо их записать, в этом
может помочь следующий раздел – Заметки.
Важно поддерживать связь между своими одногруппниками и
преподавателями. Они могут помочь с разъяснениями учебного материала.
Важно, чтобы общение было доступным, в этом поможет раздел – Чат.
Конечно, как и в любом приложении, должен быть раздел – Настройки.
В нем будут необходимые данные для подстроения приложения под своего
пользователя.
Рис.2.33. Структура профиля Студента
76
2.4.2. Шрифтовая схема мобильного приложения
В приложении будет использоваться шрифт. Для лучшего восприятия
информации, будут использоваться разные начертания, для разделения текста,
другими словами шрифтовые выделения. Поделить весь текст в мобильном
приложении можно на следующие группы: заголовки (первого, второго и
третьего уровня), основной и дополнительный тексты.
Основной текст написан 9 pt, по большей части используется прямое
начертание можно увидеть в разделе «Заметки», но также имеет курсивное,
которым написаны данные о человеке (разделы «Контакты» и «Настройки»
профиль) (см. рис.2.34.). Заголовок первого уровня 15 pt, которые
используются для названия заголовков, они написаны курсивным
начертанием. Также есть прямое начертание, которое можно увидеть в разделе
«Расписание» - дни недели (см. рис.2.35.).
Рис.2.34. Пример основой текста
Рис.2.35. Пример заголовков первого уровня