65 lines
5.6 KiB
TeX
65 lines
5.6 KiB
TeX
\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}
|
||
|