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

كود المنصات، وهو نظام التصميم الموحد للمملكة العربية السعودية، مرجع وطني لتصميم واجهات المنصات الحكومية وتطويرها، أطلقته هيئة الحكومة الرقمية في ١٧ نوفمبر ٢٠٢٤ في نسخته الأولى. وهو ليس دليلًا إرشاديًا يُستأنس به، بل مواصفة قابلة للقياس: ٥٦ معيارًا موزعة على ست فئات، تتفرع إلى ١٢٧ نقطة قبول متمايزة، لكل نقطة منها حكم يقبل أو يرد.

وهذا الدليل لا يعيد شرح ما تشرحه الهيئة في موقعها الرسمي. ما يضيفه شيء آخر: قياس فعلي. فُحصت عيّنة من المنصات الحكومية بلغت ٢٩ منصة، بواقع ثماني صفحات لكل منصة على ثلاثة مقاسات للشاشة، وأنتج القياس صورة لا تظهر في أي وثيقة.

من ٢٣ معيارًا أمكن قياسها على العيّنة كاملة، ٢٢ معيارًا يقع معدل التطبيق الكلي فيها بين ٠٪ و٥٪. معيار واحد فقط يخرج عن هذا النمط.

لكن معدل التطبيق الجزئي في المعايير نفسها يتراوح غالبًا بين ٩٠٪ و١٠٠٪.

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

و«قريب» ليس «مطابق» في مواصفة تُقاس.

قبل أي حديث عن الالتزام، يلزم فهم البنية، وهي المعرفة التي تغيب عن أغلب ما يُكتب عن الكود.

المعايير ٥٦، تنقسم إلى ٤٣ معيارًا أساسيًا و١٣ معيارًا ثانويًا. والتوزيع على الفئات:

وتحت هذه المعايير ١٢٧ نقطة قبول متمايزة. أي أن المعيار الواحد ليس سؤالًا واحدًا، بل مجموعة شروط يسقط المعيار بسقوط أيّها. وهذا وحده يفسّر لماذا يبدو التطابق البصري كافيًا وهو ليس كذلك.

ومن حيث قابلية القياس، تنقسم المعايير إلى ثلاثة أنواع: ٢١ معيارًا حاسمًا له قاعدة قاطعة تُقاس آليًا، و٢٧ معيارًا استدلاليًا يُقاس بمؤشرات مركّبة، وثمانية معايير لا يحكمها إلا بشر، مثل اتساق المصطلحات ووضوح اللغة وبديهية التنقل. ولذلك يغطي القياس الآلي في XFix ٤٨ معيارًا من ٥٦، وتبقى الثمانية معروضة بأسمائها وحالتها خارج حساب التقدير.

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

معيار ١ · المكتبة

التطبيق الكلي في العيّنة: ٥٪ · التطبيق الكلي والجزئي: ٤٢٪

هذا أهم رقم في الدليل كله. معناه أن منصة واحدة تقريبًا من كل عشرين تستخدم مكتبة كود المنصات الرسمية استخدامًا فعليًا، وأن البقية تبني العناصر بأيديها ثم تعلن الالتزام.

وأكثر ما يظهر هنا تكرارًا: إعلان الالتزام مع بناء العناصر يدويًا، والتطابق البصري دون أي استخدام للمكتبة. والنتيجة أن العنصر يبدو صحيحًا اليوم، ثم لا تصله تحديثات النظام أبدًا.

هذا المعيار هو السبب الجذري لكل رقم آخر في هذا الدليل، وهو أعلى نقطة رافعة في أي خطة معالجة.

معيار ٢ · الألوان

التطبيق الكلي: ٠٪ · الكلي والجزئي: ٥٥٪

لا منصة واحدة في العيّنة طابقت لوحة الألوان المعتمدة مطابقة كاملة. وأكثر أربع مخالفات تكرارًا:

1. ألوان خارج لوحة الألوان المعتمدة
2. استخدام الألوان التنبيهية في غير موضع التنبيه، فيفقد اللون دلالته
3. نص على خلفية ملونة دون استعمال قيم On-Color المخصصة لذلك
4. نسبة تباين دون 4.5:1

المخالفة الأخيرة تخرج من التصميم إلى إمكانية الوصول، وهي من أكثر ما يسقط في المراجعات.

معيار ٣ · الخطوط

