Data Visualizationавтор Owl-Listener

Data Visualization Skill.

Выбирайте графику, которая делает сравнение понятным, а не самую затейливую диаграмму.

Data Visualization
Рекомендации по дизайну

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Data VisualizationSKILL.md

Задача UX Результат • Выбор диаграммы, связанный с вопросом • Спецификация меток, осей, подписей и контекста • Доступные альтернативы и варианты для маленьких экранов Перед началом Предоставьте реальные данные, определения полей, вопрос читателя и ограничения отображения. Навык помогает проектировать диаграммы; проверка данных и реализация диаграммы остаются отдельными задачами.

Редакционное резюме · источник просмотрен 2026-10-07 · не сгенерированный пример

01 Возможности

Data Visualization: выбор честных визуальных кодировок

Выбор диаграмм, визуальное кодирование, контекстные подписи, доступность и адаптивное представление.

Процесс на основе источникаНе тест выполнения

Принцип работы

Data Visualization — навык проектирования диаграмм. Он сопоставляет вопросы о сравнении, динамике, составе, распределении и взаимосвязях с подходящими формами диаграмм, затем прорабатывает подписи, оси, контекст и визуальное кодирование.

Его область — представление, а не сбор данных или статистическое доказательство. Упор сделан на реальные данные, прямые аннотации, нецветовые признаки и адаптивные альтернативы, например таблицу. Проектирование цветовой палитры продукта остаётся отдельной задачей.

Ожидаемые результаты

Выбор диаграммы, связанный с вопросом
Спецификация меток, осей, подписей и контекста
Доступные альтернативы и варианты для маленьких экранов

Смотреть пример задания

От задания к проверке

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

02 Когда использовать

Когда использовать

Предоставьте реальные данные, определения полей, вопрос читателя и ограничения отображения. Навык помогает проектировать диаграммы; проверка данных и реализация диаграммы остаются отдельными задачами.

Хорошо подходит

Диаграммы для дашбордовУточнить тип диаграммы и контекст для конкретной метрики.
Вводящая в заблуждение визуализацияПроверить кодировки и оси, которые искажают или затемняют сравнение.

Ограничения

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

Что подготовить

Реальные данныеПредоставьте значения, единицы, условия отсутствия данных и определения.
Вопрос читателяУкажите решение или сравнение, которое должна поддерживать диаграмма.
Контекст отображенияУкажите размер, интерактивность, мобильное использование и текстовые альтернативы.

03 Важные решения

Важные решения

Выбор от вопроса
Форма диаграммы оправдана связью, которую нужно показать.
Доступное дублирование
Подписи, формы или узоры передают информацию, которую нельзя передать одним оттенком.

04 Пример задания

Попробуйте целевое задание

Приведённый ниже пример задания не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Загрузите SKILL.md этой задачи из репозитория designer-skills в поддерживаемую папку навыков вашего агента. Универсальная команда установки во входном файле не указана.

Исходный файл в репозитории

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/data-visualization/SKILL.md

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания

Используйте data-visualization, чтобы переработать эту диаграмму плана и факта по предоставленным месячным значениям. Порекомендуйте диаграмму с понятными единицами и контекстом, объясните выбор осей, добавьте читаемую мобильную альтернативу и текстовое резюме. Не делайте выводов о причинах по тренду.

Проверьте результат

Сравните фактический результат с этими наблюдаемыми критериями.

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

OpenDesign предоставляет локальное рабочее пространство для кодинг-агентов. Это не значит, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesign Читать краткое руководство

05 Источник и лицензия

Источник и лицензия

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

Владелец источника: Owl-Listener
Репозиторий: Owl-Listener/designer-skills
Файл навыка: ui-design/skills/data-visualization/SKILL.md
Лицензия: MIT
Просмотренный снимок: 2026-10-07 · 9a6930cf84a8

Редакционное резюме источника

Выбор диаграмм, визуальное кодирование, контекстные подписи, доступность и адаптивное представление.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Рассчитывает ли он базовые метрики?

Источник сосредоточен на выборе диаграмм и кодировании; проверка метрик выполняется отдельно.

Должна ли мобильная версия сохранять ту же диаграмму?

Нет. Источник прямо допускает более простые представления, включая таблицы.

Может ли цвет быть единственным признаком серии?

Источник рекомендует дублирующие подписи, узоры или формы.

OpenDesign

Оставьте место для следующей итерации дизайна.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesign Смотреть дизайн-навыки