Файл: СанктПетербургский государственный университет промышленных технологий и дизайна.pdf

1
Министерство науки и высшего образования Российской Федерации
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
Санкт-Петербургский государственный университет
промышленных технологий и дизайна
Кафедра информационных технологий
Учебная практика (технологическая (проектно-технологическая)
практика)
Методические указания и контрольные задания для студентов заочной формы обучения по направлению подготовки
09.03.03 «Прикладная информатика»
профиль Прикладная информатика в экономике
Составитель:
В. Г. Мешкомаев
Санкт-Петербург
2021

Утверждено на заседании кафедры
09.08.2021 г., протокол №
Методические указания содержат рекомендации по изучению дисциплины
«Учебная практика (технологическая (проектно-технологическая) практика)» и выполнению контрольной работы, а также список необходимой для изучения литературы. Описано содержание дисциплины, даны темы задания по проведению работы, приведены требования к отчету по практике.
Методические указания разработаны для студентов заочной формы обучения, по направлению подготовки 09.03.03 «Прикладная информатика».
2

Оглавление
Введение...................................................................................................................4 1 Проектирование пользовательского интерфейса.............................................4 1.1 Дизайн пользовательского интерфейса мобильного приложения..............6 2 Создание прототипа приложения.....................................................................10 2.1 Программы для прототипирования...............................................................10 3 Создание прототипа приложения на proto.io...................................................12 4 Оформление результатов практики..................................................................29 4.1 Формы отчетности по практике.....................................................................30 4.2 Презентация по материалам практики..........................................................31 5 Типовые контрольные задания по результатам прохождения практики......32 5.1 Перечень контрольных вопросов...................................................................33
Список рекомендуемой литературы....................................................................34 3

Введение
Цель учебной практики – получение первичных профессиональных умений и навыков.
Задачи учебной практики:
 выполнение обоснованного выбора современных средств визуального моделирования для разработки прототипов веб-интерфейса;
 освоение современных средств визуального моделирования для разработки прототипов веб-интерфейса;
 выполнение постановки задачи на разработку прототипа веб- интерфейса;
 выполнение разработки прототипа веб-интерфейса с использованием современных средств разработки веб-сайтов;
1 Проектирование пользовательского интерфейса
Проектирование интерфейса пользователя – сложная многофакторная и многовариантная задача, требующая системного подхода. В настоящее время принять считать, что решение данной задачи заключается не в том, чтобы рационально «вписать» человека в контур управления, а в том, чтобы, исходя из задач управления объектом, разработать систему взаимодействия двух равноправных партнеров (человек-оператор и аппаратно-программный комплекс информационной системы).
Цель создания эффективного эргономичного пользовательского интерфейса состоит в том, чтобы отобразить информацию настолько эффективно, насколько это возможно для человеческого восприятия, и структурировать отображение на дисплее таким образом, чтобы привлечь внимание к наиболее важным единицам информации.
Пользователь должен иметь возможность манипулировать объектами в среде приложения. Неплохо, если они (графические элементы) будут ему понятны и станут нести в себе информацию о том, что это такое и что
4

произойдет, если выбрать или произвести действие над каким-то объектом.
Необходимо, чтобы пользователь имел наглядное средство отображения информации на различных этапах решения задач, он должен видеть, как его действия влияют на объекты, расположенные на экране.
Создание эффективного интерфейса заключается в быстром, насколько это возможно, развитии у пользователей простой концептуальной модели интерфейса. Концепция согласованности состоит в том, что при работе с компьютером у пользователя формируется система ожидания одинаковых реакций на одинаковые действия, что постоянно подкрепляет пользовательскую модель интерфейса.
Приложение должно проектироваться таким образом, чтобы пользователь в любой момент и на любом этапе работы мог получить помощь, контекстную справку или подсказку.
Интерфейс должен предоставлять информацию о том, что происходит в данный момент на компьютере.Безусловно, пользователю нужно дать возможность экспериментировать в приложении (нажатие любых кнопок,
изменение настроек и т. д.). Но при этом необходимо избавить его от тупиковых ситуаций: все последствия экспериментов должны быть исправимы,
а в лучшем случае еще и обратимы.
Предпроектная стадия, включающая проведение необходимых исследований по формированию структуры интерфейса, предполагает проведение работы по сбору необходимой информации в связи с особенностями предметной области.
Для построения функциональной модели интерфейса можно использовать различные подходы: структурный анализ или объектно- ориентированный подход.
Структурным анализом SADT (Structured Analysis and Design Technique)
называется метод исследования системы с помощью ее графического модельного представления, которое начинается с общего обзора и последующей детализации, в иерархическую структуру со все большим числом
5

