Создание графического наполнения и ключевых экранов

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

Графический интерфейс пользователя (GUI) – это система взаимодействия пользователя с приложением через представленные разработчиком графические объекты (диалоговые окна, кнопки, иконки, ссылки, панели и т. д.). Впервые появившись в операционных системах персональных компьютеров, сейчас графические интерфейсы используются везде – от бытовых приборов и телефонов до сложных медицинских и промышленных устройств.

Элементы интерфейса (виджет, контрόл) – это самые простые составляющие графического интерфейса пользователя (графические примитивы), которые имеют стандартизированный внешний вид и функционал. Используя клавиатуру, компьютерную мышь, touch-screen или другой способ взаимодействия с интерфейсом, пользователь получает доступ ко всем, видимым на экране объектам, с которыми взаимодействует через эти элементы. Это, практически, диалог человека с устройством, который может вести и поддерживать даже начинающий пользователь.

Основными элементами являются окна и меню. В свою очередь, эти элементы делятся по типам:

· окна (рабочий стол, окна папок, окна приложений, окна документов, диалоговые окна);

· меню (главное меню; контекстное меню).

 

Рабочий стол – это главная область экрана устройства, на которой размещаются все объекты, в том числе и приложения. Окно приложения – это область экрана, которая «заполнена» запущенным на данный момент времени, приложением. При работе с программой, внутри главного окна приложения, могут открываться дополнительные (подчиненные) окна, а также диалоговые окна.

Диалоговое окно – элемент интерфейса, которой осуществляет «диалог» пользователя и устройства, путем ввода или вывода информации; могут содержать несколько вкладок, которые переключаются путем взаимодействия с устройством ввода информации.

Диалоговое окно имеет свои элементы управления:

· поле ввода – область экрана для ввода информации с помощью соответствующего устройства;

· список и раскрывающийся список – перечень значений, из которых необходимо выбрать нужное; в раскрывающемся списке также присутствует кнопка со стрелкой, направленной вниз;

· переключатель – элемент управления для выбора только одного из представленных вариантов путем установления точки в выбранном кружке;

· ползунок – полоска с кнопкой, с помощью которой можно плавно изменять какой-либо параметр, но только в пределах заданных значений;

· флажок – элемент присваивания определенного значения или нескольких значений параметру; выглядит как «галочка» в квадрате;

· счетчик – элемент управления через который увеличивается или уменьшается значение параметра;

· командные кнопки – элементы, обеспечивающие выполнение того или иного действия, которому соответствует пояснение на кнопке.

 

 

Также можно выделить такие часто используемые элементы пользовательского интерфейса как:

· аккордеон – вертикальный набор элементов, имеющих свойство раскрывать или скрывать информацию, содержащуюся внутри;

· «гамбургер»– устоявшаяся иконка, олицетворяющая собой список меню, чаще всего используется в мобильных интерфейсах; название иконки появилось из-за схожести с гамбургером – три горизонтальные полоски сравнивают с тремя слоями бутерброда.

· «кебаб»-меню – иконка из трех вертикальных точек, обозначающая, что объектом можно совершить какое-либо действие;

· кнопка;

· текстовое поле;

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

 

При создании графического наполнения, первым делом продумывалась концепция графических примитивов: размеры и форма окон, иконок; цвет элементов; каким образом будут показаны состояния покоя и взаимодействия с элементами и т. д. Главная задача – оставить все элементы узнаваемыми и не отходить от их стандартного изображение, но в то же время они должны соответствовать графической стилистике логотипа. Также нельзя менять функционал стандартных кнопок и иконок.

Перед началом работы над графическими элементами и проектированием экранов был написан текстовый макет приложения (приложение стр.?). Такой подход позволяет максимально структурировать информацию, которую планируется выводить пользователю, и ее объемы; что и каким образом будет размещено на главном и подчиненных экранах, как будет выглядеть взаимодействие с элементами управления (диалоговые окна, ссылки на другие экраны и т. п.). Также при написании текстового макета, дизайнер продумывает «путь» пользователя: какой экран будет «входом», какую информацию пользователь захочет видеть в приоритете; какие есть основные и альтернативные пути попадания на тот или иной экран.

