اصول نمودار

وضعیت: در حال بازبینی

نمودار برای اثبات یک نکته است، نه نمایش همهٔ داده‌ها. این فصل از فصل نمودار برندبوک می‌آید و نمونه‌ها با دادهٔ نمایشی همان فصل ساخته شده‌اند. نمودارهای این سایت با کتابخانهٔ ECharts و رنگ‌های توکن کشیده می‌شوند؛ در Keynote و PowerPoint همین قواعد با نمودار خود نرم‌افزار اجرا می‌شود.

هر نمودار، یک پرسش

فروش در سه سال دو برابر شد

فروش سالانه · میلیارد تومان

✓ عنوان نتیجه را می‌گوید؛ رنگ فقط روی نکته است

فروش سالانه

✕ عنوان توصیفی؛ رنگ‌ها معنایی ندارند

• یک پرسش: پیش از ساختن بنویسید نمودار به چه پرسشی جواب می‌دهد. اگر دو پرسش است، دو نمودار.
• عنوان یعنی نتیجه: عنوان یک جملهٔ کامل است که مخاطب باید به خاطر بسپارد (Action Title).
• حذف هرچه داده نیست: حاشیه، سایه، خط اضافه و رنگ بی‌معنا را حذف کنید تا داده دیده شود.
• صداقت: مقیاس، محور، دورهٔ زمانی و منبع درست؛ نمودار نباید چیزی بیش از داده بگوید.

آناتومی

هفت جزء ثابت در همهٔ نمودارهای هارمونیک:

بهره‌وری بعد از استقرار سیستم جدید ۲۲٪ رشد کرد

شاخص بهره‌وری ماهانه · مبنا: فروردین ۱۴۰۴ = ۱۰۰

• شرکت
• میانگین صنعت

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

1. عنوان-نتیجه: راوی Bold، یک جمله، نتیجهٔ نمودار؛ بالا-راست کارت.
2. زیرعنوان: سنجه، واحد، بازهٔ زمانی و مبنا؛ راوی Regular با Cool Gray 60.
3. راهنما: برای دو سری یا بیشتر، همیشه؛ بالای نمودار و هم‌ترتیب با سری‌ها.
4. محور و خط راهنما: خطوط افقی مویی Cool Gray 20؛ ۴ تا ۶ درجه با اعداد گرد.
5. توضیح (annotation): رویداد یا نکته روی خود نمودار، نزدیک داده، با زمینهٔ Blue 10.
6. برچسب‌های محور: کوتاه و افقی؛ هرگز چرخیده یا مایل.
7. منبع و یادداشت: زیر خط جداکننده: منبع، تاریخ، و «دادهٔ نمایشی» در صورت نیاز.

انتخاب نمودار

از پرسش شروع کنید، نه از نوع نمودار.

می‌خواهم…	نمودار
مقدار در چند دسته را مقایسه کنم	میله‌ای افقی، ستونی، نقطه‌ای
دو یا سه سری را کنار هم مقایسه کنم	میله‌ای گروهی، دمبلی
عملکرد را در برابر هدف نشان دهم	بولت، یا میله با خط هدف
روند را در زمان نشان دهم	خطی؛ ستونی برای دوره‌های کم؛ ناحیه‌ای
تغییر بین دو زمان را نشان دهم	شیب، دمبلی
از یک عدد به عدد دیگر برسم	آبشاری
سهم اجزا از کل را نشان دهم	انباشته، انباشتهٔ ۱۰۰٪، دونات (تا ۴ بخش)، درختی
سهم را در دو بعد نشان دهم	مکو
پراکندگی و توزیع را نشان دهم	هیستوگرام، جعبه‌ای
رابطهٔ دو یا سه متغیر را ببینم	پراکنش، حبابی
امتیاز چند بعد را ارزیابی کنم	نقشهٔ حرارتی؛ راداری با احتیاط
جریان، تبدیل یا ریزش را نشان دهم	قیفی، سنکی
برنامهٔ زمانی را نشان دهم	گانت
پراکندگی جغرافیایی را نشان دهم	نقشهٔ کاشی ایران
فقط یک عدد مهم است	کارت KPI؛ نمودار لازم نیست

