1582 lines
136 KiB
TeX
1582 lines
136 KiB
TeX
\documentclass[a4paper,14pt]{extarticle}
|
||
\usepackage{csquotes}
|
||
|
||
% Кодировка и языки (лучше fontenc до babel)
|
||
\usepackage[T2A]{fontenc}
|
||
\usepackage[utf8]{inputenc}
|
||
\usepackage[russian]{babel}
|
||
|
||
% Размеры страницы и полей
|
||
\usepackage[left=25mm, top=20mm, right=20mm, bottom=20mm, footskip=10mm]{geometry}
|
||
|
||
\usepackage{amsmath, amssymb}
|
||
|
||
% Таблицы
|
||
\usepackage{tabularx}
|
||
\usepackage{array}
|
||
\usepackage{multirow}
|
||
\usepackage{longtable}
|
||
|
||
% Работа с текстом
|
||
\usepackage{ragged2e} % для выравнивания по ширине
|
||
\usepackage{indentfirst} % абзацный отступ первого абзаца
|
||
\usepackage{setspace} % межстрочный интервал
|
||
|
||
% Блоки кода и листинги
|
||
\usepackage{xcolor} % цвета
|
||
\usepackage{listings} % листинги
|
||
|
||
\usepackage{minted} % альтернативный вариант, нужен shell-escape
|
||
\lstset{
|
||
language=C++,
|
||
basicstyle=\footnotesize\ttfamily,
|
||
numbers=left,
|
||
numberstyle=\footnotesize,
|
||
tabsize=2,
|
||
breaklines=true,
|
||
inputencoding=utf8,
|
||
extendedchars=true,
|
||
keepspaces=true,
|
||
keywordstyle=\color{blue},
|
||
commentstyle=\color{gray},
|
||
stringstyle=\color{red},
|
||
columns=fullflexible
|
||
}
|
||
|
||
% Изображения и графика
|
||
\usepackage{graphicx}
|
||
\usepackage{float}
|
||
|
||
% Ссылки, перечисления, прочее
|
||
\usepackage{hyperref}
|
||
\hypersetup{colorlinks=true, allcolors=[RGB]{10,90,200}}
|
||
|
||
\usepackage{enumitem}
|
||
\setlist[enumerate,itemize]{leftmargin=1.2cm}
|
||
|
||
\usepackage{caption}
|
||
\captionsetup{font=small, singlelinecheck=false, justification=centering, labelsep=period}
|
||
|
||
% Дополнительные настройки
|
||
\renewcommand{\arraystretch}{1.4} % увеличиваем высоту строк в таблицах
|
||
|
||
% Параметры документа
|
||
\textheight=24cm
|
||
\textwidth=16cm
|
||
\oddsidemargin=0pt
|
||
\topmargin=-1.5cm
|
||
\parindent=24pt
|
||
\parskip=5pt
|
||
\tolerance=2000
|
||
\flushbottom
|
||
|
||
% Переопределяем способ отображения номера раздела после \appendix
|
||
\usepackage{etoolbox}
|
||
|
||
|
||
% --- Тело документа ---
|
||
\begin{document}
|
||
|
||
% НАЧАЛО ТИТУЛЬНОГО ЛИСТА
|
||
\begin{center}
|
||
\hfill \break
|
||
\hfill \break
|
||
\normalsize{МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ\\
|
||
федеральное государственное автономное образовательное учреждение высшего образования «Санкт-Петербургский политехнический университет Петра Великого»\\[10pt]}
|
||
\normalsize{Институт компьютерных наук и кибербезопасности}\\[10pt]
|
||
\normalsize{Высшая школа технологий искусственного интеллекта}\\[10pt]
|
||
\normalsize{Направление: 02.03.01 <<Математика и компьютерные науки>>}\\
|
||
|
||
\hfill \break
|
||
\hfill \break
|
||
\Large{Лабораторная работа №1}\\
|
||
\large{Разработка интерфейса пользователя}\\
|
||
\large{для
|
||
интерактивного приложения}\\
|
||
\large{<<Оптимальная загрузка а/м}\\
|
||
\large{для развозки товаров заказчикам>>}\\
|
||
\large{по дисциплине}\\
|
||
\Large{<<Разработка человеко-машинного интерфейса>>}\\
|
||
% \hfill \break
|
||
|
||
% \hfill \break
|
||
\hfill \break
|
||
\end{center}
|
||
|
||
\small{
|
||
\begin{tabular}{lrrl}
|
||
\!\!\!Студент, & \hspace{2cm} & & \\
|
||
\!\!\!группы 5130201/20101 & \hspace{2cm} & \underline{\hspace{3cm}} &Черепнов М.М. \\\\
|
||
\!\!\!Преподаватель & \hspace{2cm} & \underline{\hspace{3cm}} & Курочкин М. А. \\\\
|
||
&&\hspace{4cm}
|
||
\end{tabular}
|
||
\begin{flushright}
|
||
<<\underline{\hspace{1cm}}>>\underline{\hspace{2.5cm}} 2025г.
|
||
\end{flushright}
|
||
}
|
||
|
||
\hfill \break
|
||
% \hfill \break
|
||
\begin{center} \small{Санкт-Петербург, 2025} \end{center}
|
||
\thispagestyle{empty} % выключаем отображение номера для этой страницы
|
||
|
||
% КОНЕЦ ТИТУЛЬНОГО ЛИСТА
|
||
\newpage
|
||
|
||
\tableofcontents
|
||
|
||
\newpage
|
||
|
||
\section*{Введение}
|
||
|
||
|
||
\addcontentsline{toc}{section}{Введение}
|
||
|
||
Современные интерактивные приложения требуют не только высокой производительности и функциональности, но и продуманного, интуитивно понятного пользовательского интерфейса. \textbf{Разработка человеко-машинного интерфейса} (ЧМИ) является важнейшей частью процесса создания программных систем, поскольку именно через него осуществляется взаимодействие пользователя с приложением. Качество интерфейса напрямую влияет на эффективность работы пользователя, восприятие продукта и уровень его удовлетворенности.
|
||
|
||
Эффективный интерфейс должен сочетать в себе эстетичность, функциональность и удобство, позволяя пользователю быстро ориентироваться. Поэтому разработка человеко-машинного интерфейса предполагает применение принципов эргономики, визуальной композиции и взаимодействия человека с компьютером. В процессе проектирования учитываются особенности целевой аудитории, сценарии использования приложения, а также современные тенденции в области дизайна. Такой подход позволяет создать интерфейс, который не только выполняет функциональные задачи, но и способствует повышению производительности труда, снижению количества ошибок и улучшению общего пользовательского опыта.
|
||
|
||
В данной работе основное внимание будет уделено созданию конкретного человеко-машинного интерфейса для интерактивного приложения, предназначенного для решения задачи оптимальной загрузки автомобилей при доставке товаров заказчикам. В процессе разработки предстоит спроектировать структуру интерфейса, определить логику взаимодействия элементов управления и обеспечить наглядное представление данных, необходимых пользователю для принятия решений.
|
||
|
||
\newpage
|
||
|
||
\section{Постановка задачи}
|
||
|
||
\textbf{Требуется} разработать интерфейс приложения, решающего задачу оптимальной загрузки автомобиля для развозки товаров заказчикам. Под понятием «оптимальная загрузка» в данной работе понимается процесс размещения грузов в кузове автомобиля с учётом их объёма, габаритов и порядка адресной выгрузки, направленный на рациональное использование пространства и минимизацию времени разгрузки. Интерфейс должен обеспечивать формирование последовательности загрузки, минимизирующей время последующей выгрузки, а также учитывать ограничения по габаритам груза и объёму автомобиля.
|
||
|
||
С точки зрения теории, рассматриваемая задача относится к классу задач упаковки и является частным случаем \textit{задачи об упаковке в контейнеры}, где объекты предопределённой формы необходимо разместить в контейнер ограниченной вместимости так, чтобы минимизировать число используемых контейнеров или максимизировать общий объём упакованных объектов. Задача об упаковке в контейнеры является NP-трудной комбинаторной задачей, поэтому использование точных переборных алгоритмов возможно только при малых размерностях. В практических приложениях, в том числе в данной работе, применяются эвристические и приближённые методы, а также визуальные средства планирования, реализованные в интерфейсе пользователя.
|
||
|
||
Рассмотрим один грузовой автомобиль с кузовом в виде прямоугольного параллелепипеда размеров \(L \times W \times H\) и ограничением по массе \(Q\). Пусть дано множество грузов
|
||
\(\{1,\dots,n\}\), для каждого груза \(i\) известны габариты \(l_i, w_i, h_i\), масса \(m_i\), объём \(v_i = l_i w_i h_i\), а также адрес доставки и порядок выгрузки.
|
||
|
||
Для удобства дальнейшего рассмотрения разобьём внутренний объём кузова на дискретную трёхмерную сетку одинаковых ячеек. Обозначим через \(K\) множество ячеек этой сетки,
|
||
через \(c_i\) — число ячеек, необходимых для размещения груза \(i\).
|
||
|
||
Введём бинарные переменные:
|
||
\[
|
||
y_i =
|
||
\begin{cases}
|
||
1, & \text{если груз } i \text{ загружен в автомобиль},\\
|
||
0, & \text{иначе},
|
||
\end{cases}
|
||
\qquad
|
||
x_{ik} =
|
||
\begin{cases}
|
||
1, & \text{если часть груза } i \text{ занимает ячейку } k \in K,\\
|
||
0, & \text{иначе}.
|
||
\end{cases}
|
||
\]
|
||
|
||
Тогда задачу размещения грузов в одном кузове-параллелепипеде можно записать в виде задачи целочисленного программирования:
|
||
\begin{equation}
|
||
\max \sum_{i=1}^{n} v_i y_i,
|
||
\end{equation}
|
||
при ограничениях
|
||
\begin{align}
|
||
&\sum_{k \in K} x_{ik} = c_i y_i, && \forall i \in \{1,\dots,n\}, \label{eq:cells-for-item}\\
|
||
&\sum_{i=1}^{n} x_{ik} \le 1, && \forall k \in K, \label{eq:one-item-per-cell}\\
|
||
&\sum_{i=1}^{n} m_i y_i \le Q, && \text{(ограничение по массе автомобиля)}, \label{eq:weight-limit}\\
|
||
&x_{ik} \in \{0,1\},\; y_i \in \{0,1\}, && \forall i \in \{1,\dots,n\},\; k \in K. \label{eq:binary-vars}
|
||
\end{align}
|
||
|
||
Ограничения \eqref{eq:cells-for-item} задают требуемое число ячеек для каждого загруженного груза, ограничения \eqref{eq:one-item-per-cell} исключают пересечения грузов внутри кузова, а ограничение \eqref{eq:weight-limit} учитывает грузоподъёмность автомобиля. Целевая функция максимизирует суммарный объём загруженных грузов при соблюдении всех ограничений. Из-за бинарного характера переменных и дискретного трёхмерного представления пространства данная постановка также является NP-трудной и относится к классу задач упаковки.
|
||
|
||
Приложение должно учитывать следующие условия:
|
||
\begin{itemize}
|
||
\item У каждого груза известны объем (габариты), вес, адрес доставки и последовательность выгрузки.
|
||
\item Автомобиль имеет фиксированный объем и ограничение по высоте, ширине и длине кузова, а также по максимальной грузоподъемности.
|
||
\item Для оптимизации времени доставки грузы должны быть размещены так, чтобы минимизировать необходимость перемещения других грузов при выгрузке очередного.
|
||
\end{itemize}
|
||
|
||
\textbf{Необходимо} спроектировать удобный и интуитивно понятный интерфейс, который позволит пользователю формировать план загрузки автомобиля, отслеживать последовательность и схему размещения грузов.
|
||
|
||
\subsubsection*{Описание крайних случаев}
|
||
|
||
Для корректной работы приложения необходимо предусмотреть решение следующих ситуаций:
|
||
\begin{enumerate}
|
||
\item \textbf{Крайний порядок доставки:}
|
||
\begin{itemize}
|
||
\item Если груз нужно доставить в последнюю очередь, он должен быть размещен в глубине кузова.
|
||
\item Если груз нужно доставить первым, его временно размещают на отдельной площадке, и он загружается в кузов после размещения остальных грузов.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Ситуации с несколькими грузами для одного адреса:}
|
||
\begin{itemize}
|
||
\item Если грузы для одного адреса превышают длину одного ряда вдоль стены кузова, они размещаются в несколько уровней (если позволяет высота кабины) или в другие ряды.
|
||
\item Если грузы занимают не всю длину ряда, оставшиеся места могут быть заполнены грузами для следующего по маршруту адреса.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Изменения в заказе во время загрузки:}
|
||
\begin{itemize}
|
||
\item Если во время загрузки клиент изменяет состав груза (добавляет или заменяет), то клиенту предоставляется фиксированное время (30 минут) для корректировок. Если время истекает, загрузка продолжается по старому плану.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Отказ от груза во время загрузки:}
|
||
\begin{itemize}
|
||
\item Если груз не нужно доставлять, его можно оставить на складе, при условии, что это не нарушает последовательность загрузки и логистики.
|
||
\item Если отказ выявлен после завершения загрузки, груз возвращается на склад только после завершения всех запланированных доставок.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Корректировка плана водителем-экспедитором:}
|
||
\begin{itemize}
|
||
\item Если во время рейса или непосредственно перед выездом изменился маршрут, адрес доставки или состав груза, водитель может внести корректировки в план загрузки через интерфейс в рамках установленных ограничений.
|
||
\item Изменения должны автоматически сохраняться в системе и отображаться для оператора склада для синхронизации данных.
|
||
\end{itemize}
|
||
\end{enumerate}
|
||
|
||
\subsubsection*{Требования к интерфейсу и функционалу}
|
||
|
||
\textbf{Пользователь может}:
|
||
\begin{itemize}
|
||
\item Задать список грузов с их характеристиками (размер, адрес, приоритет доставки).
|
||
\item Просматривать текущую схему загрузки: отображение занятых и свободных мест внутри кузова.
|
||
\item Вносить изменения в список грузов (при соблюдении правил загрузки).
|
||
\end{itemize}
|
||
|
||
\textbf{Приложение должно}:
|
||
\begin{itemize}
|
||
\item Предоставлять пользователю рекомендации по оптимальному размещению груза.
|
||
\item Отображать текущую схему загрузки в виде графического плана, где указаны:
|
||
\begin{itemize}
|
||
\item занятые места;
|
||
\item свободные места.
|
||
\end{itemize}
|
||
\item Исключать добавление или удаление грузов после завершения загрузки.
|
||
\end{itemize}
|
||
|
||
\newpage
|
||
\section{Анализ проекта}
|
||
|
||
\subsection{Цель проекта}
|
||
|
||
Цель проекта — проектирование интерфейса для оптимизации процесса загрузки автомобиля с учетом последовательности доставки товаров. Это позволит сократить время передачи товаров клиентам за счет правильного расположения грузов.
|
||
|
||
\subsection{Заинтересованные лица}
|
||
\begin{itemize}
|
||
\item \textbf{Водитель-экспедитор}, который отвечает за размещение грузов в кузове автомобиля и их доставку клиентам.
|
||
\item \textbf{Оператор склада}, который формирует список грузов, задаёт параметры доставки и контролирует процесс планирования загрузки автомобиля.
|
||
\end{itemize}
|
||
|
||
\subsection{Ожидания заинтересованных лиц}
|
||
|
||
\textbf{Водитель-экспедитор} ожидает:
|
||
\begin{itemize}
|
||
\item Удобного и интуитивно понятного интерфейса для планирования последовательности загрузки;
|
||
\item Возможности визуально оценить занятое и свободное пространство в кузове автомобиля;
|
||
\item Инструментов для быстрого внесения изменений в план загрузки в рамках установленных ограничений;
|
||
\item Сокращения времени на поиск и передачу грузов в процессе доставки;
|
||
\end{itemize}
|
||
|
||
\textbf{Оператор склада} ожидает:
|
||
\begin{itemize}
|
||
\item Возможности формировать и редактировать список грузов с указанием их характеристик и адресов доставки;
|
||
\item Инструментов для контроля соблюдения ограничений по габаритам и объёму автомобиля;
|
||
\item Получения автоматических рекомендаций по оптимальному размещению грузов;
|
||
\item Повышения точности и прозрачности процесса планирования загрузки;
|
||
\item Снижения количества ручных корректировок при формировании маршрутов и загрузочных листов.
|
||
\end{itemize}
|
||
|
||
\subsection{Критерии оценки результата}
|
||
|
||
Качество реализации интерфейса и корректность работы приложения будут оцениваться по следующим критериям:
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Функциональная полнота:} наличие всех заявленных функций — формирование списка грузов, визуализация схемы загрузки, учёт ограничений по габаритам и объёму.
|
||
\item \textbf{Удобство интерфейса:} интуитивность навигации, доступность основных функций, минимизация количества действий при планировании загрузки.
|
||
\item \textbf{Корректность визуализации:} соответствие отображаемой схемы фактическим параметрам кузова и грузов, отсутствие пересечений и ошибок при размещении.
|
||
\item \textbf{Надёжность работы:} стабильность приложения при множественных изменениях данных и в условиях неполных или некорректных входных данных.
|
||
\item \textbf{Производительность:} скорость обновления схемы загрузки и отображения изменений при редактировании данных.
|
||
\item \textbf{Практическая применимость:} возможность использовать разработанный интерфейс в реальных складских или логистических условиях для оптимизации процесса загрузки автомобиля.
|
||
\end{itemize}
|
||
|
||
\subsection{Планируемые результаты использования продукта}
|
||
|
||
Использование разработанного интерфейса позволит повысить эффективность логистических операций и упростить процесс планирования загрузки автомобиля. Ожидается достижение следующих результатов:
|
||
|
||
\begin{itemize}
|
||
\item Снижение временных затрат на планирование последовательности загрузки;
|
||
\item Ускорение процесса передачи товаров клиентам за счёт правильного размещения грузов;
|
||
\item Эффективное использование пространства внутри автомобиля;
|
||
\item Минимизация количества ошибок при формировании и исполнении плана загрузки;
|
||
\item Повышение прозрачности и контролируемости процесса загрузки для оператора склада и водителя-экспедитора;
|
||
\item Сокращение времени простоя транспортного средства при выполнении рейса;
|
||
\item Повышение общей производительности и надёжности логистической цепочки доставки.
|
||
\end{itemize}
|
||
|
||
\newpage
|
||
|
||
\section{Описание технической платформы}
|
||
|
||
Разрабатываемое приложение предназначено для использования на мобильных устройствах, преимущественно на планшетах и промышленных мобильных терминалах, применяемых в логистических операциях. Интерфейс оптимизирован для сенсорного управления и обеспечивает удобную работу пользователя в условиях склада или транспортного узла.
|
||
|
||
Приложение функционирует в автономном режиме с возможностью синхронизации данных с сервером при наличии сетевого подключения. Серверная часть системы может быть реализована на локальном или облачном сервере предприятия и отвечает за хранение данных о заказах, маршрутах и параметрах загрузки.
|
||
|
||
Таким образом, программный продукт представляет собой клиент-серверное приложение с пользовательским интерфейсом, ориентированным на выполнение операций по формированию и корректировке плана загрузки автомобиля.
|
||
|
||
\subsection*{Минимальные системные требования}
|
||
|
||
\begin{enumerate}
|
||
\item \textit{Операционная система:} Android 7.0 / iOS 10.0 или более поздние версии;
|
||
\item \textit{Аппаратная платформа:} планшет или мобильное устройство с поддержкой сенсорного ввода;
|
||
\item \textit{Процессор:} не ниже уровня Qualcomm Snapdragon 429 или эквивалентного (частота от 1.8 ГГц);
|
||
\item \textit{Оперативная память (RAM):} не менее 1 ГБ;
|
||
\item \textit{Внутренняя память (ROM):} не менее 1 ГБ для установки приложения и хранения локальных данных;
|
||
\item \textit{Экран:} диагональ не менее 7 дюймов, разрешение не ниже 800×480 пикселей;
|
||
\item \textit{Сетевые возможности:} поддержка Wi-Fi и/или мобильной связи (3G, 4G, LTE) для синхронизации с сервером.
|
||
\end{enumerate}
|
||
|
||
\subsection*{Рекомендуемые параметры}
|
||
|
||
\begin{enumerate}
|
||
\item \textit{Операционная система:} Android 10.0 / iOS 13.0 или более поздние версии;
|
||
\item \textit{Процессор:} 8-ядерный, не ниже уровня Qualcomm Snapdragon 660;
|
||
\item \textit{Оперативная память (RAM):} от 2 ГБ;
|
||
\item \textit{Экран:} диагональ 10 дюймов и выше, разрешение Full HD;
|
||
\item \textit{Подключение к серверу:} устойчивое интернет-соединение или локальная корпоративная сеть.
|
||
\end{enumerate}
|
||
|
||
Выбор планшетных устройств в качестве основной аппаратной платформы обусловлен требованиями к мобильности, наглядности визуализации и удобству сенсорного взаимодействия. Планшеты обеспечивают оптимальный баланс между портативностью и размером экрана. Это позволяет пользователю эффективно работать с графическим представлением схемы загрузки, вносить изменения в план и оперативно взаимодействовать с системой в процессе погрузочных и логистических операций.
|
||
|
||
\newpage
|
||
|
||
\section{Анализ пользователей приложения}
|
||
|
||
\subsection{Модель пользователей продукта}
|
||
Приложение предназначено для двух типов пользователей, вовлечённых в процесс загрузки и доставки грузов:
|
||
\begin{itemize}
|
||
\item {\bf Основной пользователь} — водитель-экспедитор, который использует приложение для контроля загрузки автомобиля с учётом последовательности доставки грузов.
|
||
\item {\bf Второстепенный пользователь} — оператор склада, который формирует исходные данные о грузах, контролирует корректность плана размещения и передаёт готовый план погрузчикам.
|
||
\end{itemize}
|
||
|
||
\subsection{Основной персонаж — водитель-экспедитор}
|
||
|
||
\subsubsection*{Описание персонажа}
|
||
{\bf Виктор}, мужчина, 40 лет, работает водителем-экспедитором в транспортной компании. Имеет 15-летний опыт в сфере грузоперевозок. Отвечает за доставку товаров по нескольким адресам в течение одного маршрута. В своей работе Виктор ценит точность планирования, удобство выгрузки и безопасность перевозимых грузов.
|
||
|
||
\subsubsection*{Цели персонажа}
|
||
\begin{itemize}
|
||
\item Оптимально распределить грузы в кузове автомобиля, чтобы при доставке к каждому адресу обеспечивался быстрый доступ к соответствующим товарам.
|
||
\item Минимизировать свободное пространство внутри кузова, чтобы предотвратить смещение грузов при движении.
|
||
\item Сократить время, затрачиваемое на выгрузку и поиск нужных грузов.
|
||
\item Оперативно корректировать план загрузки при изменении маршрута или заказов.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Контекст использования продукта}
|
||
\begin{itemize}
|
||
\item Виктор использует приложение на планшете или смартфоне, закреплённом в кабине автомобиля или на складе при подготовке к рейсу.
|
||
\item Перед началом загрузки он вводит свою фамилию и дату рейса для идентификации маршрута.
|
||
\item На экране отображается визуальная схема кузова автомобиля и последовательность адресов доставки.
|
||
\item Виктор проверяет, чтобы грузы, доставляемые первыми, находились ближе к выходу, а последние — в глубине кузова.
|
||
\item В случае изменений (например, отмены или замены заказа) он вручную корректирует схему загрузки в приложении.
|
||
\item После завершения загрузки приложение отображает итоговую схему размещения грузов, которую Виктор утверждает перед выездом.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Задачи, решаемые персонажем}
|
||
\begin{itemize}
|
||
\item Планировать загрузку автомобиля в соответствии с маршрутом доставки.
|
||
\item Контролировать соответствие фактического размещения грузов плану.
|
||
\item Оперативно реагировать на изменения в составе заказов.
|
||
\item Подтверждать завершение загрузки и готовность автомобиля к выезду.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Ментальная модель, метафоры и идиомы}
|
||
\begin{itemize}
|
||
\item Ментальная модель Виктора основана на привычном физическом процессе загрузки, где кузов автомобиля воспринимается как трёхмерное пространство, заполняемое грузами в определённой последовательности.
|
||
\item Основная метафора интерфейса — {\bf «кузов автомобиля»}, представленный в виде интерактивной схемы сверху или сбоку. Каждый груз отображается в виде прямоугольного блока с указанием номера адреса доставки.
|
||
\item Используются знакомые мобильные идиомы: drag-and-drop, подсветка возможных зон размещения и подтверждение действий касанием.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Квалификация пользователя}
|
||
\begin{itemize}
|
||
\item Имеет базовые навыки работы с мобильными устройствами и навигационными приложениями.
|
||
\item Не обладает специальной технической подготовкой в области информационных технологий.
|
||
\item Требует простого и визуально понятного интерфейса, не перегруженного избыточными элементами.
|
||
\end{itemize}
|
||
|
||
\newpage
|
||
\subsection{Второстепенный персонаж — оператор склада}
|
||
|
||
\subsubsection*{Описание персонажа}
|
||
{\bf Анна}, женщина, 32 года, работает оператором склада в логистической компании. Имеет экономическое образование и более 5 лет опыта в сфере управления складскими операциями. Её основная задача — формирование плана загрузки для водителя-экспедитора и погрузчиков.
|
||
|
||
\subsubsection*{Цели персонажа}
|
||
\begin{itemize}
|
||
\item Подготовить и ввести список грузов с указанием их характеристик и адресов доставки.
|
||
\item Проверить, что общий объём грузов не превышает вместимость кузова.
|
||
\item Сформировать оптимальный план размещения, обеспечивающий удобную выгрузку по маршруту.
|
||
\item Вносить изменения при корректировке заказов или маршрутов.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Контекст использования продукта}
|
||
\begin{itemize}
|
||
\item Анна использует приложение на планшете, находясь на складе, рядом с зоной погрузки.
|
||
\item Она получает заказы из складской системы и вводит их параметры в приложение.
|
||
\item Приложение автоматически формирует визуальную схему размещения грузов в кузове.
|
||
\item При необходимости Анна корректирует схему, перемещая элементы касанием экрана.
|
||
\item После утверждения плана он становится доступным водителю-экспедитору для последующей загрузки и возможных изменений по ходу рейса.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Задачи, решаемые персонажем}
|
||
\begin{itemize}
|
||
\item Ввести исходные данные о грузах и адресах доставки.
|
||
\item Проверить соответствие объёма и габаритов грузов параметрам автомобиля.
|
||
\item Составить оптимальный план размещения и утвердить его.
|
||
\item Обеспечить актуальность данных при изменении заказов.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Ментальная модель, метафоры и идиомы}
|
||
\begin{itemize}
|
||
\item Ментальная модель Анны основана на представлении кузова как логистического контейнера, который необходимо рационально заполнить.
|
||
\item Основная метафора интерфейса — {\bf «схема кузова и список грузов»}, где пользователь видит визуальное распределение и сопоставляет его с данными заказа.
|
||
\item Применяются мобильны идиомы: касание для выбора груза, удержание для редактирования, перетаскивание для изменения расположения.
|
||
\item Интерфейс поддерживает визуальную обратную связь (подсветка ошибок, предупреждения о переполнении кузова).
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Квалификация пользователя}
|
||
\begin{itemize}
|
||
\item Уверенно пользуется планшетами и мобильными приложениями для учёта и контроля грузов.
|
||
\item Имеет практические знания в области логистики и работы с заказами.
|
||
\item Обладает внимательностью к деталям и ответственностью за корректность исходных данных.
|
||
\end{itemize}
|
||
|
||
\newpage
|
||
|
||
\section{Описание задач, процессов задач, функций процессов}
|
||
|
||
\subsection{Описание для водителя-экспедитора Виктора}
|
||
|
||
\begin{enumerate}
|
||
|
||
\item \textbf{Задача 1. Получение и проверка списка грузов}
|
||
\begin{itemize}
|
||
\item \textbf{Процесс 1. Авторизация и ввод параметров запроса:}
|
||
Виктор открывает приложение, вводит фамилию и выбирает текущую дату, чтобы получить актуальный список заказов.
|
||
|
||
\textbf{Функции:} поле ввода фамилии; календарь выбора даты; кнопка «Получить список».
|
||
|
||
\item \textbf{Процесс 2. Проверка загруженных данных:}
|
||
Приложение отображает карточки всех грузов с указанием адресов, габаритов и приоритетов. Виктор сверяет данные с накладной и подтверждает их.
|
||
|
||
\textbf{Функции:} карточки грузов; фильтр и сортировка по адресу/приоритету; кнопка «Подтвердить список».
|
||
|
||
\item \textbf{Процесс 3. Формирование предварительного плана загрузки:}
|
||
После подтверждения данных приложение создаёт базовую схему размещения грузов по маршруту. Виктор проверяет, всё ли корректно.
|
||
|
||
\textbf{Функции:} генерация схемы кузова; визуализация блоков по адресам; кнопка «Редактировать план».
|
||
\end{itemize}
|
||
|
||
\item \textbf{Задача 2. Последовательная загрузка грузов}
|
||
\begin{itemize}
|
||
\item \textbf{Процесс 1. Проверка порядка загрузки по маршруту:}
|
||
Виктор просматривает предложенный порядок адресов и при необходимости корректирует последовательность загрузки.
|
||
|
||
\textbf{Функции:} просмотр маршрута; кнопка «Изменить порядок»; автоматическое обновление схемы.
|
||
|
||
\item \textbf{Процесс 2. Контроль размещения грузов:}
|
||
Виктор руководит процессом загрузки, следя за тем, чтобы грузы, доставляемые в последнюю очередь, располагались в глубине кузова.
|
||
|
||
\textbf{Функции:} визуальная схема кузова; подсветка активных зон; отметка «Груз установлен».
|
||
|
||
\item \textbf{Процесс 3. Проверка соответствия плану:}
|
||
Виктор сверяет фактическое размещение с планом и фиксирует этап загрузки.
|
||
|
||
\textbf{Функции:} визуальная проверка соответствия; кнопка «Подтвердить этап»; уведомления о несоответствиях; ручная коррекция.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Задача 3. Оптимизация размещения}
|
||
\begin{itemize}
|
||
\item \textbf{Процесс 1. Анализ доступного пространства:}
|
||
Приложение показывает текущую заполненность кузова и предлагает возможные варианты для укладки грузов.
|
||
|
||
\textbf{Функции:} индикатор заполнения; автоматические подсказки по слоям; масштабирование схемы.
|
||
|
||
\item \textbf{Процесс 2. Перераспределение грузов:}
|
||
Виктор вручную перемещает блоки для более плотного размещения или выравнивания центра тяжести, если требуется.
|
||
|
||
\textbf{Функции:} drag-and-drop перемещение; визуальная подсветка пустот; автоматический пересчёт баланса веса.
|
||
|
||
\item \textbf{Процесс 3. Сохранение оптимизированного варианта:}
|
||
После перераспределения Виктор сохраняет схему как окончательный план загрузки.
|
||
|
||
\textbf{Функции:} кнопка «Сохранить план»; визуальное подтверждение; отметка времени последнего изменения.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Задача 4. Обработка изменений и завершение загрузки}
|
||
\begin{itemize}
|
||
\item \textbf{Процесс 1. Обработка изменений в заказах:}
|
||
Если клиент отменяет или заменяет груз, приложение уведомляет Виктора и предлагает обновлённую схему.
|
||
|
||
\textbf{Функции:} всплывающее уведомление; кнопка «Принять изменения»; таймер 30 минут для корректировки.
|
||
|
||
\item \textbf{Процесс 2. Финальная проверка размещения:}
|
||
Перед выездом Виктор проверяет, что все грузы соответствуют схеме и маршруту доставки.
|
||
|
||
\textbf{Функции:} итоговая визуализация кузова; адресные индикаторы; кнопка «Проверено».
|
||
|
||
\item \textbf{Процесс 3. Подтверждение завершения загрузки:}
|
||
После проверки Виктор завершает процесс и формирует итоговый отчёт.
|
||
\textbf{Функции:} кнопка «Завершить загрузку»; генерация PDF-плана; уведомление об успешном завершении.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Задача 5. Корректировка плана во время рейса}
|
||
\begin{itemize}
|
||
\item \textbf{Процесс 1. Внесение изменений по ходу маршрута:}
|
||
Если клиент изменяет время приёма или адрес, Виктор получает уведомление и может обновить маршрут.
|
||
|
||
\textbf{Функции:} уведомление о новой информации; кнопка «Изменить адрес»; автоматическая перестройка порядка выгрузки.
|
||
|
||
\item \textbf{Процесс 2. Обновление схемы кузова:}
|
||
При изменении порядка доставки приложение перестраивает схему размещения, показывая актуальную последовательность выгрузки.
|
||
|
||
\textbf{Функции:} динамическое обновление визуализации; подсветка следующего адреса; кнопка «Синхронизировать маршрут».
|
||
|
||
\item \textbf{Процесс 3. Фиксация доставленных грузов:}
|
||
После выгрузки Виктор отмечает доставленные позиции, чтобы система убирала их с карты кузова.
|
||
|
||
\textbf{Функции:} отметка «Доставлено»; визуальное обновление схемы; кнопка «Отправить отчёт о доставке».
|
||
\end{itemize}
|
||
|
||
\end{enumerate}
|
||
|
||
\subsection{Описание для оператора склада Анны}
|
||
|
||
\begin{enumerate}
|
||
|
||
\item \textbf{Задача 1. Ввод исходных данных о грузах и адресах доставки}
|
||
\begin{itemize}
|
||
\item \textbf{Процесс 1. Получение заказов из учётной системы:}
|
||
Анна загружает список заказов, включает сведения о грузе, весе, габаритах и адресах доставки.
|
||
|
||
\textbf{Функции:} кнопка «Импортировать данные»; просмотр карточек заказов; уведомление об ошибках загрузки.
|
||
|
||
\item \textbf{Процесс 2. Проверка и уточнение данных:}
|
||
Анна проверяет корректность заполнения полей, уточняет отсутствующие данные и исправляет ошибки перед сохранением.
|
||
|
||
\textbf{Функции:} редактирование карточек; подсветка обязательных полей; кнопка «Сохранить корректировки».
|
||
|
||
\item \textbf{Процесс 3. Подтверждение исходных данных:}
|
||
После проверки Анна утверждает список заказов для дальнейшего планирования загрузки.
|
||
|
||
\textbf{Функции:} кнопка «Утвердить список»; отметка времени утверждения; уведомление о передаче данных Виктору.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Задача 2. Проверка соответствия параметрам автомобиля}
|
||
\begin{itemize}
|
||
\item \textbf{Процесс 1. Сравнение объёма грузов с вместимостью кузова:}
|
||
Приложение автоматически рассчитывает общий объём и массу, а Анна проверяет, не превышены ли допустимые параметры автомобиля.
|
||
|
||
\textbf{Функции:} автоматический расчёт суммарных габаритов; предупреждение о превышении вместимости; визуальный индикатор загрузки.
|
||
|
||
\item \textbf{Процесс 2. Корректировка данных при превышении:}
|
||
Если выявлено несоответствие, Анна изменяет состав партии или распределяет грузы по разным рейсам.
|
||
|
||
\textbf{Функции:} редактирование состава заказа; кнопка «Пересчитать параметры»; визуальное обновление объёмов.
|
||
|
||
\item \textbf{Процесс 3. Утверждение итогового состава груза:}
|
||
После проверки Анна фиксирует согласованный перечень грузов и передаёт данные для планирования размещения.
|
||
|
||
\textbf{Функции:} кнопка «Подтвердить состав»; отметка об утверждении; передача данных Виктору.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Задача 3. Составление и утверждение плана размещения}
|
||
\begin{itemize}
|
||
\item \textbf{Процесс 1. Автоматическая генерация схемы:}
|
||
Система предлагает вариант размещения грузов по маршруту доставки. Анна оценивает, насколько рационально распределено пространство.
|
||
|
||
\textbf{Функции:} визуализация кузова; drag-and-drop перемещение; подсветка зон по адресам доставки.
|
||
|
||
\item \textbf{Процесс 2. Ручная корректировка схемы:}
|
||
При необходимости Анна изменяет расположение отдельных грузов для оптимизации доступа или баланса.
|
||
|
||
\textbf{Функции:} ручное редактирование схемы; индикатор центра тяжести; кнопка «Сохранить изменения».
|
||
|
||
\item \textbf{Процесс 3. Утверждение и передача Виктору:}
|
||
После проверки Анна утверждает схему загрузки и передаёт её водителю для контроля выполнения.
|
||
|
||
\textbf{Функции:} кнопка «Отправить план»; комментарий к схеме; уведомление об успешной передаче.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Задача 4. Обеспечение актуальности данных}
|
||
\begin{itemize}
|
||
\item \textbf{Процесс 1. Обновление при изменении заказов:}
|
||
При отмене или корректировке заказа Анна получает уведомление и обновляет данные в системе.
|
||
|
||
\textbf{Функции:} уведомления об изменениях; кнопка «Обновить список»; журнал правок.
|
||
|
||
\item \textbf{Процесс 2. Синхронизация с маршрутом Виктора:}
|
||
После внесения изменений Анна отправляет обновлённую информацию водителю для корректировки его плана.
|
||
|
||
\textbf{Функции:} кнопка «Передать обновления»; отметка времени синхронизации; уведомление о доставке данных.
|
||
|
||
\item \textbf{Процесс 3. Контроль согласованности:}
|
||
Система проверяет, что обновлённые данные синхронизированы с текущей схемой Виктора.
|
||
|
||
\textbf{Функции:} индикатор статуса синхронизации; сообщение об успешном обновлении; отчёт о расхождениях.
|
||
\end{itemize}
|
||
|
||
\end{enumerate}
|
||
|
||
\subsection{Минимизация накладных расходов (налогов)}
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Снижение затрат на ресурсы:}
|
||
За счёт чётко распределённых задач между Анной, Виктором и системой снижается время на ручную обработку заказов и планирование. Это уменьшает трудозатраты и, соответственно, фонд начислений, влияющих на налоги.
|
||
|
||
\item \textbf{Автоматизация документооборота:}
|
||
Приложение формирует электронные накладные, отчёты и схемы загрузки. Отказ от бумажных носителей сокращает административные расходы и делает отчётность прозрачной для налогового учёта.
|
||
|
||
\item \textbf{Оптимизация использования транспорта:}
|
||
Благодаря точному плану загрузки и маршруту уменьшается пробег и расход топлива. Это снижает амортизационные и топливные расходы, включаемые в налогооблагаемую базу.
|
||
|
||
\item \textbf{Предотвращение простоев:}
|
||
Система синхронизирует действия Анны и Виктора — загрузка начинается сразу после утверждения плана. Это исключает задержки и дополнительные выплаты за сверхурочную работу.
|
||
|
||
\item \textbf{Цифровой контроль и аналитика:}
|
||
Приложение сохраняет данные по рейсам и загрузкам. Эти сведения используются для анализа и корректировки затрат, что помогает планировать оптимальные налоговые отчисления.
|
||
\end{itemize}
|
||
|
||
\newpage
|
||
\section{Описание структуры диалога и команд пользователей}
|
||
\subsection{Описание структуры диалога и его обоснование}
|
||
|
||
Структура диалога построена по принципу конечного автомата, где каждое состояние соответствует отдельной странице интерфейса.
|
||
Диалог охватывает взаимодействие двух ролей — оператора склада (Анны) и водителя-экспедитора (Виктора).
|
||
Переходы между состояниями осуществляются с помощью пользовательских команд, которые отражают действия в интерфейсе (нажатия кнопок, подтверждения, изменения данных).
|
||
|
||
\textbf{Обоснование структуры:}
|
||
\begin{itemize}
|
||
\item Выделение состояний S0–S5 позволяет связать все этапы процесса — от ввода заказов до завершения погрузки — в единую логику.
|
||
\item Диалог построен так, чтобы обеспечить согласованность действий между Анной и Виктором: данные, созданные в одном состоянии (например, схема загрузки), становятся основой для следующего.
|
||
\item Возвраты (команда {\bf b}) предусмотрены из каждого состояния, что исключает тупиковые ситуации и повышает удобство работы.
|
||
\item Конечное состояние {\bf S5} фиксирует завершение погрузки и формирование отчёта — это логическая точка завершения цикла взаимодействия.
|
||
\end{itemize}
|
||
|
||
Граф состояний представлен на рисунке~\ref{sostgr}
|
||
|
||
\textbf{Описание состояний:}
|
||
\begin{itemize}
|
||
\item {\bf S0} — Главная страница: доступ к текущим рейсам, заказам и статусам загрузки.
|
||
|
||
\item {\bf S1} — Страница проверки и редактирования данных о грузах. Загрузка списка заказов, редактирование карточек и подтверждение корректности
|
||
|
||
\item {\bf S2} — Страница формирования схемы размещения и просмотра схемы загрузки.
|
||
|
||
\item {\bf S3} — Страница процесса загрузки и контроля статусов.
|
||
Отображается визуальная схема кузова. Отмечаются этапы погрузки,
|
||
отслеживаются статусы в реальном времени.
|
||
|
||
\item {\bf S4} — Страница обработки изменений заказов.
|
||
При изменениях в заказах система отправляет уведомление и разрешает скорректировать схему или обновить статус.
|
||
|
||
\item {\bf S5} — Страница завершения погрузки и фиксации данных. Подтверждение завершения загрузки, сохранение итогового отчёта и архива данных.
|
||
\end{itemize}
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=0.75\textwidth]{sostgr.png}
|
||
\caption{Граф состояний}
|
||
\label{sostgr}
|
||
\end{figure}
|
||
|
||
\subsection{Описание структуры команд пользователей}
|
||
|
||
Команды разделены на три типа согласно диаграмме структуры команд (см. рисунок~\ref{cmtypes}).
|
||
Тип операции определяется уровнем взаимодействия пользователя с системой — от простых действий до операций с подтверждением и результатом.
|
||
|
||
\textbf{Типы команд:}
|
||
\begin{itemize}
|
||
\item {\bf Тип 1} — простые команды, выполняющие действие без параметров (нажатие кнопки, переход, подтверждение).
|
||
\item {\bf Тип 2} — команды с параметрами, требующие ввода данных и подтверждения пользователем.
|
||
\item {\bf Тип 3} — команды, использующие один операнд и выводящие результат после подтверждения (например, пересчёт параметров или отчёт).
|
||
\end{itemize}
|
||
\newpage
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=0.4\textwidth]{сmtypes.png}
|
||
\caption{Типы команд}
|
||
\label{cmtypes}
|
||
\end{figure}
|
||
|
||
\textbf{Команды пользователей:}
|
||
\begin{itemize}
|
||
\item {\bf lg} — Войти в систему; \textbf{Тип 1.} Авторизация пользователя (Анна или Виктор).
|
||
\item {\bf ld} — Загрузить данные заказов; \textbf{Тип 1.} Подгружается список заказов из учётной системы.
|
||
\item {\bf ed} — Редактировать карточку груза; \textbf{Тип 2.} Параметры: ID груза.
|
||
\item {\bf sv} — Сохранить изменения; \textbf{Тип 3.} Требуется подтверждение перед фиксацией правок, вывод результата об успешном сохранении.
|
||
\item {\bf sc} — Сформировать схему загрузки; \textbf{Тип 2.} Параметры: список грузов, объём кузова.
|
||
\item {\bf wt} — Проверить вес и баланс; \textbf{Тип 3.} Система рассчитывает результат и выводит предупреждения.
|
||
\item {\bf ap} — Подтвердить план загрузки; \textbf{Тип 3.} Передача требует подтверждения и отображает результат (уведомление об успешной отправке).
|
||
\item {\bf ck} — Подтвердить схему загрузки; \textbf{Тип 3.} Необходим ввод подтверждения и отображение результата утверждения.
|
||
\item {\bf st} — Начать погрузку; \textbf{Тип 1.} Открывается страница визуального контроля.
|
||
\item {\bf mr} — Отметить статус группы грузов (этап погрузки); \textbf{Тип 2.} Параметры: cписок ID грузов, статус.
|
||
\item {\bf up} — Обновить при изменении заказов; \textbf{Тип 2.} Параметры: ID заказа, причина изменения.
|
||
\item {\bf fn} — Завершить погрузку; \textbf{Тип 3.} Требуется подтверждение, формируется итоговый отчёт.
|
||
\item {\bf b} — Вернуться на предыдущую страницу; \textbf{Тип 1.} Переход к предыдущему состоянию без параметров.
|
||
\end{itemize}
|
||
|
||
\subsection{Физическая реализация команд пользователей}
|
||
|
||
Каждая команда выполняется через элементы интерфейса.
|
||
Пользователь нажимает кнопку, открывает меню или вводит параметры в форму.
|
||
Команда передаётся в модуль обработки событий и запускает переход в выбранное состояние.
|
||
|
||
\begin{itemize}
|
||
\item Команды типа 1 выполняются сразу после нажатия.
|
||
\item Команды типа 2 требуют ввода параметров через форму.
|
||
\item Команды типа 3 показывают диалог подтверждения перед выполнением.
|
||
\end{itemize}
|
||
|
||
После обработки команда показывает короткое подтверждение или вывод результата.
|
||
Если действие не может быть выполнено, система показывает подсказку и предлагает исправить данные.
|
||
|
||
\subsection{Технология ввода данных}
|
||
|
||
Система использует формы с простыми полями.
|
||
Пользователь вводит значения через текстовые поля, выбирает варианты из списков и нажимает кнопки действий.
|
||
|
||
\begin{itemize}
|
||
\item Загрузка заказов выполняется автоматически после нажатия команды \texttt{ld}.
|
||
\item Карточка груза содержит поля «Вес», «Объём» и «Адрес».
|
||
\item Проверка корректности выполняется сразу после изменения значений.
|
||
\item Параметры команд типа 2 передаются через форму без консольного ввода.
|
||
\item Для подтверждения действий типа 3 система открывает всплывающее окно.
|
||
\end{itemize}
|
||
|
||
Интерфейс подсвечивает поля с ошибками и показывает короткие подсказки.
|
||
Элементы ввода не позволяют сохранить неверные данные.
|
||
|
||
|
||
\subsection{Описание ошибок пользователей и методы их обработки}
|
||
|
||
В работе с системой встречаются разные ошибки.
|
||
Каждая ошибка вызывает подсказку или показывает безопасное действие, которое помогает пользователю исправить ситуацию.
|
||
|
||
\subsubsection*{Ошибочное размещение груза}
|
||
\begin{itemize}
|
||
\item Пользователь пытается поставить груз в область, где нет места или есть конфликт по габаритам.
|
||
\item Интерфейс показывает подсветку зоны и короткое сообщение.
|
||
\item Сообщение указывает причину отказа и предлагает подходящее место.
|
||
\item Действие не сохраняется, пока пользователь не выберет корректную позицию.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Случайное удаление плана загрузки}
|
||
\begin{itemize}
|
||
\item Пользователь может случайно нажать кнопку удаления.
|
||
\item Чтобы исключить ошибку, требуется удерживать кнопку 3 секунды.
|
||
\item После удаления интерфейс предлагает восстановить план из последнего сохранения.
|
||
\item Система записывает событие в журнал.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Ошибочное добавление груза}
|
||
\begin{itemize}
|
||
\item Возможно случайное добавление лишнего груза или дублирование.
|
||
\item Интерфейс разрешает отменить последнее действие.
|
||
\item Можно открыть список и удалить конкретный элемент вручную.
|
||
\item После удаления система предлагает пересчитать схему.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Нарушение порядка доставки}
|
||
\begin{itemize}
|
||
\item Пользователь меняет местами грузы, которые идут на разные адреса.
|
||
\item Система показывает предупреждение и подсвечивает нарушенный маршрут.
|
||
\item Интерфейс предлагает сохранить правильный порядок или выбрать автоматическую перестройку маршрута.
|
||
\item Действие не применяется без подтверждения.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Попытка начать погрузку без утверждённой схемы}
|
||
\begin{itemize}
|
||
\item Пользователь нажимает команду <<Начать погрузку>>, хотя схема не подтверждена.
|
||
\item Интерфейс выводит блокирующее сообщение.
|
||
\item Сообщение предлагает вернуться к странице S2 и завершить проверку.
|
||
\item До подтверждения схема не открывает страницу загрузки.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Попытка завершить погрузку без отметки всех грузов}
|
||
\begin{itemize}
|
||
\item Пользователь вызывает команду <<Завершить погрузку>>, но не отмечены все грузы.
|
||
\item Система показывает список пропущенных элементов.
|
||
\item Интерфейс указывает, какие позиции требуют уточнения.
|
||
\item Действие не выполняется, пока статус не будет полным.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Неверное редактирование параметров груза}
|
||
\begin{itemize}
|
||
\item Пользователь вводит некорректный объём или адрес.
|
||
\item Поля подсвечиваются, а рядом появляется подсказка с указанием ошибки.
|
||
\item Интерфейс предлагает исправить данные.
|
||
\item Команда \texttt{sv} не активна, пока ошибка не будет устранена.
|
||
\end{itemize}
|
||
|
||
\subsubsection*{Удаление или изменение данных без подтверждения}
|
||
\begin{itemize}
|
||
\item Пользователь может случайно изменить важный параметр.
|
||
\item Команды типа 3 требуют подтверждения через диалог.
|
||
\item Диалог показывает короткую формулировку действия.
|
||
\item Без подтверждения система не применяет изменения.
|
||
\end{itemize}
|
||
|
||
\newpage
|
||
\section{Описание структуры информационной модели экранной формы и элементов управления}
|
||
|
||
\subsection{Структура информационной модели экранной формы}
|
||
|
||
Экранная форма содержит логически разделённые области, каждая из которых соответствует функциональному блоку информационной модели:
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Область заголовка}.
|
||
Содержит название приложения, название текущей страницы, а также индикатор пользователя (Анна или Виктор).
|
||
Эта область не меняется при переключении состояний и служит ориентиром в интерфейсе.
|
||
|
||
\item \textbf{Область данных}.
|
||
Основной рабочий блок, содержащий информацию, с которой взаимодействует пользователь.
|
||
В зависимости от состояния включает:
|
||
\begin{itemize}
|
||
\item список заказов;
|
||
\item карточку выбранного груза;
|
||
\item сформированную схему размещения;
|
||
\item визуальную модель кузова автомобиля;
|
||
\item журнал событий и обновлений;
|
||
\item таблицу статусов погрузки;
|
||
\item окно уведомлений о внешних изменениях.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Область управления}.
|
||
Содержит элементы интерфейса, запускающие команды:
|
||
\begin{itemize}
|
||
\item кнопки действий (например, \textit{Сохранить}, \textit{Отправить}, \textit{Начать погрузку});
|
||
\item кнопки подтверждения и отмены;
|
||
\item управляющие переключатели режима;
|
||
\item элементы навигации (кнопка \textbf{b} — назад).
|
||
\end{itemize}
|
||
|
||
\item \textbf{Область ввода параметров}.
|
||
Используется для команд типа 2:
|
||
\begin{itemize}
|
||
\item поля для ввода числовых и текстовых параметров;
|
||
\item выпадающие списки;
|
||
\item переключатели (радиокнопки);
|
||
\item форма редактирования карточки груза.
|
||
\end{itemize}
|
||
|
||
\item \textbf{Область сообщений системы}.
|
||
Здесь отображаются:
|
||
\begin{itemize}
|
||
\item сообщения об ошибках;
|
||
\item подсказки;
|
||
\item предупреждения;
|
||
\item уведомления (например: <<обновился заказ>>, <<недопустимое размещение>>, <<вес превышен>>).
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
\subsection{Элементы управления согласно ИСО 9241-161}
|
||
|
||
В интерфейсе используются стандартные элементы GUI, определённые в ГОСТ Р ИСО 9241-161:
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Поле ввода} — ввод параметров груза, адреса доставки, объёма, веса.
|
||
\item \textbf{Нажимаемая кнопка} — выполнение команды немедленного действия.
|
||
\item \textbf{Перечень} — выбор адреса, изменения статуса, типа уведомления.
|
||
\item \textbf{Переключатель} — переключение между режимами просмотра.
|
||
\item \textbf{Диалоговое окно} — запрос подтверждения для команд типа 3.
|
||
\item \textbf{Индикатор статуса} — визуальное состояние груза в процессе загрузки.
|
||
\item \textbf{Прокручиваемая область} — длинные списки заказов.
|
||
\item \textbf{Объектная схема} — графическая схема расположения грузов в кузове.
|
||
\end{itemize}
|
||
|
||
Каждый элемент управления используется в соответствии с требованиями стандарта:
|
||
\begin{itemize}
|
||
\item элементы имеют чёткие границы;
|
||
\item текстовые поля содержат метки над ними;
|
||
\item кнопки подписаны короткими глаголами действия;
|
||
\item предупреждения выделены жёлтым, ошибки — красным;
|
||
\item все действия, влияющие на данные, требуют явного подтверждения.
|
||
\end{itemize}
|
||
|
||
\newpage
|
||
|
||
\section{Описание дизайна экранной формы}
|
||
|
||
Дизайн основан на принципах ГОСТ Р ИСО 9241-161. Все элементы расположены так, чтобы пользователь мог управлять загрузкой, заказами и схемой без лишних действий.
|
||
|
||
\subsection{Структура экранной формы}
|
||
|
||
Экран разделён на три функциональные области для всех состояний S0--S5:
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Верхняя область} — логотип приложения, название текущей страницы (например: S0 — «Главная», S1 — «Проверка данных», S2 — «Схема размещения»).
|
||
\item \textbf{Центральная область} — основная зона работы:
|
||
\begin{itemize}
|
||
\item список заказов (S1, S4);
|
||
\item схема кузова (S2, S3);
|
||
\item карточки грузов (S1, S4);
|
||
\item статусы загрузки (S3).
|
||
\end{itemize}
|
||
\item \textbf{Нижняя область} — область команд: подтверждение, отмена, переход к следующему шагу, возврат в S0.
|
||
\end{itemize}
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{form.png}
|
||
\caption{Шаблон формы}
|
||
\label{form}
|
||
\end{figure}
|
||
|
||
\subsection{Цветовая палитра}
|
||
|
||
Цветовая схема отражает состояние объектов в процессе загрузки и обеспечивает интуитивное понимание статусов элементов интерфейса:
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Зелёный} (\#4CAF50, фон: \#C8E6C9, текст: \#2E7D32) — груз размещён корректно, операция выполнена успешно, статус «Активен» или «Завершена».
|
||
\item \textbf{Жёлтый} (\#FFC107, фон: \#FFF9C4, текст: \#F57C00) — зона доступна, но требуется проверка; статус «В процессе» или «Требует внимания».
|
||
\item \textbf{Красный} (\#f44336, фон: \#FFEBEE, текст: \#C62828) — недопустимое размещение, блокировка, ошибка; статус «Не начата» или «Ошибка».
|
||
\item \textbf{Синий} (\#2196F3, фон: \#BBDEFB, информационный фон: \#E3F2FD, текст: \#1565C0) — основные действия и команды, приоритетные кнопки.
|
||
\item \textbf{Серый} (\#9E9E9E, \#E0E0E0, \#757575, \#BDBDBD, \#f0f0f0, \#fafafa, \#f5f5f5) — активные области выбора и кнопки, нейтральные элементы интерфейса; статус «Запланирован». Различные оттенки серого используются для фонов, границ и неактивных элементов.
|
||
\item \textbf{Чёрно-белая основа} (\#333, \#666, \#ccc, \#ddd, \#fff) — нейтральное оформление интерфейса, фоновые элементы, границы и текст.
|
||
\end{itemize}
|
||
|
||
\textbf{Цветовое кодирование адресов доставки:} Для быстрой идентификации грузов на схеме кузова каждый адрес доставки имеет свой уникальный цвет.
|
||
|
||
\textbf{Разноцветные кнопки навигации в главном меню:} Для улучшения навигации и визуального разделения разделов приложения кнопки перехода к различным страницам в главном меню (S0) имеют разные фоновые цвета.
|
||
Такая палитра соответствует этапам загрузки и снижает количество ошибок оператора за счёт визуального различия состояний объектов и действий.
|
||
|
||
\subsection{Вывод текста}
|
||
|
||
Используется шрифт Helvetica. Он легко читается и хорошо подходит для рабочих интерфейсов. Пользователь быстро находит нужные элементы и воспринимает текстовые данные о заказах и статусах загрузки.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=0.3\textwidth]{helv.png}
|
||
\caption{Шрифт Helvetica}
|
||
\label{helv}
|
||
\end{figure}
|
||
|
||
\subsection{Графические элементы}
|
||
|
||
На экранах S1–S5 размещаются:
|
||
|
||
\begin{itemize}
|
||
\item схема кузова с зонами размещения;
|
||
\item индикатор текущего этапа загрузки;
|
||
\item карточки заказов;
|
||
\item всплывающее окно подтверждения;
|
||
\item панель команд с кнопками;
|
||
\item таблица изменений заказов;
|
||
\item визуальная схема погрузки.
|
||
\end{itemize}
|
||
|
||
\newpage
|
||
|
||
\section{Эскизы экранных форм}
|
||
|
||
\subsection{Страница авторизации и главного меню}
|
||
|
||
В данной форме отображается главная страница приложения с возможностью авторизации пользователя и навигацией по разделам системы. На странице авторизации и главного меню:
|
||
|
||
\begin{itemize}
|
||
\item В шапке расположены логотип приложения «CargoManager», название страницы «Главная» и индикатор пользователя (до авторизации отображается «Не авторизован», после авторизации — имя пользователя);
|
||
|
||
\item В центральной области до авторизации отображается форма авторизации (рис.~\ref{s0-auth}), содержащая:
|
||
\begin{itemize}
|
||
\item выпадающий список для выбора пользователя (Виктор Петров — Водитель-экспедитор, Анна Иванова — Оператор склада);
|
||
\item поле ввода пароля с возможностью авторизации по нажатию клавиши Enter;
|
||
\item кнопку «Войти в систему» для выполнения авторизации;
|
||
\end{itemize}
|
||
|
||
\item После успешной авторизации форма авторизации скрывается, и в центральной области отображаются (рис.~\ref{s0-menu}):
|
||
\begin{itemize}
|
||
\item информационные карточки с текущими рейсами и их статусами (Активен, В процессе, Запланирован) с цветовыми индикаторами;
|
||
\item информационные карточки со статусами загрузки для каждого рейса (Завершена, В процессе, Не начата) с цветовыми индикаторами;
|
||
\item главное меню с навигационными кнопками для перехода к другим страницам приложения:
|
||
\begin{itemize}
|
||
\item кнопка «Проверка данных» — переход к странице редактирования грузов;
|
||
\item кнопка «Схема размещения» — переход к странице формирования плана;
|
||
\item кнопка «Процесс загрузки» — переход к странице контроля статусов;
|
||
\item кнопка «Изменения заказов» — переход к странице обработки изменений;
|
||
\item кнопка «Завершение» — переход к странице фиксации данных;
|
||
\end{itemize}
|
||
\item каждая кнопка содержит название раздела и краткое описание его назначения;
|
||
\end{itemize}
|
||
|
||
\item В области сообщений системы отображаются информационные сообщения о состоянии приложения, результатах авторизации и операций;
|
||
|
||
\item В области команд расположены постоянно видимые кнопки:
|
||
\begin{itemize}
|
||
\item кнопка «Справка» — доступна всегда, открывает справочную информацию;
|
||
\item кнопка «Загрузить данные» — доступна после авторизации, загружает данные заказов из учётной системы;
|
||
\item кнопка «Обновить» — доступна после авторизации, обновляет данные на странице;
|
||
\item кнопка «Выйти» — доступна после авторизации, выполняет выход из системы и возврат к форме авторизации;
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s0.png}
|
||
\caption{Страница авторизации}
|
||
\label{s0-auth}
|
||
\end{figure}
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s0_menu.png}
|
||
\caption{Главное меню после авторизации}
|
||
\label{s0-menu}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
|
||
\subsection{Страница проверки и редактирования данных о грузах}
|
||
|
||
В данной форме отображается список всех грузов для загрузки с возможностью их проверки, редактирования и подтверждения. На странице проверки и редактирования данных о грузах:
|
||
|
||
\begin{itemize}
|
||
\item В шапке расположены логотип приложения «CargoManager», название страницы «Проверка данных» и имя текущего пользователя (оператор склада или водитель-экспедитор);
|
||
|
||
\item В центральной области расположены:
|
||
\begin{itemize}
|
||
\item панель управления с элементами:
|
||
\begin{itemize}
|
||
\item кнопка «Загрузить данные» — загружает список заказов из учётной системы;
|
||
\item выпадающий список фильтрации по адресам доставки (позволяет отобразить грузы только для выбранного адреса или все грузы);
|
||
\item выпадающий список сортировки грузов (по ID, по адресу, по приоритету, по весу);
|
||
\end{itemize}
|
||
|
||
\item перематываемый список грузов, отображаемый в виде карточек в сетке из двух колонок (рис.~\ref{s1-main}), где каждая карточка содержит:
|
||
\begin{itemize}
|
||
\item заголовок с номером груза (например, «Груз \#001»);
|
||
\item информацию о грузе: адрес доставки, вес (кг), объём (м³), габариты (длина×ширина×высота в метрах), приоритет доставки;
|
||
\item карточка становится кликабельной и при выборе выделяется синим цветом;
|
||
\end{itemize}
|
||
|
||
\item форма редактирования груза (рис.~\ref{s1-cupd}, рис.~\ref{s1-corupd}), которая отображается при выборе карточки груза и содержит:
|
||
\begin{itemize}
|
||
\item заголовок «Редактирование груза»;
|
||
\item поле ID груза (только для чтения);
|
||
\item поле ввода адреса доставки;
|
||
\item поле ввода веса (кг) с валидацией (должно быть положительным числом);
|
||
\item поле объёма (м³) — рассчитывается автоматически на основе габаритов, только для чтения;
|
||
\item поля ввода габаритов: длина, ширина, высота (в метрах);
|
||
\item выпадающий список приоритета доставки (от 1 до 5, где 1 — первый, 5 — последний);
|
||
\item поле для примечаний (многострочный текст);
|
||
\item при вводе некорректных данных поля подсвечиваются красным цветом с отображением сообщений об ошибках;
|
||
\end{itemize}
|
||
|
||
\item область сообщений системы, отображающая информационные сообщения, предупреждения, ошибки и подтверждения операций;
|
||
\end{itemize}
|
||
|
||
\item В области команд расположены постоянно видимые кнопки:
|
||
\begin{itemize}
|
||
\item кнопка «Назад» — возврат на главную страницу;
|
||
\item кнопка «Сохранить изменения» — доступна только при открытой форме редактирования, сохраняет внесённые изменения с подтверждением через диалог;
|
||
\item кнопка «Подтвердить список» — подтверждает весь список грузов и передаёт данные водителю-экспедитору, требует подтверждения через диалог;
|
||
\end{itemize}
|
||
|
||
\item Диалог подтверждения действий отображается при сохранении изменений или подтверждении списка, содержит:
|
||
\begin{itemize}
|
||
\item заголовок «Подтверждение действия»;
|
||
\item текст сообщения с описанием действия;
|
||
\item кнопки «Отмена» и «Подтвердить»;
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
При выборе карточки груза форма редактирования автоматически заполняется данными выбранного груза, объём рассчитывается автоматически при изменении габаритов. После сохранения изменений карточка груза обновляется с новыми данными, форма редактирования скрывается. Финальное состояние страницы показано на рис.~\ref{s1-final}.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s1.png}
|
||
\caption{Страница проверки и редактирования данных о грузах}
|
||
\label{s1-main}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s1_cupd.png}
|
||
\caption{Карточка обновления груза}
|
||
\label{s1-cupd}
|
||
\end{figure}
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s1_corupd.png}
|
||
\caption{Измененные данные груза}
|
||
\label{s1-corupd}
|
||
\end{figure}
|
||
\newpage
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s1_final.png}
|
||
\caption{Подтверждение списка грузов}
|
||
\label{s1-final}
|
||
\end{figure}
|
||
|
||
\subsection{Страница формирования схемы размещения}
|
||
|
||
В данной форме отображается интерактивная схема кузова автомобиля с возможностью автоматического и ручного размещения грузов. На странице формирования схемы размещения:
|
||
|
||
\begin{itemize}
|
||
\item В шапке расположены логотип приложения «CargoManager», название страницы «Схема размещения» и имя текущего пользователя;
|
||
|
||
\item В центральной области расположены:
|
||
\begin{itemize}
|
||
\item левая панель со списком грузов, организованным по адресам доставки (адрес №1, №2, №3, №4), где каждый груз представлен в виде карточки с информацией:
|
||
\begin{itemize}
|
||
\item номер груза (например, «Груз \#1-1»);
|
||
\item габариты (длина×ширина×высота в метрах);
|
||
\item вес (кг);
|
||
\item карточки грузов поддерживают drag-and-drop для ручного перемещения на схему;
|
||
\end{itemize}
|
||
|
||
\item правая область со схемой кузова (рис.~\ref{s2-main}), содержащая:
|
||
\begin{itemize}
|
||
\item панель управления с элементами:
|
||
\begin{itemize}
|
||
\item поля ввода параметров кузова: длина, ширина, высота (в метрах);
|
||
\item индикатор объёма кузова (рассчитывается автоматически);
|
||
\item кнопка «Сформировать схему» — создаёт сетку схемы и автоматически размещает грузы;
|
||
\item выпадающий список фильтрации по уровням (все уровни, первый, второй, третий, четвёртый, пятый) — доступен после формирования схемы (рис.~\ref{s2-l2});
|
||
\end{itemize}
|
||
|
||
\item визуальная схема кузова в виде сетки ячеек, где:
|
||
\begin{itemize}
|
||
\item каждая ячейка может быть свободной или занятой грузом;
|
||
\item грузы отображаются в виде цветных блоков согласно адресу доставки;
|
||
\item при перетаскивании груза на ячейку происходит проверка возможности размещения;
|
||
\item ячейки подсвечиваются при наведении и при перетаскивании груза;
|
||
\end{itemize}
|
||
|
||
\item индикаторы загрузки:
|
||
\begin{itemize}
|
||
\item общий вес размещённых грузов (кг);
|
||
\item общий объём размещённых грузов (м³);
|
||
\item процент использования пространства кузова (вручную или автоматически);
|
||
\end{itemize}
|
||
|
||
\item область сообщений системы с информацией о состоянии схемы, ошибках размещения и результатах операций;
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
\item В области команд расположены постоянно видимые кнопки:
|
||
\begin{itemize}
|
||
\item кнопка «Назад» — возврат на главную страницу;
|
||
\item кнопка «Проверить вес и баланс» — проверяет соответствие веса и баланса размещения ограничениям автомобиля, выводит предупреждения;
|
||
\item кнопка «Сохранить изменения» — доступна после формирования схемы, сохраняет текущее размещение грузов;
|
||
\item кнопка «Подтвердить схему» — доступна после формирования схемы, подтверждает схему загрузки с диалогом подтверждения и передаёт данные для процесса загрузки;
|
||
\end{itemize}
|
||
|
||
\item Диалог подтверждения действий отображается при подтверждении схемы, содержит кнопки «Отмена» и «Подтвердить». Диалог удаления груза показан на рис.~\ref{s2-del}.
|
||
\end{itemize}
|
||
|
||
При нажатии кнопки «Сформировать схему» система автоматически размещает все грузы из списка на схеме с учётом их адресов, приоритетов и габаритов. Пользователь может вручную корректировать размещение, перетаскивая грузы на схеме. После подтверждения схема становится доступной для процесса загрузки. Финальное состояние страницы показано на рис.~\ref{s2-final}.
|
||
|
||
\newpage
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s2.png}
|
||
\caption{Страница формирования схемы размещения}
|
||
\label{s2-main}
|
||
\end{figure}
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s2_del.png}
|
||
\caption{Диалог удаления груза}
|
||
\label{s2-del}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s2_l2.png}
|
||
\caption{Просмотр второго уровня схемы}
|
||
\label{s2-l2}
|
||
\end{figure}
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s2_final.png}
|
||
\caption{Подтверждение схемы загрузки}
|
||
\label{s2-final}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
|
||
\subsection{Страница процесса загрузки и контроля статусов}
|
||
|
||
В данной форме отображается визуальная схема кузова с размещёнными грузами и система контроля статусов загрузки в реальном времени. На странице процесса загрузки и контроля статусов:
|
||
|
||
\begin{itemize}
|
||
\item В шапке расположены логотип приложения «CargoManager», название страницы «Процесс загрузки» и имя текущего пользователя (водитель-экспедитор);
|
||
|
||
\item В центральной области расположены:
|
||
\begin{itemize}
|
||
\item левая панель со статусами загрузки (рис.~\ref{s3-main}), содержащая:
|
||
\begin{itemize}
|
||
\item таблицу статусов загрузки с колонками: «Груз», «Адрес», «Статус», где отображаются все грузы с их текущими статусами;
|
||
\item цветовые индикаторы статусов: «Не начата» (красный), «Запланирован» (серый), «В процессе» (жёлтый), «Завершена» (зелёный);
|
||
\item индикатор прогресса загрузки (рис.~\ref{s3-bar}) с процентным отображением и визуальной полосой прогресса;
|
||
\end{itemize}
|
||
|
||
\item правая область со схемой кузова, содержащая:
|
||
\begin{itemize}
|
||
\item выпадающий список фильтрации по уровням (все уровни, первый уровень, второй уровень) для просмотра грузов на разных уровнях;
|
||
|
||
\item визуальная схема кузова с размещёнными грузами:
|
||
\begin{itemize}
|
||
\item сетка ячеек с отображением размещённых грузов;
|
||
\item грузы отображаются цветными блоками согласно адресу доставки;
|
||
\item поддержка drag-and-drop для корректировки размещения грузов во время загрузки;
|
||
\item при фильтрации по уровням пустые ячейки скрываются, сохраняя структуру сетки;
|
||
\end{itemize}
|
||
|
||
\item область сообщений системы с информацией о процессе загрузки, статусах операций и инструкциях для пользователя;
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
\item В области команд расположены постоянно видимые кнопки:
|
||
\begin{itemize}
|
||
\item кнопка «Назад» — возврат на главную страницу;
|
||
\item кнопка «Отметить статус» — открывает диалог для отметки статуса группы грузов, позволяет выбрать статус и грузы для обновления;
|
||
\item кнопка «Завершить погрузку» — доступна после отметки всех грузов, завершает процесс загрузки с подтверждением через диалог;
|
||
\end{itemize}
|
||
|
||
\item Диалог отметки статуса (рис.~\ref{s3-status}) отображается при нажатии кнопки «Отметить статус», содержит:
|
||
\begin{itemize}
|
||
\item заголовок «Отметить статус грузов»;
|
||
\item выпадающий список выбора статуса (Не начата, Запланирован, В процессе, Завершена);
|
||
\item список грузов с чекбоксами для выбора грузов, которым нужно присвоить статус;
|
||
\item кнопки «Отмена» и «Применить»;
|
||
\end{itemize}
|
||
|
||
\item Диалог подтверждения действий отображается при завершении погрузки, содержит кнопки «Отмена» и «Подтвердить».
|
||
\end{itemize}
|
||
|
||
Статусы грузов обновляются в реальном времени и отображаются как в таблице, так и на схеме. Прогресс загрузки рассчитывается автоматически на основе количества грузов со статусом «Завершена». После завершения погрузки пользователь переходит на страницу фиксации данных. Финальное состояние страницы показано на рис.~\ref{s3-final}.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s3.png}
|
||
\caption{Страница процесса загрузки и контроля статусов}
|
||
\label{s3-main}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s3_bar.png}
|
||
\caption{Индикатор прогресса загрузки}
|
||
\label{s3-bar}
|
||
\end{figure}
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s3_status.png}
|
||
\caption{Диалог отметки статуса грузов}
|
||
\label{s3-status}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s3_final.png}
|
||
\caption{Подтверждение обновления статуса погрузки}
|
||
\label{s3-final}
|
||
\end{figure}
|
||
|
||
\subsection{Страница обработки изменений заказов}
|
||
|
||
В данной форме отображается информация об изменениях в заказах с возможностью их обработки и корректировки схемы загрузки. На странице обработки изменений заказов:
|
||
|
||
\begin{itemize}
|
||
\item В шапке расположены логотип приложения «CargoManager», название страницы «Обработка изменений заказов» и имя текущего пользователя (водитель-экспедитор);
|
||
|
||
\item В центральной области расположены:
|
||
\begin{itemize}
|
||
\item левая панель с информацией об изменениях (рис.~\ref{s4-main}), содержащая:
|
||
\begin{itemize}
|
||
\item таблицу изменений заказов с колонками: «ID заказа», «Тип изменения», «Причина», «Время», где отображаются все изменения с указанием типа (изменён, отменён, добавлен);
|
||
\item строки таблицы выделяются в зависимости от типа изменения для визуального различия;
|
||
|
||
\item таймер корректировки с обратным отсчётом времени (30 минут), отображающий оставшееся время для внесения корректировок;
|
||
\item при приближении к окончанию времени таймер меняет цвет для привлечения внимания;
|
||
\item после истечения времени загрузка продолжается по старому плану, кнопки корректировки становятся недоступными;
|
||
|
||
\item журнал правок с историей всех изменений, где каждая запись содержит:
|
||
\begin{itemize}
|
||
\item время изменения;
|
||
\item описание действия;
|
||
\item имя пользователя, выполнившего изменение;
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
\item правая область со схемой кузова, содержащая:
|
||
\begin{itemize}
|
||
\item выпадающий список фильтрации по уровням (все уровни, первый уровень, второй уровень) для просмотра грузов на разных уровнях;
|
||
|
||
\item визуальная схема кузова с размещёнными грузами:
|
||
\begin{itemize}
|
||
\item сетка ячеек с отображением размещённых грузов;
|
||
\item изменённые грузы выделяются пунктирной рамкой;
|
||
\item отменённые грузы отображаются полупрозрачными с пунктирной рамкой;
|
||
\item при фильтрации по уровням пустые ячейки скрываются, сохраняя структуру сетки;
|
||
\end{itemize}
|
||
|
||
\item область сообщений системы с информацией об обнаруженных изменениях, инструкциями по обработке и результатах операций;
|
||
|
||
\item индикатор синхронизации, показывающий статус синхронизации данных с оператором склада (ожидание, синхронизировано с указанием времени);
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
\item В области команд расположены постоянно видимые кнопки:
|
||
\begin{itemize}
|
||
\item кнопка «Назад» — возврат на страницу процесса загрузки;
|
||
\item кнопка «Обновить заказ» — открывает диалог для обновления информации о заказе;
|
||
\item кнопка «Принять изменения» — принимает все изменения и обновляет схему загрузки, удаляя отменённые грузы;
|
||
\item кнопка «Синхронизировать» — отправляет обновлённые данные оператору склада для синхронизации;
|
||
\end{itemize}
|
||
|
||
\item Диалог обновления заказа (рис.~\ref{s4-upd}) отображается при нажатии кнопки «Обновить заказ», содержит:
|
||
\begin{itemize}
|
||
\item заголовок «Обновить заказ»;
|
||
\item поле ввода ID заказа;
|
||
\item выпадающий список выбора причины изменения (отмена заказа клиентом, изменение параметров груза, изменение адреса доставки, изменение маршрута, другая причина);
|
||
\item поле для комментария (многострочный текст);
|
||
\item кнопки «Применить» и «Отмена»;
|
||
\end{itemize}
|
||
|
||
\item Диалог подтверждения действий отображается при принятии изменений или синхронизации, содержит кнопки «Отмена» и «Подтвердить».
|
||
\end{itemize}
|
||
|
||
При обнаружении изменений в заказах система автоматически уведомляет пользователя через область сообщений. Пользователь может просмотреть все изменения в таблице, обновить информацию о заказах через диалог и принять изменения для обновления схемы. После принятия изменений схема автоматически перестраивается с учётом новых данных. Финальное состояние страницы показано на рис.~\ref{s4-fin}.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s4.png}
|
||
\caption{Страница обработки изменений заказов}
|
||
\label{s4-main}
|
||
\end{figure}
|
||
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s4_upd.png}
|
||
\caption{Диалог обновления заказа}
|
||
\label{s4-upd}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s4_fin.png}
|
||
\caption{Подтверждение внесения изменений в заказы}
|
||
\label{s4-fin}
|
||
\end{figure}
|
||
|
||
\subsection{Страница завершения погрузки и фиксации данных}
|
||
|
||
В данной форме отображается итоговая информация о загрузке с возможностью финальной проверки и формирования отчёта. На странице завершения погрузки и фиксации данных:
|
||
|
||
\begin{itemize}
|
||
\item В шапке расположены логотип приложения «CargoManager», название страницы «Завершение погрузки» и имя текущего пользователя (водитель-экспедитор);
|
||
|
||
\item В центральной области расположены:
|
||
\begin{itemize}
|
||
\item левая панель с итоговой информацией (рис.~\ref{s5-main}), содержащая:
|
||
\begin{itemize}
|
||
\item карточку сводки по загрузке с показателями:
|
||
\begin{itemize}
|
||
\item всего грузов;
|
||
\item количество загруженных грузов;
|
||
\item общий вес размещённых грузов (кг);
|
||
\item процент заполненности кузова;
|
||
\end{itemize}
|
||
|
||
\item итоговую таблицу грузов с колонками: «Груз», «Адрес», «Вес», где отображаются все размещённые грузы;
|
||
|
||
\item индикатор статуса проверки размещения, показывающий:
|
||
\begin{itemize}
|
||
\item «Ожидается проверка размещения» — до выполнения проверки;
|
||
\item «Размещение проверено» — после нажатия кнопки «Проверено»;
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
\item правая область со схемой кузова, содержащая:
|
||
\begin{itemize}
|
||
\item выпадающий список фильтрации по уровням (все уровни, первый уровень, второй уровень) для просмотра грузов на разных уровнях;
|
||
|
||
\item визуальная схема кузова с итоговым размещением всех грузов:
|
||
\begin{itemize}
|
||
\item сетка 10×6 ячеек с отображением всех размещённых грузов;
|
||
\item грузы отображаются блоками согласно их размещению на схеме;
|
||
\item при фильтрации по уровням пустые ячейки скрываются, сохраняя структуру сетки;
|
||
\end{itemize}
|
||
|
||
\item область сообщений системы с инструкциями по проверке схемы и завершению погрузки;
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
\item В области команд расположены постоянно видимые кнопки:
|
||
\begin{itemize}
|
||
\item кнопка «Назад» — возврат на страницу процесса загрузки;
|
||
\item кнопка «Проверено» — отмечает выполнение финальной проверки размещения, после нажатия активируется кнопка «Завершить погрузку»;
|
||
\item кнопка «Завершить погрузку» — доступна только после проверки размещения, завершает процесс загрузки с подтверждением через диалог и формирует итоговый отчёт;
|
||
\end{itemize}
|
||
|
||
\item Диалог подтверждения действий отображается при завершении погрузки, содержит:
|
||
\begin{itemize}
|
||
\item заголовок «Завершить погрузку»;
|
||
\item сообщение с подтверждением действия и информацией о формировании отчёта;
|
||
\item кнопки «Отмена» и «Подтвердить»;
|
||
\end{itemize}
|
||
|
||
\item Диалог итогового отчёта (рис.~\ref{s5-final}) отображается после подтверждения завершения погрузки, содержит:
|
||
\begin{itemize}
|
||
\item заголовок «Итоговый отчёт о загрузке»;
|
||
\item детальный отчёт с информацией:
|
||
\begin{itemize}
|
||
\item дата и время завершения погрузки;
|
||
\item имя водителя-экспедитора;
|
||
\item сводка по загрузке (таблица с параметрами);
|
||
\item список всех грузов с адресами и весами;
|
||
\item описание схемы размещения;
|
||
\item подтверждение готовности автомобиля к выезду;
|
||
\end{itemize}
|
||
\item кнопки:
|
||
\begin{itemize}
|
||
\item «Скачать PDF» — генерирует и скачивает PDF-файл с планом загрузки;
|
||
\item «Сохранить в архив» — сохраняет данные в архив системы;
|
||
\item «Закрыть» — закрывает диалог отчёта;
|
||
\end{itemize}
|
||
\end{itemize}
|
||
\end{itemize}
|
||
|
||
Перед завершением погрузки пользователь должен проверить итоговую схему размещения и нажать кнопку «Проверено». После этого становится доступной кнопка завершения, которая формирует итоговый отчёт со всей информацией о загрузке. Отчёт может быть сохранён в формате PDF и в архиве системы для последующего использования и анализа.
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s5.png}
|
||
\caption{Страница завершения погрузки и фиксации данных}
|
||
\label{s5-main}
|
||
\end{figure}
|
||
|
||
\begin{figure}[h!]
|
||
\centering
|
||
\includegraphics[width=1\textwidth]{s5_final.png}
|
||
\caption{Подтверждение завершения погрузки}
|
||
\label{s5-final}
|
||
\end{figure}
|
||
|
||
\newpage
|
||
|
||
\section{Сравнение с требованиями нормативных документов}
|
||
|
||
Разработанный интерфейс приложения соответствует требованиям нормативных документов в области проектирования человеко-машинного интерфейса.
|
||
|
||
\subsection{Соответствие ГОСТ Р ИСО 9241-161 и принципам эргономики}
|
||
|
||
Разработанный интерфейс соответствует требованиям стандарта ГОСТ Р ИСО 9241-161 и принципам эргономики человеко-машинного взаимодействия:
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Элементы управления:} Все используемые элементы (поля ввода, кнопки, выпадающие списки, диалоговые окна) соответствуют стандартным типам, имеют чёткие границы, метки и подписи.
|
||
|
||
\item \textbf{Структура и навигация:} Экран разделён на функциональные области (шапка, рабочая область, область команд). Единая структура сохраняется на всех страницах, обеспечивая логичную навигацию между этапами загрузки.
|
||
|
||
\item \textbf{Обратная связь и защита от ошибок:} Система обеспечивает немедленную обратную связь (подсветка элементов, сообщения об ошибках, диалоги подтверждения). Реализована валидация ввода данных, проверка возможности размещения грузов и визуальная индикация ошибок.
|
||
|
||
\item \textbf{Эффективность использования:} Интерфейс оптимизирован для быстрого выполнения задач через автоматическое размещение грузов, фильтрацию по уровням и drag-and-drop для ручной корректировки.
|
||
\end{itemize}
|
||
|
||
\subsection{Соответствие требованиям к визуальному оформлению}
|
||
|
||
Цветовая палитра и визуальное оформление интерфейса разработаны с учётом требований стандартов:
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Цветовое кодирование:} Цвета используются семантически для передачи информации (статусы, типы объектов, адреса доставки). Каждый адрес имеет уникальный цвет для быстрой визуальной идентификации грузов на схеме.
|
||
|
||
\item \textbf{Индикация состояний:} Цвета применяются для индикации состояний (зелёный — успех, жёлтый — предупреждение, красный — ошибка) с достаточным контрастом для читаемости текста.
|
||
|
||
\item \textbf{Иерархия информации:} Важная информация выделена визуально (цветом, размером, расположением). Статусы загрузки, критические предупреждения и ключевые показатели имеют приоритетное визуальное представление.
|
||
\end{itemize}
|
||
|
||
\section{Выводы}
|
||
|
||
В ходе выполнения лабораторной работы был разработан интерфейс пользователя для интерактивного приложения «Оптимальная загрузка а/м для развозки товаров заказчикам». Разработанный интерфейс представляет собой комплексное решение, обеспечивающее эффективное взаимодействие пользователей (водителя-экспедитора и оператора склада) с системой управления загрузкой автомобиля.
|
||
|
||
\subsection{Основные достижения}
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Полнота функциональности:} Разработанный интерфейс покрывает все этапы процесса загрузки автомобиля — от проверки данных о грузах до фиксации результатов загрузки. Все шесть состояний системы (S0--S5) реализованы с учётом специфики задач каждого этапа.
|
||
|
||
\item \textbf{Соответствие стандартам:} Интерфейс полностью соответствует требованиям ГОСТ Р ИСО 9241-161 и принципам эргономики человеко-машинного взаимодействия. Все элементы управления, структура экранной формы и визуальное представление информации соответствуют нормативным требованиям.
|
||
|
||
\item \textbf{Удобство использования:} Структура интерфейса обеспечивает интуитивное понимание функциональности, логичную навигацию между состояниями и эффективное выполнение задач. Автоматизация размещения грузов, drag-and-drop для ручной корректировки и визуальная обратная связь повышают удобство работы с системой.
|
||
|
||
\item \textbf{Защита от ошибок:} Реализованы множественные уровни защиты от ошибок пользователя: валидация ввода данных, проверка возможности размещения грузов, диалоги подтверждения критических операций, визуальная индикация ошибок и предупреждений.
|
||
|
||
\item \textbf{Визуальное представление:} Цветовое кодирование адресов доставки, статусов загрузки и состояний объектов обеспечивает быструю визуальную идентификацию информации. Интерактивная схема кузова с возможностью просмотра разных уровней позволяет эффективно контролировать процесс размещения грузов.
|
||
\end{itemize}
|
||
|
||
\subsection{Особенности реализации}
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Многоуровневая структура:} Интерфейс поддерживает размещение грузов на нескольких уровнях кузова с возможностью фильтрации по уровням, что обеспечивает гибкость в планировании загрузки.
|
||
|
||
\item \textbf{Интерактивность:} Реализована поддержка drag-and-drop для ручного перемещения грузов на схеме, что позволяет пользователю корректировать автоматически сформированную схему размещения.
|
||
|
||
\item \textbf{Обработка изменений:} Интерфейс включает специальный этап (S4) для обработки изменений в заказах с таймером корректировки и журналом правок, что обеспечивает гибкость в работе с динамически изменяющимися заказами.
|
||
|
||
\item \textbf{Контроль процесса:} На этапе процесса загрузки (S3) реализован детальный контроль статусов каждого груза с визуальным индикатором прогресса загрузки, что позволяет отслеживать выполнение процесса в реальном времени.
|
||
|
||
\item \textbf{Фиксация результатов:} Финальный этап (S5) обеспечивает проверку размещения, формирование итогового отчёта с возможностью сохранения в PDF и архиве системы, что гарантирует документирование результатов загрузки.
|
||
\end{itemize}
|
||
|
||
\subsection{Соответствие требованиям пользователей}
|
||
|
||
Разработанный интерфейс учитывает потребности и ожидания всех заинтересованных лиц:
|
||
|
||
\begin{itemize}
|
||
\item \textbf{Для водителя-экспедитора:} Интерфейс обеспечивает эффективное формирование схемы размещения грузов, контроль процесса загрузки и фиксацию результатов. Автоматизация размещения и визуальная обратная связь снижают время на выполнение задач и вероятность ошибок.
|
||
|
||
\item \textbf{Для оператора склада:} Интерфейс предоставляет инструменты для проверки и редактирования данных о грузах, контроля процесса загрузки и обработки изменений в заказах. Структурированное представление информации и валидация ввода обеспечивают точность данных.
|
||
|
||
\item \textbf{Для организации:} Система обеспечивает документирование процесса загрузки, контроль веса и баланса размещения, что способствует оптимизации использования транспортных ресурсов и снижению накладных расходов.
|
||
\end{itemize}
|
||
|
||
\subsection{Перспективы развития}
|
||
|
||
Разработанный интерфейс может быть расширен следующими функциональными возможностями:
|
||
|
||
\begin{itemize}
|
||
\item интеграция с системами учёта для автоматической загрузки данных о заказах;
|
||
\item поддержка работы с несколькими автомобилями одновременно;
|
||
\item расширенная аналитика по эффективности загрузки;
|
||
\item мобильная версия интерфейса для работы водителя-экспедитора в полевых условиях;
|
||
\item интеграция с системами навигации для оптимизации маршрутов доставки.
|
||
\end{itemize}
|
||
|
||
\section{Заключение}
|
||
|
||
В ходе выполнения лабораторной работы была решена задача проектирования и разработки интерфейса пользователя для интерактивного приложения управления процессом загрузки автомобиля. Разработанный интерфейс представляет собой комплексное решение, охватывающее все этапы процесса загрузки — от проверки данных о грузах до фиксации результатов и формирования отчётной документации. Выполненная работа демонстрирует применение принципов проектирования человеко-машинного интерфейса на практике и подтверждает важность систематического подхода, основанного на анализе требований, изучении пользователей, применении стандартов и принципов эргономики.
|
||
|
||
Разработанный интерфейс решает практическую задачу оптимизации процесса загрузки автомобиля, что имеет важное значение для логистических операций. Автоматизация размещения грузов, визуализация схемы загрузки, контроль веса и баланса размещения — все эти функции направлены на повышение эффективности использования транспортных ресурсов и снижение затрат на логистику. Интерфейс обеспечивает эффективную работу как водителя-экспедитора, так и оператора склада, учитывая их различные роли и задачи в процессе загрузки.
|
||
|
||
Разработанный интерфейс может служить основой для создания полноценной системы управления загрузкой автомобилей в реальных условиях эксплуатации. Реализованные принципы проектирования, структура интерфейса и подходы к организации взаимодействия пользователя с системой могут быть применены при разработке аналогичных систем в других предметных областях. Выполненная работа подтверждает актуальность и значимость области проектирования человеко-машинного интерфейса для создания современных программных систем.
|
||
|
||
\newpage
|
||
\begin{thebibliography}{99}
|
||
\addcontentsline{toc}{section}{Список литературы}
|
||
\bibitem{book1} Алан Купер Об интерфейсе. Основы проектирования взаимодействия ИМВ, 2-е изд. : Пер. с англ. — 2009. — 688 с.
|
||
|
||
\bibitem{gost1} ГОСТ Р ИСО 9241-110-2016 Эргономика взаимодействия человек-система. Часть 110. Принципы организации диалога. Электронный ресурс: https://docs.cntd.ru/document/1200141125
|
||
|
||
\bibitem{gost2} ГОСТ Р ИСО 241-161-2016 Эргономика взаимодействия человек-система. Часть 161. Элементы графического пользовательского интерфейса. Электронный ресурс: https://meganorm.ru/Data2/1/4293750/4293750544.pdf.
|
||
\end{thebibliography}
|
||
|
||
\end{document}
|
||
|
||
\end{document} |