أنماط واجهة المستخدم

ما هي أنماط واجهة المستخدم؟

أنماط واجهة المستخدم (UI Patterns) هي حلول تصميمية مُجرّبة لمشاكل متكررة. بدل ما تخترع طريقة جديدة لعرض قائمة تنقل أو نموذج تسجيل كل مرة، تقدر تستخدم أنماط أثبتت فعاليتها مع ملايين المستخدمين.

الأنماط دي مش قوالب جاهزة — هي مبادئ بتوجهك. كل نمط بيحل مشكلة محددة وتقدر تكيّفه حسب مشروعك.

لماذا الأنماط مهمة؟

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

أنماط التنقل (Navigation Patterns)

التنقل هو العمود الفقري لأي تطبيق — لو المستخدم مش عارف يوصل للمحتوى اللي عايزه، باقي التصميم مالوش لازمة.

١. شريط التنقل العلوي (Top Navigation Bar)

أشهر نمط على الويب. شريط أفقي في أعلى الصفحة فيه الشعار والروابط الرئيسية.

متى تستخدمه:

• مواقع الويب اللي فيها ٥-٧ روابط رئيسية
• لما تحتاج الشعار يكون ظاهر دايمًا

أفضل الممارسات:

• الشعار على اليمين في RTL (اليسار في LTR)
• ٧ عناصر كحد أقصى في التنقل الرئيسي
• أزرار CTA مميزة بلون مختلف
• Sticky navigation مفيد للصفحات الطويلة

٢. الشريط الجانبي (Sidebar Navigation)

عمود على جانب الشاشة فيه قائمة الروابط. مناسب جدًا لـ:

• لوحات التحكم (Dashboards)
• تطبيقات SaaS
• أنظمة الإدارة

أفضل الممارسات:

• عرض الـ Sidebar بين ٢٤٠-٣٠٠px
• جروّب الروابط في فئات بعناوين
• أيقونة + نص لكل رابط
• Collapsible sidebar للشاشات الأصغر
• حالة Active واضحة للصفحة الحالية

٣. شريط التنقل السفلي (Bottom Tab Bar)

الـ Tab Bar في أسفل شاشة الموبايل. أشهر نمط في تطبيقات الموبايل.

متى تستخدمه:

• تطبيقات الموبايل اللي فيها ٣-٥ أقسام رئيسية

أفضل الممارسات:

• ٥ عناصر كحد أقصى
• أيقونة + تسمية نصية لكل عنصر
• العنصر النشط مُميز بوضوح (لون مختلف أو حجم أكبر)
• ما تحطش إجراءات (actions) في الـ Tab Bar — بس تنقل

٤. قائمة الهامبورجر (Hamburger Menu)

الثلاث خطوط الأفقية اللي بتفتح قائمة مخفية. مناسبة لما يكون عندك روابط كتير ومساحة قليلة.

تحذير مهم: الدراسات بتُظهر إن القائمة المخفية بتقلل التفاعل بنسبة ٢٠-٥٠٪ مقارنة بالتنقل الظاهر. استخدمها كـ ملاذ أخير مش كخيار أول.

أنماط النماذج (Form Patterns)

النماذج (Forms) هي النقطة اللي المستخدم بيتحول فيها من مُستعرض لـ مُتفاعل. تصميم النموذج السيء بيخلي المستخدمين يسيبوا الصفحة.

١. تسمية الحقول (Label Placement)

ثلاث طرق لوضع التسمية:

• فوق الحقل: الأفضل لأغلب الحالات — واضحة وسهلة المسح البصري وبتشتغل كويس على الموبايل
• جوا الحقل (Placeholder): بتختفي لما المستخدم يكتب — ما تستخدمهاش كبديل للتسمية. ممكن تستخدمها كمثال بجانب التسمية
• جنب الحقل: بتوفر مساحة عمودية بس بتضيع مساحة أفقية. مناسبة للنماذج العريضة في الديسكتوب

٢. التحقق من البيانات (Validation)

• Inline Validation: التحقق لحظيًا أثناء ما المستخدم بيكتب أو لما يسيب الحقل. أفضل تجربة
• رسائل الخطأ: لازم تكون واضحة ومحددة — "البريد الإلكتروني غير صالح" أحسن من "خطأ في الإدخال"
• اللون مش كافي: ما تعتمدش على اللون الأحمر بس — أضف أيقونة ونص
• موقع رسالة الخطأ: تحت الحقل مباشرة، مش في أعلى الصفحة

٣. التقسيم الذكي

