تصميم واجهات عربية RTL: القواعد التي يغفلها الجميع

تصميم واجهات عربية RTL: القواعد التي يغفلها الجميع

الخلاصة السريعة

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

أغلب المنتجات الرقمية العربية تبدأ إنجليزية ثم «تُعرّب» في آخر مرحلة. النتيجة واجهة صحيحة تقنياً لكنها غير مريحة — والسبب تفاصيل صغيرة متراكمة. هذه القواعد من واقع تصميم منتجات عربية فعلية.

1. اعكس التخطيط، لا كل شيء

يُعكَس: ترتيب الأعمدة، ومحاذاة النص، وموضع القوائم، واتجاه أسهم التنقّل (السابق/التالي)، وشريط التقدّم.

لا يُعكَس:

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

2. اختيار الخط العربي

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

3. المقاسات والمسافات تختلف فعلاً

العنصرالإنجليزيةالعربية
ارتفاع السطر (line-height)1.4 – 1.51.7 – 1.9
حجم خط النص16px17 – 18px
تباعد الأحرفيُستخدم أحياناًلا يُستخدم — يكسر ربط الحروف
طول النص بعد الترجمةالأساسأقصر 10–25% غالباً

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

4. الأرقام والنصوص المختلطة

  • الأرقام: استخدم اللاتينية (123) في الواجهات التقنية — الجمهور السعودي معتاد عليها في الأسعار والتواريخ.
  • أرقام الهواتف والعملات: اضبط اتجاهها صراحةً (dir="ltr") وإلا انقلب ترتيبها في بعض السياقات.
  • المصطلحات الإنجليزية داخل جملة عربية: ضعها بخط لاتيني مناسب، ولا تترجم المصطلح التقني الشائع قسراً — «باك-إند» أوضح من ترجمة حرفية غريبة.

5. أخطاء شائعة تكشف أن الواجهة مترجمة

  1. عكس أيقونة التشغيل أو الشعار.
  2. ترك ارتفاع السطر كما هو في النسخة الإنجليزية.
  3. محاذاة النص العربي لليسار في بعض الشاشات ونسيان غيرها.
  4. ظهور النص مقطوعاً في الأزرار لأن المساحة صُمّمت لكلمة إنجليزية أقصر أو أطول.
  5. ترك رسائل الخطأ والحالات الفارغة بالإنجليزية — وهي أكثر ما يظهر وقت الإحباط.
  6. استخدام تباعد الأحرف (letter-spacing) على نص عربي فيفصل الحروف المتصلة.

6. اختبر بالطريقة الصحيحة

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

نصمّم في أفق التقنية لاتجاه RTL من الأساس في كل مشروع — تفاصيل ذلك في خدمة تصميم UI/UX.

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

هل يكفي قلب اتجاه الصفحة لجعلها عربية؟

لا. قلب الاتجاه (dir="rtl") يحلّ التخطيط الأساسي فقط، لكنه لا يعالج ارتفاع السطر ولا اختيار الخط ولا الأيقونات التي يجب ألا تُعكس ولا اتجاه الأرقام. الواجهة التي اكتفت بالقلب يشعر المستخدم العربي فوراً أنها ليست مصمّمة له.

هل أستخدم الأرقام العربية (١٢٣) أم اللاتينية (123)؟

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

ما أفضل خط عربي للواجهات؟

لا يوجد خط واحد أفضل، لكن المعايير واضحة: أن يكون مصمّماً للشاشة، وأن تتوفّر فيه أوزان متعددة، وأن تكون أرقامه مقبولة، وأن يبقى مقروءاً في الأحجام الصغيرة على الجوال. اختبر أي خط على جهاز حقيقي قبل اعتماده.

كيف أتعامل مع اختلاف طول النص بين اللغتين؟

صمّم العناصر مرنة لا ثابتة العرض، واختبر بأطول نص ممكن في كل لغة لا بالنص المثالي. العربية غالباً أقصر من الإنجليزية بنسبة 10 إلى 25%، ما يترك فراغاً غير متوازن إن كان التصميم مبنياً على طول إنجليزي ثابت.

هل التصميم العربي يكلّف أكثر؟

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

جاهز تبدأ مشروعك التقني؟

فريق أفق التقنية يحوّل فكرتك إلى منتج رقمي قوي.

تواصل معنا الآن  شاهد أعمالنا