уровней. Для этого метода характерно: разбиение на уровни абстракции с ограничением числа элементов на каждом из уровней; ограниченный контекст,
включающий лишь существенные на каждом уровне детали; дуальность данных и операций над ними; использование строгих формальных правил записи; последовательное приближение к конечному результату.
Начальным этапом разработки пользовательского интерфейса является создание его ассоциативной модели, после чего осуществляется проработка концептуального дизайна. Здесь необходимо разработать некоторый набор интерфейсных элементов, каждый из которых должен обладать определенным цветом, формой, надписью и т. п., и все вместе они должны составлять единую систему, вызывающую стойкую систему ассоциаций у пользователей.
Меню – необходимый элемент любого интерфейса, позволяющий пользователю выполнять задачи внутри приложения и управлять процессом решения. Достоинство меню в том, что пользователи не должны помнить название элемента или действия, которое они хотят выполнить, – они должны только распознать его среди пунктов меню.
Сообщения необходимы для направления пользователя в нужную сторону, подсказок и предупреждений для выполнения необходимых действий на пути решения задачи. Они также включают подтверждения действий со стороны пользователя и подтверждения, что задачи были выполнены системой успешно либо по каким-то причинам не выполнены. Сообщения могут быть реализованы в форме диалога, экранных заставок и т. п.
1.1 Дизайн пользовательского интерфейса мобильного приложения
Рассмотрим процесс проектирования пользовательского интерфейса на примере мобильного приложения. Мобильные приложения отличаются от других объектов проектирования, например сайтов, по размеру (экран смартфона значительно меньше экрана монитора) и способу манипуляции –
при работе с мобильным приложением пользователь в основном управляет контентом при помощи большого пальца правой руки (у левшей, как правило,
6

левой руки). Эти особенности отличают способ моделирования интерфейса приложения, в остальном правила моделирования остаются сходными с разработкой макета сайта.
В связи с небольшим размером экрана стоит учитывать ряд рекомендаций. Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий. Значение кнопок должно быть очевидным, а переходы между действиями логичными. Необходимо избегать сложных действий, которые приведут пользователя в замешательство и потребуют дополнительного времени на поиск нужной кнопки. Любые элементы управления должны быть понятны пользователю и иметь однозначную трактовку. Для этого стоит уделить внимание изучению семантики символов и провести анализ указательных элементов аналогичных приложений. Информацию на странице желательно разбивать на логические группы, так пользователю легче ориентироваться в подгруппах одной категории. Желательно избегать длинных текстовых блоков, информация должна размещаться на одном экране, скрол в мобильных приложениях используется крайне редко. Как правило, любые лишние действия вызывают недовольство пользователя, кроме того, вся не поместившаяся информация может остаться без внимания, т. к. пользователь может ее не заметить. Все важные элементы интерфейса должны располагаться в самых доступных зонах
(зонах, доступных большому пальцу руки) и быть выделены соответствующим образом. Рекомендуемая структура приложения должна быть рассчитана на не более чем 3 клика для перехода из одного раздела в другой. Эта же рекомендация применима к главной странице: любая важная информация должна быть доступна не более чем в 3 клика. Настройки и элементы управления необходимо размещать в очевидных зонах, которыми пользователь может управлять из одного места, если это уместно.
Второй важный момент при моделировании интерфейса – управление приложением осуществляется при помощи большого пальца (как правило). Для достижения максимальной эффективности при использовании приложения, а
7

также удобства, необходимо определить доступную зону, т. е. зону, доступную большому пальцу руки. Как было указано выше, все важные кнопки должны быть расположены именно в ней. Кроме того, необходимо учитывать размер пальца, размер кнопок и расстояние между ними должны быть достаточными,
чтобы пользователь при каждом жесте получал желаемый результат.
В процессе разработки дизайна интерфейса необходимо уделить внимание следующим определяющим параметрам:
1. Цель. С какой целью пользователь приобретает приложение
(развлекательная, коммерческая, образовательная и др.).
2. Целевая аудитория. Портрет пользователя (пол, возраст, сфера деятельности, сфера интересов и др.).
3. Тип. Определение, с какой периодичностью пользователь обращается к приложению.
В зависимости от полученных результатов необходимо определить характер и тип элементов визуализации:
1. Шрифт (вид: Гротеск, Антиква, Рукописный; размер: маленький,
средний, большой; написание: легкое, среднее, обычное, жирное, курсив;
межстрочное расстояние и др.).
Необходимо помнить, что текст должен быть читабельным, для этого следует придерживаться следующих рекомендаций:
 использование контрастного текста. Текст должен быть контрастным с фоном (в среднем 80% контраста);
 использование подходящего шрифта и кегля. Как правило, шрифт без засечек с резкими контурами, например, Verdana или Tahoma, читается лучше.
Шрифты с засечками, Times New Roman и Georgia, на экране могут выглядеть нечитабельно (с этим можно справиться путем увеличения размера шрифта и сглаживания контуров). Текст мельче 10 пикселей кажется мелким.
2. Цвет (количество основных и дополнительных цветов; градация цветов, наличие одноцветных заливок и градиентов и др.).
8

