معيار الأيقونات: الاستخدام الصحيح لمكتبة الأيقونات في كود المنصات

ما دور الأيقونات في منظومة كود المنصات؟

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

مسارها الرسمي في الكود هو /foundations/iconography، وهذا الموضع يعكس طبيعتها: الأيقونات ليست إضافة اختيارية فوق المكونات، وإنما عنصر بنيوي تُبنى عليه كثير من المكونات الأخرى كالأزرار والقوائم والإشعارات والبطاقات.

وظيفة الأيقونة في السياق الحكومي تتمحور حول ثلاثة أدوار:

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

وهذه الأدوار الثلاثة تحديداً هي ما يفقده التطبيق الخاطئ للأيقونات، مما يجعل معيار الأيقونات أحد المعايير التي تؤثر على درجة الامتثال في أكثر من محور تقييمي.

ما مكتبة الأيقونات الرسمية وما الذي تشمله؟

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

تشمل المكتبة ثلاثة عناصر رئيسية:

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

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

ثانياً: الأصول التقنية في Figma

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

ثالثاً: التوثيق التقني للمطورين

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

ما قواعد الاستخدام الصحيح للأيقونة في المنصة الحكومية؟

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

القاعدة الأولى: الأيقونة الوظيفية تحتاج تسمية

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

القاعدة الثانية: الأيقونة الزخرفية تُخفى عن قارئات الشاشة

الأيقونات التي لا تحمل معنى وظيفياً، كالأيقونات الجمالية في الخلفيات أو الفواصل البصرية، يجب إخفاؤها عن قارئات الشاشة باستخدام aria-hidden=”true” حتى لا تُشوِّش على المستفيد من ذوي الإعاقة البصرية.

القاعدة الثالثة: التباين اللوني وفق WCAG

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

القاعدة الرابعة: الحجم المناسب للتفاعل

الأيقونات التفاعلية يجب أن تكون بحجم لا يقل عن 24×24 بكسل كحد أدنى للرؤية، مع مساحة تفاعل لا تقل عن 44×44 بكسل لضمان سهولة الضغط عليها لمستخدمي الأجهزة اللمسية وذوي صعوبات الحركة الدقيقة.

القاعدة الخامسة: الاتساق في الاستخدام

الأيقونة ذاتها يجب أن تحمل المعنى ذاته في جميع أجزاء المنصة، لا يجوز استخدام أيقونة المكبِّر للبحث في صفحة وللتكبير في صفحة أخرى. هذا الاتساق منصوص عليه في WCAG 2.1 تحت معيار “التعرف المتسق”.

القاعدة السادسة: لون الأيقونة من متغيرات الكود

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

ما الأخطاء الشائعة في تطبيق معيار الأيقونات؟

تكشف تقييمات المنصات الحكومية أنماطاً متكررة من الأخطاء في تطبيق هذا المعيار:

استخدام أيقونات من مكتبات خارجية

بعض المنصات تستخدم مكتبات شائعة كـ Font Awesome أو Material Icons بدلاً من مكتبة كود المنصات الرسمية. حتى لو كانت الأيقونات متشابهة بصرياً، فإن هذا يُعد انحرافاً عن المعيار يؤثر على الامتثال.

أيقونات وظيفية بدون تسمية

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

عدم إخفاء الأيقونات الزخرفية

تظهر أيقونات تجميلية في الصفحة دون aria-hidden=”true”، مما يجعل قارئ الشاشة يقرأها ويُشوِّش على المستفيد بمعلومات لا معنى لها في السياق.

تباين لوني غير كافٍ

استخدام أيقونات بألوان فاتحة على خلفيات قريبة في الدرجة، مما يجعلها غير مرئية للمستفيدين من ذوي الإعاقة البصرية الجزئية.

تغيير شكل الأيقونة أو إعادة رسمها

بعض المنصات تُعدِّل الأيقونة الرسمية بإضافة تفاصيل أو تغيير وزن الخط أو أسلوب الرسم، مما يكسر الاتساق البصري ويُخرجها عن المواصفات الرسمية.

تفاوت الحجم عبر الصفحات

ظهور الأيقونة ذاتها بأحجام مختلفة في صفحات متعددة دون مبرر وظيفي، مما يخلق عدم اتساق بصري يُلاحظه المستفيد ويُضعف ثقته بالمنصة.

كيف يقيّم «معيار بلس» من uxarabia تطبيق معيار الأيقونات في منصتك؟

في تقييمنا لمعيار الأيقونات ضمن «معيار بلس» من uxarabia، نفحص التطبيق عبر ثلاث طبقات متكاملة:

الطبقة الأولى: التحقق من مصدر الأيقونات

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

الطبقة الثانية: فحص قواعد الاستخدام

نراجع كيف تُوظَّف الأيقونة في كل سياق، هل هي وظيفية أم زخرفية؟ هل ترافقها تسمية مناسبة؟ هل تستخدم aria-hidden حين يجب؟ هل تحمل المعنى ذاته في جميع أجزاء المنصة؟ مثال: قد نجد أيقونة التنبيه تظهر في ثلاث صفحات بثلاثة سياقات مختلفة، مما يُشتِّت المستفيد ويُخالف معيار الاتساق.

الطبقة الثالثة: اختبار الوصولية

نقيس نسب التباين اللوني لكل أيقونة وظيفية، ونتحقق من أحجام مناطق التفاعل، ونختبر قراءة قارئات الشاشة للتسميات البديلة. مثال: قد نجد أيقونة في قائمة التنقل الرئيسية بنسبة تباين 2.1:1 أقل من الحد المطلوب وهو 4.5:1، مما يجعلها غير مرئية لشريحة من المستفيدين وتُضعف امتثال المنصة.

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

الخاتمة

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

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

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

الأسئلة الشائعة

١. ما دور الأيقونات في كود المنصات الحكومية؟

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

٢. ما مكتبة الأيقونات الرسمية؟

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

٣. هل يجوز استخدام مكتبات أيقونات خارجية مثل Font Awesome؟

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

٤. ما القاعدة الأولى للاستخدام الصحيح للأيقونة؟

الأيقونة الوظيفية تحتاج تسمية نصية مرئية أو نص بديل يقرأه قارئ الشاشة. أيقونة بمفردها دون تسمية تضع المستفيد أمام تخمين، وهذا مخالف لمبدأ وضوح الواجهة.

٥. كيف تُعالج الأيقونات الزخرفية من منظور الوصولية؟

الأيقونات الزخرفية التي لا تحمل معنى وظيفياً يجب إخفاؤها عن قارئات الشاشة باستخدام aria-hidden=”true” حتى لا تُشوِّش على المستفيد من ذوي الإعاقة البصرية.

٦. ما نسبة التباين اللوني المطلوبة للأيقونات الوظيفية؟

الأيقونات الوظيفية يجب أن تستوفي نسبة تباين 3:1 على الأقل، وترتفع إلى 4.5:1 حين تكون عنصراً تفاعلياً في قائمة تنقل أو زر، وفق معايير WCAG المدمجة في كود المنصات.

٧. ما الحجم المناسب للأيقونات التفاعلية؟

الأيقونات التفاعلية يجب أن تكون بحجم لا يقل عن 24×24 بكسل كحد أدنى للرؤية، مع مساحة تفاعل لا تقل عن 44×44 بكسل لضمان سهولة الضغط عليها.

٨. ما الأخطاء الشائعة في تطبيق معيار الأيقونات؟

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

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

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

١٠. كيف أبدأ بتقييم معيار الأيقونات في منصتي؟

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