Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла (страница 4)

Рассмотренная среда разработки является рекомендуемой к разработке мобильного приложения на платформе Android.

1. ИСПОЛЬЗОВАНИЕ MATERIAL DESIGN ПРИ РАЗРАБОТКЕ
   ИНТЕРФЕЙСА ПРИЛОЖЕНИЯ

   1. Обзор дизайн-системы материального дизайна

Материальный дизайн (material design) – это визуальный язык, созданный компанией Google, представляющий синтез основных принципов качественного дизайна, инноваций и научно-технологических возможностей, основной задачей которого является предоставление единого пользовательского опыта на любых устройствах, платформах и форматах экрана [13].

Материальный дизайн был выпущен 25 июня 2014 года. Изначально внутри компании его называли кодовым именем «квантовая бумага» (quantum paper). Основная метафора материального дизайна – плоская бумага, находящаяся в трехмерном пространстве [14].

Материальный дизайн служит двум целям: унификации многочисленных продуктов компании и унификации интерфейсов приложений для ОС Android. В Гугл решили, что чтобы быть понятными и интернациональными, объекты интерфейса должны иметь аналог, метафору в реальном мире. Такой метафорой стала бумага. Тонкая, плоская, но расположенная в трехмерном пространстве и имеющая тени, скорость движения, ускорение. Это помогает показать пользователю принципы работы ПО, как происходит переход от одного к другому состоянию. Анимации тут не просто оживляют интерфейс, но показывают пользователю, что происходит [15].

Рассмотрим более подробно основные принципы материального дизайна.

2.1.1 Тактильные поверхности

Тактильные поверхности, обладающие свойствами «цифровой бумаги», представляют собой контейнер с тенью и ничего больше. Этого достаточно, чтобы отличить один объект от другого и показать, как они расположены друг относительно друга. У каждой поверхности есть своя высота — расположение на оси Z. И каждая из поверхностей отбрасывает тень на нижнюю, как и в реальном мире, т.е. если подъем элемента больше, то и тень у него больше. Эта увеличенная глубина помогает сфокусировать внимание пользователя на критически важных вещах и сделать это изящно.

Важно заметить, что у глубина ограничена толщиной самого мобильного устройства (рисунок 8).

Рисунок 8 – «глубина» объектов в материальном дизайне

2.1.2 Полиграфический дизайн

Концепция Material Design использует подходы традиционного печатного журнального и плакатного дизайна в оформлении интерфейсов. В полиграфическом дизайне типографика играет принципиально важную роль, она выполняет там две важные функции. Во-первых, выбор и композиция шрифта является стилеобразующим элементом бренда издания. Во-вторых, типографика задаёт структуру контента.

Еще один принцип из мира полиграфии – контрастная типографика. Заметный контраст между размерами шрифта заголовка и наборного текста выделяет главное и выглядит эстетично.

Для расположения контента в полиграфическом дизайне используются модульные сетки, в экранном дизайне – это больше базовые сетки с очень маленькими модулями. Главная отличительная черта размещения контента в соответствии с принципами Material Design – расположение ключевых направляющих. Они задают отступы от краёв экрана, структурируя информацию и управляя взглядом пользователя.

В дизайне интерфейсов цвет является важным средством выразительности. В Material Design стандартная цветовая палитра приложения состоит из основного и акцентного цветов. Основной используется для больших областей. Более яркий акцентный цвет используется точечно в элементах управления, кнопках, полосках, индикаторах и т.д. Акцентный цвет призван привлекать внимание пользователя к ключевым элементам.

Как и в печатном дизайне, в Материальном дизайне поощряется использование фотографии и иллюстраций. Картинки в основном размещаются без рамок, часто «навылет». Даже строка состояния специально делается прозрачным, чтобы не мешать.

2.1.3 Осмысленная анимация

В реальном мире объекты не могут просто появляться из ниоткуда или исчезать в никуда. Поэтому и в Material Design осмысленная анимация используется, чтобы показать, что именно только что произошло.

Поскольку глубина интерфейса ограничена толщиной устройства, все трансформации объектов приходится производить в плоскости. Это также приводит к тому, что анимация трансформаций должна быть асимметричной — то есть изменение ширины и высоты объекта должно быть независимым. В противном случае возникает иллюзия приближения или отдаления от зрителя.

Другой очень важный принцип анимации в Material Design – реакция на действия пользователя. Там, где это возможно, эпицентром изменений в интерфейсе должно быть прикосновение к экрану устройства.

Каждая деталь приложения важна, и микроанимации будь это переходы между контентом или маленькие иконки действий добавляют приложению более полную детальность и отзывчивость на каждое действие пользователя.

Анимация может служить ключевым фактором пользовательского опыта, и её нужно продумывать заранее.

2.1.4 Адаптивный дизайн

Важный аспект Material Design – это концепция адаптивного дизайна. То есть мы можем применить все три первые концепции на разных устройствах и экранах в разных форм-факторах. Правильное использование отступов, направляющих, кратных пропорций элементов и других приемов помогают в достижении адаптивности [15].

1. Проектирование интерфейса

Одним из главных приоритетов применения материального дизайна на смартфонах является мобильная функциональность, то есть взаимодействие пользователя с приложением через касания и жесты. Это необходимо для того чтобы пользователь, прикладывая минимум усилий, смог использовать приложение. Чтобы обеспечить качественное и удобное взаимодействие с пользователем необходимо тщательно продумать структуру приложения и экранов.

2.2.1 Навигация