رنگ در نمودار

چهار نقش رنگ؛ هر نقش یک قاعده. ترتیب‌ها با ابزار سنجش کوررنگی آزموده شده‌اند.

• دسته‌ای، هویت سری‌ها: chart-1 تا chart-5 (Cyan 50، Yellow 50، Blue 60، Teal 50، Purple 60) با ترتیب ثابت، هرگز چرخشی. از دستهٔ ششم به بعد در «سایر» با chart-other (Cool Gray 30). همین ترتیب روی زمینهٔ تیره هم معتبر است.
• برجسته‌سازی، یک نکته: سری یا میلهٔ مورد بحث accent (Blue 60) و بقیه chart-other. بیشتر نمودارهای ارایه به این شکل‌اند.
• پیوسته، شدت: یک فام از روشن به تیره، chart-seq-1 تا chart-seq-6 (Cyan 40 تا Cyan 90). روشن‌ترین پله باید روی سفید دیده شود.
• واگرا، دو قطب: قرمز برای منفی، Cyan برای مثبت و Cool Gray 20 برای مرز. هرگز فام رنگی در وسط.
• وضعیت، معنا: positive، warning و negative فقط برای خوب، هشدار و بد؛ همیشه با برچسب یا آیکن. هرگز برای «سری چهارم».

chart-1

سری ۱ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن

cyan-50 · #1192E8

تیره

cyan-50 · #1192E8

var(--hq-chart-1)

chart-2

سری ۲ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن

yellow-50 · #B28600

تیره

yellow-50 · #B28600

var(--hq-chart-2)

chart-3

سری ۳ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن

blue-60 · #0F62FE

تیره

blue-60 · #0F62FE

var(--hq-chart-3)

chart-4

سری ۴ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن

teal-50 · #009D9A

تیره

teal-50 · #009D9A

var(--hq-chart-4)

chart-5

سری ۵ از ۵ در نمودارهای دسته‌ای، به همین ترتیب ثابت.

روشن

purple-60 · #8A3FFC

تیره

purple-60 · #8A3FFC

var(--hq-chart-5)

chart-other

سری «سایر»، داده‌های کم‌اهمیت و زمینه.

روشن

gray-30 · #C1C7CD

تیره

gray-30 · #C1C7CD

var(--hq-chart-other)

chart-seq-1

گام ۱ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن

cyan-40 · #33B1FF

تیره

cyan-40 · #33B1FF

var(--hq-chart-seq-1)

chart-seq-2

گام ۲ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن

cyan-50 · #1192E8

تیره

cyan-50 · #1192E8

var(--hq-chart-seq-2)

chart-seq-3

گام ۳ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن

cyan-60 · #0072C3

تیره

cyan-60 · #0072C3

var(--hq-chart-seq-3)

chart-seq-4

گام ۴ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن

cyan-70 · #00539A

تیره

cyan-70 · #00539A

var(--hq-chart-seq-4)

chart-seq-5

گام ۵ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن

cyan-80 · #003A6D

تیره

cyan-80 · #003A6D

var(--hq-chart-seq-5)

chart-seq-6

گام ۶ از ۶ در طیف ترتیبی (Cyan 40 تا 90).

روشن

cyan-90 · #012749

تیره

cyan-90 · #012749

var(--hq-chart-seq-6)

به‌روزرسانی فصل رنگ

ترتیب دسته‌ای فصل نمودار جایگزین ترتیب قبلی فصل رنگ شده است؛ آن ترتیب در آزمون روشنایی و کوررنگی رد شد. در نسخهٔ ۰٫۷ رنگ دوم (chart-2) از Yellow 60 به Yellow 50 تغییر کرد.

نوشتار و اعداد

هر عدد در نمودار باید بدون محاسبه خوانده شود.

