Теоретические основы проектирования и разработки пользовательского интерфейса

Отчет по практике по получению первичных профессиональных умений и навыков, в том числе первичных умений и навыков научно-исследовательской деятельности

РАЗРАБОТКА ПРОГРАММНОГО ПРОДУКТА АИС «АССИСТЕНТ» ДЛЯ ГАПОУ СО «НИЖНЕТАГИЛЬСКОГО ТОРГОВО-ЭКОНОМИЧЕСКОГО КОЛЛЕДЖА»

Направление подготовки 09.03.03 Прикладная информатика,

Профиль «Прикладная информатика в экономике»

 

 

Исполнитель: студент группы Нт-205о ПИЭ	___________________ подпись	Репьев Егор Денисович
Руководитель: доцент кафедры ИТ	___________________ подпись	Бужинская Н. В., кандидат педагогических наук

 

Нижний Тагил

2020

ОГЛАВЛЕНИЕ

 

ВВЕДЕНИЕ. 3

1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ПРОЕКТИРОВАНИЯ И РАЗРАБОТКИ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА.. 4

2. ПРОЕКТИРОВАНИЕ ПРОГРАММНОГО ПРОДУКТА «АИС «АССИСТЕНТ»» ДЛЯ ГАПОУ СО «НИЖНЕТАГИЛЬСКОГО ТОРГОВО-ЭКОНОМИЧЕСКОГО КОЛЛЕДЖА». 16

3. ПРИМЕНЕНИЕ ЯЗЫКОВ ПРОГРАММИРОВАНИЯ PHP, JS ДЛЯ РАЗРАБОТКИ ПРОГРАММНОГО ПРОДУКТА «АИС «АССИСТЕНТ»» ДЛЯ ГАПОУ СО «НИЖНЕТАГИЛЬСКОГО ТОРГОВО-ЭКОНОМИЧЕСКОГО КОЛЛЕДЖА» 27

ЗАКЛЮЧЕНИЕ. 31

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ.. 32

ПРИЛОЖЕНИЕ. 33

 

 

ВВЕДЕНИЕ

 

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

Объектом исследования является применение языков программирования для разработки программного продукта.

Предметом исследования являются методы и средства языков программирования для разработки программных продуктов.

Цель работы – разработка модульного программного продукта (начального скелета) для автоматизации процессов ГАПОУ СО «Нижнетагильского торгово-экономического колледжа».

Поставленные задачи для достижения цели:

1. анализ источников с целью изучения особенностей разработки пользовательского интерфейса;

2. использование программных продуктов для проектирования АИС «Ассистент» для ГАПОУ СО «Нижнетагильского торгово-экономического колледжа»;

3. разработка программного продукта АИС «Ассистент» для ГАПОУ СО «Нижнетагильского торгово-экономического колледжа», который позволяет разворачивать дополнительные модули, которые автоматизируют процессы с заданными условиями к модулям.

ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ПРОЕКТИРОВАНИЯ И РАЗРАБОТКИ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА

 

1.1. Определение понятия интерфейса

 

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

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

- интерфейс в виде командной строки. Один из первых типов интерфейсов, который отличается высокой трудоемкостью и используется для управления компьютерами и системами все реже. Тем не менее, в виду своей просты и надежности прочно занимает свою нишу в профессиональной среде. Предполагает ввод команд на поддерживаемом машинном языке в командную строку с клавиатуры.

- графический пользовательский интерфейс – самый распространенный на сегодняшний день способ взаимодействия пользователя с операционными системами и прикладным программным обеспечением. Отличается интуитивностью, простотой восприятия и ввода информации. Для взаимодействия с таким интерфейсом часто достаточно обычной компьютерной мыши.

- жестовый интерфейс можно назвать продолжением развития графического интерфейса. В нем управление элементами взаимодействия с операционной системой и программами используются сенсорные экраны, стилусы, графические планшеты и другие передовые технологии [3].

 

1.2. Особенности пользовательского интерфейса

 

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

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

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

Уверенность. Многие дизайнеры стремятся сделать интерфейсы «интуитивно понятными». Но что «интуитивно» в действительности означает? Это означает, что пользователи должны инстинктивно понимать и осмысливать возможности проекта. Но как вы можете сделать что-то интуитивно понятным? Вы проектируете знакомые для себя вещи, и то, что для вас может показаться очевидным, для пользователей может отталкивать и вызывать сложности.

Отзывчивость означает несколько вещей. Интерфейс веб-сайта должен работать очень быстро. Длительное ожидание загрузки страницы раздражает. Позаботьтесь о том, чтобы сайт загружался максимально быстро, даже на медленных интернет-каналах.

Так же отзывчивость означает некоторую постоянную форму взаимодействия с пользователем. Интерфейс должен информировать пользователя о происходящем. Например, вы нажимаете кнопку отправки сообщения. Если сообщение отправляется посредством AJAX, было бы разумно выводить состояния отправки, например «Отправка...», «Сообщение отправлено» или «Ошибка отправки сообщения». Когда пользователь видит процесс выполнения, он чувствует себя спокойнее. Особенно это заметно на медленных интернет-каналах.

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

