التصميم من اليمين لليسار: ما الذي ينعكس وما الذي يبقى

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

اعكس كل ما يدل على اتجاه أو ترتيب

• التخطيط كله: القوائم والأشرطة الجانبية وترتيب قراءة الكروت يبدأ من اليمين.
• أسهم الرجوع والتقدم، والأسهم الصغيرة في القوائم، والسهم داخل زر «التالي».
• أشرطة التقدم والخطوات والـ sliders. التقدم يكبر من اليمين إلى اليسار.
• الأيقونات التي تشير أو تتحرك، مثل الإرسال والرد والتراجع وأيقونات محاذاة النص.
• الـ carousels الأفقية وترتيب التبويبات.

اترك كما هو كل ما يمثل العالم الحقيقي

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

اضبط الخط العربي بقواعده هو

• العربي يبدو أصغر من اللاتيني في الحجم نفسه. كبّر نص الفقرات 1 إلى 2 بكسل.
• أعطه ارتفاع سطر أكبر: حوالي 1.6 إلى 1.8 للفقرات و1.2 إلى 1.4 للعناوين، حتى لا تتصادم النقاط والعلامات فوق السطر وتحته.
• لا تضف مسافات بين الحروف أبدًا. الحروف العربية متصلة، والـ tracking يكسر الاتصال.
• لا توجد حروف كبيرة في العربية. العناوين الصغيرة التي تعتمد على الـ CAPS بالإنجليزي تحتاج حجمًا أو وزنًا بالعربي.
• اختر عائلة مصممة للشاشات مثل IBM Plex Sans Arabic، ونسّقها مع خط لاتيني قريب منها في الوزن والارتفاع.

انتبه للأسطر المختلطة

الواجهات العربية مليئة بكلمات إنجليزية: أسماء علامات وبريد إلكتروني وكود. عندما تأتي كلمة لاتينية في بداية سطر عربي أو نهايته، قد تقفز علامات الترقيم والأرقام إلى الجهة الخطأ. في الكود، ضع هذه الكلمات داخل عنصر bdi أو أعطها dir='ltr'. وفي Figma، راجع كل نص مختلط بقراءته بصوت عالٍ من اليمين.

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