После утверждения текстового макета, создается схематичный макет интерфейса – wireframe (англ. каркас). Это – «иллюстрация» будущего приложения, на которой отображается расположение и содержание элементов интерфейса, отражается функциональность приложения в целом и каждого элемента в частности. Как правило, каркасные макеты выполняются в монохромной цветовой гамме, не детализировано, с использованием готовых стандартных иконок. Вместо текста используется имитация текстовых блоков, а вместо изображений – фреймы, перечеркнутые внутри. Задача этого макета – показать содержание проектируемого экрана: количество блоков и элементов, и их свойства, размеры расположение, взаимодействие, но без какой-либо детализации. При работе с макетом не стоит использовать текст-«рыбу» – таким образом не получится увидеть картинку в реальном использовании, а значит, не получится скомпоновать элементы так, чтобы изменяющаяся информация не могла повлиять на композицию приложения.

Метод создания wireframe-макетов необходим, чтобы еще раз обсудить с заказчиком идею проекта, насколько обе стороны поняли друг друга и обозначили цель. Просмотрев каркасный макет, где не будет возможности отвлечься на детали, игнорируя содержание, заказчик сможет объективнее оценить работу над проектом и внести правки на ранней стадии, до начала прототипирования. В последствии, этот макет, вместе с текстовым макетом и сценарием пользовательского взаимодействия, можно передать программистам, чтобы они быстрее и наглядно поняли суть проекта и взаимосвязь всех составляющих. На этом же макете можно провести юзабилити-тестирование, и на ранней стадии выявить возможные проблемы: если пользователь на схематичном макете не понимает, что надо делать, чтобы добиться определенного результата, значит, что в цветном варианте, где будет больше деталей, появятся изображения и текст, его ждет такой же результат и, как следствие, негативное восприятие продукта, к которому он не захочет обратиться вновь.

При работе над приложением для ветеринарной клиники «Веста» было спроектировано 10 основных экранов:

Экран входа – форма для авторизации владельца; с положительным и отрицательным сценарием. Появляется при включении приложения.

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

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

Экран обратной связи – страница со всеми контактными данными о клинике, режиме работы; ссылки на социальные сети и мессенджеры, через которые можно связаться с администрацией, помимо телефона. Вызывается через иконку меню, расположенную в нижней панели интерфейса.

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

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

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

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

Технические характеристики элементов интерфейса для устройств с размером экрана от 4`` до 5,5`` и PPI 200 и более:

· заголовки – шрифт Arial Bold, 14 pt, цвет RGB 196/ 196/ 196, непрозрачность 100%;

· подзаголовки – шрифт Arial Regular, 12 pt, цвет RGB 196/ 196/ 196, непрозрачность 100%;

· активная ссылка – шрифт Arial Bold, 14 pt, нижнее подчеркивание 1,5 pt, цвет RGB 0/ 215/ 155, непрозрачность 100%;

· неактивная ссылка – шрифт Arial Regular, 14 pt, цвет RGB 33/ 46/ 56, непрозрачность 100%;

· иконки верхней панели (часы, сеть, Wi-Fi, батарея) – высота 12 px, толщина контура 2 pt, цвет RGB 196/ 196/ 196, непрозрачность 100%;

· элементы навигации – высота 12 px, толщина контура 2 pt, цвет RGB 0/ 215/ 155, непрозрачность 100%;

· нижняя панель - высота 12 px, толщина контура 2 pt, цвет RGB 33/ 46/ 56, непрозрачность 100%;

· радиус скругления углов всех диалоговых окон – 10 пикселей.

 

Также был разработан набор иконок для придания индивидуальности графического интерфейса приложения ветеринарной клиники «Веста»:

· дефолтные иконки питомцев – возможности приложения позволяются владельцам загружать фотографии своих любимцев в карточки питомцев, но если по каким-то причинам пользователь не загружает картинку, то вместо фотографии выводится иконка, отражающая видовую принадлежность животного (собака, кошка, кролик и т. д.); цвет иконок RGB 130/ 130/ 130, размер 85×71 пиксель. (приложение стр.?)

· иконки для карточки питомца – наличие или отсутствие вакцинации, кастрировано животное или нет; цвет иконок RGB 130/ 130/ 130 и RGB 0/ 215/ 155 для отдельных элементов иконок, толщина линии 2 пикселя, размеры 26×25 пикселя. (приложение стр.?)

 

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

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

· слишком мелкий элемент, в который трудно попасть;

· слишком маленькая площадь для контакта с элементом, приходится «целиться»;

· слишком близко расположены элементы противоположных действий (например, кнопка «удалить» и «создать»).

 

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

Финальным этапом является создание цветного макета, прототипирование и A/Б-тестирование продукта для внесения корректировок с целью добиться максимального положительного пользовательского опыта до запуска боевой версии приложения.