\documentclass{article}

\input{../common-preamble}
\input{../bmstu-preamble}
\setcounter{secnumdepth}{0}

\begin{document}
\thispagestyle{empty}
\makeBMSTUHeader

\makeReportTitle{лабораторной}{4}{Проектирование интерфейсов интерфейсов}{Протоколы и интерфейсы информационных систем}{}{Большаков В.Э.}
\newpage
\thispagestyle{empty}
\tableofcontents
\newpage
\section{Цель}
Целью работы является получение опыта проектирования интерфейсов. Для достижения цели были поставлены следующие задачи:
\begin{enumerate}
\item Используя сервис ninjamock (https://ninjamock.com) или аналоги спроектировать интерфейс для веб-сайта в соответствии с вариантом по списку группы.
\item При создании эскизов учесть все особенности, усвоенные на предыдущих лабораторных работах.
\item Подготовить не мене трех различных страниц одного веб-сайта.
\end{enumerate}
В работе было выполнено задание по варианту 11 (1) - видеохостинг для мобильного устройства.
\section{Выполнение}
\subsection{Главная страница}
На главной странице (рис. \hyperref[pic:main]{\ref{pic:main}}) важно дать пользователю доступ к наиболее часто используемому содержимому конкретного пользователя, также важно дать возможность быстрого поиска по всему архиву видео. В верхней части располагается сложенное меню и строка поиска, далее вниху сразу расположены рекомендованные пользователю видео. При нажатии на меню (рис. \hyperref[pic:menu]{\ref{pic:menu}}), поверх главного экрана разворачивается список страниц, доступных пользователю.
\begin{figure}[H]
  \centering
  \begin{multicols}{2}
  \includegraphics[width=8cm]{01-isip-lab-04-main.png}
  \caption{Главная страница}
  \label{pic:main}
    \columnbreak
  \includegraphics[width=8cm]{01-isip-lab-04-menu.png}
  \caption{Меню пользователя}
  \label{pic:menu}
  \end{multicols}
\end{figure}

\subsection{Добавление видео}
На экране добавления нового видео (рис. \hyperref[pic:upload]{\ref{pic:upload}}) важна область предпросмотра, кнопка загрузки нового видео и возможность добавить к видео метаинформацию (название, описание, и так далее). Также на экране загрузки, возможно, будет полезен перечень уже загруженных видео, чтобы не загружать дубликаты.

\begin{figure}[H]
  \centering
  \includegraphics[width=8cm]{01-isip-lab-04-upload.png}
  \caption{Экран загрузки нового видео}
  \label{pic:upload}
\end{figure}

\subsection{Промотр профиля}
На экране просмотра профиля (рис. \hyperref[pic:profile]{\ref{pic:profile}}) отображаются изображение профиля (аватар пользователя), находятся элементы управления профилем, такие как возможность изменить настройки, информацию и управлять своими загруженными видеозаписями. Также внизу экрана находятся область для быстрого доступа к двум категориям видео - избранное видео пользователя и загруженное видео пользователя.


\begin{figure}[H]
  \centering
  \includegraphics[width=8cm]{01-isip-lab-04-profile.png}
  \caption{Экран просмотра профиля пользователя}
  \label{pic:profile}
\end{figure}

\section{Выводы}
Проектирование интерфейсов - это важная часть разработки сервисов для пользователя. Проектирование позволяет избежать большого количества ошибок на этапе разработки и создать более удобный для пользователя интерфейс. В данной работе был разработан мобильный интерфейс для видеохостинга. Данный интерфейс учитывает все изученные ранее особенности построения интерфейсов и в значительной степени повторяет существующие интерфейсы популярных видеохостингов. Особенностью данного интерфейса является его минималистичный дизайн и возможность быстрого доступа пользователя к основной функциональности сервиса.
\end{document}