Шаг 1: Подготовка к реализации (15 мин)Извлеките документы из урока 3:- Откройте описание вашей пользовательской персоны
- Найдите wireframe дашборда (эскиз структуры)
- Возьмите таблицу соответствия визуализаций бизнес-вопросам
- Подготовьте план интерактивных элементов
Анализ персоны для дизайн-решений, пример анализа для "Марины - менеджера пиццерии":
Персона: Марина, 32 года, менеджер пиццерии
Контекст: Каждое утро в 9:00, в офисе, перед планеркой
Цель: Понять результаты вчерашнего дня, спланировать сегодня
Дизайн-решения:- Крупные числа (быстрый просмотр)
- KPI сверху (первое, что нужно увидеть)
- Яркие цвета для проблем (красный = внимание)
- Простые графики (нет времени разбираться)
- Мобильная адаптация НЕ нужна (только ПК в офисе)
Ваш анализ персоны:Запишите 3-5 конкретных дизайн-решений на основе вашей персоны.
Шаг 2: Размещение элементов согласно плану (35 мин)Работа с матрицей визуализаций из урока 3Пример таблицы из урока 3:
Бизнес-вопрос | Тип визуализации | Позиция в wireframe |
"Сколько заказов сегодня?" | KPI-карточка | KPI 1 |
"Какие пиццы популярны?" | Столбчатая диаграмма | Второй график |
"Как менялись продажи?" | Линейный график | Главный график |
Реализация по матрицеРазмещение KPI-карточек:
- Возьмите KPI-карточки из урока 5
- Разместите в зоне KPI. Должно получиться 5 одинаковых визуализаций в ряд.
- Примените размеры и цвета, подходящие вашей персоне
- Если персона "быстро просматривает" → увеличьте размер чисел
- Если персона "ищет проблемы" → добавьте красные индикаторы
Размещение основных графиков:- Разместите графики в два ряда, в пропорции 60% и 40%
- Главный график (обычно тренд) → в большую зону
- Вторичные графики → в меньшие зоны
Размещение таблицы:- Поместите детальную таблицу в нижнюю зону. Используйте всю ширину листа.
- Настройте оптимальную высоту
Адаптация под персону:Для "быстрого утреннего просмотра":- Увеличьте размер KPI-карточек
- Сделайте яркие цвета для привлечения внимания
- Упростите графики (меньше деталей)
Для "глубокого анализа":- Добавьте больше деталей в tooltips
- Увеличьте размер таблицы
- Добавьте больше цветовых индикаторов
Применение брендинга:- Логотип: Разместите согласно wireframe (обычно верхний левый угол)
- Заголовок: Используйте название из проекта урока 3
- Цветовая схема: Примените цвета, подходящие контексту персоны
✔ Финальная сверка с планомЧек-лист реализации wireframe:- Все зоны из wireframe созданы в правильных пропорциях
- Каждый элемент размещен в запланированной позиции
- Размеры элементов соответствуют важности (из урока 3)
- Цвета и стили подходят пользовательской персоне
- Навигация взгляда следует F или Z паттерну (как планировали)
Чек-лист соответствия персоне:- Размеры элементов подходят для контекста использования
- Цветовая схема соответствует целям персоны
- Приоритеты информации отражают потребности пользователя
- Уровень детализации соответствует экспертизе персоны