95 lines
6.8 KiB
TeX
95 lines
6.8 KiB
TeX
|
\documentclass{article}
|
|||
|
|
|
|||
|
|
\input{../common-preamble}
|
|||
|
|
\input{../bmstu-preamble}
|
|||
|
|
\setcounter{secnumdepth}{0}
|
|||
|
|
|
|||
|
|
\begin{document}
|
|||
|
|
\thispagestyle{empty}
|
|||
|
|
\makeBMSTUHeader
|
|||
|
|
|
|||
|
|
\makeReportTitle{лабораторной}{3}{Эскизирование интерфейсов}{Протоколы и интерфейсы информационных систем}{}{Большаков В.Э.}
|
|||
|
|
\newpage
|
|||
|
|
\thispagestyle{empty}
|
|||
|
|
\tableofcontents
|
|||
|
|
\newpage
|
|||
|
|
\section{Упражнение 12}
|
|||
|
|
\textbf{* Нарисовать карандашом алфавиты эскизов физических и виртуальных объектов.}
|
|||
|
|
|
|||
|
|
Алфавиты физичеких (рис. \hyperref[pic:phys]{\ref{pic:phys}}) и виртуальных (рис. \hyperref[pic:virt]{\ref{pic:virt}}) объектов применяются для однозначного обозначения физических объектов и для единообразного обозначения виртуальных объектов для снижения визуального шума интерфейса.
|
|||
|
|
\begin{figure}[H]
|
|||
|
|
\begin{multicols}{2}
|
|||
|
|
\includegraphics[width=8cm]{01-isip-lab-03-5195.JPG}
|
|||
|
|
\caption{Алфавит физических объектов}
|
|||
|
|
\label{pic:phys}
|
|||
|
|
\columnbreak
|
|||
|
|
\includegraphics[width=8cm]{01-isip-lab-03-5196.JPG}
|
|||
|
|
\caption{Алфавит виртуальных объектов}
|
|||
|
|
\label{pic:virt}
|
|||
|
|
\end{multicols}
|
|||
|
|
\end{figure}
|
|||
|
|
|
|||
|
|
\newpage
|
|||
|
|
\section{Упражнение 13}
|
|||
|
|
\textbf{* Найти в интернете пять новых интерфейсов веб-сайтов и сделать эскизы. Для первого эскиза сделать заметки для элементов интерфейса. Для последнего интерфейса сделать эскиз по памяти, не смотря на интерфейс.}
|
|||
|
|
|
|||
|
|
Для создания эскиза (рис. \hyperref[pic:onfly]{\ref{pic:onfly}}) был выбран сайт foxford.ru (портал для обучения детей и педагогов). Слева в основной области внимания представлено главное меню, включающее ссылку на вход в личный кабинет, поисковую строку и основные разделы портала. Основная страница поделена на горизонтальные секции с основными направлениями деятельности, помощи, описанием форм обучения, фото преподавателей и так далее. Внизу страницы расположена секция с отзывами людей, прошедших обучение на портале.
|
|||
|
|
\begin{figure}[H]
|
|||
|
|
\centering
|
|||
|
|
\includegraphics[width=15cm]{01-isip-lab-03-5197.JPG}
|
|||
|
|
\caption{Эскиз <<на лету>>}
|
|||
|
|
\label{pic:onfly}
|
|||
|
|
\end{figure}
|
|||
|
|
|
|||
|
|
\newpage
|
|||
|
|
\section{Упражнение 14}
|
|||
|
|
\textbf{*** Создать цветные эскизы для наручных фитнесс часов}
|
|||
|
|
|
|||
|
|
При эскизировании мобильных устройств важную роль играют эскизы следующих объектов и процессов:
|
|||
|
|
\begin{enumerate}[label=\alph*]
|
|||
|
|
\item Эскизы статических жестов человека
|
|||
|
|
\item Эскизы взаимодействия статических жестов человека с различными предметами
|
|||
|
|
\item Эскизы взаимодействия статических жестов человека с мобильным устройством
|
|||
|
|
\item Эскизы взаимодействия статических жестов человека с мобильным устройством на определённом фоне в заданном контексте.
|
|||
|
|
\end{enumerate}
|
|||
|
|
Указанные эскизы представлены на рисунке \hyperref[pic:watch]{\ref{pic:watch}}. A демонстрирует, что наручные часы не мешают пользователю совершать привычные для него действия, B показывает абстрактный способ управления наручными часами (нажатие на кнопку пальцем). Эскиз C демонстрирует вероятный способ взаимодействия с устройством (например, человек поднял руку, смотрит на устройство, видит время). D демонстрирует использование человеком наручных часов как фитнес-браслета, на котором отображается время, остаток заряда акуумуляторной батареи, количество шагов и пройденное расстояние.
|
|||
|
|
|
|||
|
|
\begin{figure}[H]
|
|||
|
|
\centering
|
|||
|
|
\includegraphics[width=10cm]{01-isip-lab-03-5198.JPG}
|
|||
|
|
\caption{Эскизы для мобильных устройств (наручных часов)}
|
|||
|
|
\label{pic:watch}
|
|||
|
|
\end{figure}
|
|||
|
|
|
|||
|
|
\newpage
|
|||
|
|
\section{Упражнение 15}
|
|||
|
|
\textbf{* Повторить эскизы, представленные в примерах}
|
|||
|
|
|
|||
|
|
В данном упражнении были созданы следующие эскизы, представленные на рис. \hyperref[pic:dynamic]{\ref{pic:dynamic}}:
|
|||
|
|
\begin{enumerate}[label=\Roman*]
|
|||
|
|
\item мобильного устройства (планшет);
|
|||
|
|
\item область, ответственная за интерфейс;
|
|||
|
|
\item примеры интерфейсов (главный экран, просмотр фото, установка таймера);
|
|||
|
|
\item пример смены режима работы устройства по жесту пользователя (свайп на заблокированном экране открывает камеру).
|
|||
|
|
|
|||
|
|
\end{enumerate}
|
|||
|
|
\begin{figure}[H]
|
|||
|
|
\centering
|
|||
|
|
\includegraphics[width=10cm]{01-isip-lab-03-5199.JPG}
|
|||
|
|
\caption{Динамические эскизы}
|
|||
|
|
\label{pic:dynamic}
|
|||
|
|
\end{figure}
|
|||
|
|
|
|||
|
|
\newpage
|
|||
|
|
\section{Упражнение 16}
|
|||
|
|
\textbf{*** Создать свою эскиз-историю по аналогии с примером}
|
|||
|
|
|
|||
|
|
На рис. \hyperref[pic:comic]{\ref{pic:comic}} представлен эскиз-история, ознакамливающая пользователей о новой функции, доступной обладателям мобильного устройства определённого производителя
|
|||
|
|
\begin{figure}[H]
|
|||
|
|
\centering
|
|||
|
|
\includegraphics[width=15cm]{01-isip-lab-03-5200.JPG}
|
|||
|
|
\caption{Эскиз-история}
|
|||
|
|
\label{pic:comic}
|
|||
|
|
\end{figure}
|
|||
|
|
|
|||
|
|
\end{document}
|