Compare commits
10 Commits
ad58a5717a
...
35ca78baa8
| Author | SHA1 | Date | |
|---|---|---|---|
| 35ca78baa8 | |||
| c5b7358970 | |||
| d440647a67 | |||
| 03c1103638 | |||
| bbde079399 | |||
| 3dfef61e5e | |||
| 37f6d26854 | |||
| b2f30dfc00 | |||
| 77c7e2834a | |||
| 064052b8c4 |
@@ -1,69 +1,46 @@
|
||||
digraph MushroomHikeApp {
|
||||
rankdir=LR;
|
||||
fontsize=10;
|
||||
node [shape=rectangle, style=rounded, fontsize=10];
|
||||
rankdir=TB;
|
||||
fontsize=12;
|
||||
node [shape=rectangle, style=rounded, fontsize=11, margin="0.2,0.1"];
|
||||
edge [fontsize=9];
|
||||
|
||||
// --- Основные состояния участников похода (a–m) ---
|
||||
a [label="a) Начальное состояние\n(главный экран)"];
|
||||
b [label="b) Планирование похода\n(маршрут, точки, погода, офлайн-карты)"];
|
||||
c [label="c) Управление участниками\n(приглашения, роли, доверенные контакты)"];
|
||||
d [label="d) Чек-лист снаряжения\n(шаблон, распределение, контроль сборов)"];
|
||||
e [label="e) Активная навигация\n(карта, GPS, режимы отображения)"];
|
||||
f [label="f) Фиксация находки\n(фото, координаты, заметки)"];
|
||||
g [label="g) Семейная корзина\n(все находки группы)"];
|
||||
h [label="h) Семейный чат\n(сообщения, фото, геолокация)"];
|
||||
i [label="i) Справочник грибов\n(виды, съедобность, двойники)"];
|
||||
k [label="k) Панель организатора\n(мониторинг, управление маршрутом)"];
|
||||
l [label="l) Архив походов\n(список завершённых походов)"];
|
||||
m [label="m) Детальный просмотр похода\n(трек, события, статистика)"];
|
||||
// --- Основные состояния (соответствуют пунктам меню и задачам) ---
|
||||
main [label="Главная\n(выбор похода, архив)"];
|
||||
route [label="Маршрут\n(планирование, навигация)"];
|
||||
basket [label="Корзина\n(находки группы)"];
|
||||
chat [label="Чат\n(координация)"];
|
||||
guide [label="Справочник\n(виды грибов)"];
|
||||
|
||||
// --- SOS (красный, доступен отовсюду) ---
|
||||
sos [label="SOS\n(экстренный вызов)", color="red", fontcolor="red", style="rounded,bold", penwidth=2];
|
||||
|
||||
// --- SOS (красный, отдельный) ---
|
||||
j [label="j) Экстренный режим (SOS)", color="red", fontcolor="red", style="rounded,bold", penwidth=2];
|
||||
// --- Невидимая точка для SOS ---
|
||||
anyToSOS [shape=point, width=0, height=0, style=invis];
|
||||
anyToSOS -> sos [label="из любого\nсостояния", style=dashed, color="red", fontcolor="red"];
|
||||
|
||||
// --- Технические невидимые точки для "стрелок из ниоткуда" ---
|
||||
fromAnywhereToA [shape=point, width=0, height=0, style=invis];
|
||||
fromAnywhereToSOS [shape=point, width=0, height=0, style=invis];
|
||||
// --- Переходы между основными состояниями ---
|
||||
main -> route [label="создать/\nначать поход"];
|
||||
route -> main [label="завершить\nпоход"];
|
||||
|
||||
// Стрелки "из ниоткуда"
|
||||
fromAnywhereToA -> a [label="25. Переход\nна главный экран", style=dashed];
|
||||
fromAnywhereToSOS -> j [label="24. SOS\n(из любого состояния)", style=dashed, color="red", fontcolor="red"];
|
||||
// Нижняя навигация (доступна из активного похода)
|
||||
route -> basket [label=""];
|
||||
basket -> route [label=""];
|
||||
|
||||
route -> chat [label=""];
|
||||
chat -> route [label=""];
|
||||
|
||||
route -> guide [label=""];
|
||||
guide -> route [label=""];
|
||||
|
||||
// --- Переходы (кроме SOS и возврата на главный) ---
|
||||
basket -> chat [label=""];
|
||||
chat -> basket [label=""];
|
||||
|
||||
a -> b [label="1. Создать поход"];
|
||||
basket -> guide [label=""];
|
||||
guide -> basket [label=""];
|
||||
|
||||
a -> e [label="2. Присоединиться (день похода)"];
|
||||
a -> d [label="3. Присоединиться (подготовка)"];
|
||||
|
||||
b -> c [label="4. Управление\nучастниками"];
|
||||
|
||||
c -> d [label="5. Чек-лист"];
|
||||
b -> d [label="6. Чек-лист"];
|
||||
|
||||
d -> e [label="7. Начать поход"];
|
||||
b -> e [label="8. Начать поход"];
|
||||
|
||||
e -> f [label="9. Фиксировать\nнаходку"];
|
||||
f -> e [label="10. Сохранить\nи вернуться"];
|
||||
|
||||
e -> g [label="11. Открыть корзину"];
|
||||
g -> e [label="12. Назад к\nнавигации"];
|
||||
|
||||
e -> h [label="13. Открыть чат"];
|
||||
h -> e [label="14. Назад к\nнавигации"];
|
||||
|
||||
f -> i [label="15. Открыть\nсправочник"];
|
||||
g -> i [label="16. Открыть\nсправочник"];
|
||||
i -> f [label="17. Назад\nк фиксации"];
|
||||
i -> g [label="18. Назад\nк корзине"];
|
||||
|
||||
e -> k [label="19. Панель\nорганизатора"];
|
||||
k -> e [label="20. Назад к\nнавигации"];
|
||||
|
||||
e -> l [label="21. Завершить\nпоход"];
|
||||
|
||||
a -> l [label="22. Открыть\nархив"];
|
||||
l -> m [label="23. Открыть\nпоход"];
|
||||
chat -> guide [label=""];
|
||||
guide -> chat [label=""];
|
||||
|
||||
// Фиксация находки (внутри маршрута)
|
||||
route -> basket [label="добавить\nнаходку", style=dashed];
|
||||
}
|
||||
|
||||
BIN
lab1/report/img/elements/button-primary.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
lab1/report/img/elements/card.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
lab1/report/img/elements/list-item.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
lab1/report/img/elements/navigation-bar.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
lab1/report/img/elements/search-bar.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
lab1/report/img/elements/sos-button.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
lab1/report/img/graph.png
Normal file
|
After Width: | Height: | Size: 33 KiB |
@@ -153,8 +153,8 @@
|
||||
Рассматриваются особенности взаимодействия людей разных возрастов, ограничения лесной среды и способы сделать навигацию, связь и обмен находками удобными. Основные задачи исследования: структурировать потребности пользователей, обозначить типовые сценарии и оценить, какие интерфейсные решения снизят риски и упростят работу с приложением. Ключевые проблемы --- нестабильная связь, различия в цифровой грамотности и необходимость оперативно действовать в случае ЧП.
|
||||
|
||||
\newpage
|
||||
\section*{Описание предметной области}
|
||||
\addcontentsline{toc}{section}{Описание предметной области}
|
||||
\section{Описание предметной области}
|
||||
% \addcontentsline{toc}{section}{Описание предметной области}
|
||||
|
||||
Походы за грибами представляют собой сочетание прогулки на природе, наблюдения за лесной средой и сбора съедобных грибов. Этот вид отдыха подходит для семей благодаря умеренной физической нагрузке, исследовательскому интересу и возможности приобщения детей к совместному отдыху на природе. Успешная организация такого похода требует знаний о сезонности, типах лесов, правилах безопасного сбора, а также правильной подготовке участников.
|
||||
|
||||
@@ -257,47 +257,33 @@
|
||||
|
||||
\newpage
|
||||
\section{Цели приложения}
|
||||
Цель приложения --- сделать семейные походы за грибами безопасными, продуктивными и комфортными для всех участников независимо от их возраста и цифровой грамотности. Приложение призвано превратить поход из разрозненной активности в слаженное семейное мероприятие с чётким планированием, надёжной координацией и возможностью сохранить положительные воспоминания в виде архива маршрутов и находок.
|
||||
Цель приложения --- сделать семейные походы за грибами безопасными, продуктивными и комфортными для всех участников независимо от их возраста и цифровой грамотности. Приложение ориентировано на походы как форму семейного отдыха и совместного времяпрепровождения на природе; сбор грибов рассматривается как приятное дополнение, а не как основная задача заготовки. Приложение призвано превратить поход из разрозненной активности в слаженное семейное мероприятие с чётким планированием, надёжной координацией и возможностью сохранить положительные воспоминания в виде архива маршрутов и находок. Приложение должно помогать пользователям как на этапе планирования, так и на этапе проведения похода.
|
||||
|
||||
Для достижения этой цели приложение решает следующие задачи:
|
||||
\begin{itemize}
|
||||
\item Объединение семьи при планировании и проведении походов за грибами через совместное редактирование маршрутов, списков снаряжения и координацию действий в реальном времени.
|
||||
\item Повышение безопасности участников похода за счёт отслеживания местоположения, контрольных точек, оперативного оповещения об отклонениях от маршрута и быстрой отправки сигналов о помощи.
|
||||
\item Ведение удобного учёта собранных грибов с фотофиксацией, геометками и формированием семейного архива находок.
|
||||
\item Обеспечение доступности для людей с разной цифровой подготовкой через адаптивный интерфейс, голосовые подсказки и упрощённые режимы взаимодействия.
|
||||
\item Гарантия работоспособности в условиях нестабильной связи благодаря офлайн-картам и локальному кешированию данных.
|
||||
\end{itemize}
|
||||
Этап планирования похода включает в себя выбор даты и времени начала похода, определение места сбора и списка участников, построение маршрута с контрольными точками, отправку приглашений и согласование с участниками времени и плана похода. Организатор должен определить транспорт и способ, как добраться до точки сбора, проверить погодные условия на выбранную дату. Необходимо составить список снаряжения и запасной одежды, распределить ответственность за их подготовку между участниками и проверить готовность перед началом похода. Если в походе участвуют дети, требуется определить ответственного взрослого за каждого ребёнка.
|
||||
|
||||
В ходе этапа проведения похода участники добираются до точки начала похода, осуществляют навигацию в лесу с помощью карт и компаса, используя построенный маршрут и контрольные точки, занимаются сбором грибов, стараются поддерживать связь друг с другом и отслеживать местоположение членов группы для обеспечения безопасности.
|
||||
|
||||
\section{Заинтересованные лица}
|
||||
\begin{itemize}
|
||||
\item \textbf{Родители-участники похода} --- взрослые члены семьи, непосредственно участвующие в сборе грибов и отвечающие за безопасность детей.
|
||||
\item \textbf{Родители-участники похода} --- взрослые члены семьи возрастом от 30 до 50 лет, непосредственно участвующие в сборе грибов и отвечающие за безопасность детей.
|
||||
|
||||
\item \textbf{Дети и подростки} --- младшие участники похода, нуждающиеся в простом интерфейсе и элементах геймификации.
|
||||
|
||||
\item \textbf{Пожилые родственники-грибники} --- опытные грибники старшего поколения, носители традиций и знаний о грибных местах.
|
||||
|
||||
\item \textbf{Родственники, остающиеся дома} --- члены семьи, не участвующие в походе, но заинтересованные в безопасности грибников.
|
||||
\item \textbf{Дети и подростки} --- младшие участники похода возрастом от 10 до 18 лет.
|
||||
|
||||
\item \textbf{Пожилые родственники-грибники} --- опытные грибники старшего поколения возрастом от 60 лет.
|
||||
|
||||
\item \textbf{Организатор похода} --- ответственное лицо (обычно один из родителей), координирующее планирование и проведение похода.
|
||||
|
||||
\item \textbf{Службы спасения} --- специалисты, привлекаемые в экстренных ситуациях для поиска и оказания помощи.
|
||||
|
||||
\end{itemize}
|
||||
|
||||
\section{Ожидания заинтересованных лиц}
|
||||
\begin{itemize}
|
||||
\item \textbf{Родители-участники} хотят обеспечить безопасность детей, не потеряться самим, иметь возможность быстро связаться в случае разделения группы. Ожидают простой интерфейс с крупными элементами, офлайн-карту и быстрый доступ к тревожной кнопке. Важна возможность видеть местоположение всех членов семьи и собрать достаточно грибов для заготовок.
|
||||
\item \textbf{Родители-участники} хотят обеспечить безопасность детей, не потеряться самим, иметь возможность быстро связаться в случае разделения группы. Ожидают простой интерфейс с крупными элементами, офлайн-карту и быстрый доступ к тревожной кнопке. Важна возможность видеть местоположение всех членов семьи.
|
||||
|
||||
\item \textbf{Дети и подростки} хотят весело провести время, найти свои первые грибы, не отстать от взрослых и получить признание за находки. Ожидают интересный и понятный интерфейс с игровыми элементами, возможность делиться фотографиями находок и получать достижения за вклад в общую корзину.
|
||||
|
||||
\item \textbf{Пожилые родственники} хотят поделиться опытом и знаниями о грибных местах, передать традиции, при этом комфортно пользоваться приложением. Ожидают крупные шрифты, голосовые подсказки, минимальное число действий на экране и возможность отметить известные им грибные места без сложных манипуляций.
|
||||
|
||||
\item \textbf{Родственники дома} больше всего хотят, чтобы грибники вернулись целыми и невредимыми. Ожидают возможность отслеживать местоположение группы, получать периодические автоматические уведомления о статусе похода и быстро связаться с участниками при необходимости.
|
||||
\item \textbf{Пожилые родственники} хотят поделиться опытом и знаниями о грибных местах, передать традиции, при этом комфортно пользоваться приложением. Ожидают крупные шрифты, минимальное число действий на экране.
|
||||
|
||||
\item \textbf{Организатор} хочет эффективно спланировать маршрут, проконтролировать сбор снаряжения, координировать действия группы. Ожидает инструменты совместного планирования: систему приглашений, чек-лист снаряжения, контроль состава группы, возможность отслеживать местоположение всех участников и быстро реагировать на отклонения от плана.
|
||||
|
||||
\item \textbf{Службы спасения} хотят минимизировать время поиска в экстренных ситуациях. Ожидают автоматическую интеграцию приложения с системой 112 для передачи структурированных данных: точных координат, информации о составе группы, состоянии здоровья участников, заряде батареи, запасе воды и медикаментов, истории перемещений.
|
||||
|
||||
\end{itemize}
|
||||
|
||||
% \section{Критерии оценки результата}
|
||||
@@ -355,44 +341,77 @@
|
||||
\item Снижение числа случаев потери ориентации и заблудившихся участников благодаря обмену геометками в реальном времени, контрольным точкам и автоматическим уведомлениям об отклонениях от маршрута.
|
||||
\item Сокращение времени реагирования на экстренные ситуации за счёт мгновенной отправки координат службам спасения и волонтёрам с информацией о составе группы и состоянии участников.
|
||||
\item Снижение рисков для детей и пожилых участников через постоянный мониторинг их местоположения родителями и организатором похода.
|
||||
\item Предотвращение походов в опасные зоны благодаря своевременным уведомлениям от лесничих о пожароопасности, карантинных зонах и запретах.
|
||||
\item Успокоение родственников, остающихся дома, через периодические автоматические уведомления о статусе группы и возможность отслеживания маршрута.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Укрепление семейных связей и традиций:}
|
||||
\textbf{Улучшение качества семейного отдыха:}
|
||||
\begin{itemize}
|
||||
\item Формирование семейного архива маршрутов и корзины собранных грибов с фотографиями, координатами и историями.
|
||||
\item Передача опыта от пожилых грибников к детям и внукам через возможность отмечать грибные места, оставлять заметки и делиться знаниями о видах грибов.
|
||||
\item Вовлечение детей в семейную активность через игровые элементы: квесты по поиску грибов, достижения, признание за находки в общей корзине.
|
||||
\item Создание новых семейных традиций: регулярные сезонные походы, соревнования между участниками, празднование успешных сборов с просмотром архива.
|
||||
\item Укрепление коммуникации между членами семьи через совместное планирование и обмен фотографиями находок в реальном времени.
|
||||
\item Снижение стресса и тревожности у организатора и участников благодаря структурированному планированию, автоматическим напоминаниям и контролю готовности к походу.
|
||||
\item Упрощение координации группы в лесу через визуализацию местоположения всех участников на карте.
|
||||
\item Повышение вовлечённости всех членов семьи в совместную активность за счёт общей корзины находок, обмена фотографиями и возможности отмечать интересные места.
|
||||
\item Сокращение времени на организационные вопросы (сбор снаряжения, согласование времени, выбор маршрута) через централизованное планирование и чек-листы.
|
||||
\item Сохранение приятных воспоминаний через архив маршрутов с фотографиями и заметками, что мотивирует к повторным походам и формированию семейных традиций.
|
||||
\end{itemize}
|
||||
|
||||
% \textbf{Образовательные и экологические результаты:}
|
||||
% \begin{itemize}
|
||||
% \item Повышение экологической ответственности участников через подсказки по бережному сбору грибов, информацию о редких видах и правилах поведения в лесу.
|
||||
% \item Обучение детей навыкам ориентирования на местности, работе с картами и координатами в безопасной семейной обстановке.
|
||||
% \item Развитие знаний о грибах через фотофиксацию находок с возможностью последующей идентификации и изучения видов в семейном архиве.
|
||||
% \item Снижение случаев сбора ядовитых или несъедобных грибов благодаря возможности консультации с экспертами через приложение перед употреблением.
|
||||
% \item Формирование ответственного отношения к природе через статистику посещений, осознание нагрузки на лесные массивы и участие в их сохранении.
|
||||
% \end{itemize}
|
||||
|
||||
|
||||
\section{Описание технической платформы}
|
||||
Приложение ориентировано на мобильные устройства с операционными системами Android и iOS, оснащённые модулем GPS для определения местоположения, фотокамерой. Мобильная версия является основной, поскольку участники похода используют телефоны непосредственно в лесу для навигации, фотофиксации грибов и экстренной связи. Дополнительно предусмотрена веб-версия приложения, доступная через браузер, которая предназначена для удобного планирования маршрутов в домашних условиях, просмотра семейного фотоархива на большом экране.
|
||||
Приложение ориентировано на мобильные устройства с операционными системами Android и iOS, оснащённые модулем GPS для определения местоположения, фотокамерой. Мобильная версия является основной, поскольку участники похода используют телефоны непосредственно в лесу для навигации, фотофиксации грибов и экстренной связи.
|
||||
|
||||
При проектировании необходимо учесть специфические условия эксплуатации. В лесной местности следует ожидать нестабильное или полностью отсутствующее покрытие мобильной сети, поэтому критически важные функции должны работать в офлайн-режиме с последующей синхронизацией данных. Устройства часто используются в перчатках, при плохой освещённости или под дождём, что требует крупных элементов управления и высокой контрастности интерфейса. Необходимо минимизировать энергопотребление, так как походы длятся несколько часов без возможности подзарядки, а GPS-модуль и постоянная работа экрана существенно расходуют батарею. Следует также учитывать, что некоторые пожилые участники могут использовать кнопочные телефоны без доступа к приложению --- в этом случае их безопасность обеспечивается через устройства других членов группы, а для экстренной связи предусмотрена возможность получения SMS с координатами от организатора.
|
||||
При проектировании необходимо учесть специфические условия эксплуатации. В лесной местности следует ожидать нестабильное или полностью отсутствующее покрытие мобильной сети, поэтому критически важные функции должны работать в офлайн-режиме с последующей синхронизацией данных. Устройства часто используются в перчатках, при плохой освещённости или под дождём, что требует крупных элементов управления и высокой контрастности интерфейса. Необходимо минимизировать энергопотребление, так как походы длятся несколько часов без возможности подзарядки, а GPS-модуль и постоянная работа экрана существенно расходуют батарею.
|
||||
|
||||
|
||||
% \section{Формулировка требований к системе}
|
||||
% \begin{itemize}
|
||||
% \item Поддержка офлайн-карт с предварительным кешированием выбранного лесного массива.
|
||||
% \item Совместное редактирование маршрутов и списка снаряжения, возможность сохранять шаблоны.
|
||||
% \item Быстрая отправка SOS с координатами, запасом батареи и последней контрольной точкой.
|
||||
% \item Защита персональных данных: шифрование локального хранилища, явное согласие на обмен геоданными, прозрачные настройки доступа.
|
||||
% \item Адаптивный интерфейс: увеличение шрифта, контрастная тема, голосовые подсказки.
|
||||
% \item Локализация: русский по умолчанию, опционально английский для гостей.
|
||||
% \end{itemize}
|
||||
\section{Формулировка требований к системе}
|
||||
|
||||
\textbf{Требования к автономной работе и офлайн-режиму:}
|
||||
\begin{itemize}
|
||||
\item Приложение должно поддерживать работу в офлайн-режиме с предварительным кешированием карт выбранного лесного массива (объём 30--50 МБ на регион).
|
||||
\item Система должна обеспечивать работу основных функций (навигация, фиксация находок, мониторинг группы) без подключения к интернету с последующей синхронизацией данных при восстановлении связи.
|
||||
\item Приложение должно автоматически переключаться на компасный режим навигации при слабом GPS-сигнале с указанием направления к последней известной контрольной точке.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Требования к планированию и организации:}
|
||||
\begin{itemize}
|
||||
\item Система должна автоматизировать рутинные операции: расчёт времени прохождения маршрута, проверку погоды, напоминания о снаряжении.
|
||||
\item Приложение должно предоставлять инструменты совместного планирования: систему приглашений, чек-листы снаряжения с распределением ответственности, контроль состава группы.
|
||||
\item Система должна автоматически рассчитывать примерное время прохождения между контрольными точками и общую длительность похода.
|
||||
\item Приложение должно отправлять автоматические напоминания участникам о проверке снаряжения за 2 часа до выхода и о зарядке устройств за 5 часов.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Требования к навигации и координации:}
|
||||
\begin{itemize}
|
||||
\item Система должна отображать местоположение всех участников группы на карте в реальном времени с обновлением позиций каждые 30 секунд.
|
||||
\item Приложение должно автоматически отправлять уведомления организатору при отклонении участника от группы более чем на заданное расстояние: для детей — 150 метров, для взрослых — 250 метров, для пожилых участников — 200 метров.
|
||||
\item Система должна предоставлять голосовые подсказки с направлением к контрольной точке, предупреждениями об отклонении от маршрута и напоминаниями о времени встречи.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Требования к безопасности и экстренным ситуациям:}
|
||||
\begin{itemize}
|
||||
\item Приложение должно обеспечивать отправку сигнала SOS с точными GPS-координатами, составом группы, запасом батареи, последней контрольной точкой и историей перемещений через интеграцию с системой «Система-112».
|
||||
\item Кнопка SOS должна быть доступна с любого экрана приложения и работать даже при минимальной связи.
|
||||
\item Приложение должно предоставлять таймер обратного отсчёта 5 секунд с возможностью отмены для предотвращения случайных нажатий кнопки SOS.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Требования к интерфейсу и доступности:}
|
||||
\begin{itemize}
|
||||
\item Система должна предоставлять крупные элементы управления и высокую контрастность интерфейса для использования в перчатках, при плохой освещённости или под дождём.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Требования к фиксации и учёту находок:}
|
||||
\begin{itemize}
|
||||
\item Система должна автоматически сохранять GPS-координаты и время и погодные условия.
|
||||
\item Приложение должно создавать общую семейную корзину с отображением всех находок в реальном времени и указанием автора каждой находки.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Требования к архивированию и отчётности:}
|
||||
\begin{itemize}
|
||||
\item Приложение должно сохранять пройденный GPS-трек, общее время и расстояние похода, количество и авторство находок.
|
||||
\item Приложение должно поддерживать сохранение маршрутов как шаблонов для повторного использования.
|
||||
\item Приложение должно предоставлять функции для экспорта и отправки фотографий находок.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Технические требования:}
|
||||
\begin{itemize}
|
||||
\item Приложение должно поддерживать мобильные устройства с операционными системами Android и iOS, оснащённые модулем GPS и фотокамерой.
|
||||
\end{itemize}
|
||||
|
||||
\section{Модель пользователей приложения}
|
||||
|
||||
@@ -404,47 +423,31 @@
|
||||
|
||||
\textit{Цели и потребности:} эффективно организовать поход --- согласовать дату и состав участников, создать маршрут и чек-лист снаряжения, убедиться, что все взяли необходимое снаряжение. Во время похода контролировать местоположение детей в лесу, иметь возможность быстро отправить сигнал о помощи. Опасается потерять из виду младшую дочь или отца, переживает за разрядку телефонов. Хочет сохранять маршруты для повторных походов и вести семейную статистику находок.
|
||||
|
||||
\textit{Контекст использования:} планирует походы дома за компьютером или в телефоне в транспорте, в лесу использует смартфон в водонепроницаемом чехле, часто в перчатках при холодной погоде. Связь нестабильная, приходится полагаться на офлайн-карты. Использует приложение для координации семьи и фиксации грибных мест с фотографиями.
|
||||
|
||||
\vspace{0.3cm}
|
||||
|
||||
\textbf{Иван Семёнович Петров, 67 лет --- опытный грибник, дедушка (персонаж 2).} Пенсионер, всю жизнь прожил в Ленинградской области, последние 15 лет живёт с семьёй сына в Калининском районе. Собирает грибы с детства, знает грибные места в окрестностях Комарово, Солнечного и Репино. Использует кнопочный телефон для звонков, недавно получил в подарок от внучки бюджетный Android-смартфон, но осваивает его медленно.
|
||||
\textbf{Иван Семёнович Петров, 67 лет --- опытный грибник, дедушка (персонаж 2).} Пенсионер, всю жизнь прожил в Ленинградской области. Собирает грибы с детства, знает грибные места в окрестностях Комарово, Солнечного и Репино. Использует кнопочный телефон для звонков, недавно получил в подарок от дочери бюджетный Android-смартфон, но осваивает его медленно.
|
||||
|
||||
|
||||
\textit{Цели и потребности:} поделиться знаниями о грибных местах с внуками, научить их отличать съедобные грибы от ядовитых, показать секретные полянки, где он собирает грибы много лет. Хочет чувствовать себя безопасно в лесу, иметь возможность вызвать помощь простым действием (одна кнопка), не разбираться в сложных меню. Важно крупное отображение информации, голосовые подсказки. Готов использовать смартфон, если интерфейс простой и понятный.
|
||||
|
||||
\textit{Контекст использования:} редко заходит в приложение самостоятельно, чаще просит внучку или Марию показать маршрут. В лесу держит телефон в нагрудном кармане куртки, достаёт только при необходимости. Использует очки для чтения, поэтому нужен крупный шрифт. Перчатки толстые, экран реагирует плохо. Опасается быстро разрядить батарею, поэтому экран выключает при любой возможности.
|
||||
|
||||
\vspace{0.3cm}
|
||||
|
||||
\textbf{Алиса Петрова, 12 лет --- школьница, любительница фотографии (персонаж 3).} Учится в 7 классе, живёт с родителями в Калининском районе. Активный пользователь смартфона, любит фотографировать природу, общается с друзьями в мессенджерах, играет в мобильные игры. В походы ездит с родителями и дедушкой, для неё это интересное приключение и возможность сделать красивые фото для соцсетей.
|
||||
|
||||
\textit{Типичный маршрут:} сопровождает семью в походы, обычно идёт рядом с мамой или дедушкой. Любит исследовать окрестности, но иногда увлекается и отходит далеко. После нескольких случаев, когда её искали 15--20 минут, родители настаивают на постоянной связи через приложение.
|
||||
|
||||
\textit{Цели и потребности:} весело провести время, найти необычные грибы и сфотографировать их для коллекции, получить похвалу от родителей и дедушки за находки, заработать виртуальные достижения в приложении. Хочет видеть своё местоположение относительно семьи, получать интересные квесты (например, "найди белый гриб"), делиться фотографиями находок в семейном чате. Не любит, когда родители слишком контролируют, но понимает необходимость безопасности.
|
||||
|
||||
\textit{Контекст использования:} всегда с телефоном, часто фотографирует, использует приложение как игру. Батарея расходуется быстро из-за постоянного использования камеры и экрана. Носит телефон в кармане куртки или в поясной сумке. Интерфейс должен быть ярким, современным, с игровыми элементами.
|
||||
|
||||
\vspace{0.3cm}
|
||||
|
||||
\textbf{Второстепенные персонажи:}
|
||||
|
||||
\textbf{Пётр Сергеевич Иванов, 45 лет --- спасатель МЧС России (персонаж 4).} Проживает в Выборгском районе Санкт-Петербурга, работает в поисково-спасательной службе МЧС. Участвует в операциях по поиску заблудившихся в лесах Ленинградской области. Имеет профессиональную подготовку по ориентированию, навигации и оказанию первой помощи.
|
||||
|
||||
\textit{Цели и потребности:} при поступлении вызова через службу 112 от заблудившихся грибников быстро получить всю доступную информацию о группе для организации поисково-спасательной операции. Критически важны точные координаты последнего известного местоположения, данные о составе группы (количество человек, возраст, наличие детей), состоянии здоровья участников, заряде устройств, наличии воды, медикаментов. Необходима история перемещений группы для определения вероятного направления движения и планирования зоны поиска.
|
||||
|
||||
\textit{Контекст использования:} не является прямым пользователем приложения. Получает структурированные данные через диспетчерскую систему МЧС при активации пользователями тревожной кнопки или автоматическом срабатывании SOS-сигнала. Приложение должно интегрироваться с системой «Система-112», автоматически передавая координаты и дополнительную информацию при экстренном вызове.
|
||||
\textit{Цели и потребности:} весело провести время, найти необычные грибы и сфотографировать их для коллекции, получить похвалу от родителей и дедушки за находки. Хочет видеть своё местоположение относительно семьи, делиться фотографиями находок в семейном чате. Не любит, когда родители слишком контролируют, но понимает необходимость безопасности.
|
||||
|
||||
\vspace{0.3cm}
|
||||
|
||||
\textbf{Общий контекст использования приложения:} походы проходят в лесных массивах Всеволожского района Ленинградской области (Токсово, Каменка, Васкелово). Местность холмистая, преимущественно сосновые и смешанные леса, множество озёр. Покрытие мобильной сети нестабильное: у станций и населённых пунктов есть 4G, в глубине леса сигнал слабый или отсутствует. Погода осенью переменчива: температура +5..+15°C, часто дожди и туманы, необходимы тёплая одежда и перчатки. Световой день короткий (в октябре темнеет к 18:00), поэтому важно успеть вернуться до темноты. Устройства находятся в чехлах, карманах курток, рюкзаках, часто используются в перчатках при плохой освещённости.
|
||||
|
||||
\section{Ментальная модель пользователя, метафоры и идиомы}
|
||||
Пользователи воспринимают поход как совместное мероприятие с чёткими точками встречи и таймерами возвращения. Интерфейс опирается на метафоры: \textit{карта тропы} (основной экран с маршрутом), \textit{корзина} для списка найденных грибов, \textit{поляна} как место встречи группы и общения (семейный чат). Идиомы: перетаскивание контрольных точек, чек-лист с галочками, крупная красная кнопка SOS, значок компаса для ориентации.
|
||||
% \section{Ментальная модель пользователя, метафоры и идиомы}
|
||||
% Пользователи воспринимают поход как совместное мероприятие с чёткими точками встречи и таймерами возвращения. Интерфейс опирается на метафоры: \textit{карта тропы} (основной экран с маршрутом), \textit{корзина} для списка найденных грибов, \textit{поляна} как место встречи группы и общения (семейный чат). Идиомы: перетаскивание контрольных точек, чек-лист с галочками, крупная красная кнопка SOS, значок компаса для ориентации.
|
||||
|
||||
\section{Квалификация пользователя}
|
||||
|
||||
Квалификация пользователей приложения рассматривается по двум ключевым параметрам: владение цифровыми технологиями (навигация, использование мобильных приложений, работа с картами и геолокацией) и знание предметной области (грибы, лесная местность, правила безопасного сбора). Идеальный пользователь должен сочетать оба навыка, однако в реальности семейные группы объединяют людей с разным уровнем компетенций, которые дополняют друг друга: кто-то является экспертом в грибах, но слабо владеет технологиями, другие уверенно работают с приложениями, но нуждаются в консультациях по определению видов. Приложение должно учитывать этот дисбаланс и предоставлять инструменты, позволяющие каждому участнику вносить вклад в соответствии со своими сильными сторонами.
|
||||
Квалификация пользователей приложения рассматривается по двум ключевым параметрам: владение цифровыми технологиями (навигация, использование мобильных приложений, работа с картами и геолокацией) и знание предметной области (грибы, лесная местность, правила безопасного сбора). Идеальный пользователь должен сочетать оба навыка, однако в реальности семейные группы объединяют людей с разным уровнем компетенций, которые дополняют друг друга: кто-то является экспертом в грибах, но слабо владеет технологиями, другие уверенно работают с приложениями, но нуждаются в консультациях по определению видов.
|
||||
|
||||
\textbf{Мария (персонаж 1)} --- уверенный пользователь цифровых технологий: свободно владеет мессенджерами, навигаторами, облачными сервисами, быстро осваивает новые приложения. В грибах разбирается на базовом уровне: знает основные съедобные виды (белые, подосиновики, лисички), но в сложных случаях полагается на опыт отца или консультируется по справочникам. Умеет читать карты и пользоваться GPS-навигацией.
|
||||
|
||||
@@ -459,7 +462,15 @@
|
||||
|
||||
\textbf{Задачи этапа планирования и подготовки:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Упрощение организации похода} --- предоставить организатору инструменты для быстрого создания маршрута, формирования группы участников и координации подготовки. Система должна автоматизировать рутинные операции: расчёт времени прохождения, проверку погоды, напоминания о снаряжении.
|
||||
\item \textbf{Определение параметров похода} --- помочь организатору выбрать и зафиксировать дату и время начала похода, точку сбора участников и место проведения.
|
||||
|
||||
\item \textbf{Планирование логистики} --- показать организатору варианты транспорта до точки сбора с расписанием электричек от ближайших станций, рассчитать время в пути до точки сбора.
|
||||
|
||||
\item \textbf{Информирование о погодных условиях} --- отобразить прогноз погоды на выбранную дату, время восхода и захода солнца, предупредить о неблагоприятных условиях (дождь, низкая температура) и дать рекомендации по снаряжению.
|
||||
|
||||
\item \textbf{Формирование группы и согласование плана} --- обеспечить отправку приглашений всем участникам с указанием даты, времени, точки сбора и маршрута. Каждый участник должен видеть план похода.
|
||||
|
||||
\item \textbf{Построение маршрута} --- предоставить инструменты для создания маршрута с контрольными точками, автоматически рассчитать расстояния и время прохождения между точками, общую продолжительность похода.
|
||||
|
||||
\item \textbf{Совместная подготовка снаряжения} --- обеспечить возможность распределения ответственности за снаряжение между участниками. Каждый член семьи должен видеть свои задачи и подтверждать их выполнение.
|
||||
|
||||
@@ -468,18 +479,17 @@
|
||||
|
||||
\textbf{Задачи этапа проведения похода:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Поддержание координации группы} --- позволить всем участникам видеть местоположение друг друга и своевременно получать уведомления о критических событиях (кто-то отстал, пора возвращаться, приближается темнота). Организатор должен иметь полный контроль над группой с единой панели мониторинга.
|
||||
\item \textbf{Поддержание координации группы} --- позволить всем участникам видеть местоположение друг друга и своевременно получать уведомления о критических событиях (кто-то отстал, пора возвращаться, приближается темнота).
|
||||
|
||||
\item \textbf{Фиксация и учёт находок} --- обеспечить простой способ документирования найденных грибов с автоматическим сохранением координат, времени и фотографий. Создавать общую семейную корзину, где все видят вклад каждого участника, что повышает вовлечённость и мотивацию.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Задачи обеспечения безопасности:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Быстрое реагирование на экстренные ситуации} --- обеспечить мгновенную отправку сигнала о помощи с точными координатами, составом группы и другой критически важной информацией в службы спасения и доверенным контактам. Кнопка SOS должна быть доступна с любого экрана и работать даже при минимальной связи.
|
||||
\item \textbf{Быстрое реагирование на экстренные ситуации} --- обеспечить мгновенную отправку сигнала о помощи с точными координатами, составом группы и другой критически важной информацией в службы спасения. Кнопка SOS должна быть доступна с любого экрана и работать даже при минимальной связи.
|
||||
|
||||
\item \textbf{Интеграция с профессиональными службами спасения} --- автоматически передавать структурированные данные о группе в систему 112 при экстренном вызове.
|
||||
|
||||
\item \textbf{Дистанционный контроль безопасности} --- позволить родственникам, остающимся дома, отслеживать местоположение группы и получать уведомления о статусе похода, чтобы они могли своевременно среагировать на задержки или отклонения от плана.
|
||||
|
||||
\end{itemize}
|
||||
|
||||
\section{Описание основных процессов}
|
||||
@@ -490,7 +500,7 @@
|
||||
|
||||
\textbf{2. Подготовка снаряжения (Мария + семья).} После подтверждения участников Мария создаёт чек-лист снаряжения: выбирает готовый шаблон "Осенний поход на 4--5 часов" или создаёт свой список. В чек-лист входят: корзины для грибов, ножи, аптечка, вода, перекус, powerbank, дождевики, компас. Мария распределяет ответственность: муж берёт аптечку и воду, она — корзины и перекус, Иван — ножи. Каждый участник видит свои назначения в приложении и отмечает галочками выполнение. За 2 часа до выхода приложение отправляет напоминание всем участникам проверить список. Вечером накануне приходит напоминание зарядить телефоны и powerbank.
|
||||
|
||||
\textbf{3. Навигация в походе (все участники).} В лесу все участники используют приложение для навигации. На экране отображается карта с текущим положением каждого (Мария видит всех, остальные видят маршрут и контрольные точки), направление к ближайшей контрольной точке (стрелка-компас), расстояние до неё и примерное время прибытия. Иван использует упрощённый режим "Проводник" с крупными элементами и голосовыми подсказками: "Поверните направо через 50 метров", "Вы отклонились от маршрута на 200 метров". Если участник отходит от группы дальше установленного радиуса (например, Алиса на 500 метров), приложение автоматически отправляет уведомление Марии. При слабом GPS-сигнале приложение переключается на компасный режим с указанием направления к последней известной контрольной точке.
|
||||
\textbf{3. Навигация в походе (все участники).} В лесу все участники используют приложение для навигации. На экране отображается карта с текущим положением каждого (Мария видит всех, остальные видят маршрут и контрольные точки), направление к ближайшей контрольной точке (стрелка-компас), расстояние до неё и примерное время прибытия. Иван использует упрощённый режим "Проводник" с крупными элементами и голосовыми подсказками: "Поверните направо через 50 метров", "Вы отклонились от маршрута на 200 метров". Если участник отходит от группы дальше установленного радиуса (для детей — 150 метров, для взрослых — 250 метров, для пожилых — 200 метров), приложение автоматически отправляет уведомление Марии. При слабом GPS-сигнале приложение переключается на компасный режим с указанием направления к последней известной контрольной точке.
|
||||
|
||||
\textbf{4. Фиксация находок (все участники).} Когда кто-то из семьи находит гриб, он фотографирует его через приложение. Приложение автоматически сохраняет координаты места находки и текущее время. Пользователь может добавить краткую заметку (текстовую или голосовую): "Белый гриб под сосной" или "Здесь много лисичек". Иван добавляет экспертные комментарии: "Это подосиновик, съедобный, лучше собирать молодые". Находка автоматически добавляется в общую семейную корзину с указанием автора. Все участники видят в реальном времени, кто и что нашёл, могут оставлять реакции (лайки, поздравления). Алиса получает баллы за каждую находку и выполнение квестов ("Найди 3 разных вида грибов"). Места с фотографиями сохраняются на карте как "грибные точки" для будущих походов.
|
||||
|
||||
@@ -532,126 +542,35 @@
|
||||
\textbf{Функции безопасности и экстренной связи:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Кнопка SOS} с крупным размером и ярким цветом, доступная с любого экрана, таймером обратного отсчёта 5 секунд для предотвращения случайных нажатий, возможностью быстрой отмены.
|
||||
\item \textbf{Автоматическая отправка экстренной информации}: при активации SOS отправляются точные GPS-координаты, состав группы, возраст участников, медицинская информация (если указана), запас батареи, история передвижения за последний час.
|
||||
\item \textbf{Система доверенных контактов}: возможность добавления родственников и знакомых с автоматическим уведомлением при активации SOS, разные уровни доступа (только координаты, полный мониторинг, история).
|
||||
\item \textbf{Интеграция со службами спасения}: автоматическая передача структурированных данных в систему 112, экспорт координат и треков в стандартных форматах (GPX, KML) для профессионального оборудования МЧС, отправка SMS с координатами при отсутствии интернета.
|
||||
\item \textbf{Автоматические уведомления о задержках}: если группа не вернулась в запланированное время или долго не обновляла позицию, система отправляет предупреждения доверенным контактам.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Функции геймификации и вовлечения:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Система достижений и квестов} для детей и подростков: выполнение заданий ("найди 3 разных вида", "дойди до контрольной точки первым"), получение виртуальных наград и баллов, отображение прогресса и рейтинга внутри семейной группы.
|
||||
\item \textbf{Визуализация вклада участников}: отображение статистики находок каждого члена семьи, система реакций и поощрений от других участников, формирование духа здоровой конкуренции и сотрудничества.
|
||||
\item \textbf{Интеграция со службами спасения}: автоматическая передача структурированных данных в систему 112, экспорт координат и треков в стандартных форматах (GPX, KML) для профессионального оборудования МЧС.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Функции подведения итогов и архивирования:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Автоматическое формирование отчёта о походе}: сохранение пройденного GPS-трека, статистики (время, расстояние, количество находок), всех фотографий с привязкой к карте и времени.
|
||||
\item \textbf{Семейный архив походов}: хранение истории всех походов с возможностью просмотра на временной шкале, сравнения результатов разных выездов, анализа самых продуктивных маршрутов и сезонов.
|
||||
\item \textbf{База знаний о грибных местах}: накопление информации о местах успешных находок с фильтрацией по видам грибов, сезонам и годам, возможность добавления заметок и рекомендаций для будущих походов.
|
||||
\item \textbf{Экспорт данных}: сохранение отчётов в формате PDF для семейного альбома, экспорт треков и координат в стандартных форматах, возможность поделиться результатами с друзьями и родственниками.
|
||||
\item \textbf{Шаблоны маршрутов}: сохранение успешных маршрутов как готовых шаблонов с возможностью быстрого повторного использования, копирования и адаптации под новые условия.
|
||||
\end{itemize}
|
||||
|
||||
\section{Описание структуры диалога и его обоснование}
|
||||
|
||||
Структура диалога приложения организована в виде графа состояний, отражающего полный цикл взаимодействия пользователя с системой: от первоначальной авторизации до завершения похода и анализа результатов. Граф учитывает различные роли пользователей (организатор, участник, дистанционный наблюдатель, доверенный волонтёр) и обеспечивает быстрый доступ к критически важным функциям безопасности из любого состояния.
|
||||
|
||||
\textbf{Приложение может находиться в следующих состояниях:}
|
||||
Структура диалога приложения построена на основе задач, решаемых пользователями. Приложение имеет пять основных состояний, соответствующих пунктам нижней навигационной панели, и одно экстренное состояние SOS:
|
||||
|
||||
\begin{itemize}
|
||||
\item[a)] \textbf{Начальное состояние.} Главный экран с выбором основных действий: создание нового похода, присоединение к существующему по приглашению, просмотр архива прошлых походов.
|
||||
|
||||
\item[b)] \textbf{Планирование похода.} Конструктор маршрута с размещением контрольных точек на карте, выбором даты и времени, просмотром прогноза погоды, загрузкой офлайн-карт региона.
|
||||
|
||||
\item[c)] \textbf{Управление участниками.} Формирование группы похода: отправка приглашений членам семьи и друзьям, просмотр подтверждений участия, назначение ролей (организатор, участник), добавление доверенных контактов для экстренных ситуаций.
|
||||
|
||||
\item[d)] \textbf{Чек-лист снаряжения.} Совместная подготовка к походу: выбор шаблона снаряжения, распределение ответственности за предметы между участниками, отслеживание выполнения сборов.
|
||||
|
||||
\item[e)] \textbf{Режим активной навигации.} Основное состояние во время похода: отображение карты с местоположением всех участников, навигация к контрольным точкам, мониторинг расстояний и времени, контроль заряда батарей устройств. Доступны адаптивные режимы: полная карта, упрощённый "Проводник" для пожилых, компасный режим при слабом GPS.
|
||||
|
||||
\item[f)] \textbf{Фиксация находки.} Фотографирование найденного гриба с автоматическим сохранением GPS-координат, времени и погодных условий. Возможность добавления текстовых или голосовых комментариев, выбора вида гриба из справочника.
|
||||
|
||||
\item[g)] \textbf{Семейная корзина.} Просмотр всех зафиксированных находок группы в реальном времени с указанием авторов, местоположений на карте, фотографиями. Возможность добавления реакций, комментариев, экспертных оценок от опытных грибников.
|
||||
|
||||
\item[h)] \textbf{Семейный чат.} Обмен текстовыми и голосовыми сообщениями между участниками похода, отправка фотографий, быстрые реакции, автоматическое прикрепление геолокации к сообщениям.
|
||||
|
||||
\item[i)] \textbf{Справочник грибов.} Просмотр базы знаний о распространённых видах грибов с эталонными фотографиями, описаниями съедобности, сезонов плодоношения, предупреждениями о ядовитых двойниках. Поиск и сравнение найденных грибов с базой.
|
||||
|
||||
\item[j)] \textbf{Экстренный режим (SOS).} Активация тревожного сигнала с обратным отсчётом для предотвращения случайных нажатий. Автоматическая отправка координат, состава группы и медицинской информации доверенным контактам и службам спасения.
|
||||
|
||||
\item[k)] \textbf{Панель организатора.} Расширенный режим мониторинга для ответственного лица: отслеживание всех участников, контроль соблюдения графика, управление маршрутом, корректировка контрольных точек, принудительное оповещение группы.
|
||||
|
||||
\item[l)] \textbf{Архив походов.} Просмотр списка завершённых походов с краткой статистикой: дата, маршрут, участники, количество найденных грибов, пройденное расстояние.
|
||||
|
||||
\item[m)] \textbf{Детальный просмотр похода.} Анализ конкретного похода из архива: GPS-трек на карте, временная шкала событий, фотографии всех находок с геометками, статистика по участникам, экспорт отчёта в PDF.
|
||||
\item \textbf{Главная} --- начальный экран с выбором похода (создание нового или присоединение к существующему) и доступом к архиву прошлых походов.
|
||||
\item \textbf{Маршрут} --- планирование похода (создание маршрута, контрольные точки, загрузка офлайн-карт) и активная навигация во время похода (отображение местоположения участников, направление к точкам).
|
||||
\item \textbf{Корзина} --- просмотр и добавление находок группы с фотографиями, координатами и указанием автора.
|
||||
\item \textbf{Чат} --- координация участников через текстовые и голосовые сообщения.
|
||||
\item \textbf{Справочник} --- информация о видах грибов для идентификации находок.
|
||||
\item \textbf{SOS} --- экстренный режим, доступный из любого состояния одним нажатием.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Переходы между состояниями происходят по следующим действиям:}
|
||||
Во время активного похода переключение между состояниями Маршрут, Корзина, Чат и Справочник осуществляется через нижнюю навигационную панель. Переход в состояние SOS возможен из любого экрана через кнопку экстренного вызова. Такая структура обеспечивает быстрый доступ к основным функциям и минимизирует когнитивную нагрузку на пользователей.
|
||||
|
||||
\begin{enumerate}
|
||||
\item \textbf{Создание нового похода.} Переход из начального состояния (a) в планирование похода (b). Инициируется организатором для подготовки нового маршрута.
|
||||
|
||||
\item \textbf{Присоединение к походу по приглашению (день похода).} Переход из начального состояния (a) в режим активной навигации (e) для участников, принявших приглашение и готовых начать поход.
|
||||
|
||||
\item \textbf{Присоединение к походу по приглашению (подготовка).} Переход из начального состояния (a) в чек-лист снаряжения (d) на этапе подготовки к походу.
|
||||
|
||||
\item \textbf{Переход к управлению участниками.} Из планирования похода (b) в управление участниками (c) для формирования группы и отправки приглашений.
|
||||
|
||||
\item \textbf{Переход к чек-листу снаряжения.} Из управления участниками (c) в чек-лист снаряжения (d) для подготовки необходимых предметов.
|
||||
|
||||
\item \textbf{Переход к чек-листу снаряжения.} Из планирования похода (b) в чек-лист снаряжения (d) напрямую.
|
||||
|
||||
\item \textbf{Начало похода.} Переход из чек-листа (d) в режим активной навигации (e). Активирует GPS-отслеживание и синхронизацию местоположений всех участников.
|
||||
|
||||
\item \textbf{Начало похода.} Переход из планирования похода (b) в режим активной навигации (e) напрямую.
|
||||
|
||||
\item \textbf{Фотографирование находки.} Из режима навигации (e) в фиксацию находки (f). Доступно любому участнику при обнаружении гриба.
|
||||
|
||||
\item \textbf{Сохранение находки и возврат к навигации.} Из фиксации находки (f) обратно в режим навигации (e) с автоматическим добавлением записи в семейную корзину (g).
|
||||
|
||||
\item \textbf{Открытие семейной корзины.} Из режима навигации (e) в просмотр семейной корзины (g) для анализа всех находок группы.
|
||||
|
||||
\item \textbf{Возврат к навигации из корзины.} Из семейной корзины (g) обратно в режим навигации (e).
|
||||
|
||||
\item \textbf{Открытие семейного чата.} Из режима навигации (e) в семейный чат (h) для координации и обмена сообщениями.
|
||||
|
||||
\item \textbf{Возврат к навигации из чата.} Из семейного чата (h) обратно в режим навигации (e).
|
||||
|
||||
\item \textbf{Открытие справочника грибов.} Из фиксации находки (f) в справочник грибов (i) для уточнения вида и съедобности.
|
||||
|
||||
\item \textbf{Открытие справочника грибов.} Из семейной корзины (g) в справочник грибов (i) для проверки информации о найденных грибах.
|
||||
|
||||
\item \textbf{Возврат к фиксации находки.} Из справочника грибов (i) обратно в фиксацию находки (f).
|
||||
|
||||
\item \textbf{Возврат к семейной корзине.} Из справочника грибов (i) обратно в семейную корзину (g).
|
||||
|
||||
\item \textbf{Переход в панель организатора.} Из режима навигации (e) в панель организатора (k) для расширенного контроля группы. Доступно только ответственному лицу.
|
||||
|
||||
\item \textbf{Возврат к навигации из панели организатора.} Из панели организатора (k) обратно в режим навигации (e).
|
||||
|
||||
\item \textbf{Завершение похода.} Из режима навигации (e) в архив походов (l) с автоматическим сохранением всех данных: трека, находок, статистики.
|
||||
|
||||
\item \textbf{Просмотр архива.} Из начального состояния (a) в архив походов (l) для анализа прошлых маршрутов.
|
||||
|
||||
\item \textbf{Открытие конкретного похода.} Из архива (l) в детальный просмотр похода (m) с полной статистикой и картой.
|
||||
|
||||
\item \textbf{Активация SOS.} Из любого состояния в экстренный режим (j) при нажатии тревожной кнопки. Критически важный переход, доступный с любого экрана.
|
||||
|
||||
\item \textbf{Возврат на главный экран.} Из любого состояния (кроме активной навигации e и экстренного режима j) в начальное состояние (a). Из навигации возврат возможен только через завершение похода для предотвращения случайного выхода.
|
||||
\end{enumerate}
|
||||
|
||||
\textbf{Обоснование структуры диалога:}
|
||||
|
||||
Предложенная структура диалога основана на трёх ключевых принципах. Во-первых, обеспечение безопасности: переход в экстренный режим (SOS) доступен из любого состояния одним действием, что критически важно в опасных ситуациях. Во-вторых, минимизация когнитивной нагрузки: для пожилых пользователей предусмотрен линейный переход по основным состояниям (начало → навигация → фиксация находки → возврат к навигации) без необходимости глубокой навигации по меню. В-третьих, гибкость для опытных пользователей: организатор и участники с высокой цифровой грамотностью могут быстро переключаться между параллельными состояниями (навигация, чат, корзина, панель организатора) для эффективной многозадачности.
|
||||
|
||||
\addtocounter{figure}{1}
|
||||
\includepdf[pages={1}, fitpaper, pagecommand={
|
||||
\thispagestyle{empty}
|
||||
\begin{tikzpicture}[remember picture, overlay]
|
||||
\node at (current page.south) [anchor=north, yshift=35pt] {\large{Рис 1. Граф состояний приложения}};
|
||||
\end{tikzpicture}
|
||||
}]{pdf/graph.pdf}
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.6\linewidth]{img/graph.png}
|
||||
\caption{Граф состояний приложения.}
|
||||
\label{fig:graph}
|
||||
\end{figure}
|
||||
|
||||
% \section{Описание структуры команд пользователей}
|
||||
|
||||
@@ -661,11 +580,11 @@
|
||||
|
||||
\section{Технология ввода данных}
|
||||
|
||||
Приложение поддерживает несколько технологий ввода данных, адаптированных под условия использования в лесу и разную цифровую грамотность пользователей. Основным методом взаимодействия являются жесты касания и свайпы по сенсорному экрану, дополненные голосовым вводом для создания заметок и поиска информации о грибах в справочнике. Все формы спроектированы с минимальным количеством обязательных полей: геоданные (координаты, время) и метаданные фотографий подставляются автоматически при фиксации находок. Для упрощения работы пожилым пользователям предусмотрены увеличенные области нажатия (минимум 48×48 пикселей) и альтернативное управление физическими кнопками громкости в режиме "Проводник" (двойное нажатие для отметки находки, долгое удержание для SOS). При работе в перчатках или с мокрым экраном доступен упрощённый режим с крупными элементами и подтверждением критических действий. Детские профили требуют подтверждения родителей через push-уведомление при выполнении определённых действий (изменение маршрута, отключение отслеживания, приглашение новых участников).
|
||||
Приложение поддерживает несколько технологий ввода данных, адаптированных под условия использования в лесу и разную цифровую грамотность пользователей. Основным методом взаимодействия являются жесты касания и свайпы по сенсорному экрану. Все формы спроектированы с минимальным количеством обязательных полей: геоданные (координаты, время) и метаданные фотографий подставляются автоматически при фиксации находок. Для упрощения работы пожилым пользователям предусмотрены увеличенные области нажатия (минимум 48×48 пикселей). При работе в перчатках или с мокрым экраном доступен упрощённый режим с крупными элементами и подтверждением критических действий.
|
||||
|
||||
\section{Описание ошибок пользователей}
|
||||
|
||||
При использовании приложения пользователи могут допускать ошибки, связанные с человеческим фактором, особенностями окружающей среды и ограничениями технологий. Ниже описаны основные типы ошибок и методы их смягчения.
|
||||
При использовании приложения пользователи могут допускать ошибки. Ниже описаны основные типы ошибок и методы их смягчения.
|
||||
|
||||
\textbf{1. Случайное нажатие кнопки SOS.}
|
||||
|
||||
@@ -685,41 +604,29 @@
|
||||
|
||||
\textit{Метод обработки:} Приложение продолжает отслеживать местоположение в фоновом режиме и отправляет уведомление <<Навигация активна, вернуться в приложение>> с кнопкой быстрого доступа. При закрытии из режима активной навигации показывается диалог с предупреждением: <<Вы уверены? GPS-отслеживание будет остановлено>>. Для возврата достаточно нажать на постоянное уведомление в шторке. Критические события (отклонение от маршрута, SOS от других участников) вызывают полноэкранное уведомление даже при закрытом приложении.
|
||||
|
||||
\textbf{4. Дублирование отметок грибов несколькими участниками.}
|
||||
|
||||
\textit{Описание:} Несколько членов семьи фотографируют одну и ту же находку (например, крупный белый гриб), каждый добавляет её в общую корзину, что искажает статистику и создаёт путаницу при подведении итогов.
|
||||
|
||||
\textit{Метод обработки:} Приложение автоматически определяет похожие фотографии, сделанные в радиусе 10 метров и с интервалом менее 2 минут. При добавлении второй находки появляется уведомление: <<Алиса уже отметила гриб поблизости 30 секунд назад. Это тот же гриб?>> с вариантами <<Да, объединить>> или <<Нет, это другая находка>>. Объединённые находки отображаются с указанием всех авторов фотографий, что сохраняет вклад каждого участника.
|
||||
|
||||
\textbf{5. Опоздание на контрольное время встречи.}
|
||||
\textbf{4. Опоздание на контрольную точку.}
|
||||
|
||||
\textit{Описание:} Участник увлекается поиском грибов, не следит за временем и опаздывает на запланированную встречу группы в контрольной точке, что вызывает беспокойство остальных участников и задержку всего похода.
|
||||
|
||||
\textit{Метод обработки:} Приложение отправляет каскадные напоминания: за 30 минут до контрольного времени, за 15 минут с указанием расстояния до точки и времени в пути, за 5 минут с усиленным звуковым сигналом и вибрацией. При опоздании более чем на 10 минут уведомление получает организатор, который может скорректировать план или связаться с опаздывающим через чат.
|
||||
|
||||
% \textbf{6. Неточное определение координат при слабом GPS-сигнале.}
|
||||
|
||||
% \textit{Описание:} В густом лесу или овраге GPS-сигнал ослабевает, координаты определяются с ошибкой до 50-100 метров, что может привести к неверной фиксации местоположения находок или отклонению от маршрута.
|
||||
|
||||
% \textit{Метод обработки:} Приложение отображает точность GPS в виде цветового индикатора (зелёный < 10 м, жёлтый 10-30 м, красный > 30 м) и предупреждает при низкой точности: "Сигнал GPS слабый, точность ±45 м". При фиксации находки сохраняется информация о точности. Используется усреднение координат по нескольким измерениям (3-5 секунд) для повышения стабильности. В режиме компаса при потере GPS навигация переключается на направление по магнитному азимуту к последней известной контрольной точке. Организатор видит качество сигнала у всех участников и может предложить выйти на открытое место.
|
||||
|
||||
\textbf{6. Неправильное определение вида гриба.}
|
||||
\textbf{5. Неправильное определение вида гриба.}
|
||||
|
||||
\textit{Описание:} Неопытный пользователь ошибочно идентифицирует ядовитый гриб как съедобный, добавляет его в корзину с неверной меткой, что может привести к отравлению при употреблении.
|
||||
|
||||
\textit{Метод обработки:} При добавлении находки приложение анализирует фотографию с помощью алгоритмов компьютерного зрения и предлагает наиболее вероятные виды с указанием уровня уверенности. Для потенциально опасных грибов (бледная поганка, мухомор, ложные опята) выводится красное предупреждение: <<ВНИМАНИЕ! Возможно ядовитый гриб>>.
|
||||
|
||||
\textbf{7. Недостаточная зарядка батареи телефона.}
|
||||
\textbf{6. Недостаточная зарядка батареи телефона.}
|
||||
|
||||
\textit{Описание:} Пользователь активно использует камеру, экран и GPS, не следит за уровнем заряда, батарея разряжается в середине похода, связь с группой теряется.
|
||||
|
||||
\textit{Метод обработки:} Приложение прогнозирует время автономной работы на основе текущего расхода энергии и предупреждает: <<При таком расходе заряда хватит на 2,5 часа. До конца похода 4 часа. Рекомендуется включить режим экономии>>. При достижении 30\%, 20\% и 10\% заряда отправляются напоминания с советами (уменьшить яркость, отключить фоновую синхронизацию, использовать режим <<Только навигация>>). Участники видят уровень заряда других членов группы.
|
||||
|
||||
\textbf{8. Отклонение от запланированного маршрута.}
|
||||
\textbf{7. Отклонение от запланированного маршрута.}
|
||||
|
||||
\textit{Описание:} Участник случайно или намеренно уходит в сторону от маршрута, следуя за грибами или исследуя местность, не замечая отклонения, что может привести к потере ориентации и разделению группы.
|
||||
|
||||
\textit{Метод обработки:} Приложение непрерывно отслеживает положение относительно маршрута и устанавливает <<коридор безопасности>> шириной 200-300 метров. При выходе за пределы коридора срабатывает голосовое предупреждение: <<Вы отклонились от маршрута на 250 метров>> и отображается стрелка направления возврата. Все остальные участники получают уведомления. Для детей можно установить более строгие ограничения.
|
||||
\textit{Метод обработки:} Приложение непрерывно отслеживает положение относительно маршрута и устанавливает <<коридор безопасности>> с дифференцированной шириной в зависимости от возраста участника: для детей — 150 метров, для взрослых — 250 метров, для пожилых участников — 200 метров. При выходе за пределы коридора срабатывает голосовое предупреждение: <<Вы отклонились от маршрута на 150 метров>> и отображается стрелка направления возврата. Организатор и все остальные участники получают уведомления.
|
||||
|
||||
\section{Описание дизайна экранной формы}
|
||||
|
||||
@@ -818,7 +725,7 @@
|
||||
\item \textbf{Молния} --- уровень заряда батареи.
|
||||
\item \textbf{Антенна с волнами} --- уровень сигнала связи.
|
||||
\item \textbf{Фотоаппарат} --- сделать фото гриба.
|
||||
\item \textbf{Тревожный треугольник/круг SOS} --- экстренная кнопка.
|
||||
\item \textbf{Тревожный круг SOS} --- экстренная кнопка.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Цвет иконок:} по умолчанию тёмно-серый (\#2C3E50) для нейтральных элементов, окрашиваются в акцентные цвета при активации или для семантического значения (красная иконка низкого заряда, зелёная галочка выполнения).
|
||||
@@ -854,32 +761,7 @@
|
||||
|
||||
\textbf{Индикация выбора:} для элементов списка, переключателей, чекбоксов используется изменение цвета фона (светло-зелёный \#E8F5E9 для выбранного), появление галочки-иконки, увеличение высоты элемента на 2--4pt.
|
||||
|
||||
\subsection{Анимация и обратная связь}
|
||||
|
||||
Анимации используются для улучшения понимания системы и подтверждения действий, но не должны замедлять работу.
|
||||
|
||||
\textbf{Длительность анимаций:}
|
||||
\begin{itemize}
|
||||
\item Быстрые переходы (смена состояний кнопок): 100--150ms.
|
||||
\item Средние переходы (открытие модальных окон, карточек): 200--300ms.
|
||||
\item Длинные анимации (переход между экранами): 300--400ms.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Тактильная обратная связь (вибрация):}
|
||||
\begin{itemize}
|
||||
\item Лёгкая вибрация (10ms) при нажатии кнопок для подтверждения касания.
|
||||
\item Средняя вибрация (50ms) при достижении контрольной точки.
|
||||
\item Сильная вибрация (200ms, паттерн) при предупреждениях и активации SOS.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Звуковые сигналы:}
|
||||
\begin{itemize}
|
||||
\item Лёгкий щелчок при обычных действиях (опционально, можно отключить).
|
||||
\item Мелодичный сигнал при успешных действиях (отметка на точке, добавление гриба).
|
||||
\item Настойчивый звук при критических уведомлениях (низкий заряд, отклонение от маршрута).
|
||||
\item Тревожный сигнал при активации SOS (можно отключить, если нужна скрытность).
|
||||
\end{itemize}
|
||||
|
||||
\newpage
|
||||
\section{Шаблон экранной формы}
|
||||
|
||||
Шаблон экранной формы определяет единую структуру для всех основных экранов мобильного приложения. Он обеспечивает визуальную согласованность, предсказуемость навигации и соответствие принципам дизайна, описанным в предыдущем разделе.
|
||||
@@ -893,11 +775,71 @@
|
||||
|
||||
\item \textbf{Основная область контента (Main)} --- прокручиваемая область для размещения содержимого конкретного экрана. Включает заголовок экрана (22pt, полужирный), описание при необходимости (16pt, серый цвет), карточки с информацией и элементы управления. Отступы от краёв 20pt, отступ снизу 80pt для навигационной панели.
|
||||
|
||||
\item \textbf{Нижняя навигационная панель (Navigation)} --- фиксирована внизу экрана, высота 72pt, белый фон с тенью. Содержит 5 навигационных кнопок с иконками и подписями: "Маршрут", "Корзина", "Главная", "Чат", "Группа". Активная вкладка выделяется зелёным цветом текста и подчёркиванием снизу.
|
||||
\item \textbf{Нижняя навигационная панель (Navigation)} --- фиксирована внизу экрана, высота 72pt, белый фон с тенью. Содержит 5 навигационных кнопок с иконками и подписями: "Маршрут", "Корзина", "Главная", "Чат", "Справочник". Активная вкладка выделяется зелёным цветом текста и подчёркиванием снизу.
|
||||
|
||||
\item \textbf{Плавающая кнопка SOS} --- расположена в правом нижнем углу над навигацией, размер 80×80pt, красный цвет (\#C0392B), круглая форма с белой обводкой 4pt. Постоянно видима на всех экранах, имеет анимацию пульсации для привлечения внимания.
|
||||
\item \textbf{Кнопка SOS} --- расположена в правом нижнем углу над навигацией, размер 80×80pt, красный цвет (\#C0392B), круглая форма с белой обводкой 4pt. Постоянно видима на всех экранах, имеет анимацию пульсации для привлечения внимания.
|
||||
\end{itemize}
|
||||
|
||||
\subsection{Основные элементы интерфейса}
|
||||
|
||||
Шаблон использует набор унифицированных элементов интерфейса, обеспечивающих визуальную согласованность и предсказуемость взаимодействия.
|
||||
|
||||
\textbf{Кнопка SOS} --- критически важный элемент безопасности, доступный на всех экранах. Размер 80×80pt обеспечивает уверенное нажатие даже в стрессовой ситуации. Красный цвет \#C0392B мгновенно привлекает внимание, белая обводка 4pt создаёт контраст с любым фоном.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.2\linewidth]{img/elements/sos-button.png}
|
||||
\caption{Кнопка SOS}
|
||||
\label{fig:sos-button}
|
||||
\end{figure}
|
||||
|
||||
\newpage
|
||||
\textbf{Карточка (Card)} --- базовый контейнер для группировки связанного контента. Белый фон \#FFFFFF, радиус скругления 12pt, отступы 16pt. Тень средней интенсивности. Используется для информации о маршруте, участниках, находках.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.35\linewidth]{img/elements/card.png}
|
||||
\caption{Карточка контента}
|
||||
\label{fig:card}
|
||||
\end{figure}
|
||||
|
||||
\textbf{Основная кнопка} --- минимальная высота 48pt (стандарт ISO 9241-161 для сенсорных элементов), радиус 8pt, шрифт 16pt полужирный. Основная кнопка (primary) имеет оранжевый цвет \#E67E22, вторичная (secondary) --- светло-серый \#ECF0F1. При нажатии кнопка уменьшается до 97\% размера для тактильного отклика.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.35\linewidth]{img/elements/button-primary.png}
|
||||
\caption{Основная и вторичная кнопки}
|
||||
\label{fig:button-primary}
|
||||
\end{figure}
|
||||
|
||||
\textbf{Элемент списка} --- используется для участников, находок, контрольных точек. Иконка 40×40pt в скруглённом контейнере слева, заголовок 17pt полужирный, подзаголовок 14pt серый цвет. Отступы 14pt по вертикали, 16pt по горизонтали. Белый фон, радиус 12pt, лёгкая тень.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.35\linewidth]{img/elements/list-item.png}
|
||||
\caption{Элемент списка}
|
||||
\label{fig:list-item}
|
||||
\end{figure}
|
||||
|
||||
\newpage
|
||||
\textbf{Поисковое поле} --- высота 48pt, радиус 12pt, иконка лупы 20pt слева, текст 16pt. Фон белый с лёгкой тенью. Placeholder серого цвета \#7F8C8D. Используется в справочнике грибов для быстрого поиска по названию.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.35\linewidth]{img/elements/search-bar.png}
|
||||
\caption{Поисковое поле}
|
||||
\label{fig:search-bar}
|
||||
\end{figure}
|
||||
|
||||
\textbf{Навигационная панель} --- высота 72pt, 5 кнопок равной ширины. Иконки 24pt, подписи 11pt. Активная вкладка: зелёный цвет текста \#2D5F3F, полужирное начертание, подчёркивание снизу 3pt высотой. Неактивные: серый цвет \#7F8C8D, обычное начертание.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.4\linewidth]{img/elements/navigation-bar.png}
|
||||
\caption{Навигационная панель}
|
||||
\label{fig:navigation-bar}
|
||||
\end{figure}
|
||||
|
||||
\subsection{Визуальные особенности}
|
||||
|
||||
Шаблон реализует описанную ранее цветовую палитру и типографику:
|
||||
@@ -918,6 +860,8 @@
|
||||
\label{fig:template}
|
||||
\end{figure}
|
||||
|
||||
\newpage
|
||||
\phantom{text}
|
||||
\newpage
|
||||
\section{Эскизы экранных форм}
|
||||
|
||||
@@ -1069,7 +1013,20 @@
|
||||
\label{fig:chat-screens}
|
||||
\end{figure}
|
||||
|
||||
% \section{Выводы}
|
||||
% Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования.
|
||||
\newpage
|
||||
\section*{Заключение}
|
||||
\addcontentsline{toc}{section}{Заключение}
|
||||
|
||||
В ходе работы выполнено проектирование интерфейса приложения для организации семейных походов за грибами. Описана предметная область и сформулированы цели приложения. Определены заинтересованные лица и их ожидания. Сформулированы требования к системе. Построена модель пользователей с описанием персонажей и их квалификации. Определены задачи приложения и описаны основные процессы. Перечислены функции приложения. Разработана структура диалога в виде графа состояний. Описаны технологии ввода данных и типичные ошибки пользователей. Разработан дизайн экранных форм: определены цветовая схема, типографика, иконки и элементы управления. Создан шаблон экранной формы и эскизы основных экранов приложения.
|
||||
|
||||
\newpage
|
||||
\section*{Список литературы}
|
||||
\addcontentsline{toc}{section}{Список литературы}
|
||||
|
||||
\vspace{-1.5cm}
|
||||
\begin{thebibliography}{0}
|
||||
\bibitem{novikov}
|
||||
Алан Купер. Об интерфейсе. Основы проектирования взаимодействия ИМВ, 2-е изд.
|
||||
Пер. с англ. — 2009. — 688 с.
|
||||
\end{thebibliography}
|
||||
\end{document}
|
||||
|
||||
60
lab1/screen-forms/elements/button-primary.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Основная кнопка</title>
|
||||
<link rel="stylesheet" href="../common.css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-light);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.element-container {
|
||||
width: 335px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.element-description {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-medium);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="element-container">
|
||||
<h2 class="element-title">Основная кнопка</h2>
|
||||
|
||||
<button class="btn btn-primary btn-full">Создать поход</button>
|
||||
|
||||
<button class="btn btn-secondary btn-full">Сохранить черновик</button>
|
||||
|
||||
<p class="element-description">
|
||||
Минимальная высота: 48pt<br>
|
||||
Радиус: 8pt<br>
|
||||
Шрифт: 16pt, полужирный<br>
|
||||
Основная: оранжевый #E67E22<br>
|
||||
Вторичная: светло-серый #ECF0F1
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
63
lab1/screen-forms/elements/card.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Карточка</title>
|
||||
<link rel="stylesheet" href="../common.css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-light);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.element-container {
|
||||
width: 335px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.element-description {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-medium);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="element-container">
|
||||
<h2 class="element-title">Карточка (Card)</h2>
|
||||
|
||||
<div class="card">
|
||||
<h3 class="card-title">Заголовок карточки</h3>
|
||||
<p class="card-text">
|
||||
Содержимое карточки с информацией.
|
||||
Карточки используются для группировки связанного контента.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="element-description">
|
||||
Фон: белый (#FFFFFF)<br>
|
||||
Радиус: 12pt<br>
|
||||
Отступы: 16pt<br>
|
||||
Тень: средняя (shadow-md)
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
71
lab1/screen-forms/elements/list-item.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Элемент списка</title>
|
||||
<link rel="stylesheet" href="../common.css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-light);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.element-container {
|
||||
width: 335px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.element-description {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-medium);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="element-container">
|
||||
<h2 class="element-title">Элемент списка</h2>
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item-icon">📍</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Заголовок элемента</div>
|
||||
<div class="list-item-subtitle">Дополнительная информация</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-item">
|
||||
<div class="list-item-icon">🍄</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">Белый гриб</div>
|
||||
<div class="list-item-subtitle">Найден в 14:35</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="element-description">
|
||||
Высота иконки: 40×40pt<br>
|
||||
Заголовок: 17pt, полужирный<br>
|
||||
Подзаголовок: 14pt, серый<br>
|
||||
Отступы: 14pt вертикально, 16pt горизонтально
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
84
lab1/screen-forms/elements/navigation-bar.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Навигационная панель</title>
|
||||
<link rel="stylesheet" href="../common.css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-light);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.element-container {
|
||||
width: 375px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.element-description {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-medium);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="element-container">
|
||||
<h2 class="element-title">Навигационная панель</h2>
|
||||
|
||||
<div class="nav-container">
|
||||
<nav class="app-navigation" style="position: relative; bottom: 0;">
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">🗺️</span>
|
||||
<span class="nav-label">Маршрут</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">🧺</span>
|
||||
<span class="nav-label">Корзина</span>
|
||||
</button>
|
||||
<button class="nav-button nav-button-active">
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span class="nav-label">Главная</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">💬</span>
|
||||
<span class="nav-label">Чат</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">📖</span>
|
||||
<span class="nav-label">Справочник</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<p class="element-description">
|
||||
Высота: 72pt<br>
|
||||
5 кнопок: Маршрут, Корзина, Главная, Чат, Справочник<br>
|
||||
Активная вкладка: зелёный текст + подчёркивание<br>
|
||||
Иконки: 24pt, подписи: 11pt
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
89
lab1/screen-forms/elements/search-bar.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Поисковое поле</title>
|
||||
<link rel="stylesheet" href="../common.css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-light);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.element-container {
|
||||
width: 335px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
background: var(--color-bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
font-size: 20px;
|
||||
color: var(--color-text-medium);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: var(--font-size-base);
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text-dark);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--color-text-medium);
|
||||
}
|
||||
|
||||
.element-description {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-medium);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="element-container">
|
||||
<h2 class="element-title">Поисковое поле</h2>
|
||||
|
||||
<div class="search-bar">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input type="text" class="search-input" placeholder="Поиск гриба...">
|
||||
</div>
|
||||
|
||||
<p class="element-description">
|
||||
Высота: 48pt (минимальный размер касания)<br>
|
||||
Радиус: 12pt<br>
|
||||
Шрифт: 16pt<br>
|
||||
Тень: лёгкая (shadow-sm)
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
60
lab1/screen-forms/elements/sos-button.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Кнопка SOS</title>
|
||||
<link rel="stylesheet" href="../common.css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background: var(--color-bg-light);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.element-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.element-description {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-medium);
|
||||
text-align: center;
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="element-container">
|
||||
<h2 class="element-title">Кнопка SOS</h2>
|
||||
|
||||
<button class="sos-button">
|
||||
<span class="sos-icon">🆘</span>
|
||||
</button>
|
||||
|
||||
<p class="element-description">
|
||||
Размер: 80×80pt<br>
|
||||
Цвет: #C0392B (красный)<br>
|
||||
Обводка: 4pt белая<br>
|
||||
Анимация: пульсация
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
6
lab2/.gitignore
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
**/*
|
||||
!.gitignore
|
||||
!report.tex
|
||||
!img
|
||||
!img/**
|
||||
!*.dot
|
||||
BIN
lab2/img/almost-here.png
Normal file
|
After Width: | Height: | Size: 115 KiB |
BIN
lab2/img/create-project.png
Normal file
|
After Width: | Height: | Size: 96 KiB |
BIN
lab2/img/first-screen.png
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
lab2/img/labeling-page-export.png
Normal file
|
After Width: | Height: | Size: 131 KiB |
BIN
lab2/img/labeling-page-object.png
Normal file
|
After Width: | Height: | Size: 801 KiB |
BIN
lab2/img/labeling-page-submit.png
Normal file
|
After Width: | Height: | Size: 136 KiB |
BIN
lab2/img/labeling-page-tools.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
lab2/img/labeling-page.png
Normal file
|
After Width: | Height: | Size: 800 KiB |
BIN
lab2/img/login.png
Normal file
|
After Width: | Height: | Size: 245 KiB |
BIN
lab2/img/project-page-with-files.png
Normal file
|
After Width: | Height: | Size: 99 KiB |
BIN
lab2/img/project-page-with-images.png
Normal file
|
After Width: | Height: | Size: 118 KiB |
BIN
lab2/img/project-page.png
Normal file
|
After Width: | Height: | Size: 84 KiB |
BIN
lab2/img/project-settings.png
Normal file
|
After Width: | Height: | Size: 101 KiB |
BIN
lab2/img/registration.png
Normal file
|
After Width: | Height: | Size: 262 KiB |
BIN
lab2/img/signup.png
Normal file
|
After Width: | Height: | Size: 260 KiB |
BIN
lab2/img/template-settings-labels-added.png
Normal file
|
After Width: | Height: | Size: 777 KiB |
BIN
lab2/img/template-settings-labels-saved.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
lab2/img/template-settings-labels.png
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
lab2/img/template-settings.png
Normal file
|
After Width: | Height: | Size: 786 KiB |
BIN
lab2/img/templates-page.png
Normal file
|
After Width: | Height: | Size: 929 KiB |
BIN
lab2/img/upload-files-success.png
Normal file
|
After Width: | Height: | Size: 124 KiB |
BIN
lab2/img/upload-files.png
Normal file
|
After Width: | Height: | Size: 121 KiB |
561
lab2/report.tex
Normal file
@@ -0,0 +1,561 @@
|
||||
\documentclass[a4paper, final]{article}
|
||||
%\usepackage{literat} % Нормальные шрифты
|
||||
\usepackage[14pt]{extsizes} % для того чтобы задать нестандартный 14-ый размер шрифта
|
||||
\usepackage{tabularx}
|
||||
\usepackage{booktabs}
|
||||
\usepackage[T2A]{fontenc}
|
||||
\usepackage[utf8]{inputenc}
|
||||
\usepackage[russian]{babel}
|
||||
\usepackage{amsmath}
|
||||
\usepackage[left=25mm, top=20mm, right=20mm, bottom=20mm, footskip=10mm]{geometry}
|
||||
\usepackage{ragged2e} %для растягивания по ширине
|
||||
\usepackage{setspace} %для межстрочно го интервала
|
||||
\usepackage{moreverb} %для работы с листингами
|
||||
\usepackage{indentfirst} % для абзацного отступа
|
||||
\usepackage{moreverb} %для печати в листинге исходного кода программ
|
||||
\usepackage{pdfpages} %для вставки других pdf файлов
|
||||
\usepackage{tikz}
|
||||
\usepackage{graphicx}
|
||||
\usepackage{afterpage}
|
||||
\usepackage{longtable}
|
||||
\usepackage{float}
|
||||
\usepackage{xcolor}
|
||||
|
||||
|
||||
|
||||
% \usepackage[paper=A4,DIV=12]{typearea}
|
||||
\usepackage{pdflscape}
|
||||
% \usepackage{lscape}
|
||||
|
||||
\usepackage{array}
|
||||
\usepackage{multirow}
|
||||
|
||||
\renewcommand\verbatimtabsize{4\relax}
|
||||
\renewcommand\listingoffset{0.2em} %отступ от номеров строк в листинге
|
||||
\renewcommand{\arraystretch}{1.4} % изменяю высоту строки в таблице
|
||||
\usepackage[font=small, singlelinecheck=false, justification=centering, format=plain, labelsep=period]{caption} %для настройки заголовка таблицы
|
||||
\usepackage{subcaption} %для подфигур
|
||||
\usepackage{listings} %листинги
|
||||
\usepackage{xcolor} % цвета
|
||||
\usepackage{hyperref}% для гиперссылок
|
||||
\usepackage{enumitem} %для перечислений
|
||||
|
||||
\newcommand{\specialcell}[2][l]{\begin{tabular}[#1]{@{}l@{}}#2\end{tabular}}
|
||||
|
||||
|
||||
\setlist[enumerate,itemize]{leftmargin=1.2cm} %отступ в перечислениях
|
||||
|
||||
\hypersetup{colorlinks,
|
||||
allcolors=[RGB]{010 090 200}} %красивые гиперссылки (не красные)
|
||||
|
||||
% подгружаемые языки — подробнее в документации listings (это всё для листингов)
|
||||
\lstloadlanguages{ SQL}
|
||||
% включаем кириллицу и добавляем кое−какие опции
|
||||
\lstset{tabsize=2,
|
||||
breaklines,
|
||||
basicstyle=\footnotesize,
|
||||
columns=fullflexible,
|
||||
flexiblecolumns,
|
||||
numbers=left,
|
||||
numberstyle={\footnotesize},
|
||||
keywordstyle=\color{blue},
|
||||
inputencoding=cp1251,
|
||||
extendedchars=true
|
||||
}
|
||||
\lstdefinelanguage{MyC}{
|
||||
language=SQL,
|
||||
% ndkeywordstyle=\color{darkgray}\bfseries,
|
||||
% identifierstyle=\color{black},
|
||||
% morecomment=[n]{/**}{*/},
|
||||
% commentstyle=\color{blue}\ttfamily,
|
||||
% stringstyle=\color{red}\ttfamily,
|
||||
% morestring=[b]",\
|
||||
% showstringspaces=false,
|
||||
% morecomment=[l][\color{gray}]{//},
|
||||
keepspaces=true,
|
||||
escapechar=\%,
|
||||
texcl=true
|
||||
}
|
||||
|
||||
\textheight=24cm % высота текста
|
||||
\textwidth=16cm % ширина текста
|
||||
\oddsidemargin=0pt % отступ от левого края
|
||||
\topmargin=-1.5cm % отступ от верхнего края
|
||||
\parindent=24pt % абзацный отступ
|
||||
\parskip=5pt % интервал между абзацами
|
||||
\tolerance=2000 % терпимость к "жидким" строкам
|
||||
\flushbottom % выравнивание высоты страниц
|
||||
|
||||
|
||||
% Настройка листингов
|
||||
\lstset{
|
||||
language=python,
|
||||
extendedchars=\true,
|
||||
inputencoding=utf8,
|
||||
keepspaces=true,
|
||||
% captionpos=b, % подписи листингов снизу
|
||||
}
|
||||
|
||||
\begin{document} % начало документа
|
||||
|
||||
|
||||
|
||||
% НАЧАЛО ТИТУЛЬНОГО ЛИСТА
|
||||
\begin{center}
|
||||
\hfill \break
|
||||
\hfill \break
|
||||
\normalsize{МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ\\
|
||||
федеральное государственное автономное образовательное учреждение высшего образования «Санкт-Петербургский политехнический университет Петра Великого»\\[10pt]}
|
||||
\normalsize{Институт компьютерных наук и кибербезопасности}\\[10pt]
|
||||
\normalsize{Высшая школа технологий искусственного интеллекта}\\[10pt]
|
||||
\normalsize{Направление: 02.03.01 <<Математика и компьютерные науки>>}\\
|
||||
|
||||
\hfill \break
|
||||
\hfill \break
|
||||
\hfill \break
|
||||
\large{Лабораторная работа №2}\\
|
||||
\large{Рецензия пользовательского интерфейса LabelStudio}\\
|
||||
\large{по требованиям ГОСТ Р ИСО 9241}\\
|
||||
\large{по дисциплине}\\
|
||||
\large{<<Разработка человеко-машинного интерфейса>>}\\
|
||||
|
||||
\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}{Введение}
|
||||
|
||||
% Современные интерактивные программные продукты для проектирования интерфейсов, такие как Figma, активно используются как профессиональными дизайнерами, так и начинающими пользователями. При этом фактическая удобство использования (usability) таких инструментов не всегда явно соотносится с требованиями эргономических стандартов.
|
||||
|
||||
% Серия стандартов ГОСТ Р ИСО 9241 посвящена эргономике взаимодействия человек--система и включает как принципы организации диалога (ГОСТ Р ИСО 9241-110), так и требования к человеко-ориентированному проектированию интерактивных систем (ГОСТ Р ИСО 9241-210). В настоящем отчёте интерфейс системы Figma рассматривается с точки зрения соответствия этим стандартам, причём объектом анализа является \emph{сам интерфейс Figma}, а не качество создаваемого в нём дизайна мобильного приложения.
|
||||
|
||||
% В качестве исследуемого сценария выбрано типовое учебное задание для новичка: \emph{создать один простой экран мобильного приложения}. Анализируется, насколько легко или сложно новый пользователь может выполнить это задание в Figma, какие элементы интерфейса помогают, а какие затрудняют работу, и как это соотносится с установленными в ГОСТ требованиями к диалогу и процессу проектирования.
|
||||
|
||||
% Работа носит характер рецензии с опорой на личный опыт выполнения задания и систематическое сопоставление наблюдений с формулировками стандартов.
|
||||
|
||||
\newpage
|
||||
\section{Постановка задачи}
|
||||
В рамках данной работы необходимо ознакомиться со стандартом ГОСТ Р ИСО 9241, а также провести экспертный анализ человеко-машинного интерфейса программы LabelStudio.
|
||||
|
||||
|
||||
\newpage
|
||||
\section{ГОСТ Р ИСО 9241}
|
||||
|
||||
ГОСТ Р ИСО 9241 — это комплексный стандарт, появившийся в результате адаптации и
|
||||
обработки международного стандарта ISO 9241. Он посвящён человеко-машинному взаимодействию, каждая его часть посвященна отдельному аспекту проектирования и реализации человеко-машинного интерфейса. Комплекс стандартов содержит руководство по
|
||||
человеко-ориентированному проектированию интерактивных компьютерных систем.
|
||||
|
||||
ГОСТ Р ИСО 9241 устанавливает эргономические требования для офисных работ с применением видеодисплейных терминалов. Эргономическое проектирование повышает возможности пользователей ВДТ при работе с оборудованием, управляющим экраном дисплея: безопасно, без вреда для здоровья, производительно, эффективно и в комфортных условиях. Это достигается путем эргоориентированного проектирования ВДТ, рабочих мест и рабочего пространства, в котором используются ВДТ, и путем соответствующей организации, управления и выполнения работ с применением ВДТ. Практически за все эти обеспечивающие аспекты несут ответственность целый ряд всевозможных организаций и разнообразный персонал.
|
||||
|
||||
Стандарт предназначен для специалистов, разрабатывающих системы с человеко-машинным
|
||||
взаимодействием.
|
||||
|
||||
ГОСТ Р ИСО 9241 состит из следующих частей:
|
||||
\begin{itemize}
|
||||
\item Часть 1: Общее введение. Обзор и основные положения стандарта.
|
||||
|
||||
\item Часть 2: Руководство по формированию рабочих заданий. Проектирование рабочих заданий и рабочих мест, включающих работу с ВДТ.
|
||||
|
||||
\item Часть 3: Видеодисплейные терминалы. Проектирование экранов для ВДТ; предложения по проведению испытаний по определению эргопоказателей пользователей в качестве альтернативы направлению на выполнение требований технической документации.
|
||||
|
||||
\item Часть 4: Требования к клавиатуре. Эргономические аспекты проектирования алфавитноцифровой клавиатуры и предложения по проведению испытаний по определению эргопоказателей пользователей в качестве альтернативы направлению на выполнение требований технической документации.
|
||||
|
||||
\item Часть 5: Расположение рабочего места и требования к рабочей позе. Эргономические требования к рабочим местам с ВДТ, выполнение которых позволяет пользователям принимать комфортные и эффективные рабочие позы.
|
||||
|
||||
\item Часть 6: Требования к окружающей среде. Эргономические требования к окружающей рабочей среде при работе с ВДТ, устанавливаемые в целях предотвращения визуальных, акустических и термальных источников рабочей напряженности и дискомфорта и для стимуляции эффективности.
|
||||
|
||||
\item Часть 7: Требования к дисплеям с отражающими эффектами. Эргономические тре-
|
||||
бования к методам измерений (и их подробности) эффектов отражений от поверхности экранов дисплеев, включая экраны, подвергшиеся специальной обработке.
|
||||
|
||||
\item Часть 8: Требования к цветным дисплеям. Эргономические требования к цветным дисплеям, которые дополняют требования стандарта ИСО 9241-3 к монохроматическим дисплеям и предложения по проведению испытаний по определению эргопоказателей пользователей.
|
||||
|
||||
\item Часть 9: Требования к устройствам бесклавиатурного ввода. Эргономические тре-
|
||||
бования к устройствам бесклавиатурного ввода, которые могут быть использованы совместно с ВДТ.
|
||||
|
||||
\item Часть 10: Принципы диалога. Семь эргономических принципов, важных для проектирования и оценки диалога между человеком и информационной системой.
|
||||
|
||||
\item Часть 11: Руководство по пригодности. Пригодность и идентификация информации, необходимой для определения или оценки эргономической пригодности.
|
||||
|
||||
\item Часть 12: Представление информации. Принципы и рекомендации по представлению имеющейся и отображаемой на ВДТ информации, включая руководство по возможностям представления сложной информации, в виде буквенно-цифровых и графических/символьных кодов, экранное размещение и дизайн, а также использование окон.
|
||||
|
||||
\item Часть 13: Руководство пользователя. Рекомендации по проектированию и оценке руководящих материалов по программному обеспечению интерфейса пользователя.
|
||||
|
||||
\item Часть 14: Диалоговое меню. Эргономическое проектирование меню диалогов пользователя с вычислительной машиной, включая системное меню, меню навигации, меню выбора опций и выполнения команд, меню представления информации различного вида.
|
||||
|
||||
\item Часть 15: Диалоги управления. Эргономическое проектирование языка команд, используемого в диалогах пользователя с компьютером, включая системный командный язык и команды синтаксиса, команды представления данных, анализа входных и выходных данных, обратной связи и выдачи справок.
|
||||
|
||||
\item Часть 16: Диалоги прямого управления. Эргономическое проектирование диалогов прямого управления, включая управление программными компонентами и проектированием моделей, структур данных и их свойств.
|
||||
|
||||
\item Часть 17: Диалоги наполнения данными экранных форм. Эргономическое проектирование диалогов заполнения экранных форм, включая рассмотрение структуры форм, анализ входных и выходных данных и навигацию форм.
|
||||
\end{itemize}
|
||||
|
||||
В данной лабораторной будут использованы части 10, 12, 14, 15, 17.
|
||||
|
||||
\newpage
|
||||
\section{Тип пользователя и уровень подготовки}
|
||||
|
||||
В рамках данной работы рассматривается \textbf{пользователь-новичок}:
|
||||
|
||||
\begin{itemize}
|
||||
\item ранее не работал с Label Studio;
|
||||
\item обладает базовыми навыками работы с компьютером, браузером и офисными программами;
|
||||
\item знает общие понятия в разметке данных, такие как ограничивающий прямоугольник (bounding box), полигональная разметка (polygon annotation), классификация (classification), сегментация (segmentation) и т. д., но не знаком со специфичными для Label Studio понятиями.
|
||||
\end{itemize}
|
||||
|
||||
|
||||
\section{Задание для пользователя}
|
||||
|
||||
Задание для пользователя формулируется следующим образом:
|
||||
|
||||
\begin{quote}
|
||||
«На фотографиях городских улиц выделить автомобильные светофоры с помощью прямоугольных оболочек (bounding boxes). Оболочки задаются координатами в пространстве устройства (в пикселях) и ориентированы параллельно осям изображения. Количество оболочек на одном изображении не ограничено. Прямоугольные оболочки могут пересекаться и быть вложенными друг в друга. Результаты разметки выгрузить в формате JSON».
|
||||
\end{quote}
|
||||
|
||||
Результатом выполнения задания считается наличие JSON файла с координатами оболочек.
|
||||
|
||||
|
||||
\newpage
|
||||
\section{Сценарий выполнения задания в Label Studio}
|
||||
|
||||
В таблице ниже представлен сценарий действий пользователя-новичка для выполнения задания в Label Studio. Сценарий будет использоваться как основа для анализа соответствия интерфейса Label Studio требованиям ГОСТ Р ИСО 9241.
|
||||
|
||||
\begin{table}[h!]
|
||||
\caption{Пошаговый сценарий выполнения задания в Label Studio}
|
||||
\centering
|
||||
\small
|
||||
\begin{tabular}{|c|p{12cm}|}
|
||||
\hline
|
||||
\textbf{№} & \textbf{Действие} \\ \hline
|
||||
|
||||
1 & Открыть Label Studio. \\ \hline
|
||||
|
||||
2 & Создать новый проект и указать его название - «Разметка светофоров». \\ \hline
|
||||
|
||||
3 & Загрузить 4 исходных изображения со светофорами. \\ \hline
|
||||
|
||||
4 & Ознакомиться с интерфейсом проекта: панель задач, область разметки, панель меток и основные кнопки управления. \\ \hline
|
||||
|
||||
5 & Открыть настройки проекта и выбрать тип разметки, основанный на использовании ограничивающих прямоугольников. \\ \hline
|
||||
|
||||
6 & В конфигурации разметки указать единственный класс — «Светофор». \\ \hline
|
||||
|
||||
7 & Перейти к первому изображению и изучить инструменты разметки (инструмент прямоугольника, кнопка сохранения, переключение задач). \\ \hline
|
||||
|
||||
8 & Для каждого изображения выделить объекты «Светофор» с помощью ограничивающих прямоугольников. \\ \hline
|
||||
|
||||
9 & Сохранить результаты для всех изображений. \\ \hline
|
||||
|
||||
10 & Перейти в меню экспорта и выгрузить результаты разметки в формате JSON. \\ \hline
|
||||
|
||||
\end{tabular}
|
||||
\end{table}
|
||||
|
||||
|
||||
\newpage
|
||||
\section{Выполнение задания в Label Studio}
|
||||
|
||||
\subsection*{Шаг 1. Открыть Label Studio и зарегистрироваться}
|
||||
|
||||
После открытия Label Studio перед пользователем-новичком появляется страница для входа в систему (см. Рис.~\ref{login}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/login.png}
|
||||
\caption{Страница входа в систему}
|
||||
\label{login}
|
||||
\end{figure}
|
||||
|
||||
\newpage
|
||||
У меня как у пользователя-новичка ещё нету аккаунта в системе, а кнопки для анонимной работы не наблюдается, поэтому придётся зарегистрироваться.
|
||||
Для того, чтобы зарегистрироваться, пользователь-новичок нажимает на кнопку "Sign up" ("Зарегистрироваться"), после чего откроется страница для регистрации (см. Рис.~\ref{signup}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/signup.png}
|
||||
\caption{Страница регистрации}
|
||||
\label{signup}
|
||||
\end{figure}
|
||||
|
||||
Далее пользователь-новичёк вводит адрес электронной почты и пароль, после чего нажимает на кнопку "Create account" ("Создать аккаунт"). Это вполне привычная процедура, присущая большинству современных сервисов. После чего появляется стартовая страница (см. Рис.~\ref{first-screen}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/first-screen.png}
|
||||
\caption{Стартовая страница}
|
||||
\label{first-screen}
|
||||
\end{figure}
|
||||
|
||||
Кнопку регистрации нашёл легко. Однако при вводе пароля возникли сложности: система не показывала требования к паролю заранее, и пришлось несколько раз подбирать подходящий вариант.
|
||||
|
||||
\subsection*{Шаг 2. Создать новый проект и указать его название}
|
||||
|
||||
После успешной регистрации, перед пользователем автоматически открывается стартовая страница (см. Рис.~\ref{first-screen}) с большой синей кнопкой "Create project" ("Создать проект"). Я, как пользователь-новичёк, догадался, что чтобы начать разметку нужно создать проект в системе. Для этого я нажал на кнопку "Create project" ("Создать проект"). После чего открылась страница для создания проекта (см. Рис.~\ref{create-project}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/create-project.png}
|
||||
\caption{Страница создания проекта}
|
||||
\label{create-project}
|
||||
\end{figure}
|
||||
|
||||
На этой странице я указал название проекта в поле "Project name" ("Название проекта") и нажал на кнопку "Save" ("Сохранить"). После чего я автоматически попал на страницу проекта (см. Рис.~\ref{project-page}). Несмотря на то, что весь интерфейс системы представлен на английском, название проекта удалось указать на русском языке.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/project-page.png}
|
||||
\caption{Страница проекта}
|
||||
\label{project-page}
|
||||
\end{figure}
|
||||
|
||||
Создание проекта прошло быстро. Понравилось, что достаточно ввести только название и нажать одну кнопку.
|
||||
|
||||
\newpage
|
||||
\subsection*{Шаг 3. Загрузить исходные изображения со светофорами}
|
||||
|
||||
После создания проекта автоматически открылась страница проекта (см. Рис.~\ref{project-page}). Название проекта отображается в верхней части страницы. По центру экрана отображается надпись <<Import data to get your project started>>, что означает <<Импортируйте данные, чтобы начать проект>>. Я, как пользователь-новичёк, догадался, что на этом этапе можно загрузить исходные изображения. На экране также видно две больших кнопки <<Connect Cloud Storage>> (<<Подключить облачное хранилище>>) и <<Import>> (<<Импортировать>>). Мои файлы с изображениями хранятся в папке на моём компьютере, а значит работа с облачным хранилищем мне не подойдёт. Поэтому далее я нажал на кнопку <<Import>> (<<Импортировать>>). После чего открылась страница для загрузки файлов (см. Рис.~\ref{upload-files}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/upload-files.png}
|
||||
\caption{Страница загрузки файлов}
|
||||
\label{upload-files}
|
||||
\end{figure}
|
||||
|
||||
По центру открывшейся страницы видна надпись <<Dgag \& drop files here or click to browse>>, что означает <<Перетащите файлы сюда или нажмите для выбора файлов>>. Далее я просто открыл папку со своими изображениями в соседнем окне Windows, выделил нужные файлы и перетащил мышкой на надпись <<Dgag \& drop files here or click to browse>>. Это привычная для современного пользователя техника. Выбранные файлы отобразились списком на экране, справа от каждого файла появилась полоска загрузки. После завершения загрузки полоска стала зелёной (см. Рис.~\ref{upload-files-success}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/upload-files-success.png}
|
||||
\caption{Страница загрузки после указания файлов}
|
||||
\label{upload-files-success}
|
||||
\end{figure}
|
||||
|
||||
\newpage
|
||||
В правом верхнем углу этой страницы видно две кнопки <<Cancel>> (<<Отмена>>) и <<Import>> (<<Импортировать>>). Отменять загрузку я не планировал, поэтому нажал на кнопку <<Import>> (<<Импортировать>>). После этого автоматически открылась страница проекта, но теперь на ней отображается список из 4-х элементов, которые судя по всему, являются моими загруженными файлами (см. Рис.~\ref{project-page}). Хотелось бы увидеть миниатюры изображений, чтобы было понятно, что за файлы загружены, но пока видны только названия файлов и их идентификаторы.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/project-page-with-files.png}
|
||||
\caption{Страница проекта после загрузки файлов}
|
||||
\label{project-page-with-files}
|
||||
\end{figure}
|
||||
|
||||
Понравился прогресс-бар загрузки и зелёная полоска успешного завершения, понятно, что файлы загружаются и понятно, когда они полностью загружены. Сразу видно, какие форматы поддерживаются. Не понравилось, что нельзя удалить отдельный файл из списка --- только сбросить всё и начать заново.
|
||||
|
||||
\newpage
|
||||
\subsection*{Шаг 4. Открыть настройки проекта и выбрать тип разметки}
|
||||
|
||||
После того, как файлы загружены, автоматически открывается страница проекта (см. Рис.~\ref{project-page-with-files}). Теперь я, как пользователь-новичёк, попробовал нажать на первый элемент из списка на экране, чтобы приступить к разметке. Я ожидал, что откроется страница с моей картинкой, но вместо этого появилось окошко с заголовком <<You're almost there>> (см. Рис.~\ref{almost-here}) и подписью <<Before you can annotate the data, set up labeling configuration>>, что означает <<Перед тем, как начать разметку данных, настройте конфигурацию разметки>>. Хоть я и первый раз работал в этой программе, но у меня есть понимание того, что существуют разные типы разметки для разных задач машинного обучения, и скорее всего именно тип разметки и нужно указать, потому что система никак не могла его угадать. На этом же окошке есть две кнопки <<Cancel>> (<<Отмена>>) и <<Go to setup>> (<<Настроить>>). Я нажал на кнопку <<Go to setup>> (<<Настроить>>), после чего открылась страница с настройками разметки (см. Рис.~\ref{templates-page}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/almost-here.png}
|
||||
\caption{Вместо моей картинки появилось окошко с заголовком <<You're almost there>>.}
|
||||
\label{almost-here}
|
||||
\end{figure}
|
||||
|
||||
|
||||
Открывшаяся страница сначала немного меня смутила (см. Рис.~\ref{templates-page}), потому что на ней отображается очень много элементов с разными картинками, но не с теми, которые я самостоятельно загружал. Однако я достаточно быстро смог соориентироваться и понять, что эти изображения действительно не мои, а являются лишь иллюстрациями к разным типам разметки. Например, первая картинка, на которой изображены, судя по всему, ноги спортсменов, иллюстрирует тип разметки для задач семантической сегментации изображений с помощью полигонов. В этом также можно убедиться, если прочитать надпись под этой картинкой: <<Semantic segmentation with Polygons>>. В меню слева можно увидеть разные категории для разных типов разметки: <<Computer Vision>> (<<Компьютерное зрение>>), <<Natural Language Processing>> (<<Обработка естественного языка>>), <<Audio/Speech Processing>> (<<Обработка аудио/голоса>>) и так далее.
|
||||
|
||||
Хоть я и являюсь пользователем-новичком, однако у меня есть понимание, что моя задача с разметкой изображений, относится к области задач компьютерного зрения, именно эта категория выбрана в меню слева, а значит в этом меню я могу ничего не менять. Осталось найти разметку ограничивающими прямоугольниками, на английском она называется <<Object Detection with Bounding Boxes>> (<<Обнаружение объектов с ограничивающими прямоугольниками>>), именно такому типу разметки соответствует третья карточка в списке с изображением биологических клеток (см. Рис.~\ref{templates-page}). Именно на эту карточку я и нажал, на рисунке~\ref{templates-page} видно, что она выделена синей рамкой.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/templates-page.png}
|
||||
\caption{Страница с типами разметки}
|
||||
\label{templates-page}
|
||||
\end{figure}
|
||||
|
||||
Нужный шаблон нашёлся сразу на первой странице. Однако страница с выбором типов разметки сильно нагружена, представлено большое число различных типов для различных задач машинного обучения. Это может запутать пользователя-новичка.
|
||||
|
||||
\subsection*{Шаг 5. В конфигурации разметки указать единственный класс — «Светофор»}
|
||||
|
||||
После выбора типа разметки автоматически открывается страница с настройками типа разметки (см. Рис.~\ref{template-settings}). На ней снова отображается не то изображение, которое я загружал ранее, что путает пользователя-новичка. Однако, после более внимательного ознакомления со страницей, я понял, что это снова лишь иллюстрация того, как будет выглядеть разметка. Над картинкой с самолётами выведена надпись <<UI Preview>> (<<Предварительный просмотр>>).
|
||||
|
||||
Также в левой части экрана есть раздел <<Labels>> (<<Классы>>), в котором виден список классов. После выбора типа разметки, система автоматически, судя по всему в качестве иллюстрации, добавила два класса <<Airplane>> (<<Самолёт>>) и <<Car>> (<<Машина>>). Хоть я и являюсь пользователем новичком, но знаю, что разметка ограничивающими прямоугольниками подразумевает присвоение какого-либо класса каждому такому прямоугольнику. В задаче, которую я перед собой поставил, меня интересует только один класс прямоугольников - <<Светофоры>>. А значит мне нужно каким-то образом удалить созданные автоматически классы <<Airplane>> (<<Самолёт>>) и <<Car>> (<<Машина>>) и добавить свой класс - <<Светофор>>.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/template-settings.png}
|
||||
\caption{Страница с настройками типа разметки}
|
||||
\label{template-settings}
|
||||
\end{figure}
|
||||
|
||||
Чтобы удалить ненужные классы я попробовал навести мышку на название класса <<Car>> (<<Машина>>). Рядом с ним появилась красная иконка с мусорной корзиной (см. Рис.~\ref{template-settings-labels}). Я нажал на неё и класс <<Car>> (<<Машина>>) удалился. Я проделал аналогичную операцию с классом <<Airplane>> (<<Самолёт>>).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.4\linewidth]{img/template-settings-labels.png}
|
||||
\caption{Удаление ненужных классов, созданных по умолчанию}
|
||||
\label{template-settings-labels}
|
||||
\end{figure}
|
||||
|
||||
\newpage
|
||||
Автоматически созданные классы удалены, осталось добавить свой класс - <<Светофор>>. Для этого я ввёл слово <<Светофор>> в поле <<Add label names>> и нажал на кнопку <<Add>> (<<Добавить>>). Ожидаемо класс <<Светофор>> появился в разделе <<Labels>> (<<Классы>>) (см. Рис.~\ref{template-settings-labels-added}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/template-settings-labels-added.png}
|
||||
\caption{Добавление класса светофор}
|
||||
\label{template-settings-labels-added}
|
||||
\end{figure}
|
||||
|
||||
Теперь я разобрался с классами, сходу не ясно, что делать дальше. Однако, если присмотреться, то внизу по центру страницы расположена крупная кнопка <<Save>> ("Сохранить"). Я ещё помню, что всё это время мы настраивали тип разметки, вероятно эта кнопка отвечает за сохранение тех настроек, что я сделал. До этого я выбирал тип разметки с ограничивающими прямоугольниками и указывал нужный мне класс <<Светофор>>. Нажимаю на кнопку <<Save>> (<<Сохранить>>). Рядом с кнопкой сохранения появилась зелёная надпись <<Saved!>> ("Сохранено!") (см. Рис.~\ref{template-settings-labels-saved}), в подтверждение того, что настройки разметки были сохранены успешно, а затем автоматически открылась основная страница проекта (см. Рис.~\ref{project-page-with-images}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.3\linewidth]{img/template-settings-labels-saved.png}
|
||||
\caption{Рядом с кнопкой сохранения появилась зелёная надпись <<Saved!>> ("Сохранено!") в подтверждение того, что настройки были сохранены успешно}
|
||||
\label{template-settings-labels-saved}
|
||||
\end{figure}
|
||||
|
||||
|
||||
\subsection*{Шаг 6. Перейти к первому изображению и изучить инструменты разметки}
|
||||
|
||||
Снова автоматически открылась уже знакомая основная страница проекта со списком (см. Рис.~\ref{project-page-with-images}). Но теперь у каждого элемента списка отображается миниатюрная версия с изображениями, которые я сам загружал. Снова попробую наконец приступить к разметке, нажимаю левой кнопкой мыши на одну из своих картинок.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/project-page-with-images.png}
|
||||
\caption{Список файлов на странице проекта}
|
||||
\label{project-page-with-images}
|
||||
\end{figure}
|
||||
|
||||
После нажатия открывается страница разметки (см. Рис.~\ref{labeling-page}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/labeling-page.png}
|
||||
\caption{Страница разметки}
|
||||
\label{labeling-page}
|
||||
\end{figure}
|
||||
|
||||
На этой странице выводится само изображение, наш единственный класс <<Светофор>>. Слева выводится список изображений, которые мы загрузили ранее. Справа небольшой набор инструментов для приближения, отдаления и перемещения по картинке, при наведении на эти инструменты появляется подсказка с пояснением (см. Рис.~\ref{labeling-page-tools}).
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.5\linewidth]{img/labeling-page-tools.png}
|
||||
\caption{Инструменты разметки с подсказками. <<Zoom In>> переводится как <<Приблизить>>. }
|
||||
\label{labeling-page-tools}
|
||||
\end{figure}
|
||||
|
||||
В правом нижнем углу расположена кнопка <<Submit>> ("Сохранить").
|
||||
|
||||
Понравились всплывающие подсказки при наведении на инструменты. Интерфейс не перегружен, всё необходимое под рукой. Не хватает кнопки отмены для сброса разметки без сохранения.
|
||||
|
||||
\newpage
|
||||
\subsection*{Шаг 7. Для каждого изображения выделить объекты «Светофор» с помощью ограничивающих прямоугольников}
|
||||
|
||||
Теперь я как пользователь-новичёк пробую нарисовать ограничивающий прямоугольник вокруг светофора на моём изображении. Как видно на рисунке~\ref{labeling-page-object}, вокруг светофора появляется нужный мне ограничивающий прямоугольник.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/labeling-page-object.png}
|
||||
\caption{Выделение светофора с помощью ограничивающего прямоугольника}
|
||||
\label{labeling-page-object}
|
||||
\end{figure}
|
||||
|
||||
|
||||
Как я уже заметил на предыдущем шаге, на панели слева выводится список загруженных изображений. С его помощью можно переключаться между ними. Остальные изображения размечаются аналогичным образом.
|
||||
|
||||
\subsection*{Шаг 8. Сохранить результаты для всех изображений}
|
||||
|
||||
После того, как все изображения размечены, я нажал на кнопку <<Submit>> ("Сохранить"), она выделена синим цветом и его предназначение интуитивно ясно. После этого автоматически открылась страница со списком изображений. Слева у каждого изображения появилась галочка, которая подтверждает, что изображение размечено.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=1\linewidth]{img/labeling-page-submit.png}
|
||||
\caption{Страница со списком изображений после сохранения}
|
||||
\label{labeling-page-submit}
|
||||
\end{figure}
|
||||
|
||||
\newpage
|
||||
\subsection*{Шаг 9. Выгрузить результаты разметки в формате JSON}
|
||||
|
||||
Теперь мне нужно выгрузить результаты моей работы в формате JSON. Для этого я нажал на кнопку <<Export>> ("Экспорт") в правом верхнем углу страницы. После этого открылось окно с выбором формата выгрузки. В списке есть нужный мне JSON, именно его я и выбрал, а затем нажал на кнопку <<Export>> ("Экспорт") (см. Рис.~\ref{labeling-page-export}). В открывшемся окне проводника выбрал папку для сохранения файла.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.5\linewidth]{img/labeling-page-export.png}
|
||||
\caption{Окно с выбором формата выгрузки}
|
||||
\label{labeling-page-export}
|
||||
\end{figure}
|
||||
|
||||
Экспорт прошёл без проблем. Не хватило уведомления об успешном сохранении файла --- пришлось вручную проверять, что файл появился в папке.
|
||||
|
||||
\newpage
|
||||
\section{Рецензия}
|
||||
|
||||
В целом система произвела позитивное впечатление. Даже будучи новым пользователем, ранее не работавшим с Label Studio, я смог достаточно быстро выполнить все шаги задания. Интерфейс в большинстве случаев интуитивен.
|
||||
|
||||
Понравилось, что создание проекта требует минимум действий. Загрузка файлов сопровождается прогресс-баром и индикатором успешного завершения. Шаблоны разметки удобно организованы, нужный вариант нашёлся сразу. Инструменты разметки снабжены всплывающими подсказками, что помогает быстро освоиться. Галочки у размеченных изображений наглядно показывают прогресс работы.
|
||||
|
||||
Не понравилось отсутствие русского языка в интерфейсе. При регистрации система не показывает требования к паролю заранее. Нельзя удалить отдельный файл из списка загружаемых. В настройках шаблона нет функции отмены последнего действия. На странице настроек шаблона всегда отображается пример с самолётом, а не загруженные пользователем изображения, что сбивает с толку. На странице разметки отсутствует кнопка для сброса всех изменений. После экспорта нет уведомления об успешном сохранении файла.
|
||||
|
||||
Несмотря на отдельные недостатки, система удобна и подходит для работы даже пользователю-новичку.
|
||||
|
||||
\newpage
|
||||
\section{Анализ соответствия интерфейса требованиям ГОСТ Р ИСО 9241-110}
|
||||
|
||||
Интерфейс Label Studio был проанализирован на соответствие требованиям ГОСТ Р ИСО 9241-110 <<Эргономика взаимодействия человек-система. Принципы организации диалога>>.
|
||||
|
||||
\textbf{Пригодность для решения задачи.} Система в целом соответствует требованиям данного раздела. После регистрации появляется страница с надписью <<Welcome>>, что соответствует пункту 4.3.1 о предоставлении информации об успешном завершении задания. Этапы диалога при создании проекта сведены к минимуму (пункт 4.3.5). Формат вывода при экспорте соответствует задаче --- сразу предлагается JSON (пункт 4.3.3). Однако система не предлагает типовых значений по умолчанию для проекта, что не соответствует пункту 4.3.4.
|
||||
|
||||
\textbf{Самоописываемость.} Система частично соответствует требованиям. На странице загрузки файлов отображается список поддерживаемых форматов (пункт 4.4.4). В процессе загрузки показывается прогресс-бар (пункт 4.4.1). Окно экспорта содержит понятные элементы управления. Однако при регистрации не отображаются требования к паролю, что нарушает пункт 4.4.4.
|
||||
|
||||
\textbf{Соответствие ожиданиям пользователя.} Выявлено существенное несоответствие пункту 4.5.5: весь интерфейс представлен на английском языке, несмотря на русскоязычные настройки браузера. Терминология на странице шаблонов понятна специалистам (пункт 4.5.1). Обратная связь при сохранении соответствует ожиданиям (пункт 4.5.2).
|
||||
|
||||
\textbf{Пригодность для обучения.} Система хорошо поддерживает обучение. При наведении на инструменты появляются всплывающие подсказки (пункт 4.6.3). Активный инструмент визуально выделяется, границы прямоугольника отображаются в процессе рисования (пункт 4.6.4).
|
||||
|
||||
\textbf{Управляемость.} Темп взаимодействия определяется пользователем, автоматические переключения отсутствуют (пункт 4.7.1). На странице создания проекта есть кнопка <<Cancel>> (пункт 4.7.2). После перезапуска состояние разметки сохраняется (пункт 4.7.3). Однако в нескольких местах нарушен пункт 4.7.2: нельзя удалить отдельный файл из списка загружаемых, отсутствует кнопка отмены в интерфейсе разметки. Также нарушен пункт 4.7.4: в настройках шаблона нет функции отмены последнего действия.
|
||||
|
||||
\textbf{Устойчивость к ошибкам.} При неправильном заполнении поля email система подсвечивает ошибку (пункт 4.8.3). Однако выявлены несоответствия: система не предупреждает о возможных ограничениях при загрузке файлов (пункт 4.8.2), не выводит предупреждение при попытке закрыть страницу с несохранёнными данными (пункт 4.8.10), позволяет сохранить разметку без аннотаций (пункт 4.8.8).
|
||||
|
||||
\newpage
|
||||
\section*{Заключение}
|
||||
\addcontentsline{toc}{section}{Заключение}
|
||||
В ходе работы был проведён анализ соответствия интерфейса Label Studio требованиям ГОСТ Р ИСО 9241-110 и ГОСТ Р ИСО 9241-210 на примере выполнения простого задания по разметке изображений bounding box-ами пользователем-новичком. В целом система продемонстрировала хорошую пригодность к задаче: базовые шаги — создание проекта, настройка разметки, работа с инструментами и экспорт результатов — выполняются интуитивно, а интерфейс предоставляет необходимую обратную связь и не перегружен лишними действиями.
|
||||
|
||||
При этом были отмечены и отдельные несоответствия, наиболее значимые из которых связаны с отсутствием русскоязычной локализации и ограниченной контролируемостью некоторых действий (ограниченные варианты отмены, отсутствие альтернативных путей продолжения диалога). Несмотря на эти недостатки, Label Studio в целом подходит для использования начинающими пользователями, а устранение выявленных проблем могло бы существенно повысить эргономичность системы.
|
||||
|
||||
\newpage
|
||||
\begin{thebibliography}{9}
|
||||
|
||||
\bibitem{gost1}
|
||||
ГОСТ Р ИСО 9241-1--2007. Эргономические требования к проведению офисных работ с использованием видеодисплейных терминалов (VDTs). Часть 1. Общее введение. -- Введ. 2008-06-01. -- М.: Стандартинформ, 2008. -- 20~с.
|
||||
|
||||
\bibitem{gost110}
|
||||
ГОСТ Р ИСО 9241-110--2016. Эргономика взаимодействия человек--система. Часть 110. Принципы организации диалога. -- Введ. 2017-12-01. -- М.: Стандартинформ, 2016. -- 23~с.
|
||||
|
||||
\bibitem{gost210}
|
||||
ГОСТ Р ИСО 9241-210--2016. Эргономика взаимодействия человек--система. Часть 210. Человеко-ориентированное проектирование интерактивных систем. -- Введ. 2017-12-01. -- М.: Стандартинформ, 2016. -- 29~с.
|
||||
|
||||
\end{thebibliography}
|
||||
|
||||
|
||||
|
||||
\end{document}
|
||||