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

تصميم واجهات المستخدم العربية RTL يعني أن تُبنى الواجهة لتُقرأ من اليمين إلى اليسار (Right-to-Left) كما يقرأ المستخدم العربي. يتبع التخطيط والتنقل وكل أيقونة تدل على اتجاه اتجاهَ القراءة، بينما تبقى الأرقام وأرقام الجوال والشعارات والساعات وأزرار تشغيل الفيديو على حالها.

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

في هذا الدليل أمرّ على هذه القرارات واحداً واحداً، مستنداً إلى إرشادات W3C و Apple و Material Design من Google، ومعها أمثلة من عملي في واجهات المستخدم وتجربة المستخدم (UI/UX): تطبيقات ومواقع صمّمتها في الكويت، ومتجر هيل أوف، وموقع SkillUp MENA بلغتين، وهذا الموقع نفسه.

ماذا يعني RTL في واجهات المستخدم؟

الشاشة العربية تبدأ من اليمين: الشعار والقائمة الرئيسية في الأعلى يميناً، والتبويب الأول هو الأيمن، والعين تتحرك نحو اليسار ثم إلى الأسفل. والزمن يتحرك في الاتجاه نفسه، فكما تقول إرشادات Material Design، في الواجهة من اليمين إلى اليسار يشير «التالي» إلى اليسار و«السابق» إلى اليمين.

لكن الواجهة العربية نادراً ما تكون عربية خالصة. فيها أسماء علامات تجارية بحروف لاتينية، وبريد إلكتروني، وروابط، وأرقام، فهي في الحقيقة ثنائية الاتجاه (Bidirectional، وتُختصر Bidi). وهنا تقع أغلب المشكلات: عكس التخطيط سهل، أما سطر يجمع اسم منتج إنجليزياً وسعراً ورقم جوال بالترتيب الصحيح فهو الحِرفة الحقيقية.

ما الذي يُعكس وما الذي يبقى كما هو؟

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

ما يُعكس

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

ما يبقى كما هو

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

الأرقام والجوال والبريد والروابط

تقول Apple إن أرقام العدد الواحد، مثل رقم الهاتف أو رقم البطاقة، تظهر بالترتيب نفسه مهما كانت اللغة. وتقول Material إن الكلمات المكتوبة من اليسار إلى اليمين، مثل الروابط، تبقى كذلك داخل الواجهة العربية. تعامل معها كجزر صغيرة من اليسار إلى اليمين داخل الصفحة: رقم جوال سعودي يبدأ بـ +966، ورقم مصري يبدأ بـ +20، والبريد الإلكتروني، ورقم الطلب، وكود الخصم، واسم المنتج بالحروف اللاتينية.

وحين تختلف المنصتان في تفصيلة، اتبع المنصة التي تنشر عليها، والتزم بالقرار نفسه في المنتج كله.

الخط العربي داخل الواجهة

الخط في الواجهة يعيش في مساحات صغيرة بارتفاعات ثابتة، وهنا تظهر الفروق بين العربية واللاتينية بوضوح.

الحجم والتوازن البصري

يبدو الخط العربي أصغر من اللاتيني في الحجم نفسه، خاصة بجانب الحروف الكبيرة (Capitals). وتذكر Apple أن العربية بلا حروف كبيرة، وأن رفع حجم الخط العربي بنحو نقطتين (2 points) كثيراً ما يوازنه بجانب نص لاتيني مكتوب كله بالحروف الكبيرة. خذ هذا نقطة بداية، ثم احكم بعينك في الأزرار والتبويبات.

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

ارتفاع السطر والتشكيل

تذكر متطلبات تخطيط النص العربي والفارسي من W3C أن الصواعد والهوابط في الحروف العربية تمتد أبعد بكثير من اللاتينية. ومعنى ذلك عملياً أن العربية تحتاج ارتفاع سطر (Line Height) أكبر من الإنجليزية في الحجم نفسه، وأن الأزرار وصفوف الجداول ذات الارتفاع الثابت تحتاج مساحة كافية حتى لا تُقص النقاط وذيول الحروف.

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

