أي الأيقونات تُعكس في RTL
القاعدة الأساسية
عندما ينقلب التخطيط إلى الاتجاه من اليمين إلى اليسار، يجب أن تنقلب بعض الأيقونات معه. والاختبار بسيط: هل تعبّر الأيقونة عن اتجاه أو حركة أو ترتيب قراءة؟ إن كان الجواب نعم فاعكسها، وإن كانت تمثّل شيئًا أو رمزًا فاتركها كما هي.
عكس الأيقونات ليس زخرفة، بل يُبقي معنى الأيقونة متوافقًا مع طريقة تنقّل القارئ في الشاشة. السهم الذي يشير إلى اليمين في صفحة عربية يوحي بالابتعاد عن بداية المحتوى، وهذا عكس ما ينبغي أن يقوله زر الرجوع.
أيقونات يجب عكسها
- أسهم الرجوع والتقدّم، لأن الرجوع يشير نحو بداية اتجاه القراءة.
- الشيفرونات التي تفتح مستوى تاليًا، مثل صف في قائمة يقود إلى شاشة التفاصيل.
- اتجاه التقدّم في مؤشرات الخطوات وأشرطة التقدّم التي تمتلئ مع اتجاه القراءة.
- أسهم الرد والتحويل والإرسال.
- أيقونات إزاحة القوائم وأيقونات محاذاة النص.
عمليًا، احتفظ بأيقونة مصدر واحدة واقلبها بـ CSS أو استخدم نسخة معكوسة من مجموعة الأيقونات. وسمِّ الأيقونات الاتجاهية في نظام التصميم ليعرف المطورون أيها يحتاج إلى القلب وأيها يبقى كما هو.
أيقونات لا تُعكس
الشعارات والعلامات
عكس الشعار يغيّر العلامة. أبقِه كما صُمّم تمامًا.
الساعات وعلامات الصح
عقارب الساعة تدور بالاتجاه نفسه في كل مكان، وعلامة الصح رمز ثابت.
أشياء من الواقع
أيقونات الهاتف والكاميرا والعدسة المكبّرة وأمثالها تحتفظ بشكلها.
الأرقام
الأرقام تحافظ على شكلها وترتيبها، فلا تعكسها.
حالات يحدّدها السياق
بعض العناصر محل نقاش. شريط التشغيل في الوسائط يبقى عادةً من اليسار إلى اليمين، لأن أزرار التشغيل والتقديم تتبع عُرفًا يعرفه كثير من المستخدمين من أجهزة التشغيل التقليدية. أما المخطط الذي له محور زمني فقد يكون في أي من الاتجاهين، فالجواب يتوقف على ما إذا كان الجمهور يقرأ المحور كنص أم كرسم بياني.
ينشر Material Design إرشادات للثنائية الاتجاهية (Bidirectionality) تذكر الأيقونات التي تُعكس والتي تبقى. استخدمها نقطة انطلاق ثم كيّفها مع المنتج.
الأيقونات التي فيها اتجاه مدمج تحتاج نظرة ثانية. أيقونة الإرسال المرسومة على شكل طائرة ورقية تشير إلى الأمام في اتجاه القراءة، لذلك تنقلب عادةً. أما أيقونة المشاركة المبنية من نقاط متصلة فلا اتجاه لها، فتبقى كما هي.
إذا لم تكن الحالة واضحة، اعرض النسختين على قرّاء عرب أصليين واتبع ما يرونه طبيعيًا.
المصادر
- Material Design. Bidirectionality guidance. https://m2.material.io/design/usability/bidirectionality.html
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.