جزء	Keynote / PPT (pt)	وزن و رنگ
عنوان-نتیجه	۳۲ / ۱۶	Bold · Cyan 90
زیرعنوان	۲۰ / ۱۰	Regular · Cool Gray 60
برچسب داده	۲۰ / ۱۰	SemiBold · Cool Gray 80
برچسب محور	۱۸ / ۹	Regular · Cool Gray 60
راهنما	۱۸ / ۹	Regular · Cool Gray 80
توضیح	۱۸ / ۹	SemiBold · Blue 60
منبع	۱۶ / ۸	Regular · Cool Gray 50

عدد اول برای اسلاید ۱۹۲۰ در ۱۰۸۰ و عدد دوم برای اسلاید ۹۶۰ در ۵۴۰ است.

• ارقام: فارسی. در نرم‌افزار با ارقام لاتین وارد می‌شوند و نسخهٔ FaNum راوی آن‌ها را فارسی نشان می‌دهد. در وب، toLocaleString('fa-IR').
• واحد یک بار: واحد و مقیاس در زیرعنوان («میلیارد تومان»)، نه کنار هر عدد.
• گرد کردن: حداکثر یک رقم اعشار؛ درصدها معمولاً بدون اعشار. همهٔ اعداد یک نمودار با یک دقت.
• جداکننده‌ها: هزارگان «٬» و اعشار «٫»؛ درصد «٪» چسبیده به عدد.
• مقدارهای منفی: در نمودار، جهت و رنگ میله منفی بودن را نشان می‌دهد؛ در متن بنویسید «۱۲٪ کاهش».
• متن داخل رنگ: متن هرگز هم‌رنگ سری نیست؛ هویت را مربع یا خط رنگی کنار متن می‌گوید.

محورها و خطوط راهنما

محور ابزار خواندن است، نه تزیین.

محور از صفر: تفاوت واقعی

✓ محور از صفر: تفاوت واقعی

محور بریده: تفاوت سه‌برابر دیده می‌شود

✕ محور بریده: تفاوت سه‌برابر دیده می‌شود

• صفر برای میله: محور میله‌ای و ستونی همیشه از صفر. محور نمودار خطی می‌تواند از صفر شروع نشود، ولی این را در زیرعنوان بنویسید.
• درجه‌ها: ۴ تا ۶ درجه با اعداد گرد (۰، ۲۵، ۵۰…).
• خط راهنما: مویی، یکپارچه و Cool Gray 20؛ فقط در جهت خواندن مقدار.
• جهت: محور زمان از چپ به راست؛ میله‌های افقی از راست رشد می‌کنند و برچسب‌ها سمت راست‌اند.
• ترتیب دسته‌ها: بر اساس مقدار، مگر ترتیب طبیعی داشته باشند (زمان، مرحله، رده).
• برچسب طولانی: به جای چرخاندن برچسب، نمودار را افقی کنید.
• مقیاس لگاریتمی: فقط وقتی داده چند مرتبهٔ بزرگی دارد؛ همیشه با عبارت «مقیاس لگاریتمی».
• حذف محور: اگر همهٔ مقدارها برچسب دارند، محور عددی و خطوط راهنما حذف می‌شوند.

برجسته‌سازی و توضیح

چشم مخاطب را مستقیم به نکته ببرید.

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

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

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

• یک سری Blue 60 و بقیه Cool Gray 30.
• برچسب مستقیم کنار سری مهم، به جای راهنمای جدا.
• نوار پس‌زمینهٔ Cyan 10 برای یک بازهٔ زمانی (پایلوت، بحران، فصل).
• خط هدف یا میانگین: خط‌چین Cool Gray 70 با برچسب «هدف».
• متن توضیح کوتاه، نزدیک داده، بدون فلش‌های بلند.

قاعده: در هر نمودار یک نکتهٔ اصلی؛ دو نکته یعنی دو نمودار. رنگ برجسته‌سازی با رنگ سری‌ها رقابت نکند: اگر برجسته می‌کنید، بقیه خاکستری‌اند. توضیح‌ها جزء نمودارند؛ در Keynote و PowerPoint با نمودار گروه شوند.

