مبادئ تصميم الأيقونات
الأيقونات ليست واضحة دائمًا
الأيقونات بلا تسميات غالبًا ما تكون ملتبسة. فالرمز الواضح لمصممه قد يعني شيئًا آخر لغيره. اقصر أزرار الأيقونات وحدها على الإجراءات المألوفة جدًا، مثل الإغلاق والبحث والطباعة، وأضف تسمية نصية للإجراءات المهمة أو الأقل شيوعًا.
تتفوق الاستعارات المألوفة على الابتكار. تُفهم العدسة المكبرة للبحث بسرعة، أما الرمز الجديد الذكي فيحتاج إلى تعلّم أولًا.
حافظ على اتساق المجموعة
تبدو مجموعة الأيقونات احترافية حين تتشارك عناصرها القواعد نفسها:
- الشبكة: صمّم على حجم واحد، مثل 24 بكسل، مع حشوة متسقة داخل الإطار.
- سماكة الخط: استخدم سماكة واحدة في المجموعة، مثل 2 بكسل عند حجم 24.
- نصف قطر الزوايا: اختر نصف قطر واحدًا وطبّقه على كل أيقونة.
- المحاذاة البصرية: تحتاج الدوائر والمثلثات غالبًا إلى حجم أكبر قليلًا أو إزاحة لتبدو بحجم المربعات.
استخدم النسختين المملوءة والمفرغة للتعبير عن الحالة، مثل إشارة مرجعية مفرغة عند الإيقاف ومملوءة عند الحفظ.
اختر نمطًا واحدًا للمجموعة، مفرغًا أو مملوءًا، ولا تستخدم الآخر إلا لإيصال معنى. فخلط الأنماط عشوائيًا يجعل الواجهة تبدو غير مكتملة. والحجم مهم أيضًا: التفاصيل الواضحة عند 48 بكسل تذوب عند 16 بكسل، لذلك ارسم أشكالًا بسيطة واحذف التفاصيل التي لا تحمل معنى.
- اختبر كل أيقونة بأصغر حجم على شاشة حقيقية.
- اسأل بعض أفراد الجمهور المستهدف عن معنى الأيقونة قبل الاعتماد عليها.
- بعض الرموز، مثل الأسهم، ينبغي أن ينعكس في الواجهات من اليمين إلى اليسار. وغيرها، مثل العدسة المكبرة أو الساعة، لا ينعكس.
اجعل أزرار الأيقونات متاحة
الزر الذي يعرض أيقونة فقط يحتاج إلى اسم متاح، وإلا لن يعلن قارئ الشاشة شيئًا مفيدًا. أضف <code>;aria-label<;/code>; أو نصًا مخفيًا بصريًا يصف الإجراء لا الصورة: إغلاق، لا X.
اجعل منطقة اللمس أكبر من الرمز نفسه. يمكن لأيقونة بحجم 24 بكسل أن تقع داخل منطقة نقر بحجم 44 بكسل. تضع WCAG 2.2 حدًا أدنى لحجم الهدف قدره 24 × 24 بكسل CSS (المعيار 2.5.8، المستوى AA)، والأكبر أسهل في النقر عليه.
- قرّر أي الإجراءات تحتاج إلى تسمية ظاهرة.
- ارسم كل الأيقونات على شبكة وسماكة ونصف قطر موحّدة.
- أضف أسماء متاحة لأزرار الأيقونات وحدها.
- كبّر منطقة اللمس حول كل أيقونة.
ينبغي إخفاء الأيقونات الزخرفية المجاورة لتسمية نصية عن التقنيات المساعدة، مثل استخدام <code>;aria-hidden="true"</code>;، حتى لا تُقرأ التسمية مرتين.
المصادر
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 2.5.8 Target Size (Minimum). https://www.w3.org/TR/WCAG22/
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.