Привлекательный пользователю интерфейс делает работу с ним приятной. Да, можно сделать интерфейс простым в использовании, эффективности и оперативности, и он будет отлично справляться со своей задачей, – но если дополнить этот список достоинств еще и привлекательностью – работа с ним будет чистым удовольствием!

Пользовательский интерфейс — это инструмент управления. Он предоставляет доступ к различным функциям приложения или веб-сайта. Хороший интерфейс должен давать возможность пользователю с наименьшими усилиями выполнить интересующее его действие.

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

Снисходительность. Никто и ничто не совершенно. Будьте готовы к тому, что пользователи будут делать ошибки при работе с вашим проектом. Это может происходить как по вашей вине, так и по вине пользователя. Нужно грамотно обрабатывать все возможные ошибки – это будет одним из главных показателей качества вашего проекта. Не стоит наказывать пользователя – разработайте «снисходительный» интерфейс [1].

 

1.3. Элементы пользовательского интерфейса

 

Кнопка (Button) – базовый элемент интерфейса компьютерных программ, принцип действия и вид аналогичны кнопке в технике. При нажатии на кнопку происходит программно-связанное с этим нажатием действие либо событие. Описание связанных с кнопкой действий предлагается разработчиком пользователю вместе с документацией к приложению. Для того что бы инициировать событие, вызываемое кнопкой, необходимо переместить курсор на нажимаемую область кнопки и произвести однократное или двукратное (в зависимости от функциональной спецификации) нажатие на левую кнопку мыши. Простая кнопка имеет два состояния – «нажато» и «отжато». Кнопка может изменять вид в зависимости от состояния и положения курсора или фокуса (например, при «нажатии» зачастую визуально имитируется утапливание её в поверхность). Группа кнопок схожей функциональности может быть объединена в единую панель инструментов. Кнопка чаще всего представляют собой ограниченную область прямоугольной выпуклой формы с краткой подписью (или картинкой) того действия, которое может быть произведено по средством её нажатия.

 Радиокнопка (Radio button), или переключатель – элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы). Радиокнопки представляют собой элемент круглой (реже – квадратной или ромбовидной) формы, а выбранный элемент выделяется чаще всего точкой внутри. Рядом с кнопкой располагается описание выбираемого элемента. Радиокнопки располагают группами по несколько штук, причём в любой момент выбрана может быть только одна кнопка из группы. При инициализации приложения какая-либо кнопка из группы, как правило, уже выбрана, но технически возможно оставить не выбранной ни одну. В такое состояние группу радиокнопок привести средствами только самих радиокнопок невозможно. Управление радиокнопками может совершаться как при помощи мыши, так и с клавиатуры.

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

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

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

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

Поле редактирования (Textbox, Edit field) – элемент графического интерфейса пользователя, позволяющее производить ввод и вывод текстовой информации в определённой области интерфейса. Если записанная в поле редактирования информация превышает его размеры, необходимо использовать вертикальную или горизонтальную полосу прокрутки, двигая ползунок вертикально или горизонтально соответственно при помощи мыши. В некоторых интерфейсах для удобного отображения информации можно изменять размеры поля редактирования. Ввод данных в текстовое поле совершается при помощи алфивитно-цифрового блока клавиатуры.

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

- пункт меню – отдельные опции приложения;

- пиктограмма, иллюстрирующая действие;

- разделитель (визуально разделяет группы однородных пунктов меню);

- «упор» ограничивает ход сдвига курсора.

Выбор и перемещение между элементами меню может быть произведен как при помощи мыши, так и с клавиатуры.

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

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

Панель инструментов (Toolbar) – элемент графического интерфейса пользователя, предназначенный для размещения на нём нескольких других элементов. Обычно представляет собой горизонтальный или вертикальный прямоугольник, в котором могут быть относительно постоянно размещены такие элементы, как:

- кнопка;

- меню;

- поле с текстом или изображением;

- выпадающий список.

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

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

Полоса прокрутки (Scrollbar) – элемент графического интерфейса, предназначенный передвижения содержимого элементов вывода информации, используется чтобы переместить скрытую информацию в видимую область с помощью ползунка (slider). Полоса прокрутки обычно располагается справа или внизу другого элемента интерфейса [6].

 

1.4. Возможности библиотеки графических объектов для создания интерфейса

 

SFML (Simple and Fast Multimedia Library) – одна из самых удобных и быстрых графических библиотек для 2D-графики. Её неоспоримое преимущество – минимальные требования к уровню знаний языка и лёгкость освоения: всего за несколько дней можно написать вполне себе полноценную программу. Ещё одно неоспоримое преимущество – кроссплатформенность: SFML работает под Windows, Linux (только X11, но не Wayland) и Mac, планируется выход под Android.

Qt представляет собой целый набор инструментов для быстрого и удобного проектирования GUI. Конечно же, здесь можно писать и игры, но Qt привлекает программистов в основном тем, что она является быстрой, удобной, гибкой и кроссплатформенной. Во многом Qt обогнала даже SFML: библиотека доступна как на Windows, Linux и Mac, так и на мобильных платформах – Windows Mobile, Android и iOS.

