التأكد من توافق عنصر الصورة الرمزية مع نظام التصميم الموحد (كود المنصات)
الصورة الرمزية تمثّل مستخدمًا أو جهة. ويطلب المعيار الشكل والمقاسات المعتمدة، وبديلًا واضحًا حين لا توجد صورة.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
يُقاس هذا المعيار من بنية الصفحة ومن قراءة لقطتها، ولذلك تكون الثقة فيه دون الثقة في القيمة المقروءة مباشرة، ويظهر ذلك في عرض النطاق.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٢ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
الصورة الرمزية: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-031-aتشترط هذه النقطة استدعاء الصورة الرمزية من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا قطرها واستدارتها وألوان خلفيتها ومقاس الحروف داخلها. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: صورة رمزية مستدعاة من المكتبة بمقاساتها المعتمدة، ولها نص بديل يسمّي صاحبها.
ما الذي يسقط فيها: صورة رمزية بلا نص بديل، فتُقرأ صورةً مجهولة أو تُتجاهل كليًا.
كيف تُقاس أو يُتحقق منها: تُرصد الصور الرمزية بأسماء أصنافها وبنيتها، وتُقرأ خصائصها. وهي من العناصر التي يعتمد كشفها على اسم الصنف، فغيابها عن منصة قد يعني عدم وجودها فعلًا.
كيف تُعالَج: أضيفوا نصًا بديلًا يسمّي صاحب الصورة، واستدعوا العنصر بمقاساته المعتمدة.
نقاط متصلة:سياقات الصورة الرمزية الثلاثة: الحروف والصورة والأيقونة ·الالتزام بألوان كود المنصات دون تعديل ·مكتبة الأيقونات دون استبدال أو تعديل في الحجم واللون
سياقات الصورة الرمزية الثلاثة: الحروف والصورة والأيقونة
مقيس آليًاDGA-031-bتشترط هذه النقطة الالتزام بسياقات الصورة الرمزية الثلاثة المعتمدة: الحروف المختصرة، أو الصورة، أو الأيقونة. فالسياق الرابع خارج الكود، والخلط بين الثلاثة في الشاشة الواحدة يربك القراءة.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: سياق واحد متسق في السياق الواحد: حروف مختصرة لكل من لا صورة له، وصورة لمن له صورة.
ما الذي يسقط فيها: مزج الحروف والأيقونات في قائمة واحدة بلا قاعدة، فيبدو الاختلاف عشوائيًا.
كيف تُقاس أو يُتحقق منها: يُقرأ محتوى الصورة الرمزية فيُصنَّف حروفًا أو صورة أو أيقونة، ويُفحص اتساق السياق داخل القائمة الواحدة.
كيف تُعالَج: اختاروا سياقًا واحدًا لكل قائمة، واجعلوا الحروف المختصرة هو الاحتياطي حين تغيب الصورة.
نقاط متصلة:الصورة الرمزية: مطابقة الشكل والحواف واللون والمسافات ·مكتبة الأيقونات دون استبدال أو تعديل في الحجم واللون ·توحيد المصطلحات عبر جميع الشاشات والعناصر
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- افحصوا الحالة الفارغة: حروف مختصرة أم أيقونة أم فراغ
- افحصوا صورة غير مربعة وانظروا هل تُقصّ أم تتشوّه
- قارنوا الأحجام في القائمة الواحدة
- افحصوا النص البديل
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| يغيب البديل حين لا توجد صورة | فيظهر مربع فارغ لا يقول شيئًا. |
| تتشوّه الصورة حين تختلف أبعادها عن المتوقع | تُمدَّد بدل أن تُقصّ. |
| تختلف أحجام الصور في القائمة الواحدة | فتبدو غير مرتبة. |
| تُعرض الصورة دون نص بديل | فتغيب عمن يستعمل قارئ الشاشة. |
| يُستعمل لون خلفية البديل من خارج اللوحة المعتمدة | |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- اضبطوا بديلًا افتراضيًا بالحروف المختصرة أو بأيقونة معتمدة.
- اقصّوا الصور مركزيًا بدل تمديدها لتملأ الإطار.
- وحّدوا الأحجام من سلّم المقاسات المعتمد.
- أضيفوا نصًا بديلًا يسمّي صاحب الصورة.
- اختاروا ألوان خلفية البديل من اللوحة المعتمدة.
معايير متصلة
وفي الدليل: كود المنصات figma · ما الذي يضمه ملف التصميم · مقاسات الصورة الرمزية معرّفة في ملف التصميم
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.