Элементы по отдельности

lab1/report/report.tex

@@ -880,6 +880,7 @@
         \item Тревожный сигнал при активации SOS (можно отключить, если нужна скрытность).
     \end{itemize}
 
+    \newpage
     \section{Шаблон экранной формы}
 
     Шаблон экранной формы определяет единую структуру для всех основных экранов мобильного приложения. Он обеспечивает визуальную согласованность, предсказуемость навигации и соответствие принципам дизайна, описанным в предыдущем разделе.
@@ -893,11 +894,71 @@
 
         \item \textbf{Основная область контента (Main)} --- прокручиваемая область для размещения содержимого конкретного экрана. Включает заголовок экрана (22pt, полужирный), описание при необходимости (16pt, серый цвет), карточки с информацией и элементы управления. Отступы от краёв 20pt, отступ снизу 80pt для навигационной панели.
 
-        \item \textbf{Нижняя навигационная панель (Navigation)} --- фиксирована внизу экрана, высота 72pt, белый фон с тенью. Содержит 5 навигационных кнопок с иконками и подписями: "Маршрут", "Корзина", "Главная", "Чат", "Группа". Активная вкладка выделяется зелёным цветом текста и подчёркиванием снизу.
+        \item \textbf{Нижняя навигационная панель (Navigation)} --- фиксирована внизу экрана, высота 72pt, белый фон с тенью. Содержит 5 навигационных кнопок с иконками и подписями: "Маршрут", "Корзина", "Главная", "Чат", "Справочник". Активная вкладка выделяется зелёным цветом текста и подчёркиванием снизу.
 
         \item \textbf{Кнопка SOS} --- расположена в правом нижнем углу над навигацией, размер 80×80pt, красный цвет (\#C0392B), круглая форма с белой обводкой 4pt. Постоянно видима на всех экранах, имеет анимацию пульсации для привлечения внимания.
     \end{itemize}
 
+    \subsection{Основные элементы интерфейса}
+
+    Шаблон использует набор унифицированных элементов интерфейса, обеспечивающих визуальную согласованность и предсказуемость взаимодействия.
+
+    \textbf{Кнопка SOS} --- критически важный элемент безопасности, доступный на всех экранах. Размер 80×80pt обеспечивает уверенное нажатие даже в стрессовой ситуации. Красный цвет \#C0392B мгновенно привлекает внимание, белая обводка 4pt создаёт контраст с любым фоном.
+
+\begin{figure}[h!]
+   \centering
+   \includegraphics[width=0.2\linewidth]{img/elements/sos-button.png}
+   \caption{Кнопка SOS}
+   \label{fig:sos-button}
+\end{figure}
+
+\newpage
+    \textbf{Карточка (Card)} --- базовый контейнер для группировки связанного контента. Белый фон \#FFFFFF, радиус скругления 12pt, отступы 16pt. Тень средней интенсивности. Используется для информации о маршруте, участниках, находках.
+
+\begin{figure}[h!]
+   \centering
+   \includegraphics[width=0.35\linewidth]{img/elements/card.png}
+   \caption{Карточка контента}
+   \label{fig:card}
+\end{figure}
+
+    \textbf{Основная кнопка} --- минимальная высота 48pt (стандарт ISO 9241-161 для сенсорных элементов), радиус 8pt, шрифт 16pt полужирный. Основная кнопка (primary) имеет оранжевый цвет \#E67E22, вторичная (secondary) --- светло-серый \#ECF0F1. При нажатии кнопка уменьшается до 97\% размера для тактильного отклика.
+
+\begin{figure}[h!]
+   \centering
+   \includegraphics[width=0.35\linewidth]{img/elements/button-primary.png}
+   \caption{Основная и вторичная кнопки}
+   \label{fig:button-primary}
+\end{figure}
+
+    \textbf{Элемент списка} --- используется для участников, находок, контрольных точек. Иконка 40×40pt в скруглённом контейнере слева, заголовок 17pt полужирный, подзаголовок 14pt серый цвет. Отступы 14pt по вертикали, 16pt по горизонтали. Белый фон, радиус 12pt, лёгкая тень.
+
+\begin{figure}[h!]
+   \centering
+   \includegraphics[width=0.35\linewidth]{img/elements/list-item.png}
+   \caption{Элемент списка}
+   \label{fig:list-item}
+\end{figure}
+
+\newpage
+    \textbf{Поисковое поле} --- высота 48pt, радиус 12pt, иконка лупы 20pt слева, текст 16pt. Фон белый с лёгкой тенью. Placeholder серого цвета \#7F8C8D. Используется в справочнике грибов для быстрого поиска по названию.
+
+\begin{figure}[h!]
+   \centering
+   \includegraphics[width=0.35\linewidth]{img/elements/search-bar.png}
+   \caption{Поисковое поле}
+   \label{fig:search-bar}
+\end{figure}
+
+    \textbf{Навигационная панель} --- высота 72pt, 5 кнопок равной ширины. Иконки 24pt, подписи 11pt. Активная вкладка: зелёный цвет текста \#2D5F3F, полужирное начертание, подчёркивание снизу 3pt высотой. Неактивные: серый цвет \#7F8C8D, обычное начертание.
+
+\begin{figure}[h!]
+   \centering
+   \includegraphics[width=0.4\linewidth]{img/elements/navigation-bar.png}
+   \caption{Навигационная панель}
+   \label{fig:navigation-bar}
+\end{figure}
+
     \subsection{Визуальные особенности}
 
     Шаблон реализует описанную ранее цветовую палитру и типографику:
@@ -918,6 +979,8 @@
    \label{fig:template}
 \end{figure}
 
+\newpage
+\phantom{text}
 \newpage
     \section{Эскизы экранных форм}