التأكد من تطبيق أرقام المسافات على الصفحة كما في نظام التصميم الموحد (كود المنصات)
يطلب أن تكون كل مسافة في الصفحة من سلّم المسافات المعتمد، وهو مضاعفات ثابتة تبدأ من 4px. والغرض أن يحمل التباعد معنى: عناصر مترابطة تتقارب وأخرى منفصلة تتباعد، بدل قيم تُختار لكل شاشة على حدة.
وهو من المعايير الأساسية في فئة الأساسات من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
تُقرأ القيمة المطبَّقة من الصفحة وتُقارن بالقيمة المعتمدة في كود المنصات، فيصدر الحكم عن قياس لا عن تقدير، وتُرفق القيمة المرصودة والقيمة المتوقعة معًا.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٢ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
وحدات المسافات المعتمدة (٤ و٨ و١٦ بكسل)
مقيس آليًاDGA-004-aتشترط هذه النقطة أن تكون كل مسافة بين العناصر من سلّم المسافات المعتمد في كود المنصات، وهو سلّم يقوم على مضاعفات محددة مثل ٤ و٨ و١٦ بكسل. والقيمة خارج السلّم مخالفة ولو بدت متناسقة على الشاشة.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: كل قيمة هامش وحشو على الصفحة تقع على السلّم المعتمد، وتُكتب بمتغير لا برقم صريح.
ما الذي يسقط فيها: قيم مثل ١٥ أو ١٨ أو ٢٢ بكسل متناثرة في ملف التنسيق، وهي أثر بناء يدوي متراكم لا قرار تصميم.
كيف تُقاس أو يُتحقق منها: تحصي الأداة كل قيمة مسافة معلنة وتفصل ما يقع على السلّم عما يقع خارجه، وتعرض المخالفة مرة لكل قيمة مع عدد مواضعها. وقياس واحد على منصة جامعية رصد ٤٢ قيمة خارج السلّم في ٥٨١ موضعًا، أي ٤٢ قاعدة تُصلَح لا ٥٨١ مخالفة.
كيف تُعالَج: استبدلوا القيم الخارجة بأقرب قيمة على السلّم، وابدأوا بالقيمة الأكثر استعمالًا. والعمل هنا يقاس بعدد القواعد لا بعدد العناصر.
نقاط متصلة:متغيرات المسافات العامة دون مسافات مخصصة للعناصر ·الالتزام بألوان كود المنصات دون تعديل ·إعادة ترتيب الأعمدة والمكونات حسب مقاس الشاشة
متغيرات المسافات العامة دون مسافات مخصصة للعناصر
مقيس آليًاDGA-004-bتشترط هذه النقطة استعمال متغيرات المسافات العامة في كود المنصات، مع الامتناع عن المسافات المخصصة داخل العناصر. والفرق أن المتغير العام يبقى موصولًا بالمكتبة والقيمة المخصصة تنفصل عنها.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: المسافات مكتوبة بمتغيرات عامة في كل موضع، والعناصر المستدعاة من المكتبة تحتفظ بمسافاتها الداخلية دون تجاوز.
ما الذي يسقط فيها: تجاوز مسافات العنصر الداخلية بقيمة خاصة لضبط محاذاة في صفحة واحدة، فتنفصل نسخة العنصر عن المكتبة ولا تصلها تحديثاتها.
كيف تُقاس أو يُتحقق منها: تُقرأ المتغيرات المستعملة في إعلانات المسافات، ويُميَّز الإعلان المكتوب بمتغير من المكتوب برقم صريح. وقاعدة المسافات تحكم قيم السلّم اليوم، وهذه النقطة يتحقق منها فريقكم.
كيف تُعالَج: أعيدوا المسافات المخصصة إلى متغيرات السلّم العام، وعالجوا مشكلة المحاذاة في الحاوية لا داخل العنصر.
نقاط متصلة:وحدات المسافات المعتمدة (٤ و٨ و١٦ بكسل) ·الالتزام بألوان كود المنصات دون تعديل ·متغيرات الخط: العرض (Display) والنصوص (Text)
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- اجمعوا القيم المحسوبة لخصائص
marginوpaddingوgapلكل عنصر تخطيط - تجاهلوا الفروق الناتجة عن التقريب الفرعي للبكسل، وسماحية نصف بكسل كافية
- تحققوا من حشو الحاوية: 16px على الجوال و32px على سطح المكتب، ومن أن أقصى عرض 1280px
- افحصوا حشو الأزرار تحديدًا، إذ إن نقصه يكسر مساحة اللمس 44px فيسقط معيار الاستجابة معه
- قارنوا التباعد بين عناصر مترابطة والتباعد بين عناصر منفصلة. تساويهما مخالفة ولو كانت كل قيمة منهما من السلّم
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| قيم غير معيارية | |
padding غير كافٍ للأزرار (يكسر 44px) | |
| تساوي التباعد بين العناصر المترابطة وغير المترابطة | |
| عدم اتساق المسافات بين الصفحات |
ما يرفقه التقرير مع كل ملاحظة
المحدد + الخاصية + القيمة المرصودة + أقرب توكن + النسبة الإجمالية
كيف يُعالَج
- استبدلوا القيم المكتوبة يدويًا بقيم السلّم، وابدأوا بالمكوّنات المتكررة قبل الصفحات المفردة
- ابدأوا بحشو الأزرار، فمعالجته ترفع مساحة اللمس معها وتحرّك معيارين بعمل واحد
- وحّدوا حشو الحاوية عبر المنصة بدل ضبطه لكل صفحة على حدة
- استعملوا التباعد للدلالة لا للتجميل: قرّبوا المترابط وباعدوا المنفصل، فذلك غرض السلّم لا شكله
- امنعوا في مراجعة الشيفرة أي قيمة مسافة خارج السلّم، فهي أسهل ما يُفحص آليًا في مسار البناء
معايير متصلة
وفي الدليل: كيف تتحققون من التزام منصتكم بكود المنصات · قياس المسافات ضمن خطوات التحقق من المنصة
لم تطبّقه أي من ٢٩ منصة حكومية مقيسة
- ١٦ منصة
- ١٦ منصة
- ١٦ منصة
- ١٤ منصة
- ١٤ منصة
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.