diff --git a/lab1/report/img/basket-screen.png b/lab1/report/img/basket-screen.png index 7f147ff..37d435c 100644 Binary files a/lab1/report/img/basket-screen.png and b/lab1/report/img/basket-screen.png differ diff --git a/lab1/report/img/basket-screen2.png b/lab1/report/img/basket-screen2.png index e989962..a986f31 100644 Binary files a/lab1/report/img/basket-screen2.png and b/lab1/report/img/basket-screen2.png differ diff --git a/lab1/report/img/chat-screen.png b/lab1/report/img/chat-screen.png new file mode 100644 index 0000000..9c918f3 Binary files /dev/null and b/lab1/report/img/chat-screen.png differ diff --git a/lab1/report/img/chat-screen2.png b/lab1/report/img/chat-screen2.png new file mode 100644 index 0000000..9e05a35 Binary files /dev/null and b/lab1/report/img/chat-screen2.png differ diff --git a/lab1/report/img/guide-screen.png b/lab1/report/img/guide-screen.png index 100163e..15207bc 100644 Binary files a/lab1/report/img/guide-screen.png and b/lab1/report/img/guide-screen.png differ diff --git a/lab1/report/img/navigation-screen.png b/lab1/report/img/navigation-screen.png index cc35bb3..b44bbb3 100644 Binary files a/lab1/report/img/navigation-screen.png and b/lab1/report/img/navigation-screen.png differ diff --git a/lab1/report/img/planning-screen.png b/lab1/report/img/planning-screen.png index 30bbc3a..cebe116 100644 Binary files a/lab1/report/img/planning-screen.png and b/lab1/report/img/planning-screen.png differ diff --git a/lab1/report/img/planning-screen2.png b/lab1/report/img/planning-screen2.png index 54a13d1..1e59ab0 100644 Binary files a/lab1/report/img/planning-screen2.png and b/lab1/report/img/planning-screen2.png differ diff --git a/lab1/report/img/planning-screen3.png b/lab1/report/img/planning-screen3.png index fad5571..6275cca 100644 Binary files a/lab1/report/img/planning-screen3.png and b/lab1/report/img/planning-screen3.png differ diff --git a/lab1/report/img/template-screen.png b/lab1/report/img/template-screen.png index 0e238f0..8f2bfab 100644 Binary files a/lab1/report/img/template-screen.png and b/lab1/report/img/template-screen.png differ diff --git a/lab1/report/report.tex b/lab1/report/report.tex index 2a97425..4ce4b5b 100644 --- a/lab1/report/report.tex +++ b/lab1/report/report.tex @@ -913,11 +913,12 @@ \begin{figure}[h!] \centering - \includegraphics[width=0.6\linewidth]{img/template-screen.png} + \includegraphics[width=0.4\linewidth]{img/template-screen.png} \caption{Шаблон экранной формы мобильного приложения "По грибы!"} \label{fig:template} \end{figure} +\newpage \section{Эскизы экранных форм} На основе разработанного шаблона созданы экранные формы для ключевых процессов приложения. Каждая форма реализует описанные ранее функции и соответствует принципам дизайна ISO 9241-161. @@ -989,8 +990,6 @@ \label{fig:navigation-screen} \end{figure} - \newpage - \phantom{text} \newpage \subsection{Экран семейной корзины} @@ -1041,6 +1040,35 @@ \label{fig:guide-screen} \end{figure} + \newpage + \subsection{Экран семейного чата} + + Чат обеспечивает оперативную коммуникацию между участниками похода с возможностью отправки текста, фотографий и геолокации. + + \textbf{Основные элементы:} + \begin{itemize} + \item \textbf{Область сообщений} --- прокручиваемый список с сообщениями участников, системными уведомлениями о достижении контрольных точек. Сообщения других участников слева с аватарами, свои сообщения справа в зелёных пузырях. + \item \textbf{Типы сообщений} --- текстовые, фотографии грибов, карточки с геолокацией (показывают расстояние до отправителя), системные уведомления (начало похода, достижение точек). + \item \textbf{Панель ввода} --- кнопки быстрых действий (камера, отправить геолокацию), поле ввода текста, кнопка отправки. Все элементы увеличенного размера для удобного использования в перчатках. + \end{itemize} + +\begin{figure}[h!] + \centering + \begin{subfigure}[b]{0.34\linewidth} + \centering + \includegraphics[width=\textwidth]{img/chat-screen.png} + \label{fig:chat-screen} + \end{subfigure} + \hspace{1cm} + \begin{subfigure}[b]{0.34\linewidth} + \centering + \includegraphics[width=\textwidth]{img/chat-screen2.png} + \label{fig:chat-screen2} + \end{subfigure} + \caption{Экран семейного чата} + \label{fig:chat-screens} +\end{figure} + % \section{Выводы} % Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования. diff --git a/lab1/screen-forms/basket-screen.html b/lab1/screen-forms/basket-screen.html index 6839855..985b721 100644 --- a/lab1/screen-forms/basket-screen.html +++ b/lab1/screen-forms/basket-screen.html @@ -158,8 +158,8 @@ Чат diff --git a/lab1/screen-forms/chat-screen.css b/lab1/screen-forms/chat-screen.css new file mode 100644 index 0000000..e83f25c --- /dev/null +++ b/lab1/screen-forms/chat-screen.css @@ -0,0 +1,263 @@ +/* Специфичные стили для экрана чата */ + +/* Главный контейнер чата */ +.chat-main { + padding: 0; +} + +.chat-container { + display: flex; + flex-direction: column; + height: 100%; +} + +/* Область сообщений */ +.messages-area { + flex: 1; + overflow-y: auto; + padding: var(--spacing-lg); + padding-bottom: var(--spacing-xl); + display: flex; + flex-direction: column; + gap: var(--spacing-md); +} + +/* Системное сообщение */ +.system-message { + display: flex; + justify-content: center; + margin: var(--spacing-sm) 0; +} + +.system-text { + background: rgba(0, 0, 0, 0.05); + color: var(--color-text-medium); + font-size: var(--font-size-small); + padding: var(--spacing-xs) var(--spacing-lg); + border-radius: 16px; + text-align: center; +} + +/* Сообщение */ +.message { + display: flex; + gap: var(--spacing-sm); + max-width: 80%; + animation: slideIn 0.2s ease-out; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Сообщение от другого участника */ +.message-other { + align-self: flex-start; +} + +/* Своё сообщение */ +.message-own { + align-self: flex-end; + flex-direction: row-reverse; +} + +/* Аватар отправителя */ +.message-avatar { + font-size: 32px; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-bg-secondary); + border-radius: 50%; + flex-shrink: 0; +} + +/* Пузырь сообщения */ +.message-bubble { + background: var(--color-bg-card); + border-radius: var(--radius-md); + padding: var(--spacing-md); + box-shadow: var(--shadow-sm); +} + +.message-own .message-bubble { + background: var(--color-primary); + color: var(--color-bg-card); +} + +.message-author { + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); + color: var(--color-primary); + margin-bottom: var(--spacing-xs); +} + +.message-own .message-author { + display: none; +} + +.message-text { + font-size: var(--font-size-base); + line-height: var(--line-height-relaxed); + color: var(--color-text-dark); + word-wrap: break-word; + margin-bottom: var(--spacing-xs); +} + +.message-own .message-text { + color: var(--color-bg-card); +} + +.message-time { + font-size: var(--font-size-tiny); + color: var(--color-text-medium); + text-align: right; +} + +.message-own .message-time { + color: rgba(255, 255, 255, 0.8); +} + +/* Фото в сообщении */ +.message-photo { + width: 100%; + max-width: 200px; + height: auto; + border-radius: var(--radius-sm); + margin-bottom: var(--spacing-sm); + cursor: pointer; +} + +/* Карточка местоположения */ +.location-card { + display: flex; + align-items: center; + gap: var(--spacing-md); + background: var(--color-bg-secondary); + padding: var(--spacing-md); + border-radius: var(--radius-sm); + margin-bottom: var(--spacing-xs); +} + +.location-icon { + font-size: 28px; + flex-shrink: 0; +} + +.location-info { + flex: 1; +} + +.location-text { + font-size: var(--font-size-base); + font-weight: var(--font-weight-medium); + color: var(--color-text-dark); + margin-bottom: 2px; +} + +.location-distance { + font-size: var(--font-size-small); + color: var(--color-text-medium); +} + +/* Панель ввода */ +.input-panel { + display: flex; + align-items: center; + gap: var(--spacing-sm); + padding: var(--spacing-md) var(--spacing-lg); + background: var(--color-bg-card); + border-top: 1px solid var(--color-border); + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); +} + +.input-action-btn { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-bg-secondary); + border: none; + border-radius: 50%; + cursor: pointer; + transition: transform var(--transition-fast) ease, background var(--transition-fast) ease; + flex-shrink: 0; +} + +.input-action-btn:active { + transform: scale(0.95); + background: #D5DBDB; +} + +.action-icon { + font-size: 20px; +} + +.message-input { + flex: 1; + border: none; + outline: none; + background: var(--color-bg-secondary); + padding: var(--spacing-md) var(--spacing-lg); + border-radius: 20px; + font-size: var(--font-size-base); + font-family: var(--font-family); + color: var(--color-text-dark); +} + +.message-input::placeholder { + color: var(--color-text-medium); +} + +.send-btn { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-primary); + border: none; + border-radius: 50%; + cursor: pointer; + transition: transform var(--transition-fast) ease, background var(--transition-fast) ease; + flex-shrink: 0; +} + +.send-btn:active { + transform: scale(0.95); + background: #245238; +} + +.send-icon { + font-size: 20px; + color: var(--color-bg-card); +} + +/* Скроллбар для области сообщений */ +.messages-area::-webkit-scrollbar { + width: 4px; +} + +.messages-area::-webkit-scrollbar-track { + background: transparent; +} + +.messages-area::-webkit-scrollbar-thumb { + background: #BDC3C7; + border-radius: 2px; +} + +.messages-area::-webkit-scrollbar-thumb:hover { + background: #95A5A6; +} + diff --git a/lab1/screen-forms/chat-screen.html b/lab1/screen-forms/chat-screen.html new file mode 100644 index 0000000..163f37a --- /dev/null +++ b/lab1/screen-forms/chat-screen.html @@ -0,0 +1,154 @@ + + + + + + + По грибы! - Чат + + + + + +
+ + +
+
+ +

По грибы!

+
+
+ + +
+
+ + +
+ + +
+
Поход начался в 09:00
+
+ + +
+
👴
+
+
Иван
+
Нашел поляну с белыми! Идите сюда
+
14:35
+
+
+ + +
+
👴
+
+
Иван
+
+
📍
+
+
Отправил геолокацию
+
1.2 км от вас
+
+
+
14:36
+
+
+ + +
+
+
Отлично! Идём к тебе
+
14:37
+
+
+ + +
+
👧
+
+
Алиса
+ Фото гриба +
Мама, это лисички?
+
14:38
+
+
+ + +
+
+
Да, лисички! Молодец! 👍
+
14:39
+
+
+ + +
+
🎯 Иван достиг точки встречи №2
+
+ + +
+
👧
+
+
Алиса
+
Я тоже собрала целую корзину!
+
14:42
+
+
+ +
+ + +
+ + + + +
+ +
+
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/lab1/screen-forms/guide-screen.html b/lab1/screen-forms/guide-screen.html index 4d08895..13ddaa5 100644 --- a/lab1/screen-forms/guide-screen.html +++ b/lab1/screen-forms/guide-screen.html @@ -129,7 +129,7 @@ 🧺 Корзина - @@ -137,9 +137,9 @@ 💬 Чат - diff --git a/lab1/screen-forms/navigation-screen.html b/lab1/screen-forms/navigation-screen.html index 50805d0..1f8a333 100644 --- a/lab1/screen-forms/navigation-screen.html +++ b/lab1/screen-forms/navigation-screen.html @@ -150,8 +150,8 @@ Чат diff --git a/lab1/screen-forms/planning-screen.html b/lab1/screen-forms/planning-screen.html index 48c3aaa..04f6509 100644 --- a/lab1/screen-forms/planning-screen.html +++ b/lab1/screen-forms/planning-screen.html @@ -166,8 +166,8 @@ Чат diff --git a/lab1/screen-forms/template.html b/lab1/screen-forms/template.html index 995e4ab..eb27c2b 100644 --- a/lab1/screen-forms/template.html +++ b/lab1/screen-forms/template.html @@ -75,8 +75,8 @@ Чат