• النماذج الطويلة: قسّمها لخطوات (Multi-step form) مع مؤشر تقدم واضح
• التجميع: اجمع الحقول المرتبطة في مجموعات (الاسم مع اللقب، المدينة مع الدولة)
• الإخفاء المشروط: اعرض حقول إضافية بس لما تكون مطلوبة (لو اختار "أخرى" اعرض حقل نص)

٤. أزرار النموذج

• زر الإرسال: واضح ومُميز — لون أساسي + نص يوصف الإجراء ("إنشاء حساب" مش "إرسال")
• زر الإلغاء: أقل بروز من زر الإرسال — نص بدون خلفية أو خلفية فاتحة
• الترتيب: زر الإرسال على اليسار في RTL (لأن العين بتنتهي هناك)

أنماط البطاقات (Card Patterns)

الكارد (Card) هو أهم مكون في التصميم الحديث. بيجمع محتوى مرتبط في وحدة بصرية واحدة.

تشريح الكارد المثالي

من فوق لتحت:

1. صورة (اختياري): بتجذب الانتباه وبتوصل المعنى بسرعة
2. تصنيف/Badge: كلمة أو اتنين بتوضح نوع المحتوى
3. عنوان: قصير ومُعبّر
4. وصف: سطر أو اتنين يوضحوا المحتوى
5. معلومات فرعية: التاريخ، الكاتب، وقت القراءة
6. إجراء (اختياري): زر أو رابط

أنواع الكروت

• كارد محتوى: للمقالات والأخبار والمنتجات. بيكون فيه صورة وعنوان ووصف
• كارد إحصائي: رقم كبير + عنوان + مؤشر تغيير. بيُستخدم في Dashboards
• كارد ملف شخصي: صورة شخصية + اسم + وصف + روابط. بيُستخدم في صفحات الفريق
• كارد تفاعلي: بيحتوي على أزرار وقوائم. بيُستخدم في تطبيقات إدارة المهام

أفضل الممارسات

• تباعد متسق: نفس الـ padding من كل الجوانب
• ظل خفيف أو حدود: لتمييز الكارد عن الخلفية
• Hover state: تغيير بسيط لما المستخدم يمرر الماوس فوق الكارد
• حجم ثابت أو مرن: الكروت في الشبكة لازم تكون متسقة في الارتفاع

أنماط النوافذ المنبثقة (Modal Patterns)

الـ Modal هو نافذة بتظهر فوق المحتوى وبتطلب انتباه المستخدم. لازم تستخدمه بحذر شديد لأنه بيقاطع المستخدم.

متى تستخدم Modal؟

• تأكيد إجراء خطير: "هل أنت متأكد من الحذف؟"
• معلومات تحتاج تركيز: نموذج دفع، إعدادات مهمة
• محتوى إضافي: تفاصيل عنصر بدون مغادرة الصفحة

متى ما تستخدمش Modal؟

• رسائل إعلامية بسيطة — استخدم Toast/Snackbar
• قوائم بسيطة — استخدم Dropdown
• محتوى طويل — استخدم صفحة جديدة

أفضل ممارسات الـ Modal

• خلفية معتمة (Overlay): بتركز الانتباه على النافذة
• زر إغلاق واضح: X في الزاوية + إمكانية الضغط على الخلفية للإغلاق
• عرض مناسب: ٤٠٠-٦٠٠px للنماذج البسيطة، ٨٠٠px كحد أقصى
• عنوان واضح: المستخدم لازم يفهم الهدف من أول نظرة
• على الموبايل: حوّل الـ Modal لـ Bottom Sheet — أسهل في الوصول بإيد واحدة

أنماط التحميل والانتظار (Loading Patterns)

المستخدم بيكره الانتظار. لكن الانتظار أحيانًا حتمي. المهم إنك تدير التوقعات.

١. Skeleton Screens

بدل ما تعرض شاشة فاضية أو دوّارة تحميل، اعرض هيكل رمادي بنفس شكل المحتوى المتوقع. ده اسمه Skeleton Screen.

لماذا أفضل من Spinner؟ لأن المستخدم بيحس إن المحتوى بيتحمّل فعلاً — مش مجرد بيستنى.

٢. Progress Bar

للعمليات اللي بتاخد وقت معروف — رفع ملف، تحميل ملف كبير، معالجة بيانات. المستخدم بيحتاج يعرف كم فاضل.

٣. Spinner

للعمليات السريعة (أقل من ٣ ثواني). ما تستخدمهاش لعمليات طويلة — المستخدم مش هيعرف هل فيه مشكلة ولا بيتحمّل.

٤. Optimistic UI

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

أنماط التنبيهات والإشعارات (Notification Patterns)

١. Toast / Snackbar

رسالة صغيرة بتظهر مؤقتًا (٣-٥ ثواني) وبتختفي لوحدها. مناسبة لـ:

• "تم الحفظ بنجاح"
• "تم النسخ"
• أي تأكيد لا يحتاج رد فعل من المستخدم

الموقع: أسفل الشاشة في الوسط أو أسفل اليسار/اليمين.

٢. Alert / Banner

رسالة ثابتة في أعلى الصفحة أو القسم. مناسبة لـ:

• تحذيرات مهمة
• إعلانات نظام
• رسائل خطأ عامة

أنواعها: Success (أخضر), Error (أحمر), Warning (أصفر), Info (أزرق).

٣. Badge

رقم صغير على أيقونة بيدل على عدد الإشعارات أو العناصر الجديدة. مناسب لـ:

• عدد الرسائل الجديدة
• عدد عناصر السلة
• إشعارات لم تُقرأ

٤. Empty State

لما مفيش محتوى يتعرض — مش تسيب الصفحة فاضية. اعرض:

• رسم توضيحي أو أيقونة
• رسالة واضحة: "ما فيش مهام بعد"
• إجراء: "أضف أول مهمة" — زر يوجه المستخدم

أنماط البحث والتصفية (Search & Filter Patterns)

البحث

• مكان البحث: أعلى الصفحة أو في الـ Navbar — المستخدم بيتوقعه هناك
• Placeholder واضح: "ابحث عن منتج، مقال، أو تصنيف..."
• نتائج فورية: اعرض نتائج أثناء الكتابة (Autocomplete) لو ممكن
• حالة عدم وجود نتائج: رسالة ودية + اقتراحات

التصفية

• فلاتر ظاهرة: Chips أو أزرار في أعلى القائمة — مناسبة لـ ٣-٥ خيارات
• فلاتر جانبية: Sidebar بخيارات تفصيلية — مناسبة لمتاجر إلكترونية
• فلاتر مخفية: زر "فلتر" بيفتح قائمة — مناسب للموبايل
• إظهار الفلاتر النشطة: المستخدم لازم يعرف أيه الفلاتر المُطبقة وإزاي يشيلها

أنماط الجداول (Table Patterns)

الجداول مهمة جدًا في التطبيقات الإدارية ولوحات التحكم.

أفضل الممارسات

• رأس الجدول ثابت: لما المستخدم يمرر لأسفل، رأس الجدول يفضل ظاهر
• التمييز بالتناوب: لون خلفية مختلف لكل صف فردي وزوجي (Zebra Striping)
• الفرز: المستخدم يقدر يضغط على رأس العمود لترتيب البيانات
• اختيار الصفوف: Checkboxes لاختيار صفوف متعددة
• إجراءات الصف: قائمة إجراءات (حذف، تعديل) لكل صف
• على الموبايل: الجدول بيتحول لكروت أو بيُسمح بالتمرير الأفقي

أنماط الـ Onboarding

أول تجربة للمستخدم مع التطبيق بتحدد هل هيستمر ولا هيمسح التطبيق.

١. جولة تعريفية (Product Tour)

Tooltips بتظهر خطوة بخطوة وبتشرح أهم المميزات. ٣-٥ خطوات كحد أقصى — أكتر من كده المستخدم هيتخطى.

٢. الشاشات التمهيدية (Onboarding Screens)

٣-٤ شاشات بصور وعناوين توضح قيمة التطبيق. مناسبة لتطبيقات الموبايل. لازم يكون فيه زر "تخطي".

٣. إعداد تدريجي (Progressive Disclosure)

بدل ما تعرض كل المميزات مرة واحدة، اعرض الأساسيات الأول. لما المستخدم يتقدم، اكشف مميزات أكتر.

٤. Checklist

قائمة مهام المستخدم لازم يعملها لإكمال الإعداد — "أكمل ملفك الشخصي"، "أضف أول مشروع"، "ادعُ فريقك". بيخلق حافز لإكمال الإعداد.

تمرين عملي

صمّم شاشتين لتطبيق إدارة مهام:

الشاشة الأولى — قائمة المهام:

1. شريط تنقل جانبي (Sidebar) بالمشاريع
2. شريط بحث وتصفية في الأعلى
3. قائمة مهام على شكل كروت
4. Empty State لو القائمة فاضية
5. زر إضافة مهمة (FAB أو زر عادي)

الشاشة التانية — تفاصيل المهمة:

1. Modal أو صفحة كاملة
2. نموذج تعديل العنوان والوصف
3. اختيار الأولوية والتاريخ والمسؤول
4. قسم التعليقات
5. أزرار الحفظ والإلغاء والحذف

ركّز على الأنماط اللي اتعلمتها — كل عنصر في التصميم لازم يتبع نمط مُجرّب ومُعتمد.