مبادئ UX للمواقع العربية: تصميم يراعي الثقافة واللغة
تصميم UX لموقع عربي يختلف عن الإنجليزي — الاتجاه من اليمين لليسار (RTL)، أنماط القراءة مختلفة، والتوقعات الثقافية فريدة.
تحديات RTL وحلولها
/* CSS لدعم RTL */
html { direction: rtl; }
/* استخدم الخصائص المنطقية */
.card {
margin-inline-start: 1rem; /* بدل margin-left */
padding-inline-end: 2rem; /* بدل padding-right */
border-inline-start: 3px solid #e94560;
}
/* الأيقونات: بعضها يحتاج عكس */
.icon-arrow { transform: scaleX(-1); } /* عكس السهم */
.icon-check { /* لا يحتاج عكس */ }
/* Flexbox يدعم RTL تلقائياً */
.nav { display: flex; /* يبدأ من اليمين تلقائياً */ }
/* Grid يدعم RTL تلقائياً أيضاً */أنماط التصميم للمواقع العربية
- التنقل: القائمة الرئيسية من اليمين
- الشعار: عادةً في أقصى اليمين
- أزرار CTA: بارزة وبنص واضح بالعربية
- النماذج: التسميات فوق الحقول (لا بجانبها)
- الأرقام: استخدم الأرقام الهندية (٠١٢٣) أو العربية (0123) حسب الجمهور
اختبار RTL
# قائمة تحقق RTL:
☑️ النص يبدأ من اليمين
☑️ القوائم تبدأ من اليمين
☑️ الأيقونات الاتجاهية معكوسة
☑️ الصور لا تحتاج عكس
☑️ الأرقام تُعرض بشكل صحيح
☑️ النماذج تعمل من اليمين لليسار
☑️ Scrollbar على اليسار
☑️ التبويبات تبدأ من اليمينملخص المهارات المكتسبة
- تصميم واجهات RTL صحيحة
- استخدام الخصائص المنطقية في CSS
- فهم أنماط التصميم العربية
الخطوة التالية: راجع موقعك بقائمة تحقق RTL وأصلح أي مشاكل.