تصوير البيانات للمصممين: كيف تصنع رسومًا بيانية تتواصل فعلًا
دليل مصمم عامل في تصوير البيانات. اختيار الرسم، واللون، والتسلسل الهرمي، وإمكانية الوصول، والمبادئ التي تحول البيانات إلى رسم بياني يقرؤه المستخدم الحقيقي في ثلاث ثوانٍ.
معظم لوحات المنتجات ضجيج. اثنا عشر رسمًا بيانيًا، وست لوحات ألوان، بلا تسلسل هرمي واضح، ومستخدم عليه أن يدرس كل رسم ليعرف ما الذي يقيسه أصلًا. سمّاها الفريق "مبنية على البيانات" وأطلقها. وسمّاها المستخدم "مربكة" وتجاهلها.
هذه الورقة هي النسخة العملية. أنواع الرسوم التي تتواصل فعلًا، وقواعد الألوان التي تصمد في الأحجام الصغيرة، وقرارات التسلسل الهرمي التي تتيح للمستخدم فهم البيانات في ثلاث ثوانٍ، ومعايير إمكانية الوصول التي تبقي العمل قابلًا للاستخدام. لا دروس D3، ولا معارض رسوم، فقط انضباط التصميم في تصوير البيانات داخل منتج حقيقي.
ما هو تصوير البيانات فعلًا
تصوير البيانات هو الترميز البصري للأرقام في أشكال تستطيع العين مقارنتها أسرع مما يستطيع الدماغ قراءة النص. الرسم الشريطي يحول عمودًا من الأرقام إلى مستطيلات تقارن العين ارتفاعاتها فورًا. والرسم الخطي يحول سلسلة زمنية إلى انحدار تقرؤه العين كقصة. الترميز هو المهمة كلها.
الرسم السيئ هو رسم يتصارع فيه الترميز مع البيانات. مخطط دائري بأحد عشر قطاعًا لا يرمّز شيئًا تستطيع العين مقارنته. ومخطط شريطي ثلاثي الأبعاد يرمّز البيانات ثم يشوّه الترميز من أجل البريق البصري. ومخطط خطي بمحورين يروي قصتين كأنهما قصة واحدة. كل واحد منها فشل في التصميم، لا فشل في الرياضيات.
يشرح مقال تصميم التسلسل الهرمي البصري كيف تقرأ العين صفحة ثابتة. وتصوير البيانات هو التسلسل الهرمي مطبقًا على الأرقام.
لماذا يهم تصميم تصوير البيانات في المنتج
معظم أسطح المنتجات فيها معلومة أو معلومتان في كل شاشة. أما اللوحة فتحمل العشرات. وبدون انضباط في التصميم تتحول اللوحة إلى جدار من الإشارات المتنافسة لا يجد المستخدم فيه ما يهم.
وتصوير البيانات يفشل بشكل مختلف عن بقية التصميم. الزر ذو اللون الخاطئ قبيح. أما الرسم ذو النوع الخاطئ فمضلل. يتخذ المستخدم قرارًا بناءً على ما يظنه الرسم يقوله، والرسم قال شيئًا آخر. تكلفة الرسم المضلل قرار خاطئ، لا مجرد جمالية سيئة.
في 2026، صار كل سطح منتج أثقل بالبيانات مما كان قبل خمس سنوات. ميزات الذكاء الاصطناعي تعرض ثقة النموذج ومقاييس الاستخدام وتفصيل التكلفة. وأسطح التحليلات جداول ورسوم في كل مكان. والمصممون القادرون على بناء أنظمة تصوير البيانات صاروا حاسمين لأي منتج أعقد من تطبيق ذي غرض واحد.
اختر الرسم الذي يناسب السؤال
اختيار الرسم هو 80% من عمل تصوير البيانات. اختر الرسم الخطأ ولن ينقذه أي صقل. اختر الرسم الصحيح ويكاد التصميم يكتمل وحده.
عائلات الرسوم الخمس التي تغطي معظم عمل المنتج
معظم تصوير البيانات في المنتجات يعيش داخل خمس عائلات من الرسوم. أتقنها وسيصبح أكثر من 90% من عمل اللوحات روتينيًا.
| السؤال الذي يطرحه المستخدم | نوع الرسم |
|---|---|
| كيف يقارن هذا الرقم بغيره في فئة ما؟ | رسم شريطي |
| كيف يتغير هذا الرقم عبر الزمن؟ | رسم خطي |
| ما تفصيل الكل إلى أجزائه؟ | شريطي مكدس أو خريطة شجرية (ونادرًا جدًا مخطط دائري) |
| كيف يرتبط متغيران؟ | مخطط انتثار |
| ما توزيع القيم؟ | مدرج تكراري أو مخطط صندوقي |
إذا كان الرسم على الشاشة لا يطابق واحدًا من هذه، فالأرجح أن المستخدم لا يعرف أي سؤال يجيب عنه. إما غيّر الرسم ليطابق السؤال، أو غيّر السؤال المطروح.
متى تستخدم رقمًا واحدًا
أكثر الرسوم إهمالًا في تصميم المنتجات هو ألا يكون هناك رسم أصلًا. رقم كبير واحد مع تسمية ومقارنة ("الإيرادات: 124,500 دولار، بزيادة 12% عن الشهر الماضي") يتواصل أكثر مما تفعله معظم اللوحات باثني عشر رسمًا.
استخدم رقمًا واحدًا عندما:
- لا يهتم المستخدم إلا بآخر قيمة، لا بالاتجاه
- يكون الاتجاه مفهومًا من سياق المقارنة
- تكون مساحة الشاشة محدودة (الجوال، الشريط الجانبي، شريط الحالة)
الوزن البصري لرقم واحد بخط عريض وتسمية واضحة هائل. ستتحسن معظم اللوحات لو استُبدل نصف رسومها بأرقام مفردة.
متى تستخدم المضاعفات الصغيرة
المضاعفات الصغيرة شبكة من نوع الرسم نفسه مكررًا لفئات مختلفة. استخدمها عندما يحتاج المستخدم إلى مقارنة الأنماط عبر عناصر كثيرة، لا القيم المطلقة.
شبكة من 12 رسمًا مصغرًا تعرض الإيرادات لكل منطقة أسرع في المسح من رسم واحد فيه 12 خطًا يتقاطع بعضها مع بعض. تقرأ العين كل منطقة بمعزل عن غيرها، ثم تقارن الأشكال عبر الشبكة. التقنية من إدوارد تافتي وما زالت قليلة الاستخدام في لوحات المنتجات.
السقف نحو 16 إلى 20 مضاعفًا صغيرًا في العرض الواحد. بعد ذلك لا تستطيع العين مقارنتها كلها وتتحول الشبكة إلى ورق جدران.
رسوم لا تنجح تقريبًا أبدًا في المنتج
بعض أنواع الرسوم تستمر لأنها تبدو مبهرة في لقطة الشاشة. لكنها لا تتواصل جيدًا تقريبًا أبدًا في منتج حقيقي. احذفها حين تراها.
المخططات الدائرية بأكثر من ثلاثة قطاعات. لا تستطيع العين مقارنة الزوايا بدقة بعد ثلاثة أو أربعة قطاعات. استخدم شريطًا مكدسًا أو خريطة شجرية بدلًا منها. المخططات الدائرية تصلح لنسب القطاعين (نعم/لا، تشغيل/إيقاف) ولا تكاد تصلح لشيء آخر.
المخططات الشريطية ثلاثية الأبعاد. البعد الثالث يشوّه الترميز. الشريط الأمامي يبدو أكبر مما هو، والخلفي يبدو أصغر. استخدم دائمًا ثنائي الأبعاد.
المخططات الخطية بمحورين. محورا y على رسم واحد يوحيان بأن الخطين ينبغي مقارنتهما، لكن المقارنة بلا معنى لأن كل محور على مقياس مختلف. يقرأ المستخدم ارتباطًا غير موجود. إما قسّم إلى رسمين أو استخدم قيمًا مؤشرة على محور واحد.
المخططات الحلقية بتسمية في الداخل. المخطط الحلقي مخطط دائري مع جهد إضافي. والتسمية في الداخل غالبًا تكرر معلومة موجودة على الشاشة. استخدم رقمًا واحدًا مع رسم شريطي صغير بدلًا منه.
سحب الكلمات. تبدو كبيانات ولا تتواصل بشيء. حجم الكلمة يرتبط بالتكرار ارتباطًا فضفاضًا، ولا تستطيع العين مقارنة الأحجام بدقة، والكلمات الأطول تبدو أكبر لأن فيها بكسلات أكثر. احذفها فور رؤيتها.
المخططات الراداري. مفيدة لمقارنات محددة جدًا (تقييمات متعددة الأبعاد على المقياس نفسه)، وتُساء استخدامها تقريبًا دائمًا في المقارنات العامة. لا تستطيع العين مقارنة مساحات المضلعات غير المنتظمة. إذا لم يكن الرسم لحالة استخدام معروفة ومحددة، فاستخدم رسمًا شريطيًا.
اللون في تصوير البيانات
اللون في تصوير البيانات ليس زخرفة. إنه جزء من الترميز. اختيار لون خاطئ قد يقلب معنى الرسم من واضح إلى مضلل.
الاستخدامات الثلاثة للون
كل لون في الرسم يؤدي واحدة من ثلاث مهام:
اللون الفئوي يميز فئات منفصلة لا ترتيب بينها. كل منطقة وكل منتج وكل شريحة عملاء تأخذ تدرجًا مختلفًا. استخدم لوحة من 6 إلى 8 تدرجات متمايزة. بعد 8 تبدأ العين بالخلط بين الألوان المتشابهة ويفشل الترميز.
اللون التسلسلي يعرض قيمًا مرتبة على بُعد واحد. من الفاتح إلى الداكن، ومن التشبع المنخفض إلى المرتفع. استخدم تدرج لون واحدًا لا متعددًا. اللوحات التسلسلية تنقل الحجم عبر القيمة اللونية لا عبر التدرج.
اللون المتباعد يعرض قيمًا تتراوح من السالب إلى الموجب حول نقطة وسط ذات معنى. الأحمر إلى الأبيض إلى الأزرق هو المثال الكلاسيكي. يجب أن تكون نقطة الوسط صفرًا حقيقيًا أو عتبة حقيقية، لا مجرد راحة بصرية.
خلط الثلاثة يقتل الرسم. لوحة فئوية تُستخدم لترميز الحجم غير مقروءة. ولوحة تسلسلية تُستخدم لترميز الفئات مربكة. اختر المناسبة للبيانات.
يغطي مقال نظرية الألوان للمصممين مبادئ اللون الأوسع. ويغطي مسرد لوحة الألوان كيف تُبنى اللوحات.
قواعد اللون التي تصمد في الأحجام الصغيرة
معظم ألوان الرسوم تفشل في الأحجام الصغيرة التي تعيش فيها الرسوم فعلًا في واجهات المنتجات. رسم مصغر بعرض 60 بكسل لا يملك المساحة البصرية لعرض ثمانية ألوان فئوية بوضوح.
خمس قواعد تصمد:
- لا تستخدم أكثر من 6 ألوان فئوية في الرسم الواحد. بعد الستة تستسلم العين.
- احجز لونًا مميزًا واحدًا للإبراز. الخط أو الشريط الذي ينبغي أن ينظر إليه المستخدم أولًا يأخذ لون العلامة أو تدرجًا عالي التباين. وكل ما عداه خافت.
- أخفِت البيانات الثانوية. الخلفيات وخطوط الشبكة وتسميات المحاور بشفافية 40 إلى 60%. والبيانات في المقدمة بتشبع كامل. التباين هو التسلسل الهرمي.
- اختبر بالأحادي اللون. حوّل الرسم إلى تدرج رمادي وتأكد أن التسلسل الهرمي ما زال مقروءًا. إذا كان الرسم لا ينجح إلا بالألوان، فاللون يحمل عبئًا أكثر من اللازم.
- اختبر في الوضع الداكن. معظم رسوم المنتجات يجب أن تعمل على خلفيات فاتحة وداكنة. التدرج نفسه غالبًا يبدو مشبعًا أكثر من اللازم على الداكن وباهتًا على الفاتح. ابنِ لوحة مزدوجة لكل وضع.
يغطي مقال تصميم الوضع الداكن انضباط الوضع الداكن الأوسع. والرسوم من أصعب أجزاء الوضع الداكن إتقانًا.
عمى الألوان ليس حالة هامشية
نحو 8% من الرجال و0.5% من النساء لديهم شكل من أشكال قصور رؤية الألوان. معظم اللوحات الفئوية التي تبدو جيدة للمصمم تصبح غير مقروءة لهؤلاء المستخدمين.
الحل ألا ترمّز المعلومة باللون وحده أبدًا. اقرن اللون بالشكل أو الموضع أو التسمية أو النمط. الرسم الخطي بثلاثة خطوط ملونة ينبغي أن تكون على كل خط منه تسمية مباشرة. والرسم الشريطي ينبغي أن يحمل تسميات قيم للأشرطة التي يحتاج المستخدم إلى مقارنتها.
اختبر اللوحات بمحاكيات عمى الألوان. الفشل الأشيع هو أن الأحمر والأخضر لا يمكن التمييز بينهما لدى مستخدمي عمى الأخضر (deuteranopia). استخدم الأزرق والبرتقالي كزوج فئوي بدلًا منهما، فكلاهما يعمل عبر أشيع أنواع قصور رؤية الألوان.
يغطي مقال تباين الألوان الميسّر معايير التباين. ويغطي مسرد نسبة التباين كيف يُقاس التباين.
التسلسل الهرمي داخل الرسم
لكل رسم تسلسل هرمي. يجب أن تهبط عين المستخدم على البيانات أولًا، ثم التسميات، ثم خطوط الشبكة والمحاور. معظم رسوم المنتجات تقلب هذا الترتيب فيضطر المستخدم إلى بذل جهد للعثور على البيانات.
ما الذي يُبرَز وما الذي يُخفَت
البيانات هي البطل. الأشرطة والخطوط والنقاط تأخذ أقوى وزن بصري. شفافية كاملة وتشبع كامل ولون العلامة أو اللون المميز حيث يناسب.
التسميات والعناوين هي الممثلون المساندون. قوية بما يكفي للقراءة، وليست قوية بما يكفي لمنافسة البيانات. عادة 50 إلى 70% من الوزن البصري للبيانات.
خطوط الشبكة وخطوط المحاور وعلامات التدريج هي المسرح. لا تظهر إلا حين يبحث عنها المستخدم. عادة 20 إلى 40% من الوزن البصري للتسميات.
معظم رسوم المنتجات تُطلق بخطوط شبكة بكامل قوتها لأن هذا هو الافتراضي في كل مكتبة رسوم. والحل تعديل CSS واحد يخفّت خطوط الشبكة فيبدو الرسم فورًا مصممًا بدلًا من أن يبدو قالبًا جاهزًا.
التسمية المباشرة تتفوق على مفاتيح الرسم
مفتاح الرسم على جانب الرسم يجبر عين المستخدم على التنقل ذهابًا وإيابًا بين المفتاح والبيانات. أما التسميات المباشرة على كل خط أو شريط أو قطاع فتتيح للمستخدم قراءة الرسم في مرور واحد.
التسمية المباشرة أصعب في التنفيذ ومكتبات الرسوم لا تدعمها جيدًا. ابنها على أي حال. رسم خطي بثلاثة خطوط مسماة عند طرفها الأيمن أسهل قراءة بكثير من الرسم نفسه بمفتاح في الزاوية.
الاستثناء هو أن تكون السلاسل أكثر من أن تتسع لها التسميات المباشرة. في هذه الحالة استخدم مفتاحًا تفاعليًا. التمرير أو النقر على عنصر في المفتاح يبرز تلك السلسلة في الرسم ويخفّت الباقي.
قاعدة الثواني الثلاث
كل رسم في المنتج ينبغي أن يجيب عن سؤاله في ثلاث ثوانٍ. إذا اضطر المستخدم إلى دراسة الرسم، فقد فشل التصميم.
كيف تختبر قاعدة الثواني الثلاث
أرِ الرسم لشخص لم يرَ اللوحة من قبل. اسأله: "ماذا يخبرك هذا الرسم؟" وقِس زمن الإجابة.
إذا جاءت الإجابة في أقل من ثلاث ثوانٍ فالرسم ناجح. وإذا استغرقت أكثر فابحث عما يبطئهم. عادة يكون واحدًا من:
- نوع الرسم لا يطابق السؤال
- التسلسل الهرمي مقلوب (خطوط الشبكة أعلى صوتًا من البيانات)
- المفتاح يجبر العين على التنقل ذهابًا وإيابًا
- ترميز اللون غير واضح
- الرسم فيه سلاسل كثيرة جدًا
أصلح العلة وأعد الاختبار. اللوحة التي ينجح كل رسم فيها في اختبار الثواني الثلاث هي لوحة يستطيع المستخدم استخدامها فعلًا.
متى لا تنطبق قاعدة الثواني الثلاث
أدوات التحليل الاستكشافي (أدوات BI ودفاتر علم البيانات) مختلفة. المستخدم لا يلقي نظرة عابرة، إنه يحقق. يريد كل متغير وكل بُعد وكل مرشح. الثواني الثلاث تصبح ثلاث دقائق وهذا مقبول.
الخطأ هو بناء لوحة منتج بانضباط أداة BI. مستخدم المنتج لا يحقق. إنه يتفقد. الثواني الثلاث هي الميزانية.
التفاعل في تصوير البيانات
الرسوم في واجهات المنتجات تفاعلية. تمرير للتلميحات، ونقر للتصفية، وتظليل للتكبير. والتفاعلات تحتاج تصميمًا متعمدًا كالترميز الثابت.
تصميم التلميحات
التلميحات على الرسوم تجيب عن سؤال "ما القيمة الدقيقة لهذه النقطة؟" معظم مكتبات الرسوم تفترض تلميحًا يعرض كل السلاسل دفعة واحدة، فيتحول عند التمرير إلى جدار من النص.
افتراضات أفضل:
- تلميح واحد لكل سلسلة، لا لكل السلاسل. مرّر على الخط الذي يهمك، فترى قيمته. والتمرير على خلفية الرسم لا يعرض شيئًا.
- التلميحات تتضمن الوحدة. "$1,240" لا "1240".
- التلميحات تعرض سياق المقارنة حيث يفيد. "$1,240 (+8% مقارنة بالأسبوع الماضي)" يحول التلميح إلى قصة.
- التلميحات لا تحجب البيانات أبدًا. ضعها فوق المؤشر أو تحته بحسب قربه من حافة الرسم.
التصفية والتظليل
الرسوم التي تدعم التلاعب المباشر تبدو سريعة الاستجابة بطريقة لا تحققها الرسوم التي تحتاج لوحة مرشحات منفصلة. تظليل نطاق زمني على المحور x للتكبير، والنقر على فئة في المفتاح لعزلها، وسحب خط عتبة لتصفية الصفوف. كل منها يتطلب جهدًا هندسيًا يؤتي ثماره في ثقة المستخدم.
الخطر هو الإفراط في الهندسة. رسم يحتاج خمس تفاعلات ليكون مفيدًا هو رسم ينبغي تقسيمه إلى عدة رسوم أبسط. كل تفاعل كلفة معرفية.
يغطي مسرد الإفصاح التدريجي المبدأ الأوسع. ويمكن للرسوم أن تستخدمه جيدًا بإخفاء عناصر التحكم المتقدمة حتى يُظهر المستخدم نيته.
إخفاقات تصوير البيانات التي يجب الانتباه لها
كل تدقيق للوحة يكتشف الإخفاقات نفسها. إذا أُطلق المنتج بأي منها، فطبقة تصوير البيانات تقوض بقية المنتج.
محاور y مقتطعة تضخم التغيير. رسم شريطي يبدأ محور y فيه من 95 بدل الصفر يحول تغييرًا بنسبة 2% إلى جرف بصري. استخدم محاور بالمدى الكامل ما لم يوجد سبب واضح، وسمِّ أي اقتطاع صراحة.
رسوم شريطية بلا خط أساس صفري. طول الشريط هو الترميز. وإذا لم يبدأ الشريط من الصفر فالترميز يكذب. هذا غير قابل للتفاوض في الرسوم الشريطية. أما الرسوم الخطية فيمكنها استخدام محاور مقتطعة حين تعرض مدى صغيرًا عبر الزمن.
أنواع رسوم غير متناسقة في لوحة واحدة. رسمان شريطيان باتجاهين مختلفين، ورسمان خطيان بمدى محاور مختلف، ومخطط دائري بجوار شريط مكدس يعرضان البيانات نفسها. اختر نوع الرسم الذي يناسب كل سؤال، لكن اجعل المعالجة البصرية متسقة عبر اللوحة.
رسوم تستغرق تحميلًا أطول من بقية الصفحة. لوحة ترسم التخطيط في 200 مللي ثانية والرسوم في ثانيتين تبدو معطلة. ابنِ حالات هيكلية لكل رسم. حمّل الرسوم أسفل الشاشة كسولًا. وبُثّ البيانات بدل انتظار الحمولة الكاملة.
رسوم تتجاهل العلامة. لوحة تستخدم ألوان مكتبة الرسوم الافتراضية تبدو كقالب. ينبغي اشتقاق لوحة الرسم من نظام ألوان العلامة، مع تعديلات لإمكانية الوصول ووضوح الأحجام الصغيرة. لا تُطلق أبدًا لوحة بلوحة ألوان Chart.js أو Recharts الافتراضية في الإنتاج.
يغطي مقال لوحة ألوان العلامة انضباط ألوان العلامة الأوسع. لوحات تصوير البيانات تُشتق ولا تُخترع.
تصوير البيانات في ظروف 2026
ثلاثة تحولات غيرت طريقة تصميم تصوير البيانات. والعمل يجب أن يتكيف.
الذكاء الاصطناعي يولّد الرسوم في ثوانٍ. أدوات مثل ChatGPT وClaude تستطيع توليد رسم من بيانات خام بـأمر واحد. الخطر أن يتوقف المصممون عن التفكير في اختيار الرسم لأن الذكاء الاصطناعي يختار. والذكاء الاصطناعي يختار تقريبًا دائمًا نوع رسم عامًا لا يطابق السؤال الفعلي. استخدمه للمسودات الأولى، ثم أعد البناء بحسب السؤال الذي يطرحه المستخدم.
البيانات الفورية هي الافتراضي. اللوحات اليوم تبث بيانات حية بدل التحديث كل 60 ثانية. والمعنى التصميمي أن الحركة تحتاج تصميمًا أيضًا. الرسوم الحية التي ترتعش مع كل تحديث غير قابلة للاستخدام. الاستيفاء السلس بين نقاط البيانات ومؤشر "مباشر" واضح هما الحد الأدنى.
لوحات الجوال شائعة. لوحة مصممة لسطح المكتب فقط تفقد معظم استخدام عطلات نهاية الأسبوع والسفر. الرسوم على الجوال تحتاج قرارات مختلفة، غالبًا أنواع رسوم أبسط وسلاسل أقل وتخطيطات أطول تُمرَّر بدل شبكات تنضغط.
يغطي مقال التصميم المتجاوب انضباط التجاوب الأوسع. وتصوير البيانات من أصعب الطبقات في جعله متجاوبًا حقًا.
الأسئلة الشائعة
ما نوع الرسم الذي ينبغي أن أستخدمه؟
طابق الرسم مع السؤال الذي يطرحه المستخدم. مقارنة القيم عبر الفئات: رسم شريطي. عرض التغير عبر الزمن: رسم خطي. عرض أجزاء الكل: شريطي مكدس أو خريطة شجرية (ونادرًا جدًا مخطط دائري). عرض العلاقة بين متغيرين: مخطط انتثار. عرض التوزيع: مدرج تكراري أو مخطط صندوقي. إذا كان الرسم على الشاشة لا يناسب واحدًا من هذه، فالمستخدم لا يعرف أي سؤال يجيب عنه.
متى أتجنب المخططات الدائرية؟
تقريبًا دائمًا. المخططات الدائرية تصلح لقطاعين أو ثلاثة حين تكون النسبة هي القصة كلها (نعم/لا، تشغيل/إيقاف، تقسيمات ثنائية بسيطة). بعد ثلاثة قطاعات لا تستطيع العين مقارنة الزوايا بدقة، ويصبح الرسم زخرفة. استخدم شريطًا أفقيًا مكدسًا أو خريطة شجرية بدلًا منه.
كم لونًا ينبغي أن يستخدم الرسم؟
ستة ألوان فئوية كحد أقصى، بالإضافة إلى لون مميز واحد للسلسلة المبرزة. بعد الستة تبدأ العين بالخلط بين التدرجات المتشابهة ويفشل الترميز. للبيانات التسلسلية (من المنخفض إلى المرتفع) استخدم تدرج لون واحدًا من الفاتح إلى الداكن. وللبيانات المتباعدة (من السالب إلى الموجب) استخدم تدرجًا ثنائي اللون حول نقطة وسط ذات معنى.
كيف أجعل الرسوم ميسّرة؟
لا ترمّز المعلومة باللون وحده أبدًا. اقرن اللون بالشكل أو الموضع أو التسمية أو النمط. اختبر اللوحات بمحاكيات عمى الألوان (عمى الأخضر هو الأشيع). حقق الحد الأدنى لتباين WCAG بين عناصر الرسم والخلفية. قدم تسميات مباشرة بدل الاعتماد على المفاتيح وحدها حيثما أمكن. وأضف أسماء ميسّرة لمكونات الرسم لقارئات الشاشة.
ما قاعدة الثواني الثلاث للرسوم؟
كل رسم في لوحة المنتج ينبغي أن يجيب عن سؤاله في ثلاث ثوانٍ أو أقل حين يُعرض على مستخدم جديد. إذا اضطر المستخدم إلى دراسة الرسم، فقد فشل التصميم. اختبر بعرض الرسم على شخص لم يرَ اللوحة وقياس الزمن الذي يستغرقه في تلخيص ما يقوله الرسم. أي زمن فوق ثلاث ثوانٍ يعني أن الرسم يحتاج تبسيطًا.
هل أستخدم مكتبة رسوم أم أبني رسمًا مخصصًا؟
استخدم مكتبة رسوم للمسودات الأولى والنماذج الأولية. معظم الرسوم الإنتاجية في واجهات المنتجات تستفيد من طبقات مخصصة فوق المكتبة لإصلاح الافتراضات: خطوط شبكة خافتة، وتسميات مباشرة، ولوحات ألوان بهوية العلامة، وتلميحات مخصصة. أما تصوير البيانات المخصص بالكامل بـ D3 أو canvas فلا يبرره إلا أن يكون نوع الرسم غير مألوف لدرجة لا تدعمها أي مكتبة.
تصوير البيانات تصميم لا زخرفة
لوحة بتصوير بيانات منضبط تبدو كمنتج يحترم وقت المستخدم. ولوحة بدونه تبدو كجدار من الزخرفة يصادف أن فيه أرقامًا. المسافة بين الاثنتين صغيرة، والطريق الوحيد إلى الأولى هو انضباط التصميم المطبق على اختيار الرسم واللون والتسلسل الهرمي والتفاعل.
اختر الرسم الذي يطابق السؤال. أخفِت خطوط الشبكة وأبرز البيانات. استخدم اللون كترميز لا كزخرفة. اختبر بقاعدة الثواني الثلاث. اختبر مع عمى الألوان. واختبر على الجوال والوضع الداكن.
المنتج الذي يُطلق تصوير بيانات منضبطًا يبدو جادًا. والمنتج الذي يُطلق مخرجات مكتبة الرسوم الافتراضية يبدو قالبًا. يلاحظ المستخدمون الفرق حتى حين لا يستطيعون تفسير سببه.
إذا أردت فريقًا يبني أنظمة تصوير البيانات إلى جانب بقية واجهة المنتج، وظّف Brainy. الرسوم كجزء أساسي من نظام التصميم في كل مشروع.
قراءات ذات صلة
Want a dashboard or product UI where the data actually communicates? Brainy ships data-heavy interfaces with chart systems built in, not bolted on after the fact.
Get Started