Qt расширяет C++ с помощью МОК (Мета-объектного компилятора) и предоставляет дополнительные функции (например, сигналы и слоты). Также имеет платную службу поддержки (как и платную лицензию). Для Qt есть большой выбор IDE: QtDesigner, QtCreator, QDevelop, Edyuk, а также доступна интеграция с Visual Studio, Eclipse и XCode.

Cairo – библиотека для отрисовки векторных изображений под Linux, Windows и Mac OS. К примеру, такой крупный проект, как Mozilla, использует Cairo в браузерном движке Gecko. Также Cairo лежит в основе некоторых операционных систем (MorphOS, AmigaOS) и приложений (InkScape, Synfig, Graphite). При использовании библиотеки будьте готовы к отсутствию русскоязычных ресурсов.

Cairo может взаимодействовать с OpenGL бэкендом с поддержкой GPU, что, конечно, открывает целый список полезных функций.

Кроссплатформенная библиотека Cocos2D-X призвана упростить разработку мобильных игр. Поддерживает все те же платформы, что и Qt. Из плюсов стоит отметить доступность, удобство эксплуатации и создание отдельного конструктора игр, основанного на библиотеке Cocos Creator. В списке игр, основанных на движке, есть всемирно известная BADLAND, работающая на всех доступных платформах.

Если при создании игры вам нужно работать с графикой и анимацией в больших объёмах, то лучше использовать Unity вместо Cocos2D-X. В Unity имеется возможность плавной интеграции с такими инструментами, как Photoshop, Maya или Blender. В Cocos2D-X вся графика добавляется извне и на неё ссылаются из кода.

wxWidgets – одна из старейших, но в то же время наиболее известных графических библиотек для отрисовки GUI. Её основной плюс – производительность. Если QT использует низкоуровневый код лишь для таких элементов, как кнопки и полосы прокрутки, то wxWidgets для каждой системы свой, и благодаря этому все элементы отображаются максимально похожими на системный стиль.

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

SDL — кроссплатформенная 2D-библиотека, предназначенная для написания приложений (в основном игр). Поддерживаются Windows, Linux, Mac OS, а также Android, Windows Mobile и iOS. Преимущества библиотеки – быстрота, надёжность и лёгкость в эксплуатации. Также в библиотеке реализованы профессиональные инструменты для работы со звуком – это большой плюс при разработке крупных проектов. Комбинируется с wxWidgets и хорошо интегрируется с OpenGL.

Пожалуй, одна из самых известных графических библиотек. GTK+ – графический фреймворк, широко применяемый во многих системах. Изначально он задумывался как компонент GIMP, но за 20 лет после выпуска первой стабильной версии он нашёл применение в сотнях других приложений.

Сейчас GTK+ — полноценный графический фреймворк, не уступающий тому же QT. Он поддерживает разные языки программирования и продолжает развиваться.

В своё время библиотека создавалась в качестве альтернативы Qt, которая была платной. GTK+ – один из немногих фреймворков, которые поддерживают язык C. Библиотека кроссплатформенная, но есть мнение, что программы на Linux выглядят более нативно, чем на Windows или Mac (GTK+ хорошо поддерживается даже на KDE). Интересно, что из-за некоторых проблем с кроссплатформенностью Wireshark перешла на Qt [5].

 

1.5. Особенности создания MDI и SDI интерфейсов

 

Существует два типа приложений, базирующихся на документах. Первый тип – это SDI (Single Document Interface, однодокументный интерфейс), второй – MDI (Multiple Document Interface, многодокументный интерфейс). В SDI-приложениях рабочая область одновременно является окном приложения, а это значит, что невозможно открыть в одном и том же приложении сразу два документа. MDI-приложение предоставляет рабочую область (класса QWorkSpace), способную размещать в себе окна виджетов, что дает возможность одновременной работы с большим количеством документов.

Главное отличие MDI- от SDI-приложения состоит в том, что SDI-приложение содержит только одно окно документа, a MDI-приложение способно содержать несколько таких окон, что дает пользователю возможность параллельной работы с несколькими документами [2].

 

1.6. Критерии оценивания качества интерфейсов

 

Существует четыре основных критерия качества любого интерфейса, а именно:

- скорость работы пользователей;

- количество человеческих ошибок;

- скорость обучения;

- субъективное удовлетворение пользователей (подразумевается, что соответствие интерфейса задачам пользователя является неотъемлемым свойством интерфейса).

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

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

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

Субъективные факторы имеют тот же вес, что и объективные. Разумеется, субъективность доминирует над объективностью только в тех случаях, когда покупателем системы выступает сам пользователь, но и в прочих случаях роль «крутоты» зачастую существенна, хотя бы потому, что повышение количества радости при прочих равных почти всегда приводит к повышению человеческой производительности. Это делает неактуальными вечные споры о первичности формы или функции. И то и другое важно [4].