Heatmap
يستخدم شدة اللون داخل مصفوفة لإظهار الأنماط والتركيز.
السؤال الذي يجيب عنه
أين تتركز الشدة عبر بعدين فئويين؟
أين يستخدم
المصفوفات التي تقارن الشدة عبر بعدين مثل يوم الأسبوع × الساعة أو الميزة × الشريحة.
متى تستخدمه
استخدمه عندما تحتوي المصفوفة خلايا متكررة كثيرة وتساعد شدة اللون على كشف التركيز والنمط.
متى تتجنبه
تجنبه عندما يحتاج المستخدم إلى قيم الخلايا الدقيقة مباشرة أو عندما تكون فروق اللون دقيقة جدا.
التصميم المتجاوب
حافظ على وضوح تسميات الصفوف والأعمدة، واسمح بتمرير منظم للمصفوفات الكبيرة، وأبق مقياس الشدة قريبا من الشبكة.
العربية والاتجاه من اليمين إلى اليسار
استخدم RTL لتسميات الصفوف والأعمدة اللغوية، ولا تعكس الزمن أو الأبعاد الرقمية المرتبة عشوائيا داخل المصفوفة.
تكوين المكون
- سياق المخطط
- يسمي ما تعدّه كل خلية (التذاكر في الساعة) والفترة، فيصبح للشدة وحدة.
- الخلايا
- درجة اللون تمثل قيمة كل تركيبة من يوم وساعة. تظهر الأنماط كنطاقات وتجمعات.
- بُعد الأعمدة
- أحد البعدين الفئوي أو المرتب (الساعات). حافظ على ترتيب ذي معنى وتسميات مقروءة.
- بُعد الصفوف
- البعد الثاني (أيام الأسبوع). ترتيب الصفوف قد يكشف بنية يخفيها الترتيب الثابت.
- مقياس الشدة
- يربط اللون بالأرقام. استخدم تدرجا واحدا من الفاتح إلى الداكن وضع المقياس بجانب الشبكة.
إمكانية الوصول
- وفر القيم الرقمية عند التركيز أو اللمس وجدولا بديلا، واستخدم تدرجا ذا تباين إدراكي كاف.
جميع الدروس
- Bar Chart — يقارن القيم بين الفئات باستخدام طول الأشرطة على مقياس مشترك.
- Line Chart — يعرض التغير عبر تسلسل مرتب، وغالبا عبر الزمن.
- Area Chart — يبرز الحجم عبر تسلسل مرتب بملء المساحة أسفل الخط.
- Pie / Donut Chart — يعرض عددا صغيرا من الأجزاء التي تكون كلا واحدا ذا معنى.
- Scatter Plot — يكشف العلاقات والتجمعات والقيم الشاذة بين متغيرين رقميين.
- Histogram — يعرض توزيع متغير رقمي عبر نطاقات من القيم.
- Box Plot — يلخص التوزيع والوسيط والتشتت والقيم الشاذة المحتملة بشكل مدمج.
- Heatmap — يستخدم شدة اللون داخل مصفوفة لإظهار الأنماط والتركيز.
- Treemap — يعرض العلاقات الهرمية بين الجزء والكل عبر مستطيلات متداخلة.
- Funnel Chart — يعرض تغير مجموعة من المستخدمين أو العناصر عبر مراحل مرتبة من عملية.
- Waterfall Chart — يشرح كيف تؤدي المساهمات الموجبة والسالبة إلى قيمة نهائية.
- Sparkline — يعرض اتجاها مضغوطا دون الإطار الكامل للمخطط التقليدي.
- Gauge — يعرض قيمة واحدة ضمن نطاق محدد عندما يكون موقعها بالنسبة للحد مهما.
- Combo Chart — يجمع ترميزات بصرية متوافقة عندما تحتاج قيمتان مترابطتان إلى مقارنة منسقة.
- Geographic Data Map — يربط القيم بالمواقع أو المناطق عندما تكون الجغرافيا جزءا من السؤال.
- KPI / Stat Card — تعرض مؤشرا مهما واحدا مع سياق كاف لفهم قيمته الحالية وتغيره.
- Data Table — يعرض السجلات المنظمة ضمن صفوف وأعمدة، مع اعتبار البحث والتصفية والفرز والتحديد والتنقل بين الصفحات أجزاء من المكون الكامل.
- Dashboard Card / Panel — تجمع مهمة أو مؤشرا أو تصورا واحدا مترابطا داخل منطقة محددة بتسلسل واضح.
- Filter Bar — يضع أهم عناصر التحكم بالنطاق قرب البيانات التي تؤثر فيها.
- Filter Panel — يجمع مجموعة أكبر من عناصر التصفية داخل سطح مخصص.
- Date Picker / Date Range Picker — يتيح اختيار تاريخ واحد أو نطاق زمني محدد للتقارير والتصفية والتحليلات.
- Sidebar Navigation — يوفر وصولا ثابتا إلى وجهات ومجموعات لوحة المعلومات الرئيسية.
- Top App Bar — يجمع هوية الصفحة والإجراءات العامة وعناصر التحكم المهمة أعلى التطبيق.
- Breadcrumbs — يوضح التسلسل الهرمي ويوفر طريقا للعودة عبر مستويات لوحة المعلومات.
- Tabs — يبدل بين عروض متكافئة ضمن سياق لوحة المعلومات نفسه.
- Alert / Banner — ينقل معلومات مهمة سياقية أو على مستوى الصفحة ويجب أن تبقى ظاهرة حتى يتم فهمها أو حلها.
- Toast — يؤكد نتيجة قصيرة غير متزامنة دون إيقاف المهمة الحالية.
- Notification Center — يجمع تحديثات النظام وسير العمل التي قد يحتاج المستخدم إلى الرجوع إليها.
- Dropdown / Overflow Menu — ينقل الإجراءات الثانوية أو السياقية إلى قائمة تظهر عند الطلب.
- Modal / Dialog — ينشئ مهمة مؤقتة مركزة قد تمنع التفاعل مع لوحة المعلومات خلفها.
- Drawer / Side Panel — يفتح عناصر تحكم أو تفاصيل سياقية من الحافة مع إبقاء الصفحة خلفه.