عند بناء موقع عربي للألعاب، من السهل أن نعتقد أن دعم اللغة العربية يعني ترجمة العناوين، وإضافة dir="rtl" إلى عنصر html، ثم اعتبار المهمة منتهية.
هذا يكفي لجعل النص يبدأ من اليمين، لكنه لا يكفي لصناعة تجربة جيدة.
المستخدم الذي يصل إلى موقع ألعاب لا يريد قراءة مقدمة طويلة عن المشروع. يريد أن يعرف بسرعة:
- ما نوع اللعبة؟
- هل تعمل على الهاتف؟
- هل تحتاج إلى تحميل؟
- أين زر التشغيل؟
- هل يستطيع الرجوع إلى الألعاب المشابهة بسهولة؟
عند العمل على موقع يجمع ألعاب التلبيس والطبخ والمكياج والديكور، اكتشفت أن أكبر المشكلات لم تكن في ترجمة النصوص، بل في ترتيب الواجهة، وضوح البطاقات، اتجاه العناصر المختلطة، وسرعة الوصول إلى اللعبة.
في هذه المقالة أشارك أهم القرارات العملية التي اتخذتها، والأخطاء التي من الأفضل تجنبها عند بناء دليل ألعاب عربي يعمل من اليمين إلى اليسار.
ابدأ من نية المستخدم، لا من تصميم القالب
قبل كتابة أي مكوّن، يجب فهم سبب دخول الزائر إلى الصفحة.
من يبحث عن ألعاب بنات لا يبحث غالبًا عن مراجعة طويلة أو أخبار صناعة الألعاب. هو يريد فتح لعبة من نوع واضح، مثل:
- تلبيس؛
- طبخ؛
- مكياج؛
- تزيين غرف؛
- عناية بالحيوانات؛
- ألعاب أميرات؛
- ألعاب خفيفة تعمل على الهاتف.
لذلك لا يجب أن يبدأ الموقع بشاشة ترحيب ضخمة تدفع الألعاب إلى أسفل الصفحة. كما لا يحتاج المستخدم إلى فقرة طويلة قبل أن يرى أول صف من الألعاب.
في موقع ألعاب، شبكة الألعاب نفسها هي المحتوى الأساسي، وليست عنصرًا ثانويًا بعد مقدمة تسويقية.
القرار الصحيح بالنسبة لي كان عرض عنوان واضح، وصف قصير جدًا، ثم الألعاب مباشرة.
استخدام dir="rtl" لا يحل كل شيء
الخطوة الأساسية هي تحديد اللغة والاتجاه على مستوى الصفحة:
<html lang="ar" dir="rtl">
هذا يجعل المتصفح يتعامل مع النصوص والتخطيط الافتراضي بصورة أفضل، لكنه لا يحل العناصر التي تجمع العربية مع الإنجليزية والأرقام والروابط.
مثال شائع هو عنوان يحتوي على اسم لعبة إنجليزي داخل جملة عربية. قد تنتقل الأقواس أو الأرقام إلى مكان غير متوقع، وقد يظهر الرابط بطريقة مربكة.
في الحالات المختلطة يمكن استخدام:
<bdi>Cooking Game 2</bdi>
عنصر bdi يعزل اتجاه النص الداخلي، ويمنع اسم اللعبة من إفساد ترتيب الجملة العربية المحيطة به.
استخدمته خصوصًا مع:
- أسماء الألعاب الإنجليزية؛
- أرقام المراحل؛
- أسماء الملفات؛
- النطاقات والروابط؛
- أسماء التقنيات أو الشركات.
إضافة مسافات عشوائية أو قلب النص يدويًا ليست حلًا. قد يبدو النص صحيحًا على جهاز واحد ثم ينكسر في متصفح آخر.
لا تعكس كل شيء لمجرد أن الصفحة RTL
من الأخطاء الشائعة قلب جميع الأيقونات تلقائيًا.
هناك عناصر يجب أن تتبع اتجاه القراءة، مثل سهم الانتقال إلى القسم السابق أو التالي. لكن توجد رموز عالمية لا تحتاج إلى قلب، مثل:
- زر التشغيل؛
- أيقونة الصوت؛
- أيقونة ملء الشاشة؛
- رمز الإغلاق؛
- أيقونة البحث؛
- رمز المشاركة.
كذلك، لقطة اللعبة نفسها لا يجب قلبها أفقيًا. صورة المطبخ أو الشخصية أو واجهة اللعبة يجب أن تبقى كما هي.
عند استخدام مكتبة أيقونات، لا تطبق transform: scaleX(-1) على حاوية كاملة. اقلب فقط السهم الذي يمثل اتجاه التنقل عندما تكون هناك حاجة حقيقية لذلك.
بطاقة اللعبة يجب أن تجيب قبل النقر
بطاقة اللعبة ليست مجرد صورة جميلة. هي أداة لاتخاذ القرار.
المستخدم يحتاج إلى معرفة نوع اللعبة قبل فتحها. لهذا يجب أن تعرض الصورة شيئًا من اللعب الفعلي، لا مجرد وجه شخصية أو رسم ترويجي عام.
إذا كانت اللعبة عن الطبخ، من الأفضل أن تظهر:
- الطعام؛
- أدوات المطبخ؛
- المكونات؛
- أو واجهة إعداد الطلبات.
إذا كانت عن التلبيس، يجب أن تظهر الشخصية والملابس أو شاشة اختيار الأزياء.
أما الصورة التي تعرض أميرة فقط من دون أي إشارة إلى طريقة اللعب، فقد تجذب النقر لكنها لا توضح ما سيحدث بعده.
أفضل بنية وجدتها للبطاقة كانت بسيطة:
<article class="game-card">
<a href="/games/example-game/">
<img
src="/images/example-game.webp"
alt="لعبة تلبيس واختيار فساتين للحفلة"
width="320"
height="180"
loading="lazy"
>
<h2>لعبة تلبيس للحفلة</h2>
<p>اختاري الفستان وتسريحة الشعر والإكسسوارات.</p>
</a>
</article>
العنوان يوضح النوع، والوصف يذكر الفعل الذي سيقوم به اللاعب. لا حاجة إلى عبارات مثل “أفضل لعبة مذهلة لن تنسيها”.
اجعل مساحة النقر تشمل البطاقة
على الهاتف، النقر على عنوان صغير ليس مريحًا.
لذلك جعلت الصورة والعنوان والوصف جزءًا من رابط واحد. يستطيع المستخدم النقر على أي مساحة داخل البطاقة بدل محاولة إصابة زر صغير.
لكن يجب ألا تحتوي البطاقة على عدة أزرار تؤدي إلى النتيجة نفسها. وجود رابط على الصورة، ورابط آخر على العنوان، وزر ثالث أسفل الوصف يضيف ازدحامًا من دون فائدة.
رابط واحد واضح أفضل.
الشبكة المرنة أهم من عدد الأعمدة
في شاشة كبيرة يمكن عرض أربع أو خمس بطاقات في صف، لكن فرض العدد نفسه على الهاتف يجعل الصور صغيرة جدًا.
استخدمت شبكة تعتمد على الحد الأدنى لعرض البطاقة:
.games-grid {
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(min(100%, 220px), 1fr)
);
gap: 1rem;
}
بهذه الطريقة يختار المتصفح عدد الأعمدة المناسب للمساحة المتاحة.
لم أستخدم position: absolute لترتيب البطاقات، لأن الشبكة العادية أسهل في الصيانة وأكثر استقرارًا عند تغير طول العناوين العربية.
النص العربي قد يحتاج إلى سطرين بينما يحتاج اسم إنجليزي إلى سطر واحد. يجب أن تتحمل البطاقة هذا الاختلاف من دون تداخل.
لا تجعل العنوان الطويل يكسر شكل الصفحة
أسماء بعض الألعاب طويلة، خصوصًا عند محاولة وصف كل شيء داخل العنوان:
“لعبة تلبيس ومكياج وقص شعر وتجهيز الأميرة لحفل الزفاف”.
هذا النوع من العناوين قد يكون مفهومًا لمحرك البحث، لكنه سيئ داخل بطاقة صغيرة.
الأفضل فصل الوظائف:
العنوان:
لعبة تجهيز الأميرة للحفل
الوصف:
اختاري الفستان والمكياج وتسريحة الشعر.
العنوان يحدد اللعبة، والوصف يشرح التفاصيل. لا تحتاج إلى وضع جميع الكلمات في السطر نفسه.
يمكن أيضًا تحديد عدد الأسطر داخل البطاقات:
.game-card h2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
لكن قص النص ليس بديلًا عن كتابة عنوان واضح. استخدمه فقط لمنع الحالات الاستثنائية من كسر الشبكة.
التصنيفات يجب أن تطابق ما يبحث عنه اللاعب
من السهل على المطور إنشاء تصنيفات مبنية على بنية البيانات الداخلية، مثل:
- ألعاب ثنائية الأبعاد؛
- ألعاب HTML5؛
- ألعاب Canvas؛
- ألعاب تعمل باللمس.
هذه التصنيفات مفيدة للمطور، لكنها ليست الطريقة التي يبحث بها اللاعب.
المستخدم لا يقول عادة: أريد لعبة Canvas.
هو يقول:
- أريد لعبة طبخ؛
- أريد لعبة تلبيس؛
- أريد لعبة مكياج؛
- أريد لعبة أميرات؛
- أريد لعبة حيوانات.
لذلك يجب أن تعكس القائمة لغة المستخدم، لا لغة قاعدة البيانات.
يمكن الاحتفاظ بالتقنيات والخصائص في الخلفية لأغراض الفلترة، لكن التصنيفات العامة يجب أن تكون مفهومة فورًا.
لا تنشئ عشرات التصنيفات الفارغة
إضافة كل تصنيف يمكن تخيله تبدو طريقة سهلة لتوسيع الموقع، لكنها تؤدي إلى صفحات ضعيفة تحتوي على لعبة أو لعبتين فقط.
من الأفضل إنشاء تصنيف عندما توجد مجموعة حقيقية من الألعاب التي تشترك في نية واضحة.
على سبيل المثال، يمكن جمع ألعاب إعداد الكعك والبيتزا والمطاعم تحت “ألعاب طبخ” إذا لم يكن هناك عدد كافٍ لبناء صفحة مستقلة لكل نوع.
التقسيم الزائد يجعل المستخدم ينتقل بين صفحات كثيرة ولا يجد خيارات كافية في أي صفحة.
صفحة اللعبة يجب أن تضع اللعب قبل الشرح
عندما يفتح المستخدم صفحة لعبة، لا يريد النزول عبر مقال طويل حتى يصل إلى زر التشغيل.
رتبت صفحة اللعبة بهذا الشكل:
- اسم اللعبة؛
- وصف قصير يوضح المهمة؛
- منطقة التشغيل؛
- تعليمات مختصرة عند الحاجة؛
- ألعاب مشابهة؛
- معلومات إضافية في الأسفل.
إذا كانت اللعبة لا تبدأ تلقائيًا، يجب أن يكون زر التشغيل مختلفًا بوضوح عن أي رابط أو إعلان.
استخدام عبارة “ابدئي اللعب” أفضل من زر غامض يحمل كلمة “التالي”.
لا تستخدم زر تنزيل في موقع ألعاب متصفح
إذا كانت اللعبة تعمل داخل المتصفح، فلا يوجد سبب لاستخدام كلمات توحي بالتثبيت.
كلمات مثل:
- تحميل؛
- تنزيل؛
- تثبيت؛
- Get App؛
قد تجعل الزائر يعتقد أنه سيغادر الصفحة أو يثبت ملفًا.
استخدم:
- العب الآن؛
- ابدأ اللعبة؛
- افتح اللعبة؛
- جرّب اللعبة.
النص يجب أن يصف ما سيحدث بعد النقر بدقة.
اختبر الصفحة بإبهام واحد
اختبار سطح المكتب لا يكفي.
فتحت الصفحات على هاتف حقيقي، واستخدمتها بيد واحدة. هذا الاختبار كشف مشكلات لم تكن واضحة في أدوات المطور:
- زر صغير قريب من حافة الشاشة؛
- قائمة تصنيفات تحتاج إلى تمرير أفقي غير واضح؛
- صورة تتسبب في قفزة أثناء التحميل؛
- رابطان متقاربان يؤديان إلى صفحات مختلفة؛
- عنوان طويل يدفع زر التشغيل إلى أسفل؛
- نافذة لعبة أكبر من عرض الهاتف.
حجم منطقة اللمس يجب أن يكون مريحًا، والمسافة بين العناصر القابلة للنقر يجب ألا تسبب نقرات خاطئة.
ثبّت أبعاد الصور قبل تحميلها
عندما لا تحدد أبعاد الصور، تتحرك البطاقات أثناء التحميل. قد يحاول المستخدم النقر على لعبة، ثم تنتقل البطاقة فجأة ويضغط على لعبة أخرى.
لذلك أضفت width وheight إلى الصور، واستخدمت aspect-ratio في CSS:
.game-card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 0.75rem;
}
هذا يحجز المساحة قبل وصول الصورة ويجعل الشبكة أكثر استقرارًا.
لا تؤجل الصورة الأولى
استخدام loading="lazy" مفيد للبطاقات الموجودة أسفل الصفحة، لكنه ليس مناسبًا دائمًا لأول صور يراها المستخدم.
يمكن تحميل الصور الأولى بصورة طبيعية، وتأجيل الصور البعيدة فقط. تأجيل كل الصور قد يجعل أعلى الصفحة يبدو فارغًا للحظات، خصوصًا على اتصال بطيء.
كما أن ضغط الصور وتحويلها إلى WebP أو AVIF يقلل وقت الانتظار أكثر من إضافة مؤثر تحميل جميل.
ماذا فعلت في المشروع الفعلي؟
طبقت هذه القرارات أثناء تنظيم موقع العاب بنات ليكون الوصول إلى ألعاب الطبخ والتلبيس والمكياج وغيرها مباشرًا قدر الإمكان.
لم يكن الهدف عرض أكبر عدد من المكونات أو المؤثرات. الهدف كان تقليل عدد الخطوات بين دخول الصفحة وبدء اللعبة.
كل عنصر لا يساعد على اختيار لعبة أو تشغيلها يحتاج إلى سبب قوي للبقاء.
لا تجعل RTL نسخة معكوسة من التصميم الإنجليزي
أفضل واجهة عربية ليست دائمًا التصميم الإنجليزي نفسه بعد قلب الاتجاه.
قد تحتاج القوائم إلى ترتيب مختلف، وقد تحتاج العناوين إلى مساحة أكبر، وقد يصبح شريط أفقي مناسبًا بالإنجليزية لكنه مربكًا بالعربية.
التصميم الجيد يبدأ من المحتوى العربي نفسه:
- طول الكلمات؛
- اتجاه القراءة؛
- طريقة خلط الأسماء الأجنبية؛
- أحجام الخطوط؛
- استخدام الهاتف؛
- ترتيب المعلومات الذي يتوقعه الزائر.
RTL ليس تأثيرًا بصريًا. هو جزء من بنية الصفحة.
الخلاصة
بناء موقع ألعاب عربي جيد لا يتطلب واجهة معقدة، لكنه يتطلب قرارات دقيقة.
استخدم lang="ar" وdir="rtl" من البداية، واعزل النصوص الأجنبية، ولا تقلب الأيقونات والصور بلا سبب. اجعل بطاقة اللعبة تشرح نوعها قبل النقر، واستخدم تصنيفات يفهمها اللاعب، وضع منطقة التشغيل في أعلى صفحة اللعبة.
الأهم من ذلك: اختبر المسار الكامل على الهاتف.
هل يستطيع المستخدم دخول الموقع، فهم نوع اللعبة، فتحها والبدء خلال وقت قصير؟
إذا كانت الإجابة لا، فلن تعالج المشكلة فقرة تسويقية إضافية أو حركة بصرية جديدة. يجب تقليل الخطوات وإزالة العناصر التي تعطل اللعب.
Top comments (0)