✓انجام بدهیک سری Blue 60، بقیه خاکستری و یک توضیح کوتاه کنار داده.

✕انجام ندهفلش و دایرهٔ قرمز دستی روی نمودار، یا برجسته کردن با قرمز و سبز وقتی معنای خوب یا بد ندارد.

نمودارهای ممنوع و پرخطر

این‌ها داده را تحریف می‌کنند یا خواندن را سخت می‌کنند.

نمودار	وضعیت	چرا	به جایش
سه‌بعدی	ممنوع	عمق و پرسپکتیو اندازه‌ها را تحریف می‌کند؛ میلهٔ جلویی بزرگ‌تر دیده می‌شود.	همان نمودار دوبعدی
دومحوره	ممنوع	هم‌ترازی دو محور دلخواه است و رابطه‌ای می‌سازد که در داده نیست.	دو نمودار کنار هم، یا هر دو سری با مبنای ۱۰۰
عقربه‌ای (Gauge)	ممنوع	فضای زیاد برای یک عدد و مقایسه‌ناپذیر.	کارت KPI یا بولت
دایره‌ای پرتکه	ممنوع	بیش از ۴ تکه یا تکه‌های نزدیک به هم قابل مقایسه نیستند.	میله‌ای افقی
راداری	با احتیاط	مساحت و شکل به ترتیب محورها بستگی دارد و اغراق می‌کند.	میله‌ای گروهی یا حرارتی
ابر کلمات	ممنوع	اندازهٔ کلمه به طول آن هم بستگی دارد و چیزی را نمی‌سنجد.	میله‌ای افقی فراوانی

جدول‌ها

وقتی خواننده باید عدد دقیق را پیدا کند، جدول بهتر از نمودار است. کامپوننت آن جدول است.

• متن راست‌چین، عددها با رقم هم‌عرض و یک دقت در هر ستون.
• واحد در سرستون یا زیرعنوان.
• سرستون با راوی SemiBold و رنگ text-secondary و خط ۲ پیکسلی زیر آن؛ ردیف‌ها با خط مویی؛ بدون خط عمودی و بدون راه‌راه.
• ردیف جمع Bold، با خط ink بالای آن.
• برای برجسته کردن ستون یا خانه، زمینهٔ accent-subtle، نه رنگ متن.

چک‌لیست

پیش از گذاشتن هر نمودار در اسلاید یا سند:

• عنوان، نتیجه را می‌گوید.
• یک نکته برجسته است و بقیه خاکستری‌اند.
• محور میله‌ها از صفر است.
• واحد، بازهٔ زمانی و منبع نوشته شده.
• ترتیب دسته‌ها معنادار است.
• رنگ‌ها از ترتیب دسته‌ای برند و ثابت‌اند.
• ارقام فارسی و با یک دقت‌اند.

• سه‌بعدی، سایه و افکت
• دو محور عمودی در یک نمودار
• دایره‌ای با بیش از چهار بخش
• عدد روی همهٔ نقطه‌ها
• برچسب چرخیده
• سبز و قرمز برای دسته‌ها
• نمودار برای یک عدد تنها

در کد

<!-- رنگ‌ها را از توکن‌ها بخوانید، نه از هگز -->
<script type="module">
  const css = getComputedStyle(document.documentElement);
  const color = (name) => css.getPropertyValue(`--hq-${name}`).trim();
  const palette = [1, 2, 3, 4, 5].map((i) => color(`chart-${i}`));
  const fa = (n) => n.toLocaleString('fa-IR');
</script>

• با تغییر تم (data-theme) رنگ‌ها را دوباره بخوانید و نمودار را دوباره بکشید.
• نمودار role="img" و یک aria-label برابر عنوان-نتیجه می‌گیرد؛ دادهٔ دقیق را در جدول کنار آن یا در پیوست بیاورید.