الأوزان والتأكيد والمسافات

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

الأرقام: الغربية أم المشرقية؟

تبدأ الحيرة هنا من الأسماء نفسها. ما يسميه كثيرون في مصر والخليج «الأرقام الإنجليزية» (من 0 إلى 9) تسميه الإنجليزية Arabic numerals، وما نسميه «الأرقام العربية» أو «الهندية» تسميه Arabic-Indic digits. سأسميها هنا الأرقام الغربية والأرقام المشرقية.

ووفق متطلبات W3C، الأرقام الغربية هي التقليدية في دول المغرب العربي مثل المغرب والجزائر، والمشرقية هي التقليدية في دول المشرق، ومنها مصر والسعودية والعراق. وتؤكد Apple أن النص العربي قد يستخدم أيّاً منهما.

ومع ذلك، تستخدم منتجات رقمية كثيرة في الخليج ومصر الأرقام الغربية، لأسباب عملية:

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

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

وأياً كان اختيارك، فالعدد يُقرأ من اليسار إلى اليمين داخل السطر العربي، فكما تذكر W3C، في كل أنظمة الأرقام العربية تكون الخانة الأصغر على اليمين والأكبر على اليسار.

التواريخ والعملات

قرارات صغيرة أخرى تستحق مكاناً في القائمة نفسها:

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

العربية والإنجليزية في سطر واحد

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

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

• أحِط كل عبارة معاكسة الاتجاه بوسم يحدد اتجاهها، مثل span مع dir="ltr" حول اسم إنجليزي داخل نص عربي.
• اعزل المحتوى الذي لا تتحكم فيه. أسماء المستخدمين وعناوين المنتجات القادمة من قاعدة البيانات وكلمات البحث قد تأتي بأي لغة. العنصر bdi، أو dir="auto"، يجعل المتصفح يحدد الاتجاه من أول حرف قوي، ويمنع النص من إرباك ما حوله.
• فضّل الوسوم على رموز التحكم الخفية، لأنها أسهل في الرؤية والإدارة، كما يوصي W3C.

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

نماذج الإدخال (Forms)

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

اتجاه الحقل والنص المؤقت

• العناوين والنصوص المساعدة بالعربية، ومحاذاتها إلى البداية، أي اليمين.
• حقول البريد والرابط وكلمة المرور والجوال والبطاقة محتواها من اليسار إلى اليمين. اضبطها على dir="ltr" حتى يتحرك المؤشر والحروف كما يتوقع المستخدم.
• الحقول الحرة مثل الاسم والعنوان والملاحظات قد تُكتب بأي لغة، ويقترح W3C استخدام dir="auto" فيها، فيتبع الحقل ما يكتبه الشخص.
• النص المؤقت (Placeholder) ليس عنواناً للحقل، لأنه يختفي مع أول حرف. ضع عنواناً عربياً ظاهراً فوق الحقل، واستخدم النص المؤقت لمثال على الصيغة فقط، مثل name@example.com. وانتبه إلى أن النص المؤقت العربي داخل حقل من اليسار إلى اليمين سيظهر على اليسار، فاكتبه مثالاً لاتينياً أو اضبط محاذاته عن قصد.

رسائل الخطأ ولغة الواجهة

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

لوحة المفاتيح والأرقام

• استخدم نوع الحقل الصحيح، مثل type="email" و type="tel" و inputmode="numeric"، حتى تظهر لوحة المفاتيح المناسبة على الجوال.
• من يكتب بلوحة مفاتيح عربية قد يُدخل أرقاماً مشرقية في حقل الجوال أو رمز التحقق. اقبل النوعين وحوّلهما قبل التحقق، وإلا رفض النموذج رقماً صحيحاً.
• رمز التحقق (OTP) ورقم البطاقة ورقم الجوال تحتفظ بترتيبها من اليسار إلى اليمين، حتى لو كانت في مربعات منفصلة.
• اترك مساحة للأسماء الطويلة، ففي السعودية والخليج كثيراً ما يُكتب الاسم رباعياً.

