التصميم
كل ما صنّفناه تحت هذا التصنيف.
عنصران
لوحة معلومات يقرأها الناس فعلًا
أغلب لوحات المعلومات تموت ميتة صامتة: تُبنى بحماس، وتُعرض في اجتماع الإطلاق، ثم لا يفتحها أحد بعد أسبوعين. المشكلة نادرًا ما تكون في البيانات — إنها في التصميم الذي يعرض كل شيء ولا يقول شيئًا. لوحة المعلومات الناجحة ليست معرضًا للرسوم البيانية، بل أداة قرار يومية. في هذا المقال نلخص المبادئ التي نصمم بها في «الشبكة» لوحات يفتحها الناس كل صباح لأنها تجيب عن أسئلتهم فعلًا.ابدأ من القرار، لا من البياناتالسؤال الخاطئ عند بناء اللوحة: «ما البيانات المتوفرة لدينا؟». السؤال الصحيح: «ما القرارات التي يتخذها مستخدم هذه اللوحة كل أسبوع؟». كل عنصر في اللوحة يجب أن يجيب عن سؤال محدد يقود لتصرف — «هل نحتاج تدخلًا اليوم؟»، «أين يتسرب العملاء؟». الرسم الذي لا يغيّر قرارًا هو ضجيج مهما كان جميلًا.لكل رسم في اللوحة سؤال يجيب عنه — وإن لم تستطع صياغة السؤال، احذف الرسم.حبر البيانات: كل بكسل يبرر وجودهمبدأ إدوارد توفتي الشهير: انسب أكبر قدر من «الحبر» للبيانات نفسها، وأقل قدر للزينة. عمليًا هذا يعني حذف الخلفيات المظللة، والحدود الثقيلة، والتدرجات، والظلال، وخطوط الشبكة الكثيفة، وتأثيرات الأبعاد الثلاثية — كلها تنافس البيانات على انتباه العين ولا تضيف معلومة. اللوحة النظيفة ليست ذوقًا جماليًا؛ إنها سرعة قراءة.لون واحد يكفي للتمييزاللوحة التي تستخدم عشرة ألوان لا تميّز شيئًا — فحين يصرخ كل شيء، لا يُسمع شيء. النظام الذي يعمل: درجات رمادية هادئة للأساس، ولون تمييز واحد للأهم — الخط الذي يهم الآن، أو الشريحة التي تحتاج انتباهًا — والأحمر محجوز حصريًا للتحذير الحقيقي. بهذا الانضباط، تقود اللون عين القارئ إلى ما يستحق خلال ثانية.التسلسل الهرمي يقود العينالقارئ يمسح اللوحة، لا يقرؤها سطرًا سطرًا. صمم لهذا السلوك: الأرقام المصيرية في الأعلى كبيرة وواضحة، والتفاصيل الداعمة تحتها، والاستكشاف العميق في المستوى الأخير أو خلف نقرة. وقاعدة الشاشة الواحدة: ما يحتاج تمريرًا طويلًا لن يُرى — إن كثرت الأقسام فوزّعها على لوحات لجمهور مختلف بدل شاشة واحدة لا نهائية.اختر الرسم الذي يطابق السؤالالاتجاه عبر الزمن — خط. لا شيء يضاهيه.المقارنة بين فئات — أعمدة مرتبة من الأكبر للأصغر.رقم واحد مصيري — رقم كبير مع مؤشر التغير عن الفترة السابقة، لا عدّاد سرعة.الدائرة (Pie) — نادرًا: فئتان أو ثلاث كحد أقصى، وإلا فالأعمدة أوضح.وانتبه لمحاور تبدأ من غير الصفر في الأعمدة — إنها تضخّم الفروق وتخدع القارئ، وثقة اللوحة أغلى ما فيها.رقم بلا سياق ليس معلومة«الإيراد 48,000» — هل هذا جيد؟ لا أحد يعلم بدون مقارنة. كل رقم في اللوحة يحتاج مرجعًا: الفترة السابقة، أو الهدف، أو متوسط السوق. أضف خط الهدف على الرسم، ونسبة التغير بجانب الرقم، ولوّن الانحراف — عندها يتحول الرقم من إحصائية إلى حكم: نحن بخير، أو نحتاج تدخلًا.للجمهور العربي: اللوحة تقرأ من اليميناللوحات ثنائية اللغة تحدٍّ نتعامل معه يوميًا: في الواجهة العربية ينعكس التخطيط كاملًا (RTL) فيبدأ التسلسل البصري من أعلى اليمين، بينما تبقى محاور الزمن في الرسوم تجري من اليسار لليمين كما يتوقع القارئ للأرقام. والأرقام الطويلة والتواريخ تحتاج تنسيقًا محليًا صحيحًا. اختبر النسختين — فاللوحة التي تُقرأ طبيعيًا بالعربية لا تأتي مجانًا من مكتبة رسوم أجنبية.قائمة تحقق قبل إطلاق أي لوحةهل كل رسم يجيب عن سؤال قرار واضح يمكنك كتابته بجملة؟هل حذفت كل زينة لا تحمل معلومة — خلفيات وظلال وأبعاد ثلاثية؟هل تستخدم لونًا واحدًا للتمييز والأحمر للتحذير فقط؟هل الأهم في أعلى الشاشة، وكل شيء مرئي بلا تمرير طويل؟هل كل رقم مصحوب بمقارنة تعطيه معنى — هدف أو فترة سابقة؟الخلاصةلوحة المعلومات الجيدة ليست الأكثر رسومًا بل الأسرع إجابة: يفتحها صاحب القرار فيعرف خلال ثوانٍ هل الأمور بخير وأين يجب أن ينظر. ابدأ من الأسئلة، وقتّر في الحبر واللون، ورتّب بالتسلسل، وأعطِ كل رقم سياقه — وستحصل على اللوحة النادرة: التي يفتحها الناس كل يوم طوعًا.في «الشبكة» نصمم لوحات المعلومات والتقارير التفاعلية ثنائية اللغة للشركات والجهات — من نمذجة البيانات إلى واجهة تُقرأ فعلًا. إذا كانت لوحاتك تُبنى ولا تُفتح، تواصل معنا.
الرموز كعقد بين الفرق
في كل مشروع رقمي يتكرر المشهد نفسه: المصمم يختار درجة لون في أداة التصميم، والمطور يكتب قيمة قريبة منها في الكود، وبعد ستة أشهر يصبح في المنتج أحد عشر «أزرق» مختلفًا ولا أحد يعرف أيها الصحيح. رموز التصميم (Design Tokens) هي الحل الجذري لهذه الفوضى — وهي أرخص وسيلة نعرفها للبقاء متّسقًا مع نمو المنتج والفريق. في هذا المقال نشرح كيف نتعامل معها في «الشبكة» بوصفها عقدًا ملزمًا بين التصميم والتطوير، لا مجرد ملف ألوان.ما هي رموز التصميم؟الرمز هو قيمة تصميمية مسماة: بدل أن تكتب #237F8C في عشرين مكانًا، تعرّف color-brand-primary مرة واحدة وتشير إليه في كل مكان. ينطبق الأمر نفسه على المسافات، وأحجام الخطوط، وأنصاف الأقطار، والظلال، ومدد الحركة. القيمة تسكن في مكان واحد، والاسم يحمل المعنى.القوة الحقيقية ليست في التسمية بل في النتيجة: حين يتغير اللون الأساسي للعلامة، يتغير في مصدر واحد وينعكس تلقائيًا على الويب والتطبيق والبريد التسويقي — بدل أسابيع من المطاردة اليدوية.الرمز عقد، والعقد له طرفانالخطأ الشائع هو معاملة الرموز كملف إعدادات يخص المطورين. الرموز الناجحة عقد بين التصميم والهندسة: المصمم يلتزم بأن كل قرار بصري يمر عبر رمز مسمى، والمطور يلتزم بألا تدخل قيمة خام واحدة إلى الكود.أي قيمة بصرية لا تملك اسمًا متفقًا عليه هي دين تقني بصري — ستدفع ثمنه عند أول إعادة تصميم.بهذا العقد يصبح نقاش «هل هذا هو الرمادي الصحيح؟» نقاشًا في مكان واحد، ويتحول مراجع الكود من مقارنة أرقام سداسية إلى قراءة نوايا واضحة.ثلاث طبقات تمنع الفوضىالرموز المسطحة تنهار مع أول وضع ليلي أو علامة فرعية. البنية التي نعتمدها ثلاث طبقات:رموز أساسية — لوحة القيم الخام: teal-600، space-4، font-size-16. لا تُستخدم في الواجهات مباشرة.رموز دلالية — المعنى الوظيفي: color-text-primary، surface-raised، border-focus. تشير إلى الطبقة الأساسية.رموز المكوّنات — عند الحاجة فقط: button-bg يشير إلى رمز دلالي.الوضع الليلي بهذه البنية ليس ملف CSS جديدًا، بل إعادة ربط الطبقة الدلالية بقيم أساسية أخرى. والعلامة الفرعية الجديدة لوحة أساسية جديدة تحت الأسماء الدلالية نفسها.مصدر واحد للحقيقة — والباقي توليدالعقد ينهار إذا كان له نسختان. نخزن الرموز في مصدر واحد (ملفات JSON في المستودع عادة، أو أداة مثل Tokens Studio متصلة به)، ونولّد منه كل الصيغ آليًا: متغيرات CSS للويب، وقيم أدوات التصميم، وثوابت المنصات الأصلية. أدوات مثل Style Dictionary تجعل هذا التوليد خطوة بناء عادية.القاعدة الذهبية: التعديل يحدث في المصدر فقط. تعديل يدوي في أي صيغة مولّدة هو كسر للعقد وسيُمحى مع أول توليد قادم.حوكمة التغيير: الرموز لها إصداراتتغيير قيمة رمز يلمس كل شاشة في المنتج، لذا يستحق انضباط الإصدارات: تغيير قيمة فقط هو تحديث بسيط؛ إعادة تسمية أو حذف رمز تغيير كاسر يحتاج فترة انتقال ومسارًا واضحًا للترحيل. مراجعة تغييرات الرموز تكون مشتركة — مصمم ومطور معًا — لأن العقد لا يعدّله طرف واحد.قائمة تحقق لبدء العمل بالرموزهل لديك جرد للقيم البصرية المكررة في منتجك الحالي (الألوان أولًا)؟هل الرموز مقسمة إلى طبقات أساسية ودلالية — والواجهات تستهلك الدلالية فقط؟هل يوجد مصدر واحد تُولَّد منه كل الصيغ آليًا في خطوة البناء؟هل يمنع فحص آلي في CI دخول قيم خام جديدة إلى الكود؟هل تغييرات الرموز تمر بمراجعة مشتركة بين التصميم والهندسة؟الخلاصةرموز التصميم ليست ترفًا لفرق التصميم الكبيرة؛ إنها أرخص تأمين ضد تآكل الاتساق الذي يصيب كل منتج ينمو. عقد واضح، وثلاث طبقات، ومصدر واحد للحقيقة، وحوكمة بسيطة — هذا كل ما تحتاجه لتظل هوية منتجك متماسكة عبر كل منصة وكل فريق وكل إعادة تصميم قادمة.في «الشبكة» نبني أنظمة التصميم ونؤسس بنية الرموز للمنتجات العربية والإنجليزية على حد سواء — بما فيها تحديات الاتجاهين RTL وLTR. إذا كان منتجك يعاني من فوضى بصرية متراكمة، تواصل معنا ونساعدك تبني نظامًا يوقفها من الجذر.