نظام تصميم للمنتجات العربية والإنجليزية: الرموز وعكس الاتجاه والحوكمة

يحتاج نظام التصميم للمنتجات العربية والإنجليزية إلى ثلاثة أمور لا يحتاجها نظام أحادي اللغة: رموز تصميم (Design Tokens) تراعي الاتجاه، ومكونات تنعكس وفق قواعد ثابتة لا يدويًا، وحوكمة تعامل العربية لغةً أساسية لا مرحلة ترجمة. ابنِ هذه الأمور منذ البداية، ولن يعود المنتج ثنائي اللغة منتجين منفصلين عليك صيانتهما. وهكذا نبني أنظمة التصميم ثنائية اللغة للفرق في المملكة العربية السعودية والإمارات ولبنان وسائر دول الخليج.

ما الذي يميّز نظام التصميم ثنائي اللغة؟

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

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

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

رموز التصميم RTL: ابنِ الاتجاه في الأساسات

الرموز هي الموضع الذي ينجح فيه دعم اللغتين أو يفشل. والمبدأ بسيط: لا ينبغي لأي رمز أن يسمّي جهة فعلية.

• المسافات والتخطيط. استبدل اليسار واليمين بالبداية والنهاية. الخصائص المنطقية مثل padding-inline-start وmargin-inline-end تعمل بشكل صحيح في الاتجاهين دون قواعد استثنائية، وينبغي أن تعتمد عليها تعريفات الشبكة (Grid) والتخطيط المرن (Flex) في كل مكان.
• الأيقونات. ضع لكل أيقونة علامة تحدد سلوكها مع الاتجاه. الأسهم، والأسهم الجانبية، وأزرار الرجوع، ومؤشرات التقدم، وكل ما يوحي بترتيب القراءة يُعكس؛ أما الأيقونات التي تصوّر أشياء حقيقية، كالساعة أو الهاتف، وشعارات العلامات التجارية فلا تُعكس. احفظ هذه العلامة رمزًا في النظام كي يُطبَّق العكس مرة واحدة في الشيفرة، لا شاشةً شاشة.
• رموز الخطوط. عرّف رموزًا منفصلة لعائلة الخط والحجم وارتفاع السطر وتباعد الأحرف لكل من الخط العربي واللاتيني، ثم اجمعها تحت اسم دلالي واحد، بحيث يطلب المكوّن heading-lg فيتلقى القيم المناسبة للغة النشطة. يحتاج الخط العربي عمومًا إلى حجم أكبر وارتفاع سطر أكبر عند الوزن البصري نفسه، وينبغي أن يبقى تباعد الأحرف على قيمته الافتراضية، لأن الحروف المتصلة تتفكك عند تباعدها.
• الأرقام والتواريخ. قرّر مرة واحدة هل يستخدم المنتج الأرقام الغربية أم المشرقية، وهل تتبع التواريخ التقويم الميلادي أم الهجري، ثم ثبّت القرار في رمز تصميم حتى لا يُعاد النقاش فيه مع كل شاشة.
• الحركة. الانتقالات التي توحي باتجاه، مثل صفحة تنزلق من إحدى الجهتين، ينبغي أن تُعرَّف نسبةً إلى اتجاه القراءة، كي يشعر المستخدم بأنه يتقدم إلى الأمام في اللغتين.

وحين صممنا منصة الثقافية (Al Thaqafiya) التحريرية ثنائية اللغة ونظام تصميمها، حملت طبقة الرموز معظم قيمة النظام. فقد بُنيت القوالب التحريرية مرة واحدة، وعُرضت بشكل صحيح في الاتجاهين، لأن الاتجاه لم يُكتب داخل أي مكوّن قط.

ما الذي يُعكس وما الذي لا يُعكس

الاتجاه من اليمين إلى اليسار ليس صورة مرآة للاتجاه من اليسار إلى اليمين، ونظام التصميم الذي يثق به المستخدم العربي هو الذي يُحسن التعامل مع الاستثناءات.

ما يُعكس: ترتيب التنقل، ومسارات التنقل (Breadcrumbs)، ومؤشرات الخطوات، وأزرار الرجوع والتقدم، وأشرطة التحكم المنزلقة (Sliders)، وعلامات التبويب، ومحاذاة تسميات النماذج، وترتيب أعمدة الجداول، وموضع الإجراءات الأساسية والثانوية.

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

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

الخطوط في نظام تصميم عربي

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

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

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

مكونات وتوثيق يعملان في الاتجاهين

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

ويجب أن تتضمن عملية البناء اختبارات انحدار بصري آلية في الاتجاهين. فمعظم أخطاء RTL أخطاء ارتدادية يُدخلها مطور اختبر بلغة واحدة، واكتشافها في مسار البناء الآلي أرخص بكثير من اكتشافها في تقييمات متاجر التطبيقات.

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

الحوكمة: كيف تبقى العربية لغة أساسية

العمل التقني هو النصف الأصغر. أما النصف الأكبر فهو الحوكمة: من يقرر، ومن يراجع، وما معنى «مكتمل» بالنسبة إلى مكوّن ثنائي اللغة.

• اجعل المراجعة العربية شرطًا إلزاميًا للإطلاق، لا مجاملة. لا يُطلق أي مكوّن قبل أن يراجعه بالعربية شخص يقرأ العربية.
• اكتب التوثيق باللغة التي يعمل بها فريقك فعلًا، مع أمثلة عربية في كل الأحوال. فكثيرًا ما تعمل الفرق في السعودية والإمارات بالإنجليزية داخليًا بينما تخدم جمهورًا لغته الأولى العربية، وعلى التوثيق أن يسد هذه الفجوة.
• احتفظ بقائمة مهام واحدة. مشكلات العربية التي تُسجَّل في نظام تتبع منفصل هي مشكلات مؤجلة.
• حدّد المسؤوليات. نظام التصميم الذي لا يملك مسؤولًا معيّنًا لكل لغة يتآكل تدريجيًا لصالح لغة الفريق الأعلى صوتًا.
• أصدر الرموز بأرقام إصدارات، وتعامل مع أي تغيير في رمز اتجاه أو رمز خطوط على أنه تغيير جذري (Breaking Change) يرافقه دليل للترحيل.

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

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

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

ما الذي يجعل نظام التصميم جاهزًا للعربية؟

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

هل يحتاج نظام التصميم ثنائي اللغة إلى مكونات عربية وأخرى إنجليزية منفصلة؟

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

كيف تختلف رموز التصميم RTL عن رموز التصميم المعتادة؟

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

إن كنت تبني منتجًا لجمهور عربي وإنجليزي أو تعيد بناءه، تحدث إلينا عن هيكلة نظام تصميم يخدم اللغتين منذ المكوّن الأول.