أنظمة التصميم

5 min read · Oct 2026

نظام تصميم بلغتين: أكثر من قلب الواجهة

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

نظام تصميم بلغتين: أكثر من قلب الواجهة

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

افصل اللغة عن الاتجاه

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

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

صمم حول البداية والنهاية

تصف وثائق MDN خصائص CSS المنطقية بأنها تربط التخطيط باتجاه الكتابة بدل الاعتماد على الجهات المادية وحدها. يساعد استخدام مفهومي بداية السطر ونهايته في التعبير عن المقصود عندما يحتاج المكون إلى العمل في الاتجاهين.

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

وطّن المحتوى وليس العناوين فقط

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

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

اختبر المهمة كاملة في اللغتين

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

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

خطوتك التالية

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