التطبيق الكلي: ٥٪ · الكلي والجزئي: ٥٨٪

الخط المعتمد هو IBM Plex Sans Arabic. وأكثر ما يُرصد تكرارًا: خط مخصص أو خط عام بدل المعتمد، وارتفاع سطر أصغر مما تسمح به المواصفة، وأوزان خارج الأوزان الأربعة المقررة. والمثال الذي تسوقه الهيئة نفسها صريح: ارتفاع سطر 16 حيث ينبغي 28.

معيار ٤ · المسافات

التطبيق الكلي: ٠٪ · الكلي والجزئي: ٦٣٪

سلّم المسافات يبدو تفصيلًا شكليًا حتى يُقاس. وأكثر ما يظهر تكرارًا: قيم خارج السلّم المعتمد، وpadding غير كافٍ للأزرار فتنكسر مساحة اللمس 44px، وتساوي التباعد بين العناصر المترابطة وغير المترابطة فتضيع المجموعات البصرية، واختلاف المسافات بين صفحة وأخرى في المنصة نفسها.

لاحظوا أن الخلل الثاني هنا يسقط معيارًا آخر معه: مساحة اللمس معيار قائم بذاته.

معيار ٥ · الاستجابة

التطبيق الكلي: ٠٪ · الكلي والجزئي: ١٠٠٪

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

وأكثر ما يُرصد تكرارًا: تجاوز أفقي على الجوال، ومنع التكبير، وأهداف لمس أصغر من المسموح، وإخفاء التنقل على المقاسات الصغيرة دون بديل يصل إليه المستخدم.

معيار ٦ · الأيقونات

مكتبات أيقونات خارجية، وتعديل الحجم أو اللون بعد الاستدعاء، وأحجام غير متسقة داخل الصفحة الواحدة، وأيقونة لا تطابق معناها. والمثال الرسمي هنا دقيق: أيقونة رابط في موضع «إضافة إلى التقويم».

القوالب تحكم بنية الصفحات لا شكلها. وثلاثة منها مؤكدة الإلزام في ورش الهيئة: الرئيسية والخدمة والمشاركة الإلكترونية. أما البحث فيُقاس، ويُسجَّل «لا ينطبق» حيث لا يوجد بحث في المنصة أصلًا.

الرئيسية: قسم Hero بصورة غير موحّدة الأسلوب وبارتفاع خارج المواصفة، وأقسام مخصّصة لا وجود لها في النظام، وترتيب أول قسم لا يطابق نوع المنصة.

الخدمة: غياب تقسيم واضح للعناوين، وغياب بطاقة تفاصيل الخدمة الموحّدة، ونموذج أقرب في بنائه إلى Google Forms منه إلى النموذج الحكومي الموحّد.

المشاركة الإلكترونية: وجود بعض الأقسام دون بقيتها، وروابط معطلة، وتسميات مختلفة تُخفي القسم عن الباحث عنه.

البحث: غياب شريط البحث من صفحة النتائج نفسها، وغياب التصنيفات والتصفية، وتعذّر التسامح الإملائي العربي، وهو ما يجعل خطأ حرف واحد يُفرغ النتائج.

أكبر فئة، وفيها تختلف التقارير فعليًا. ونبدأ بالاستثناء.

معيار ١١ · الختم الرقمي · الاستثناء الوحيد

التطبيق الكلي: ٤١٪ · الكلي والجزئي: ٩٠٪

هذا المعيار الوحيد في العيّنة الذي يبلغ فيه التطبيق الكلي رقمًا معتبرًا، ودلالته أهم من رقمه. الختم الرقمي عنصر واحد منفصل، مواصفته قاطعة لا تحتمل تأويلًا، وموضعه محدد: أعلى الصفحة فوق شريط التنقل العلوي، لا في التذييل.

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

جدار الصفر

بقية العناصر المقيسة تقع كلها عند ٠٪ تطبيق كلي، مع تطبيق جزئي مرتفع:

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

ما يسقط في العناصر الأكثر شيوعًا

الأزرار: إخفاء الأزرار الضرورية داخل القوائم، وازدحام الأزرار دون مسافة فاصلة فتقع نقرات عرضية، والانحراف عن تركيب الزر المعتمد.

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

الروابط: تمييزها باللون وحده، ونصوص عامة غامضة لا تصف وجهتها، وغياب أيقونة الرابط الخارجي.

