Урок 48. Информационная архитектура

Информационная архитектура и взаимодействие экранов

Обзор раздела: В данном разделе рассматривается важность информационной архитектуры и взаимодействия экранов для продукта. Описывается, как пользователи создают ментальную модель работы продукта и почему понятная информационная архитектура помогает пользователям быстро ориентироваться.

Создание ментальной модели продукта

• Пользователи создают ментальную модель работы продукта.

• Чем проще, понятнее и привычнее информационная архитектура, тем быстрее пользователь освоит продукт.

• Затруднения с созданием ментальной модели вызывают дискомфорт и раздражение у пользователя.

Инструменты для создания информационной архитектуры

• Функциональная карта: описание структуры и функций сайта или приложения.

• User Flow: определение пути пользователя на сайте или приложении.

• Карта сайта: верхнеуровневый обзор структуры продукта.

Функциональная карта

• Описывает структуру и функции сайта или приложения.

• Позволяет собрать всю информацию от клиента и составить структуру продукта.

User Flow

• Помогает определить количество экранов и блоков взаимодействия.

• Полезен для проработки логических навигационных связей внутри сервиса.

Карта сайта

• Позволяет получить обзорную структуру продукта.

• Описывает страницы без функциональных единиц.

Рекомендации по использованию инструментов

• Начальные этапы: рекомендуется использовать функциональную карту для указания количества страниц и функционала.

• Дополнительные инструменты: User Flow и карта сайта полезны для более детальной проработки проекта.

Создание функциональной карты на практике

Обзор раздела: В данном разделе предлагается создать функциональную карту на примере сайта "Мрия Resort". Описывается процесс создания первого блока и основных страниц в функциональной карте.

Создание первого блока

• Зайти в Figma Gym и создать первый блок с названием проекта.

• Указать цвет и шрифт для названия проекта.

Основные страницы в функциональной карте

• Описать основные страницы сайта, такие как главная страница, новости и контакты.

• Указать функционал каждой страницы, например интерактивную карту или поиск.

Рекомендации по созданию функциональной карты

• Использовать бриф и исследование для разработки функциональной карты.

• Описывать только то, что клиент заказчик указывает.

• Начинать с общего описания проекта и переходить к основным страницам.

Заключение

Информационная архитектура и взаимодействие экранов являются ключевыми аспектами при разработке продукта. Функциональная карта,

Создание страниц и соединение блоков

Обзор раздела: В этом разделе рассматривается создание страниц и соединение блоков в Figma Gym.

Создание страницы главного экрана

• Создаем страницу главного экрана в Figma Gym.

• Прописываем основные блоки на этой странице.

Соединение основного блока с блоками первого уровня

• Создаем стрелки, соединяющие основной блок с блоками первого уровня.

• Это позволяет создать связь между различными блоками на странице.

Разработка функциональной карты для главной страницы

Обзор раздела: В этом разделе рассматривается разработка функциональной карты для главной страницы Figma Gym.

Разработка функциональной карты только для одной страницы

• Для удобства и эффективности работы, начинаем с разработки функциональной карты только для главной страницы.

• Постепенно добавляем детали и информацию к каждому блоку на карте.

Обзор структуры главного экрана

Обзор раздела: В этом разделе проводится обзор структуры главного экрана Figma Gym.

Heroblock

• Heroblock - основной блок на главном экране.

• Содержит красивое изображение или видео, заголовок и призыв к действию.

Разработка функциональной карты для главной страницы (продолжение)

Обзор раздела: В этом разделе продолжается разработка функциональной карты для главной страницы Figma Gym.

Создание трех уровней для главной страницы

• Разрабатываем три уровня для главной страницы: heroblock, афиши и инфраструктура.

• Каждый блок имеет свой функционал и содержит подробную информацию.

Создание второго уровня - heroblock

Обзор раздела: В этом разделе рассматривается создание второго уровня - heroblock на функциональной карте главной страницы Figma Gym.

Настройка стилей блока heroblock

• Уменьшаем размер шрифта и задаем зеленый цвет для блока heroblock.

• Это помогает нам легко ориентироваться между различными уровнями на карте.

Разработка функциональной карты для главной страницы (продолжение)

Обзор раздела: В этом разделе продолжается разработка функциональной карты для главной страницы Figma Gym.

Размещение блоков на главной странице

• Разрабатываем бл

Создание функциональной карты

Обзор раздела: В этом разделе рассматривается создание функциональной карты для проекта.

Создание футера

• Прописываем футер, чтобы он отображался на всех страницах.

• Создаем стрелки для навигации по страницам.

Количество страниц

• В проекте есть 20 главных страниц.

• Функциональная карта создается для облегчения разработки и быстрого доступа к информации.

Редактирование и дополнение

• Функциональную карту можно редактировать и дополнять в любое время.

• Рекомендуется сохранить ее в отдельной папке проекта, чтобы не запутаться.

Использование функциональной карты

Обзор раздела: В этом разделе рассматривается использование функциональной карты во время разработки.

Копирование и вставка

• Выделяем всю функциональную карту и копируем ее (нажатие Control C).

• Переходим в проект и вставляем скопированную карту в отдельную папку.

Работа с wireframe

• Функциональная карта может быть использована при разработке wireframe.

• Карту можно редактировать, дополнять и использовать как помощник при работе над проектом.

Заключение

Обзор раздела: В этом разделе подводятся итоги использования функциональной карты.

• Функциональная карта является полезным инструментом для организации информации в проекте.

• Она облегчает разработку и предоставляет быстрый доступ к необходимым данным.

• Карту можно редактировать и дополнять в любое время, что делает ее гибким инструментом при работе над проектом.