Рекомендации:
 использование «указательного» цвета, обращающего на себя внимание,
как правило, контрастного;
 использование сокращенного количества цветов (максимум 7);
 использование дополнительных цветов;
 умеренная насыщенность цветов;
 наличие контраста.
3. Кнопки (форма: прямоугольная, скругленная, отсутствующая (слово- кнопка), стиль: плоские, объемные).
Рекомендации:
 объемные кнопки, созданные при помощи градиента и тени,
интуитивно более понятны;
 минимальный размер стороны кнопки – 44 пикселя;
 кнопки, помещенные на панель инструментов, обычно становятся квадратными пиктограммами, теряя при этом пояснительную надпись.
4. Модульная сетка (симметрия: вертикальная осевая симметрия
(симметрия относительно вертикальной линии, проведенной через центр группы элементов), диагональная осевая симметрия (симметрия относительно диагонали).
Рекомендуемые пропорции:
 «золотое сечение» (1,62);
 величина, обратная квадратному корню из двух (1:1,41);
 пропорция сторон большинства компьютерных дисплеев (4:3).
5. Стиль элементов (фотографии; видео; изображения; иконки и др.)
(цветокоррекция, постобработка, манера исполнения).
Рекомендации:
 все элементы интерфейса должны быть выполнены в единой стилистике.
Правильно подобранные элементы визуализации позволят:
9

 создать четкую иерархию;
 создать визуальную структуру и сформировать логический маршрут на каждом уровне коммуникации;
 сформировать целостные, непротиворечивые и соответствующие контексту образы;
 интегрировать визуальный стиль с функциональностью;
 избежать визуального «шума» и беспорядка.
2 Создание прототипа приложения
Прототип позволяет на ранних стадиях (до программирования и тестирования) попробовать приложение в действии, оценить будущее приложение с точки зрения пользователя.
Для создания интерактивногопрототипа можно использовать специальную программу, которая собирает экраны будущего приложения в цельную модель, устанавливая взаимосвязи и ссылки.
2.1 Программы для прототипирования
Рассмотрим некоторые сервисы для прототипирования, как платные, так и бесплатные.
Fluid UI – онлайн-сервис разработки прототипов. Может быть использован для создания как простых макетов, так и сложных высококачественных макетов и прототипов. Сервис содержит библиотеки с элементами интерфейсов для iOS, Android и Windows 8 приложений. Есть возможность экспорта дизайнерских прототипов в различные типы документов и изображений. Аккаунт для одного проекта с ограничением в 10 экранов доступен бесплатно. Платные планы начинаются с $29 в месяц.
Wireframe.cc – минималистичный бесплатный онлайн-сервис для прототипирования. Отличается от других инструментов прототипирования чрезвычайно простым интерфейсом. Когда вы заходите на сайт сервиса, вы
10

сразу же можете начать рисовать, перетаскивая элементы мышью по рабочей области. Чтобы сохранить макет, достаточно нажать кнопку «Save», после чего сервис сгенерирует уникальный URL, которым вы сможете поделиться с другими людьми или добавить его в закладки. Wireframe.cc на данный момент бесплатен, премиум-версия с дополнительными функциями ожидается в ближайшее время.
HotGloo – инструмент с очень широким списком возможностей,
предназначенный для построения пользовательских интерфейсов сайтов или
web-проектов. Платные планы начинаются от 7$ в месяц, имеется 15-дневный пробный период на всех планах. Содержит более 50 элементов пользовательского интерфейса, включая умные меню и списки выбора с привязкой к действию; есть возможность загружать свои картинки, создавать пользовательские сценарии, заметки, чат между участниками проекта.
Axure – это десктопное ПО, доступное для Mac OS X и Windows с возможность быстрого визуального редактирования и скачиваемыми библиотеками для виджетов с поддержкой фреймов для iOS, Retina-экранов,
библиотеками для iPhone, iPad и Android. Цены на это ПО начинаются с $289 за стандартную лицензию. Axure может быть использован для создания не только простых макетов, но и комплексных прототипов, а также для нормативных документов. Из особенностей стоит также упомянуть возможность подключать к проекту клиента, чтобы показывать ему результат, отслеживать обратную связь, управлять дискуссией, удобно взаимодействовать с членами команды.
Proto– платформа для прототипирования мобильных приложений.
Создание интерактивных прототипов и симуляция основных пользовательских действий с поддержкой основных браузеров. Есть редактор, панель создания прототипа и плеер для просмотра интерактивного прототипа в работе. Есть бесплатный пакет с ограниченным набором функций. За полную версию придется заплатить не менее 24$.
Готовый прототип можно тестировать на реальном мобильном устройстве или в браузере.
11