Чат
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 148 KiB |
BIN
lab1/report/img/chat-screen.png
Normal file
BIN
lab1/report/img/chat-screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
lab1/report/img/chat-screen2.png
Normal file
BIN
lab1/report/img/chat-screen2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 232 KiB After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 479 KiB After Width: | Height: | Size: 480 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 72 KiB |
@@ -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{Выводы}
|
||||
% Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования.
|
||||
|
||||
|
||||
@@ -158,8 +158,8 @@
|
||||
<span class="nav-label">Чат</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">👥</span>
|
||||
<span class="nav-label">Группа</span>
|
||||
<span class="nav-icon">📖</span>
|
||||
<span class="nav-label">Справочник</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
|
||||
263
lab1/screen-forms/chat-screen.css
Normal file
263
lab1/screen-forms/chat-screen.css
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
154
lab1/screen-forms/chat-screen.html
Normal file
154
lab1/screen-forms/chat-screen.html
Normal file
@@ -0,0 +1,154 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" href="chat-screen.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="app-container">
|
||||
|
||||
<!-- Шапка приложения -->
|
||||
<header class="app-header">
|
||||
<div class="header-content">
|
||||
<img src="../logo/logo.png" alt="Логотип" class="app-logo">
|
||||
<h1 class="app-title">По грибы!</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Основное содержимое экрана -->
|
||||
<main class="app-main chat-main">
|
||||
<div class="chat-container">
|
||||
|
||||
<!-- Сообщения чата -->
|
||||
<div class="messages-area">
|
||||
|
||||
<!-- Системное сообщение -->
|
||||
<div class="system-message">
|
||||
<div class="system-text">Поход начался в 09:00</div>
|
||||
</div>
|
||||
|
||||
<!-- Сообщение от другого участника -->
|
||||
<div class="message message-other">
|
||||
<div class="message-avatar">👴</div>
|
||||
<div class="message-bubble">
|
||||
<div class="message-author">Иван</div>
|
||||
<div class="message-text">Нашел поляну с белыми! Идите сюда</div>
|
||||
<div class="message-time">14:35</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Сообщение с местоположением -->
|
||||
<div class="message message-other">
|
||||
<div class="message-avatar">👴</div>
|
||||
<div class="message-bubble">
|
||||
<div class="message-author">Иван</div>
|
||||
<div class="location-card">
|
||||
<div class="location-icon">📍</div>
|
||||
<div class="location-info">
|
||||
<div class="location-text">Отправил геолокацию</div>
|
||||
<div class="location-distance">1.2 км от вас</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-time">14:36</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Своё сообщение -->
|
||||
<div class="message message-own">
|
||||
<div class="message-bubble">
|
||||
<div class="message-text">Отлично! Идём к тебе</div>
|
||||
<div class="message-time">14:37</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Сообщение с фото -->
|
||||
<div class="message message-other">
|
||||
<div class="message-avatar">👧</div>
|
||||
<div class="message-bubble">
|
||||
<div class="message-author">Алиса</div>
|
||||
<img src="img/mushrooms/лисички.jpg" alt="Фото гриба" class="message-photo">
|
||||
<div class="message-text">Мама, это лисички?</div>
|
||||
<div class="message-time">14:38</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Своё сообщение -->
|
||||
<div class="message message-own">
|
||||
<div class="message-bubble">
|
||||
<div class="message-text">Да, лисички! Молодец! 👍</div>
|
||||
<div class="message-time">14:39</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Системное сообщение -->
|
||||
<div class="system-message">
|
||||
<div class="system-text">🎯 Иван достиг точки встречи №2</div>
|
||||
</div>
|
||||
|
||||
<!-- Сообщение от другого участника -->
|
||||
<div class="message message-other">
|
||||
<div class="message-avatar">👧</div>
|
||||
<div class="message-bubble">
|
||||
<div class="message-author">Алиса</div>
|
||||
<div class="message-text">Я тоже собрала целую корзину!</div>
|
||||
<div class="message-time">14:42</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Панель ввода сообщения -->
|
||||
<div class="input-panel">
|
||||
<button class="input-action-btn">
|
||||
<span class="action-icon">📷</span>
|
||||
</button>
|
||||
<button class="input-action-btn">
|
||||
<span class="action-icon">📍</span>
|
||||
</button>
|
||||
<input type="text" class="message-input" placeholder="Сообщение...">
|
||||
<button class="send-btn">
|
||||
<span class="send-icon">📤</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Нижняя навигационная панель -->
|
||||
<nav class="app-navigation">
|
||||
<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">
|
||||
<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>
|
||||
</nav>
|
||||
|
||||
<!-- Плавающая кнопка SOS -->
|
||||
<button class="sos-button">
|
||||
<span class="sos-icon">🆘</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -129,7 +129,7 @@
|
||||
<span class="nav-icon">🧺</span>
|
||||
<span class="nav-label">Корзина</span>
|
||||
</button>
|
||||
<button class="nav-button nav-button-active">
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span class="nav-label">Главная</span>
|
||||
</button>
|
||||
@@ -137,9 +137,9 @@
|
||||
<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 class="nav-button nav-button-active">
|
||||
<span class="nav-icon">📖</span>
|
||||
<span class="nav-label">Справочник</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -150,8 +150,8 @@
|
||||
<span class="nav-label">Чат</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">👥</span>
|
||||
<span class="nav-label">Группа</span>
|
||||
<span class="nav-icon">📖</span>
|
||||
<span class="nav-label">Справочник</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -166,8 +166,8 @@
|
||||
<span class="nav-label">Чат</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">👥</span>
|
||||
<span class="nav-label">Группа</span>
|
||||
<span class="nav-icon">📖</span>
|
||||
<span class="nav-label">Справочник</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -75,8 +75,8 @@
|
||||
<span class="nav-label">Чат</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">👥</span>
|
||||
<span class="nav-label">Группа</span>
|
||||
<span class="nav-icon">📖</span>
|
||||
<span class="nav-label">Справочник</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user