الدرس 5 · الوحدة 2: رسم المخطط الهيكلي
عناصر الواجهة: الأزرار والقوائم والحقول
نتعرف على قطع «الليغو» التي تُبنى منها كل الواجهات، ومتى نستخدم كل قطعة. ⏱ نحو 20 دقيقة.
بعد هذا الدرس ستستطيع أن:
- تختار نوع الزر المناسب وتكتب عليه فعلًا واضحًا.
- تفرّق بين حقل الإدخال والقائمة المنسدلة وأزرار الاختيار ومربعات الاختيار.
- تتعرف على شريط التنقل ومسار التنقل والبطاقة.
- تربط كل عنصر برمزه في المخطط الهيكلي.
١الأزرار: فعل واضح
الزر يقول للمستخدم «اضغطني لأفعل شيئًا». لذلك نكتب عليه فعلًا يصف النتيجة: «احجز الآن» لا «اضغط هنا». وللأزرار ثلاث درجات أهمية:
| النوع | شكله | متى نستخدمه؟ |
|---|---|---|
| أساسي | ممتلئ بلون التمييز | الإجراء الأهم في الصفحة. زر واحد في كل جزء. |
| ثانوي | إطار بلا تعبئة | إجراء مهم لكنه ليس الهدف الأول. |
| نصي | كلمة فقط | إجراء قليل الاستخدام، مثل «إلغاء». |
٢حقول الإدخال والقوائم المنسدلة
- لكل حقل عنوان فوقه يقول ماذا نكتب. النص الباهت داخل الحقل مثال فقط، ويختفي عند الكتابة.
- اختر نوع الحقل المناسب: بريد، أو رقم، أو تاريخ، فيظهر للمستخدم في الجوال لوحة المفاتيح المناسبة.
- القائمة المنسدلة مناسبة عندما تكون الخيارات كثيرة (المدن مثلًا)، وتوفّر المساحة.
٣الاختيار: دائرة أم مربع؟
| العنصر | القاعدة |
|---|---|
| زر الاختيار Radio (دائرة) | خيار واحد فقط من مجموعة. وإن كانت الخيارات قليلة (2 إلى 5) فهو أوضح من القائمة المنسدلة. |
| مربع الاختيار Checkbox | المستخدم يختار ما يشاء: لا شيء، أو واحدًا، أو أكثر. |
| المفتاح Toggle | تشغيل وإيقاف فوري، مثل «الوضع الليلي». |
٤عناصر التنقل والعرض
- شريط التنقل: الشعار وروابط الأقسام الرئيسية، أعلى كل صفحة. في الجوال يُختصر غالبًا في أيقونة ☰.
- مسار التنقل
Breadcrumb: يقول للمستخدم أين هو الآن، ويرجعه بضغطة. - البطاقة
Card: صورة وعنوان ومعلومة قصيرة، تُستخدم لعرض المنتجات والمقالات في شبكة.
٥من المخطط إلى العنصر
| العنصر | رمزه في المخطط الهيكلي | وسمه في HTML (ستتعلمه قريبًا) |
|---|---|---|
| زر | مستطيل فيه كلمة | <button> |
| حقل إدخال | مستطيل فارغ فيه نص باهت | <input> |
| قائمة منسدلة | حقل في طرفه سهم ▾ | <select> |
| رابط | كلمة تحتها خط | <a> |
| صورة | مستطيل بخطين متقاطعين | <img> |
توقّع وتحقّق
أي نص أفضل لزر في صفحة حجز؟
فعل يصف النتيجة.
المستخدم يختار مدينة من 40 مدينة. أي عنصر أنسب؟
الخيارات كثيرة.
اختيار الإضافات (سكر، حليب، هيل) مع إمكانية اختيار أكثر من واحد:
المربع يسمح بأكثر من خيار.
ما وظيفة مسار التنقل Breadcrumb؟
الرئيسية ‹ القائمة ‹ …
الخلاصة
- الزر: فعل واضح، وزر أساسي واحد في كل جزء.
- لكل حقل عنوان، ونوع الحقل يناسب المعلومة.
- خيار واحد من قليل:
Radio. خيارات كثيرة: قائمة منسدلة. أكثر من خيار:Checkbox. - التنقل: شريط علوي، ومسار تنقل، وبطاقات للعرض.
تحدٍّ تصميمي: نموذج حجز موعد
متوسطارسم مخططًا هيكليًّا (على الورق أو في Figma) لنموذج حجز موعد في عيادة أسنان، واختر العنصر المناسب لكل معلومة.
المطلوب:
- الاسم ورقم الجوال.
- نوع الخدمة: تنظيف، أو حشو، أو تقويم، أو استشارة.
- اليوم والوقت.
- هل هي الزيارة الأولى؟ (نعم/لا).
- ملاحظات اختيارية.
- زر أساسي وزر ثانوي.
☑ راجع عملك قبل التسليم:
💡 تلميح 1
4 خدمات فقط: أزرار الاختيار أوضح من القائمة المنسدلة.
💡 تلميح 2
سؤال «نعم/لا»: زرّا اختيار أو مفتاح.