الدرس 4 · الوحدة 2: رسم المخطط الهيكلي
ما المخطط الهيكلي؟
نرسم «مخطط البيت» قبل أن نبنيه: أين يوضع كل عنصر في الصفحة؟ ⏱ نحو 15 دقيقة.
بعد هذا الدرس ستستطيع أن:
- تعرّف المخطط الهيكلي وفائدته.
- تفرّق بين المخطط الهيكلي والنموذج المرئي والنموذج التفاعلي.
- تستخدم رموز المخطط الأساسية.
- ترسم مخططًا منخفض الدقة لصفحة بسيطة.
١مخطط البيت قبل البناء
لا يبني أحد بيتًا قبل أن يرسم مخططه: أين الغرف والأبواب والنوافذ؟ ولا يهتم المخطط بلون الجدران. وكذلك الموقع: قبل الألوان والكود نرسم المخطط الهيكلي Wireframe.
المخطط الهيكلي رسم مبسّط بالأبيض والأسود يحدد مكان كل عنصر في الصفحة وحجمه وأهميته، دون ألوان ولا صور حقيقية.
٢ثلاث مراحل من الفكرة إلى الصفحة
| المرحلة | ماذا فيها؟ | متى؟ |
|---|---|---|
| المخطط الهيكلي Wireframe | مربعات وخطوط ورموز فقط. | أولًا: لنتفق على الترتيب والمحتوى. |
| النموذج المرئي Mockup | الألوان والخطوط والصور الحقيقية. | بعد الاتفاق على المخطط. |
| النموذج التفاعلي Prototype | شاشات مرتبطة: تضغط الزر فتنتقل. | لتجربة الاستخدام قبل البرمجة. |
٣رموز المخطط
للمخطط لغة رموز بسيطة يفهمها كل المصممين:
٤لماذا نبدأ بالأبيض والأسود؟
| السبب | الشرح |
|---|---|
| أسرع وأرخص | رسم مخطط على ورقة يأخذ دقائق، ومسحه وإعادته أسهل من تعديل كود. |
| التركيز على المهم | بلا ألوان، يناقش الفريق الترتيب والمحتوى لا «هل الأزرق أجمل؟». |
| تواصل أوضح | صاحب الموقع يفهم الرسم ويعطي رأيه مبكرًا. |
| خريطة للمطوّر | كل مربع في المخطط سيصبح عنصرًا في HTML. |
٥مستويات الدقة
المخطط نوعان حسب دقته:
- منخفض الدقة: رسم سريع باليد على ورقة. ممتاز للبداية وتجربة أفكار كثيرة.
- عالي الدقة: في
Figmaبمقاسات ومسافات دقيقة ونصوص حقيقية، لكن ما زال بالرمادي.
توقّع وتحقّق
ما المخطط الهيكلي؟
مخطط البيت قبل البناء.
مستطيل بخطين متقاطعين في المخطط يعني:
هذا رمز الصورة.
في أي مرحلة نضيف الألوان والصور الحقيقية؟
بعد الاتفاق على الترتيب.
النموذج الذي تضغط فيه الزر فتنتقل إلى شاشة أخرى هو:
يُستخدم لتجربة الاستخدام.
الخلاصة
- المخطط الهيكلي: رسم بالأبيض والأسود يحدد أماكن العناصر وأهميتها.
- المراحل: مخطط هيكلي، ثم نموذج مرئي، ثم نموذج تفاعلي.
- الرموز: صورة بخطين متقاطعين، ونص بخطوط، وزر بمستطيل وكلمة.
- نبدأ بالمخطط لأنه أسرع وأرخص ويركّز النقاش على المحتوى والترتيب.
تحدٍّ تصميمي: مخطط صفحة تسجيل الدخول
سهلارسم على ورقة مخططًا هيكليًّا منخفض الدقة لصفحة تسجيل الدخول في تطبيق جوال. صوّر الورقة وسلّمها لمعلمك.
المطلوب:
- إطار بشكل جوال.
- الشعار أعلى الصفحة.
- حقلان: البريد الإلكتروني وكلمة المرور.
- زر «دخول» أساسي، ورابط «نسيت كلمة المرور؟».
- استخدم رموز المخطط فقط، بلا ألوان.
☑ راجع عملك قبل التسليم:
💡 تلميح 1
ابدأ بالسؤال: ما الشيء الوحيد الذي يريد المستخدم فعله هنا؟ اجعله الأوضح.