Шаблон экранных форм
This commit is contained in:
@@ -720,14 +720,202 @@
|
||||
|
||||
\textit{Метод обработки:} Приложение непрерывно отслеживает положение относительно маршрута и устанавливает <<коридор безопасности>> шириной 200-300 метров. При выходе за пределы коридора срабатывает голосовое предупреждение: <<Вы отклонились от маршрута на 250 метров>> и отображается стрелка направления возврата. Все остальные участники получают уведомления. Для детей можно установить более строгие ограничения.
|
||||
|
||||
% \section{Описание структуры информационной модели экранной формы, описание элементов управления}
|
||||
% Основной экран --- карта с наложением маршрута, панелью состояния (связь, заряд, шаги) и плавающей кнопкой SOS. Ниже расположен горизонтальный список контрольных точек. Карточка точки содержит название, прогнозное время прибытия, кнопки "Отметиться" и "Фото". Чат и чек-лист открываются свайпом вверх. Экран приглашения включает поля: дата, время, список контактов, чек-лист снаряжения, переключатель режима сложности.
|
||||
\section{Описание дизайна экранной формы}
|
||||
|
||||
Дизайн экранных форм приложения разработан в соответствии с требованиями международного стандарта ISO 9241-161 (Эргономика взаимодействия человек-система. Часть 161: Руководство по элементам графического пользовательского интерфейса) и адаптирован под специфические условия использования: лесная местность, плохая освещённость, использование в перчатках, разный уровень цифровой грамотности пользователей.
|
||||
|
||||
\subsection{Типографика и шрифты}
|
||||
|
||||
В приложении используется шрифтовая система, обеспечивающая высокую читабельность в сложных условиях освещения и при быстром просмотре информации на ходу.
|
||||
|
||||
\textbf{Основной шрифт:} Inter или Roboto --- современные гротескные шрифты без засечек, специально разработанные для экранов с высокой читабельностью при малых размерах. Эти шрифты имеют открытые апертуры (внутренние просветы букв), что улучшает различимость символов при плохом освещении.
|
||||
|
||||
\textbf{Размеры шрифтов:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Базовый размер текста:} 16--18pt для основного контента (описания, инструкции, названия грибов). Это на 2--4pt больше стандартных 14pt, что обусловлено необходимостью чтения на ходу и при плохой видимости.
|
||||
\item \textbf{Заголовки экранов:} 22--24pt, полужирное начертание, для быстрой идентификации текущего раздела.
|
||||
\item \textbf{Навигационные данные:} 18--20pt для расстояний, времени, направлений --- критически важная информация, которую нужно считывать мгновенно.
|
||||
\item \textbf{Минимальный размер:} не менее 14pt для второстепенной информации (метки времени, подписи к иконкам), что соответствует рекомендациям ISO 9241-161.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Межстрочный интервал:} 1.4--1.5 от размера шрифта для улучшения читабельности блоков текста. Для коротких надписей (кнопки, метки) можно использовать 1.2--1.3.
|
||||
|
||||
\textbf{Насыщенность:} основной текст использует regular (400) или medium (500) начертание, заголовки и активные элементы --- semibold (600) или bold (700). Тонкие начертания (light, thin) не используются из-за плохой видимости на солнце и в тумане.
|
||||
|
||||
\subsection{Цветовая палитра}
|
||||
|
||||
Цветовая схема построена на природных оттенках с учётом контрастности и психологического восприятия цветов в контексте лесной прогулки.
|
||||
|
||||
\textbf{Основные цвета:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Лесной зелёный \#2D5F3F} --- основной цвет бренда, используется для маршрутов на карте, пройденных участков пути, успешных действий. Ассоциируется с природой, безопасностью, спокойствием.
|
||||
\item \textbf{Янтарный оранжевый \#E67E22} --- акцентный цвет для активных элементов, кнопок действия, контрольных точек. Хорошо виден в лесу, привлекает внимание, ассоциируется с теплом и энергией.
|
||||
\item \textbf{Тревожный красный \#C0392B} --- используется исключительно для критических элементов: кнопка SOS, предупреждения об опасности, низкий заряд батареи. Сигнализирует о необходимости немедленных действий.
|
||||
\item \textbf{Небесный голубой \#3498DB} --- для информационных элементов, ссылок, текущего местоположения на карте. Нейтральный, не конфликтует с зелёным фоном карты.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Нейтральная палитра (оттенки серого):}
|
||||
\begin{itemize}
|
||||
\item Тёмно-серый \#2C3E50 --- основной цвет текста на светлом фоне.
|
||||
\item Средний серый \#7F8C8D --- второстепенный текст, неактивные элементы.
|
||||
\item Светло-серый \#ECF0F1 --- фон карточек, разделители.
|
||||
\item Почти белый \#FAFAFA --- основной фон приложения.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Контрастность:} все текстово-фоновые комбинации обеспечивают коэффициент контрастности не менее 4.5:1 для обычного текста и 3:1 для крупного текста (18pt+), что соответствует уровню AA стандарта WCAG 2.1. Для критических элементов (SOS, предупреждения) используется усиленный контраст 7:1 (уровень AAA).
|
||||
|
||||
\textbf{Семантика цвета:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Зелёный:} успех, завершение, безопасность (отметка на контрольной точке, подтверждение снаряжения).
|
||||
\item \textbf{Оранжевый:} действие, внимание, активность (кнопки "Начать поход", "Добавить гриб", контрольные точки).
|
||||
\item \textbf{Красный:} опасность, критическая ситуация, запрет (SOS, отклонение от маршрута, разрядка батареи <15\%).
|
||||
\item \textbf{Голубой:} информация, навигация, нейтральное состояние (текущая позиция, информационные подсказки).
|
||||
\item \textbf{Серый:} неактивное, второстепенное, фоновое (отключенные кнопки, пройденные точки).
|
||||
\end{itemize}
|
||||
|
||||
\subsection{Размеры и отступы}
|
||||
|
||||
Система размеров построена на модульной сетке с базовым шагом 8pt (пикселей), что обеспечивает визуальную согласованность и упрощает адаптацию под разные размеры экранов.
|
||||
|
||||
\textbf{Размеры интерактивных элементов:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Минимальный размер касания:} 48×48pt (примерно 9×9 мм на физическом экране) для стандартного режима, что соответствует рекомендациям ISO 9241-161 и позволяет уверенно нажимать пальцем в перчатке.
|
||||
\item \textbf{Основные кнопки действий:} 56×56pt, увеличенный размер для часто используемых элементов ("Добавить гриб", "Открыть чат").
|
||||
\item \textbf{Кнопка SOS:} 80×80pt, максимальный размер для мгновенного доступа в критической ситуации, постоянно видна в углу экрана.
|
||||
\item \textbf{Расстояние между интерактивными элементами:} не менее 8pt, чтобы избежать случайных нажатий.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Отступы и воздух:}
|
||||
\begin{itemize}
|
||||
\item Внутренние отступы кнопок: 12--16pt по вертикали, 20--24pt по горизонтали.
|
||||
\item Отступы между секциями экрана: 24--32pt для визуального разделения.
|
||||
\item Поля экрана от края: 16--20pt, чтобы контент не прижимался к границам.
|
||||
\item Расстояние между строками в списках: 16pt для комфортного чтения и случайных нажатий.
|
||||
\end{itemize}
|
||||
|
||||
\subsection{Иконография}
|
||||
|
||||
Визуальные символы играют ключевую роль в навигации по приложению, особенно для пользователей с низкой цифровой грамотностью.
|
||||
|
||||
\textbf{Стиль иконок:} используются иконки в едином стиле "outlined" (контурные) с толщиной линии 2pt. Контурный стиль обеспечивает лучшую видимость на разных фонах и при ярком солнечном свете по сравнению с заливными (filled) иконками.
|
||||
|
||||
\textbf{Размеры иконок:}
|
||||
\begin{itemize}
|
||||
\item Стандартный размер: 24×24pt для иконок в кнопках и меню.
|
||||
\item Крупные иконки: 32×32pt для главных действий на экране.
|
||||
\item Иконка SOS: 40×40pt, красного цвета с белой обводкой для максимальной заметности.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Основные иконки:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Компас} (круг со стрелкой) --- навигация, направление движения.
|
||||
\item \textbf{Корзина с грибами} --- раздел находок, семейная корзина.
|
||||
\item \textbf{Маркер на карте} --- контрольная точка, место встречи.
|
||||
\item \textbf{Группа людей} --- участники похода, управление группой.
|
||||
\item \textbf{Сообщение} --- семейный чат, коммуникация.
|
||||
\item \textbf{Список с галочками} --- чек-лист снаряжения.
|
||||
\item \textbf{Молния} --- уровень заряда батареи.
|
||||
\item \textbf{Антенна с волнами} --- уровень сигнала связи.
|
||||
\item \textbf{Фотоаппарат} --- сделать фото гриба.
|
||||
\item \textbf{Тревожный треугольник/круг SOS} --- экстренная кнопка.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Цвет иконок:} по умолчанию тёмно-серый (\#2C3E50) для нейтральных элементов, окрашиваются в акцентные цвета при активации или для семантического значения (красная иконка низкого заряда, зелёная галочка выполнения).
|
||||
|
||||
\subsection{Карточки и контейнеры}
|
||||
|
||||
Информация группируется в визуальные контейнеры для улучшения сканируемости и понимания структуры.
|
||||
|
||||
\textbf{Карточки:} прямоугольные контейнеры с лёгкой тенью (elevation 2--4dp в терминологии Material Design) для создания ощущения "слоя" над фоном. Радиус скругления углов 8--12pt для современного внешнего вида и мягкости восприятия.
|
||||
|
||||
\textbf{Структура карточки контрольной точки:}
|
||||
\begin{itemize}
|
||||
\item Заголовок (название точки, 18pt semibold).
|
||||
\item Расстояние и время прибытия (16pt, серый цвет).
|
||||
\item Статус (иконка + текст): "Не пройдена" / "Идём сейчас" / "Пройдена".
|
||||
\item Кнопка действия "Отметиться" (оранжевая, 48pt высотой).
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Разделители:} тонкие линии (1pt, светло-серый \#ECF0F1) для отделения элементов списка. Используются умеренно, чтобы не создавать визуального шума.
|
||||
|
||||
\subsection{Состояния элементов}
|
||||
|
||||
В соответствии с ISO 9241-161, все интерактивные элементы должны иметь визуально различимые состояния.
|
||||
|
||||
\textbf{Состояния кнопок:}
|
||||
\begin{itemize}
|
||||
\item \textbf{Обычное (default):} полный цвет заливки, чёткие границы.
|
||||
\item \textbf{Наведение/фокус (hover/focus):} лёгкое затемнение цвета на 10--15\%, появление обводки 3pt голубого цвета для фокуса.
|
||||
\item \textbf{Нажатие (pressed):} затемнение на 20--25\%, лёгкое уменьшение размера (scale 0.95) для тактильного отклика.
|
||||
\item \textbf{Неактивное (disabled):} полупрозрачность 40\%, серый цвет, курсор "not-allowed".
|
||||
\item \textbf{Загрузка (loading):} анимированный спиннер внутри кнопки, текст сохраняется.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Индикация выбора:} для элементов списка, переключателей, чекбоксов используется изменение цвета фона (светло-зелёный \#E8F5E9 для выбранного), появление галочки-иконки, увеличение высоты элемента на 2--4pt.
|
||||
|
||||
% \section{Описание дизайна экранной формы (шрифтов, цветовой палитры) ИСО 9241-161. Элементы графического пользовательского интерфейса}
|
||||
% Используются шрифты без засечек (Inter или Roboto), базовый размер 16--18pt для читабельности в лесу. Цветовая палитра: зелёные оттенки для маршрутов, тёплые оранжевые акценты для действий, красный для SOS. Контрастные режимы и крупные кнопки поддерживают пользователей со сниженным зрением. Пиктограммы грибов, костра и компаса помогают ориентироваться, а активные элементы получают явное состояние фокуса.
|
||||
\subsection{Анимация и обратная связь}
|
||||
|
||||
Анимации используются для улучшения понимания системы и подтверждения действий, но не должны замедлять работу.
|
||||
|
||||
\textbf{Длительность анимаций:}
|
||||
\begin{itemize}
|
||||
\item Быстрые переходы (смена состояний кнопок): 100--150ms.
|
||||
\item Средние переходы (открытие модальных окон, карточек): 200--300ms.
|
||||
\item Длинные анимации (переход между экранами): 300--400ms.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Тактильная обратная связь (вибрация):}
|
||||
\begin{itemize}
|
||||
\item Лёгкая вибрация (10ms) при нажатии кнопок для подтверждения касания.
|
||||
\item Средняя вибрация (50ms) при достижении контрольной точки.
|
||||
\item Сильная вибрация (200ms, паттерн) при предупреждениях и активации SOS.
|
||||
\end{itemize}
|
||||
|
||||
\textbf{Звуковые сигналы:}
|
||||
\begin{itemize}
|
||||
\item Лёгкий щелчок при обычных действиях (опционально, можно отключить).
|
||||
\item Мелодичный сигнал при успешных действиях (отметка на точке, добавление гриба).
|
||||
\item Настойчивый звук при критических уведомлениях (низкий заряд, отклонение от маршрута).
|
||||
\item Тревожный сигнал при активации SOS (можно отключить, если нужна скрытность).
|
||||
\end{itemize}
|
||||
|
||||
% \section{Сравнение разработанного варианта с требованиями нормативных документов}
|
||||
% Макет следует ISO 9241-161: обеспечиваются доступность (крупные элементы, читабельные шрифты), однозначность команд и предсказуемость диалогов. Учитываются требования по защите данных (согласия, минимизация собираемых полей) и рекомендации WCAG 2.1 AA: цветовой контраст, фокусируемость элементов, альтернативные описания для иконок.
|
||||
\section{Шаблон экранной формы}
|
||||
|
||||
Шаблон экранной формы определяет единую структуру для всех основных экранов мобильного приложения. Он обеспечивает визуальную согласованность, предсказуемость навигации и соответствие принципам дизайна, описанным в предыдущем разделе.
|
||||
|
||||
\subsection{Структура шаблона}
|
||||
|
||||
Шаблон состоит из следующих обязательных компонентов:
|
||||
|
||||
\begin{itemize}
|
||||
\item \textbf{Шапка приложения (Header)} --- содержит логотип и название приложения "По грибы". Фиксирована в верхней части экрана, имеет зелёный градиентный фон (\#2D5F3F → \#3A7A52), высоту 64pt. Логотип размером 36×36pt расположен слева, название выполнено белым шрифтом 24pt, полужирное начертание.
|
||||
|
||||
\item \textbf{Основная область контента (Main)} --- прокручиваемая область для размещения содержимого конкретного экрана. Включает заголовок экрана (22pt, полужирный), описание при необходимости (16pt, серый цвет), карточки с информацией и элементы управления. Отступы от краёв 20pt, отступ снизу 80pt для навигационной панели.
|
||||
|
||||
\item \textbf{Нижняя навигационная панель (Navigation)} --- фиксирована внизу экрана, высота 72pt, белый фон с тенью. Содержит 5 навигационных кнопок с иконками и подписями: "Маршрут", "Корзина", "Главная", "Чат", "Группа". Активная вкладка выделяется зелёным цветом текста и подчёркиванием снизу.
|
||||
|
||||
\item \textbf{Плавающая кнопка SOS} --- расположена в правом нижнем углу над навигацией, размер 80×80pt, красный цвет (\#C0392B), круглая форма с белой обводкой 4pt. Постоянно видима на всех экранах, имеет анимацию пульсации для привлечения внимания.
|
||||
\end{itemize}
|
||||
|
||||
\subsection{Визуальные особенности}
|
||||
|
||||
Шаблон реализует описанную ранее цветовую палитру и типографику:
|
||||
|
||||
\begin{itemize}
|
||||
\item Карточки контента имеют белый фон, радиус скругления 12pt, лёгкую тень для создания эффекта "слоя".
|
||||
\item Элементы списков включают иконку слева (40×40pt в скруглённом контейнере), заголовок (17pt, полужирный) и подзаголовок (14pt, серый).
|
||||
\item Все интерактивные элементы реагируют на нажатие визуальным эффектом (уменьшение до 95--98\% размера).
|
||||
\item Общий фон приложения --- светло-серый \#FAFAFA для снижения контрастности и уменьшения утомляемости глаз.
|
||||
\end{itemize}
|
||||
|
||||
Шаблон рассчитан на стандартную ширину мобильного экрана 375pt (iPhone, большинство Android-устройств) и может адаптироваться по высоте от 667pt до 844pt.
|
||||
|
||||
\begin{figure}[h!]
|
||||
\centering
|
||||
\includegraphics[width=0.5\linewidth]{img/template-screen.png}
|
||||
\caption{Шаблон экранной формы мобильного приложения "По грибы!"}
|
||||
\label{fig:template}
|
||||
\end{figure}
|
||||
|
||||
% \section{Выводы}
|
||||
% Описан интерфейс приложения для семейного похода за грибами: выделены заинтересованные лица, их ожидания, требования к платформе, модели пользователей и сценарии. Рассмотрены функции, диалоговые структуры, методы снижения ошибок и особенности дизайна. Подготовленный материал служит основой для создания макета экранов и дальнейшего прототипирования.
|
||||
|
||||
Reference in New Issue
Block a user