التخطيط بالبداية والنهاية لا باليمين واليسار

أنفع عادة في تصميم واجهات المستخدم العربية تغيير في المفردات: توقف عن قول «يمين» و«يسار»، وقل «بداية» (Start) و«نهاية» (End). البداية في العربية هي اليمين، وفي الإنجليزية هي اليسار. بطاقة بمسافة داخلية 16 من البداية صحيحة في اللغتين، أما بطاقة بمسافة 16 من اليسار فخاطئة في إحداهما.

وعلى الويب، تتكلم CSS هذه اللغة عبر الخصائص المنطقية (Logical Properties): margin-inline-start و padding-inline-end و inset-inline-start و text-align: start تتبع اتجاه الصفحة، والتخطيط بـ Flexbox و Grid يتبعه أصلاً. ضع dir="rtl" على عنصر html في الصفحات العربية، فينعكس التخطيط وحده. ويشرح ذلك مقال W3C عن الوسوم البنيوية والنص من اليمين إلى اليسار، وينصح بعدم ضبط الاتجاه الأساسي للصفحة بـ CSS.

وهناك فخّان شائعان:

• تزييف الاتجاه بـ flex-direction: row-reverse. الشكل يبدو صحيحاً، لكن ترتيب القراءة والتنقل بلوحة المفاتيح لا يطابق ما يراه الناس، وهذا يضر مستخدمي لوحة المفاتيح وقارئات الشاشة.
• قلب كل الأيقونات بقاعدة واحدة. اقلب فقط ما في قائمة «يُعكس». ومكتبة SF Symbols من Apple مثلاً توفر نسخاً من اليمين إلى اليسار للرموز التي تحتاجها.

والتفكير نفسه ينطبق على ملف التصميم: سمِّ المسافات بالبداية والنهاية، وابنِ الصفوف بالتخطيط التلقائي (Auto Layout) حتى يسهل إعادة ترتيبها، وتعامل مع الإطارات العربية كتصميم حقيقي لا نسخة مقلوبة. وإن كانت هذه المفاهيم جديدة عليك، فابدأ بـشرح فيجما بالعربي للمبتدئين.

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

• الرجوع والتقدم: سهم الرجوع يشير إلى اليمين، وسهم «التالي» إلى اليسار.
• شريط التبويبات: التبويب الأول، وهو غالباً الرئيسية، على اليمين.
• القائمة الجانبية: تنفتح من الحافة اليمنى.
• الشرائح وشاشات التعريف بالتطبيق (Onboarding): الشريحة الأولى على اليمين، والتالية تأتي من اليسار، فيسحب المستخدم من اليسار إلى اليمين ليتقدم.
• الانتقال بين الشاشات: الشاشة الجديدة تدخل من اليسار، لأن «التالي» يشير إلى اليسار.
• أزرار السحب في القوائم: تسميها iOS إجراءات البداية والنهاية (Leading و Trailing)، فتتبادل جهتها مع التخطيط.

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

المحتوى بلغتين: استراتيجية لا ترجمة

في المنتج ثنائي اللغة يحتاج المحتوى تخطيطاً بقدر ما يحتاجه التصميم.