Навигация организует контент так, чтобы было легче найти важные места в вашем приложении. Навигация может включать часто посещаемые разделы, содержат параметры, или стимулировать конкретные действия. В руководстве материального дизайна говорится, что навигация через приложение должна быть интуитивно понятной и предсказуемой. Новые и вернувшиеся пользователи должны быть в состоянии с лёгкостью понять, как перемещаться в приложении.

Чтобы определить подходящий тип навигации выявить цели, которые будут у большинства пользователей. Структура навигации должна соответствовать их приоритетам.

Существуют следующие шаблоны организации навигации:

– меню (menu);

• встроенная навигация (Embedded navigation);

• вкладки (Tabs);

• нижняя панель навигации (Bottom navigation bar);

• боковая панель навигации (Side bar);

• вложенные навигации (Nested Navigation);

• жестикулярная навигация (Gestural).

В пункте 1.2.3 расписаны элементы разрабатываемого приложения. Для потенциального клиента приоритетной задачей является ознакомление с услугами компании. Поэтому необходимо организовать разделы услуг таким образом, чтобы пользователь мог ознакомиться со списком услуг категории, не совершая лишних действий. Для начала необходимо было определить, как будет организована навигация между разделами услуг, такие как – стены, потолок, полы.

Рисунок 9 – Вкладки

В разработке данного приложения было принято использовать вкладки (рисунок 9), так как это наиболее привычно для пользования и использование вкладок для отображения разделов услуг будет очень удобным в пользовании [16]. Преимущество вкладок в том, что можно переключаться между разделами с помощью жестов скольжения в сторону, это дает возможность спокойно пользоваться приложение при помощи одной руки.

Дополнительная информация, такая как контакты компании и подробная информация о ее деятельности будут доступны в любом окно при помощи меню. Меню отображения список выбора на временном окне.

2.2.2 Организация главной страницы

Сам контент страницы, то есть перечень услуг будут организованы с помощью списка (list). Списки отображают несколько позиций по вертикали, как единый непрерывный элемент. Списки лучше всего подходят для подобных типов данных, поэтому использовать их для отображения услуг будет верно.

Помимо навигации и списков, главная страница должна иметь ссылки на информацию об услугах и предоставлять возможность выбрать интересуемые услуги. Для того чтобы отобразить информацию об услугах, в строчке каждой услуги должна присутствовать ссылка в виде кружка с буквой «i», как на рисунке 10.

Рисунок 10 – Кнопка «info»

Для предоставления возможности выбирать услуги необходимо слева от наименования каждой услуги добавить управляющий элемент флажок (Checkbox), который позволить выбрать несколько услуг одновременно.

Рисунок 11 – Список с флажком

2.2.3 Взаимосвязь окон приложения

Все окна приложения должны обладать логической связью между собой. В данном приложении после выбора необходимых услуг пользователь перемещается в цепочки окон – форма расчета, результат расчета, оформление заявки, окно с отчетом о доставке заявки. С каждого окна приложения пользователю доступны контакты и информация организации через элемент меню. Подробная схема представлена в приложении А.

1. Дизайн графического интерфейса приложения

После анализа рекомендаций материального дизайна и проектирования приложения можно приступать к визуальному оформлению интерфейса приложения.

2.3.1 Цветовая схема приложения

Цвет в дизайне отвечает за выразительность. Ранее в Android цветовая гамма была второстепенной, теперь же ей отводится одна из ключевых ролей. В Материальном дизайне базовая палитра цвета состоит из акцентных и основных оттенков.

Основным цветом окрашивают action bar, а status bar выделяют более насыщенным его тоном. Акцентный цвет применяется для полосок, индикаторов, плавающих кнопок. Он привлекает внимание к ключевым элементам управления.

На сайте руководства по материальному дизайну material.io представлен инструмент color tool, с помощью которого можно подобрать цвет и проверить как он будет работать на примере шаблонов окон. С помощью данного инструмента, ориентируясь на фирменные цвета организации была создана цветовая схема (рисунок 12).

Рисунок 12 – Цветовая схема

2.3.2 Иконка приложения

При знакомстве с приложение, первое на что обращает внимание пользователь – это иконка [17]. Иконка приложения является визуальным отображением продукции и услуг компании, они передают основную идею и замысел продукта. Чем они понятнее и изящнее, тем сильнее интерес пользователя к приложению [18].

Существует ряд правил, соблюдение которых позволит иконке быть красивой и при этом мгновенно узнаваемой:

– уникальная форма;

– правильно подобранные цвета;

– отсутствие фотографий;

– отсутствие текста;

– точно переданные материалы;

– творческий подход [19].

При создании иконок следует обратить внимание на официальные сетки (рисунок 13). Сетка делит пространство иконки на гармоничные части. Если привязать форму иконки к сетке, она получится стройной и устойчивой. Если на иконке присутствует округлый объект, его стоит разместить на отмеченной окружности, если прямоугольный — связать с прямыми линиями сетки. Иконка, которая дружит с сеткой, хорошо выглядит как самостоятельно, так и среди других иконок.

Рисунок 13 – Сетки иконок

Для приложений уже существующего предприятия при создании иконок следует отталкиваться от существующего логотипа и фирменного стиля организации. Поэтому разработка иконки данного приложения основывалась на логотипе организации (рисунок 14).

Рисунок 14 – Логотип ООО «Эгида»

За основу иконки приложен был взят графический элемент логотипа компании. Так как он имеет круглую форму, то был вписан в окружность в соответствии с рекомендациями материального дизайна [30]. Цвет главного элемента взят в соответствии с ранее выбранной цветовой схемой.

Настройка значка приложения производилась в Android Studio при помощи функции Image Asset (рисунок 15). Вид иконки приложения на экране устройства можно посмотреть в приложение Б.

Характеристики

Список файлов ВКР