الإشعارات: استعمال Toast للتحذيرات الحرجة وهي تختفي قبل قراءتها، ورسائل خطأ غامضة لا تقول ما العمل، والإفراط في الإشعارات فيضعف أثرها، وغياب role الذي يعلنها لقارئ الشاشة.

علامات التبويب: جمل طويلة مكان العناوين القصيرة، ومحتوى لا يتبدّل فعليًا مع تبديل التبويب.

العلامات: تمديد العلامة داخل حاويتها فيتشوّه مظهرها ويفقد العنصر شكله المعتمد.

أربع مخالفات مشتركة بين كل معايير العناصر

هذه تتكرر عبر المكوّنات التسعة والعشرين جميعًا، ومعالجتها مرة واحدة ترفع عدة معايير معًا:

1. ١.عنصر يطابق الشكل بصريًا دون أي إشارة إلى المكتبة، وهي العلامة الدالة على البناء اليدوي
2. ٢.غياب مؤشر تركيز مرئي عند التنقل بلوحة المفاتيح
3. ٣.مساحة لمس دون ٤٤ بكسل
4. ٤.عنصر غير دلالي في موضع الصحيح، مثل div مكان button

فئة التجربة تحكم سلوك المنصة لا مظهرها. ومنها خريطة الموقع، وقد بلغ التطبيق الكلي فيها ٠٪ والجزئي ٧٤٪ على العيّنة كاملة.

وفي المعايير الثانوية يظهر ترقيم الصفحات بالنمط نفسه: ٠٪ كلي و٩٢٪ جزئي.

أما كتلة التجربة الثانوية، من ٤٨ إلى ٥٦، فأغلبها مما يحكمه تقدير بشري: اتساق المصطلحات، ووضوح اللغة، وبديهية التنقل، ونبرة المحتوى. وهذه لا يقيسها فحص آلي، وأي أداة تدّعي قياسها تعد بما لا تملك.

تنبيه على القراءة: ٣٣ معيارًا من ٥٦ قُيست على عدد من المنصات أقل من أن يُشتق منه معدل، ولذلك لا تجدون لها نسبة هنا. غياب الرقم مقصود، لا سهو.

هنا يجتمع كل رقم في هذا الدليل.

كل معيار من معايير العناصر يقوم على ثلاثة أجزاء: التصميم الأساسي دون تعديل، والحالات التفاعلية من تمرير وضغط وتركيز وتعطيل، والحالات السياقية من اختيار وتحديد وتوسيع.

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

والتشبيه الذي تسوقه الهيئة نفسها دقيق: المكوّنات قطع ليغو. ابنوا بها ما شئتم، ولا تعدّلوا القطعة.

وهذا يفسّر مفارقة القياس: تطبيق جزئي شبه شامل، وتطبيق كلي شبه معدوم. ويعيد تعريف الالتزام من «اجعلوه يبدو صحيحًا» إلى «استعملوا المكتبة». وهو كذلك سبب كون معيار ١ عند ٥٪ جذرًا للمشكلة لا واحدًا من ٥٦ ملاحظة.

ما يجوز تخصيصه · حتى لا يُقرأ ما سبق تهويلًا

الكود لا يطلب منصات متطابقة، بل متسقة. والمسموح صريح:

1. شعار الجهة وهويتها محفوظان
2. المحتوى والتخطيط من اختيار الجهة
3. الألوان تُختار من داخل لوحة الألوان المعتمدة
4. السمات الموسمية، كرمضان ويوم التأسيس عبر لوحتي الذهبي واللافندر، مسموح بها صراحةً وليست مخالفة

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

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

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

والترتيب الذي يدعمه القياس مباشرةً: اعتماد المكتبة أولًا، ثم الأساسات من ألوان وخطوط ومسافات، ثم العناصر، ثم القوالب. وتفصيله في خطوات تطبيق كود المنصات.

ولمعرفة موقع منصتكم من هذه المعايير بالأدلة لا بالتقدير، يقيس الفحص الآلي ٤٨ معيارًا من ٥٦ خلال دقائق، ويعرض الثمانية الباقية بأسمائها وحالتها دون أن يحتسبها، ويصدر النتيجة على هيئة نطاق يعبّر اتساعه عن حجم ما لم يجرِ التحقق منه.