• لكل لغة عنوانها. توصي Google باستخدام رابط مستقل لكل نسخة لغوية بدلاً من ملفات تعريف الارتباط أو إعدادات المتصفح، وتقترح ربط النسختين عبر hreflang، وتنصح بعدم تحويل الزائر تلقائياً إلى اللغة التي تخمّن أنه يريدها.
• زر تغيير اللغة رابط إلى الصفحة نفسها باللغة الأخرى، لا إلى الصفحة الرئيسية. واكتب اسم كل لغة بحروفها: «العربية» و English. والأعلام تمثل دولاً لا لغات، والعربية لغة دول كثيرة.
• اكتب كل لغة لقارئها. القارئ العربي يشعر بالترجمة الحرفية من أول سطر، والأمثلة والنبرة وحتى ترتيب النقاط قد تتغير.
• توقّع أطوالاً مختلفة، فالأزرار والتبويبات والبطاقات تحتاج مساحة لتتسع.
• عرّب الصور التي فيها نصوص، ومنها صور متاجر التطبيقات والبانرات.

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

الاختبار بمحتوى عربي حقيقي

النص الشهير «هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة» يملأ المكان، لكنه يخفي كل المشكلات التي في هذا الدليل، تماماً كما يخفيها Lorem Ipsum في الإنجليزية. اختبر بالمحتوى الذي سيعرضه المنتج فعلاً.

1. اكتب النصوص الحقيقية مبكراً، ولو بصيغة أولية، باللغتين.
2. استخدم أطول الحالات الحقيقية: الأسماء الرباعية، وعناوين المنتجات الطويلة، وأعلى سعر.
3. اخلط اللغتين: أسماء علامات إنجليزية داخل جمل عربية، وبريد ورقم جوال داخل العناوين.
4. راجع قطع النص. علامة الحذف (...) في العربية مكانها نهاية السطر، أي على اليسار.
5. اختبر على أجهزة حقيقية لغة نظامها العربية، على iOS و Android، لأن عناصر النظام تتبع لغة الجهاز.
6. غيّر اللغة في منتصف مهمة، والسلة ممتلئة مثلاً، وتأكد أن شيئاً لم يضع.
7. استمع إلى الواجهة عبر VoiceOver أو TalkBack باللغة العربية.

إمكانية الوصول: lang و dir وقارئات الشاشة

سمتان على عنصر html تؤديان عملاً كبيراً: lang="ar" و dir="rtl". ويطلب مقال W3C عن تحديد اللغة في HTML أن تحدد لغة الصفحة هناك دائماً، وأن تحدد أي تغيير في اللغة داخلها، مع dir للنص ثنائي الاتجاه.

ويستفيد من ذلك أولاً مستخدمو قارئات الشاشة. فإرشادات WCAG تطلب تحديد لغة الصفحة (المعيار 3.1.1، المستوى A)، وتحديد تغيّر اللغة داخلها (المعيار 3.1.2 لغة الأجزاء، المستوى AA)، حتى ينطق قارئ الشاشة كل فقرة بقواعد لغتها. فاسم المنتج الإنجليزي داخل صفحة عربية يحتاج lang="en".

وتفصيلة تفاجئ كثيرين: تقول Google إنها تحدد لغة الصفحة من محتواها الظاهر، لا من سمة lang. فهذه السمة ليست حيلة للسيو، بل هي للمتصفح والخطوط والتقنيات المساعدة، وهذا سبب كافٍ.

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

التسليم للمطورين (Handoff)

التسليم الجيد يحوّل كل ما سبق إلى قرارات لا يحتاج المطور إلى تخمينها.

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

من أعمالي

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

وهيل أوف، الذي صمّمته في الدار أيضاً، متجر صيدلية وتجميل يبيع أونلاين في الكويت بالعربية والإنجليزية. صمّمت الشعار، وتطبيق التسوق لـ iOS و Android، وصور المتاجر، والموقع، وبانرات الحملات. المتجر يضع الأقسام أولاً، والدفع فيه في ضغطات قليلة. ومتجر كهذا مليء بحالات هذا الدليل: أسماء منتجات بحروف لاتينية، وأسعار، وكميات، وأرقام طلبات في كل شاشة تقريباً.

وفي موقع SkillUp MENA بلغتين، أدير المشروع وأصمّم الواجهة وأبنيها، فأنا على طرفي التسليم معاً، والقائمة نفسها تنطبق.

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

الخلاصة

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

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