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

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

تصميم واجهات عربية جيدة ليس «قلب» التصميم الإنجليزي، بل مجموعة قرارات في الاتجاه والخطوط والأرقام والنماذج والاختبار. هذا الدليل يجمع القواعد التي نطبقها في تصميم UI/UX للمنتجات الرقمية على كل تطبيق وموقع نعمل عليه للسوق السعودي.

ما الذي يُعكس في RTL وما الذي لا يُعكس؟

الواجهة من اليمين إلى اليسار تعكس اتجاه القراءة، لا كل شيء. القاعدة: يُعكس ما يتبع تسلسل القراءة والتنقل، ويبقى ما يمثل الزمن أو الاتجاه الفيزيائي أو العلامة التجارية.

يُعكس:

• ترتيب الأعمدة والقوائم والتبويبات، ومكان القائمة الجانبية.

• محاذاة النصوص والعناوين وحقول الإدخال.

• أسهم التنقل «التالي» و«السابق» وأسهم الرجوع.

• مسار التقدم في الخطوات (الخطوة 1 على اليمين).

• مكان الأيقونة بالنسبة إلى النص في الأزرار والقوائم.

لا يُعكس:

• أزرار تشغيل الوسائط (تشغيل، إيقاف، تقديم) لأنها تمثل اتجاه الزمن.

• عقارب الساعة، والرسوم البيانية الزمنية، وشريط تقدم الفيديو.

• أرقام الهاتف وأرقام البطاقات والإيبان، فهي تُكتب وتُقرأ من اليسار إلى اليمين دائمًا.

• الشعارات والعلامات التجارية والأيقونات ذات المعنى الثابت مثل علامة الصح.

• الخرائط واتجاهات البوصلة.

الخطأ الشائع هو العكس الأعمى بالأداة ثم الاكتفاء، فتخرج أيقونة «إرسال» تشير إلى الداخل وشريط الفيديو يسير إلى الخلف.

الخطوط العربية للشاشات

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

• خطوط مجرّبة للواجهات: IBM Plex Sans Arabic وTajawal وCairo وNoto Sans Arabic، إضافة إلى SF Arabic على أجهزة Apple.

• الحجم: الحروف العربية تبدو أصغر من اللاتينية بالحجم نفسه؛ ارفع حجم النص العربي بنسبة 10% إلى 15% تقريبًا، وزد ارتفاع السطر لأن الحروف تمتد فوق السطر وتحته.

• الأوزان: استخدم أوزان الخط الحقيقية. التعريض أو الإمالة المصطنعة التي يولّدها النظام تشوّه الحروف العربية.

• الاقتران مع اللاتيني: اختر خطًا لاتينيًا بارتفاع x متقارب حتى لا يبدو أحد النصين أثقل من الآخر في السطر الواحد.

خطوط عربية للتطبيقات تُختار مع نظام الهوية لا بعده؛ راجع ما هي الهوية البصرية؟ لفهم كيف تدخل الطباعة في نظام العلامة.

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

• الأرقام: الأرقام الغربية (0-9) هي السائدة في التطبيقات والمواقع السعودية، في الأسعار والهواتف والتواريخ. الأرقام المشرقية (٠-٩) خيار للمحتوى التحريري أو العلامات التراثية، لكن لا تخلط بينهما في الشاشة نفسها.

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

• الوحدات والعملة: «1,250 ريال» ثابتة الاتجاه والترتيب؛ حدد مكان رمز العملة مرة واحدة في نظام التصميم والتزم به.

• الاقتطاع: النصوص العربية أطول في الغالب من الإنجليزية في الأزرار والعناوين؛ صمم للنص الأطول، وتجنب الاقتطاع بالنقاط في الأزرار.

النماذج والبيانات المحلية

نماذج الإدخال هي أكثر مكان تظهر فيه رداءة تجربة المستخدم العربية:

• رقم الجوال: حقل يبدأ بـ +966 ثابتًا، لوحة أرقام، وقبول الصيغ الشائعة (05 أو 5 أو +9665).

• الإيبان والبطاقات: اتجاه من اليسار إلى اليمين داخل الحقل مع تنسيق تلقائي بالمجموعات.

• التواريخ: كثير من الخدمات تحتاج التاريخ الهجري (أم القرى) والميلادي معًا؛ أظهر الاثنين عند الحاجة ولا تفترض أن المستخدم يحوّل بنفسه.

• الأسماء والعناوين: الاسم الرباعي، والعنوان الوطني، والمدينة والحي كقوائم لا نص حر.

• رسائل التحقق والأخطاء: بالعربية، قصيرة، وتحت الحقل مباشرة، وتشرح ما يجب فعله لا ما حدث فقط.

• رمز التحقق OTP: قراءة تلقائية للرسالة وحقول مفردة واضحة.

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

الأيقونات والإيماءات والتنقل

• الأيقونات ذات الاتجاه (سهم، رجوع، إرسال، قائمة بتدرج) تُعكس؛ أما الأيقونات الرمزية (بحث، إعدادات، سلة) فتبقى.

• إيماءة الرجوع بالسحب تأتي من الحافة اليمنى في الواجهة العربية على iOS، فتأكد أن القوائم الجانبية لا تتعارض معها.

• شريط التنقل السفلي يُرتب من اليمين إلى اليسار، والتبويب الأول على اليمين.

• التحريك والانتقالات بين الشاشات تتبع اتجاه القراءة: الشاشة الجديدة تدخل من اليسار.

تصميم واجهات عربية يبدأ بالعربية ثم الإنجليزية

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

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

اختبر مع مستخدمين في السعودية

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

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

ملاحظات للمطورين

• في الويب استخدم خصائص CSS المنطقية (margin-inline-start بدل margin-left) وحدد dir="rtl" على مستوى الصفحة، فتُعكس الواجهة دون أن تعيد كتابة كل قاعدة.

• في Flutter اعتمد على Directionality وعلى خصائص مثل EdgeInsetsDirectional، وتجنب القيم الثابتة يمين/يسار.

• ضع كل النصوص في ملفات ترجمة من اليوم الأول، حتى لو أطلقت بالعربية فقط.

• اختبر النصوص الطويلة والأرقام المختلطة في بيئة الاختبار الآلي، لا يدويًا فقط.

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

هل أصمم النسخة العربية أولًا أم الإنجليزية؟

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

ما أفضل الخطوط العربية للشاشات؟

IBM Plex Sans Arabic وTajawal وCairo وNoto Sans Arabic خيارات مجرّبة بأوزان متعددة ووضوح جيد على الأحجام الصغيرة، وSF Arabic مناسب لأجهزة Apple. اختر خطًا يقترن بصريًا مع الخط اللاتيني في هويتك، واستخدم أوزانه الحقيقية لا التعريض المصطنع.

ما الذي يُعكس في الواجهة العربية وما الذي لا يُعكس؟

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

هل أستخدم الأرقام المشرقية أم الغربية؟

الأرقام الغربية (0-9) هي الأكثر استخدامًا في التطبيقات والمواقع السعودية، خاصة في الأسعار والهواتف والتواريخ. الأرقام المشرقية مقبولة في المحتوى التحريري أو العلامات ذات الطابع التراثي، لكن لا تخلط النوعين في الشاشة نفسها.

الخلاصة

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

إذا كنت تبني منتجًا للسوق السعودي وتريد أن تبدأ بالعربية بالطريقة الصحيحة، تواصل معنا عبر صفحة التواصل أو اطلع على طريقة عملنا في تصميم UI/UX ونماذج من أعمالنا.