داشبورد

وضعیت: پیش‌نویس

داشبورد هارمونیک برای مشتری است، نه برای تیم داده: باید در یک نگاه بگوید پروژه کجاست و کجا به تصمیم نیاز دارد. همهٔ قواعد نمودار اینجا هم برقرارند.

ساختار

سربرگ: نام پروژه و گزارش، عنوانی که نتیجه را می‌گوید، تاریخ به‌روزرسانی و منبع داده.
فیلترها: کم و در همان سربرگ؛ بازهٔ زمانی با فهرست انتخابی، دوحالته‌ها با کلید، و برای فهرست‌های بلند جست‌وجو.
کارت‌های KPI: حداکثر چهار، هرکدام یک عدد با واحد و مقایسه (با هدف یا با شروع). فقط عددی که نکتهٔ اصلی است accent می‌گیرد.
نمودارها: یک یا دو نمودار که عنوانشان نتیجه را می‌گوید.
جدول جزییات: برای کسی که می‌خواهد عددها را بررسی کند؛ ردیف‌ها به ترتیبی معنادار.

پروژهٔ تحول فروش · گزارش ماهانه

فروش شعبه‌های پایلوت ۱۴٪ از هدف جلوتر است

به‌روزشده: ۷ آبان ۱۴۰۵ · منبع: سامانهٔ فروش مشتری

فقط شعبه‌های پایلوت

<div style="display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--hq-space-3);inline-size:100%">
  <div>
    <p class="hq-hero__eyebrow" style="margin:0">پروژهٔ تحول فروش · گزارش ماهانه</p>
    <h2 class="hq-section__title">فروش شعبه‌های پایلوت ۱۴٪ از هدف جلوتر است</h2>
    <p class="hq-form__note">به‌روزشده: ۷ آبان ۱۴۰۵ · منبع: سامانهٔ فروش مشتری</p>
  </div>
  <div style="display:flex;flex-wrap:wrap;gap:var(--hq-space-2);align-items:center">
    <div class="hq-select" style="inline-size:auto">
      <select class="hq-input hq-input--md" aria-label="بازهٔ زمانی"><option>شش ماه اخیر</option><option>از شروع پروژه</option></select>
      <svg class="hq-icon hq-select__chevron" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M16 22 6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"/></svg>
    </div>
    <label class="hq-toggle"><input class="hq-toggle__input" type="checkbox" role="switch" /><span class="hq-toggle__track"></span>فقط شعبه‌های پایلوت</label>
  </div>
</div>

فروش ماه

۴۸٫۲

میلیارد تومان

۱۴٪ بالاتر از هدف

نرخ تبدیل

۳۱٪

از بازدید به خرید

۴ واحد بیشتر از شروع

گام‌های انجام‌شده

۱۸ از ۲۴

گام نقشهٔ راه

دو گام عقب‌تر از برنامه

<div class="hq-cards" style="inline-size:100%">
  <article class="hq-card hq-card--outline"><span class="hq-card__eyebrow">فروش ماه</span><div class="hq-stat hq-stat--accent"><div class="hq-stat__value">۴۸٫۲</div><div class="hq-stat__label">میلیارد تومان</div><div class="hq-stat__note">۱۴٪ بالاتر از هدف</div></div></article>
  <article class="hq-card hq-card--outline"><span class="hq-card__eyebrow">نرخ تبدیل</span><div class="hq-stat hq-stat--ink"><div class="hq-stat__value">۳۱٪</div><div class="hq-stat__label">از بازدید به خرید</div><div class="hq-stat__note">۴ واحد بیشتر از شروع</div></div></article>
  <article class="hq-card hq-card--outline"><span class="hq-card__eyebrow">گام‌های انجام‌شده</span><div class="hq-stat hq-stat--ink"><div class="hq-stat__value">۱۸ از ۲۴</div><div class="hq-stat__label">گام نقشهٔ راه</div><div class="hq-stat__note">دو گام عقب‌تر از برنامه</div></div></article>
</div>

شعبهٔ اصفهان پس از اجرای پایلوت از بقیه جدا شد

نرخ تبدیل سرنخ به فروش · ٪

منبع: ارزیابی هارمونیک · دادهٔ نمایشی

شعبه‌ها، به ترتیب فاصله از هدف
شعبه	فروش (میلیارد تومان)	فاصله از هدف	وضعیت
اصفهان	۱۲٫۴	+۲۲٪	جلوتر
تهران، ونک	۱۸٫۱	+۹٪	جلوتر
شیراز	۸٫۶	−۳٪	نزدیک هدف

<div class="hq-table-wrap" style="inline-size:100%">
  <table class="hq-table">
    <caption>شعبه‌ها، به ترتیب فاصله از هدف</caption>
    <thead><tr><th scope="col">شعبه</th><th scope="col" class="hq-table__num">فروش (میلیارد تومان)</th><th scope="col" class="hq-table__num">فاصله از هدف</th><th scope="col">وضعیت</th></tr></thead>
    <tbody>
      <tr><th scope="row">اصفهان</th><td class="hq-table__num">۱۲٫۴</td><td class="hq-table__num">+۲۲٪</td><td><span class="hq-pill hq-pill--teal">جلوتر</span></td></tr>
      <tr><th scope="row">تهران، ونک</th><td class="hq-table__num">۱۸٫۱</td><td class="hq-table__num">+۹٪</td><td><span class="hq-pill hq-pill--teal">جلوتر</span></td></tr>
      <tr><th scope="row">شیراز</th><td class="hq-table__num">۸٫۶</td><td class="hq-table__num">−۳٪</td><td><span class="hq-pill hq-pill--gray">نزدیک هدف</span></td></tr>
    </tbody>
  </table>
</div>

قاعده‌ها

یک داستان در هر صفحه. اگر داشبورد بیش از یک پرسش دارد، به زبانه‌ها یا صفحه‌های جدا تقسیمش کنید.
زمینه روشن. داشبورد روی surface یا surface-alt است؛ کارت‌ها تخت، بدون سایه.
وضعیت با متن. رنگ وضعیت (positive، warning، negative) همیشه همراه متن است، و سبز و قرمز برای دسته‌ها استفاده نمی‌شوند.
عدد فارسی، با یک دقت. واحد در برچسب، نه کنار هر عدد.
بارگذاری با اسکلت. تا رسیدن داده، اسکلت همان چیدمان را نشان می‌دهد.

انجام بده«فروش شعبه‌های پایلوت ۱۴٪ از هدف جلوتر است»، با سه کارت و یک نمودار.

انجام نده«داشبورد فروش» با دوازده کارت رنگی و شش نمودار هم‌وزن.