شرح صفوف ومحتوى الفقرة
بعد أن تعرّفنا في الدرس السابق على دور لغة في بناء الهيكل ودور لغة في التنسيق البصري، يبرز سؤال مهم: كيف تُصمَّم شاشات الويب لتكون مريحة للعين وسهلة الاستخدام، وكيف تتكيف الصفحة نفسها تلقائياً بين شاشة الهاتف الصغيرة وشاشة الحاسوب الكبيرة؟ في هذا الدرس ستستكشف مفاهيم واجهة المستخدم () وتجربة المستخدم ()، وتحويل المخططات إلى صفحات حية، والتصميم المتجاوب عبر ، وتوافق المتصفحات، وإمكانية الوصول الرقمي ()، ودعم العربية () والإنجليزية ().
قبل الغوص في تفاصيل هذا الدرس، استعرض جدول المصطلحات الأساسية التالية:
| المصطلح بالعربية | المصطلح بالإنجليزية | النطق التقني | المعنى المبسط |
|---|---|---|---|
| واجهة المستخدم | يوزر إنترفيس (يو آي) | المظهر البصري للشاشة من ألوان وخطوط وأيقونات وأزرار وتناسق المسافات بين العناصر. | |
| تجربة المستخدم | يوزر إكسبيرينس (يو إكس) | مدى سهولة وسرعة ووضوح رحلة الزائر داخل الموقع للوصول إلى هدفه دون حيرة أو تعقيد. | |
| المخطط الهيكلي الأولي | واير فريم | رسم تخطيطي مبدئي غير ملون يوضح توزيع الصناديق والأقسام الرئيسية للصفحة قبل تلوينها. | |
| التصميم المتجاوب للويب | ريسبونسيف ويب ديزاين | تقنية تعتمد على CSS لجعل الصفحة تعيد ترتيب أبعادها تلقائياً لتناسب شاشات الهواتف والحواسيب. | |
| إمكانية الوصول الرقمي | ويب أكسيسيبيلتي (إيه إلفن واي) | بناء الواجهة بحيث يتمكن الجميع—بمن فيهم ذوو الاحتياجات الخاصة ومستخدمو قارئات الشاشة—من استخدامها بسهولة. | |
| اتجاه العرض يمين/يسار | آر تي إل / إل تي آر | ضبط اتجاه تخطيط الصفحة من اليمين لليسار (RTL للعربية) أو من اليسار لليمين (LTR للإنجليزية). |
يركز تصميم واجهة المستخدم () على المظهر البصري للشاشة وكيف تبدو العناصر أمام عين الزائر. وتقوم الواجهة البصرية الاحترافية على أربع ركائز أساسية:
- تناسق الألوان والتباين الواضح: اختيار ألوان متناغمة ومريحة للعين في الوضعين النهاري والليلي، مع تمييز رسائل النجاح باللون الأخضر والتنبيهات باللون الكهرماني والأخطاء باللون الأحمر.
- وضوح الخطوط وتدرج الأحجام: اختيار خط واضح القراءة وتدرج منطقي لأحجام النصوص بحيث يتميز العنوان الرئيسي فوراً عن الفقرة الشارحة.
- التسلسل البصري والمسافات المريحة: ترك مسافات بيضاء متوازنة بين البطاقات والأقسام حتى لا تبدو الشاشة مزدحمة أو مرهقة للنظر.
- ثبات شكل الأزرار والأيقونات: توحيد تصميم الأزرار وحقول الإدخال والأيقونات في جميع صفحات الموقع ليشعر الزائر بالألفة والاحترافية.