كود المنصات: نظام التصميم الموحد للمملكة العربية السعودية

قبل نوفمبر 2024، كان كل فريق تطوير في أي جهة حكومية يبدأ من الصفر تقريباً.. يختار ألوانه، يبني مكوناته، ويصمم واجهاته بطريقته الخاصة. والنتيجة كانت منصات تبدو وكأنها تنتمي إلى حكومات مختلفة، لا إلى دولة واحدة لها هوية رقمية موحدة.

كود المنصات هو نظام تصميم موحد مفتوح المصدر للمملكة العربية السعودية، طوّرته هيئة الحكومة الرقمية وأُعلن عن إطلاقه رسمياً في 17 نوفمبر 2024، ويهدف إلى توحيد تجربة المستخدم في كافة المواقع والمنصات الحكومية السعودية.

في هذا المقال نستعرض ما كود المنصات ولماذا أُنشئ، وما الذي يتضمنه، ومن يستفيد منه، وعلاقته بمعايير الهيئة، وكيف تحصل جهتك على شهادة تطبيقه، وكيف يساعد «معيار بلس» من uxarabia في تطبيقه بشكل صحيح.

ما هو كود المنصات ولماذا أُنشئ؟

كود المنصات هو المرجع الوطني لتصميم وتطوير واجهات المنصات الحكومية في المملكة، بهدف توحيدها بما يضمن تقديم تجربة رقمية متسقة وشاملة.

الفكرة الجوهرية خلفه بسيطة، بدلاً من أن تبني كل جهة حكومية نظام تصميمها الخاص من الصفر، يوفر الكود منصة مشتركة من الأصول والمكونات والإرشادات الجاهزة تُوظَّف مباشرةً في بناء أي منصة حكومية مع ضمان التوافق مع المعايير الرسمية.

وأوضح محافظ الهيئة المهندس أحمد الصويان خلال حفل الإطلاق، أن الكود يوفر نظام تصميم مفتوح المصدر يدعم المشاريع الرقمية في الجهات الحكومية، من خلال الجمع بين التعليمات البرمجية وأدوات التصميم والإرشادات وفق منهجية أساسها المجتمع، مما يسهم في التطوير السريع للتجارب المتسقة، ويتيح للمصممين والمطورين التركيز على تلبية الاحتياجات المحددة باستخدام الأصول المبنية مسبقاً.

وما يميّز كود المنصات عن مجرد دليل تصميم اختياري هو طابعه الإلزامي، فهو الكود الرقمي الذي تُبنى عليه عمليات تقييم الجهات ومنح الاعتماد، وتُقاس على أساسه المنصات الحكومية ضمن مؤشرات الهيئة.

ما الذي يتضمنه كود المنصات؟

يتكون كود المنصات من أربع طبقات متكاملة تغطي كل ما يحتاجه فريق التصميم والتطوير:

أولاً: الأساسات – Foundations

تشمل الأساسات:

• منظومة الألوان الرسمية المعتمدة
• نظام الطباعة والخطوط الحكومية الموحدة
• قواعد التخطيط والمسافات
• إرشادات التصميم المتجاوب لضمان التجربة السليمة على جميع الأجهزة
• مكتبة الأيقونات الرسمية

هذه الأساسات هي القاموس البصري المشترك الذي تُبنى عليه جميع المكونات.

ثانياً: المكونات – Components

تضم أكثر من 33 مكوناً مطوراً برمجياً مسبقاً وقابلاً لإعادة الاستخدام، تشمل:

• عناصر النماذج والمدخلات كرافع الملفات ومربع الاختيار وزر الاختيار ومدخل النص
• عناصر التنقل كالقائمة ومسار التصفح وشريط التنقل العلوي
• عناصر عرض المحتوى كالبطاقة والأكورديون والختم الرقمي
• عناصر التغذية الراجعة كالإشعارات والنافذة المنبثقة

ويصل مجموع متغيرات تجربة المستخدم إلى أكثر من 4,650 متغيراً، مع 100 نمط يتماشى مع دليل الهوية الرسمية.

ثالثاً: القوالب – Templates

قوالب جاهزة لأبرز أنواع الصفحات الحكومية، تشمل:

• الصفحة الرئيسية
• صفحة الخدمة
• صفحة البحث
• صفحة المشاركة الإلكترونية

هذه القوالب توفر هيكلاً مبنياً مسبقاً يُختصر به وقت التصميم ويضمن الاتساق مع المعايير.

رابعاً: الأدوات التقنية

يعتمد الكود على بيئتين تقنيتين رسميتين:

• Figma لأصول التصميم والمكتبة البصرية
• React لمكتبة المكونات البرمجية

ويُستخدم Storybook لتوثيق المكونات والتحقق من تطبيقها تقنياً، وهو المرجع الذي يعتمده المقيّمون عند فحص مستوى الامتثال.

من يستفيد من كود المنصات وكيف؟

يستفيد المطورون من الكود من خلال مكتبة المكونات التي توفر مكونات واجهة مستخدم مطوّرة برمجياً مسبقاً وقابلة لإعادة الاستخدام، مع الوثائق والإرشادات للتنفيذ.

كما يستفيد مدراء المنتجات في ضمان إطلاق منتجات عالية الجودة تحقق أهداف المنصة وتساعد في تسريع عملية الابتكار والتركيز على مشاكل المستخدمين وإيجاد الحلول.

وعلى مستوى أوسع، تستفيد ثلاث فئات رئيسية:

• فرق التصميم تحصل على مكتبة Figma الرسمية الجاهزة، مما يعني أنها تبدأ من نظام تصميم متكامل يضمن الاتساق مع المعايير من اليوم الأول بدلاً من البدء من صفحة بيضاء.
• فرق التطوير تحصل على مكتبة React جاهزة للتنفيذ المباشر، مما يُقلّص وقت بناء المكونات ويضمن أن ما يُنفَّذ برمجياً يطابق ما صُمِّم تصميمياً.
• مديرو المنتجات والجهات الحكومية يحصلون على مرجع موحّد للتقييم والمراجعة، مما يُسهّل قياس مستوى الامتثال ويُحدد فجوات التطبيق بدقة قبل الخضوع للتقييم الرسمي.

ما علاقة كود المنصات بمعايير هيئة الحكومة الرقمية؟

كود المنصات لا يُعد مبادرة منفصلة عن منظومة معايير الهيئة، إذ يُشكّل جزءاً أساسياً منها ويرتبط بها بصورة مباشرة.

وذكر محافظ هيئة الحكومة الرقمية أن كود المنصات يتميز بمواءمته مع معايير المؤشرات الرقمية المحلية والدولية، وهو أحد المبادرات النوعية الداعمة لتحقيق تحول رقمي شامل في كافة الجهات الحكومية.

على المستوى العملي، يرتبط الكود بمنظومة تقييم الهيئة في ثلاثة محاور:

• مؤشر قياس التحول الرقمي يتضمن ضمن معاييره الـ89 متطلبات تتعلق بالتصميم وتجربة المستفيد، وتُقيَّم الجهات على أساسها سنوياً بما يجعل الالتزام بكود المنصات مؤثراً مباشراً في الدرجة الكلية.
• مؤشر نضج التجربة الرقمية «DEMI» يفحص اتساق الواجهة وجودة التجربة عبر نقاط الاتصال المختلفة، وهي نتائج مباشرة لمستوى الالتزام بمكونات الكود.
• شهادة تطبيق كود المنصات هي الأداة المباشرة التي تُثبت أن الجهة طبّقت الكود بشكل صحيح وشامل وفق المواصفات الرسمية.

كيف تحصل جهتك على شهادة تطبيق كود المنصات؟

شهادة تطبيق كود المنصات تسهم في رفع ترتيب مستوى المملكة في المؤشرات الدولية والمحلية وتحسين تجربة المستخدمين.

الحصول عليها يستلزم المرور بمسار تقييم يفحص المنصة على ثلاثة مستويات متكاملة:

المستوى الأول – الفحص التصميمي

التحقق من أن الأصول البصرية المستخدمة من ألوان وخطوط وأيقونات ومكونات مأخوذة من المكتبة الرسمية بقيمها الدقيقة دون تعديل.

المستوى الثاني – الفحص التقني

التحقق من أن المكونات مبنية فعلاً على مكتبة كود المنصات الرسمية، وليست نسخاً مصمَّمة يدوياً، وذلك عبر مراجعة الكود البرمجي ومكتبة Storybook.

المستوى الثالث – فحص الوصولية

التحقق من استيفاء معايير WCAG المدمجة في الكود، كنسب التباين اللوني وحجم النصوص ودعم قارئات الشاشة والتنقل بلوحة المفاتيح.

وتجدر الإشارة إلى أن معظم المنصات تفشل في اجتياز التقييم من المحاولة الأولى، لأن الفجوات تظهر في طبقات أعمق مما يبدو في المراجعة الداخلية.

وقد حصلت الهيئة العامة للإحصاء على شهادة تطبيق كود المنصات الرقمية، كما نالت وزارة البيئة والمياه والزراعة شهادة تطبيق كود المنصات، في سابقة تُثبت قابلية تطبيق الكود بشكل كامل على مستوى جهات حكومية كبرى.

كيف يساعد «معيار بلس» في تطبيق كود المنصات بشكل صحيح؟

الفجوة بين امتلاك كود المنصات كمرجع وتطبيقه بشكل صحيح على منصة فعلية أوسع مما تبدو، وهذه الفجوة هي ما يعالجه نموذج «معيار بلس» الذي طوّرناه في uxarabia.

في تقييمنا لمستوى الالتزام بكود المنصات، نعمل على ثلاثة محاور:

1. مطابقة الأصول بالقيم الرسمية الدقيقة

لا نكتفي بالمقارنة البصرية، وإنما نتحقق من أن القيم التفصيلية للألوان والأبعاد والمسافات تطابق ما هو موثق في الكود الرسمي.

مثال: قد تبدو درجة اللون الرئيسي في المنصة متطابقة مع الكود، لكن قيمة الـ HEX تختلف بفارق دقيق لا يُلاحظ بالعين.

2. التحقق من أصل المكونات

نُفرّق بين مكوّن مبني على مكتبة كود المنصات الرسمية ومكوّن مصمَّم يدوياً ليبدو مشابهاً، لأن الفارق بينهما يظهر في السلوك والمتغيرات والقدرة على التحديث التلقائي مع تطور الكود.

3. ربط الفجوات بمتطلبات الشهادة

كل فجوة نرصدها نحدد أثرها على فرصة الجهة في الحصول على شهادة كود المنصات، وأولوية معالجتها ضمن خطة تحسين عملية.

خلاصة

كود المنصات يُمثل إطاراً وطنياً يحدد شكل الحكومة الرقمية السعودية وآلية تفاعلها عبر مختلف نقاط التواصل مع المستفيد، إلى جانب توفير مكتبة تصميم موحدة.

والالتزام به يعكس الاعتماد على أساس موثوق يضمن الاتساق والجودة والامتثال في الوقت ذاته، دون أن يُقيّد عملية التطوير أو الابتكار.