EARN TO LEARN Добавить
Библиотека
Веб-дизайн·Урок

Дашборд и диаграммы: показываем вопрос, а не декор

У хорошей диаграммы есть конкретный вопрос, реальные данные, подписи и текстовый вывод. Карточки метрик не заменяют смысл.

Brightly HeroПример: Brightly Hero · Открыть разбор →

Результат

Вы спроектируете маленький учебный дашборд: три честные сводки, одна диаграмма и список следующих материалов. Он отвечает на один вопрос, например: какие категории изучались за неделю или сколько материалов осталось в выбранном треке. Не рисуйте график для вымышленных чисел и не превращайте «прогресс» в оценку человека. Если данных пока нет, лучше показать пустое состояние и объяснить, что появится после первых записей.

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

Шаги

  1. Запишите вопрос в одном предложении и определите единицу измерения: материалы, минуты, завершённые практики.
  2. Выберите минимальный вид: столбцы для сравнения категорий, линия для изменения во времени, таблица для точных значений.
  3. Подпишите оси, легенду, период и источник локальных данных. Цвет не должен быть единственным способом различить серии.
  4. Рядом с графиком добавьте одно текстовое наблюдение, основанное на показанных числах, без неподтверждённого вывода о причине.
  5. Сделайте пустое и нулевое состояния разными: «нет данных» не равно «значение равно нулю».

Применимый prompt

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

Критерий проверки

Без цвета и tooltip можно назвать вопрос, период, единицы и минимум один вывод, который действительно следует из значений.

Источники

Следующий шаг

Запишите один вопрос к данным и подготовьте таблицу из трёх реальных строк до выбора диаграммы.

Источник: https://ui.shadcn.com/docs/components/radix/chart
Можно восстановить в любой момент