الإطارات السلكية

الإطارات السلكية

الإطار السلكي (Wireframe) هو مخطط هيكلي للشاشة يُحدّد التخطيط والتسلسل الهرمي والسلوك باستخدام الصناديق والنصوص البديلة والتعليقات التوضيحية فحسب — مُجرَّدًا عمدًا من الألوان والخطوط والصور. تمامًا كمخطط أرضية المعمار قبل اختيار الدهان أو الأثاث. يشكّل الإطار السلكي للمحللين جسرًا بين وثيقة المتطلبات والتصميم المرئي؛ إذ يُتيح لأصحاب المصلحة فحص البنية دون الانشغال بالجماليات.

لماذا الهيكل بلا أسلوب بصري؟

حين يرى أصحاب المصلحة ألوانًا وتصميمات مصقولة، تنزلق النقاشات نحو تفضيلات العلامة التجارية والأيقونات بدلًا من التحقق من وجود الحقول الصحيحة بالترتيب المناسب للمستخدمين المناسبين. تقطع الإطارات السلكية هذا الإلهاء بمفردات محايدة:

• الصناديق الرمادية تمثّل المناطق: الترويسات والأشرطة الجانبية ولوحات المحتوى والتذييلات.
• الأسطر الأفقية أو كتل النص البديل تحلّ محلّ محتوى النصوص.
• الصناديق ذات الخط المتقاطع تُشير إلى عناصر الصور أو الوسائط.
• المستطيلات المُعنوَنة تُمثّل الأزرار والروابط وحقول الإدخال.
• التعليقات التوضيحية (الأرقام أو الهوامش) تشرح السلوك والقواعد التجارية ومصادر البيانات.

يُعيد هذا القيد كلَّ نقاش إلى السؤال الأهم في هذه المرحلة: هل هذه هي المعلومات الصحيحة في المكان الصحيح؟

تشريح الإطار السلكي

يحتوي الإطار السلكي الاحترافي على أربع طبقات من المعلومات:

1. هيكل التخطيط — البنية الشبكية أو العمودية التي تُقسّم الشاشة إلى مناطق.
2. كتل المحتوى — عناصر بديلة تمثّل كل قطعة معلومات أو وظيفة.
3. إشارات التفاعل — الأزرار وخانات الاختيار والقوائم المنسدلة والروابط المُعنوَنة بأفعالها (مثل: [ احجز موعد ]).
4. التعليقات التوضيحية — ملاحظات مرقّمة تربط العناصر بالمتطلبات (مثل: "① يتحقق من هوية المريض في نظام المستشفى ويعرض الخطأ في الموضع ذاته").

إطار سلكي لشاشة حجز موعد في عيادة

تخيّل نظام معلومات مستشفى لديه المتطلب FR-07: "يجب أن يتمكن المريض من حجز موعد متابعة باختيار الطبيب والتاريخ والوقت المناسب." يوثّق الإطار السلكي أدناه بنية الشاشة التي تستوفي هذا المتطلب.

قراءة الإطار السلكي

يُحيل كل تعليق توضيحي في المخطط أعلاه إلى قرار أو قاعدة محددة:

• ① يؤكد عنوان الصفحة النطاق — يعرف المريض أنه يحجز موعد متابعة لا زيارة أولى.
• ② تُغذَّى القائمة المنسدلة للأطباء من فريق رعاية المريض الحالي (المتطلب FR-07-a). يوضح التعليق مصدر البيانات دون تحديد طريقة العرض.
• ③ يجب أن يحجب منتقي التاريخ التواريخ الماضية (القاعدة التجارية BR-04). يُسجَّل هذا القيد في التعليق لا في لون أو أيقونة.
• ④ للأوقات ثلاث حالات — متاح ومحدد ومحجوز — مُعرَّفة هنا بتعبئات بديلة، واختيار الألوان الفعلية للمصمم لاحقًا.
• ⑤ الزر الرئيسي معطَّل حتى تكتمل جميع الحقول الإلزامية. هذا سلوك تحقق يُوثَّق هنا لضمان بنائه من البداية.

أفضل ممارسات التعليقات التوضيحية

تبرز قيمة المحلل بوضوح في التعليقات التوضيحية. اتبع هذه الأعراف:

• رقّم كل عنصر يحمل قاعدة. الصناديق الهيكلية البحتة (ترويسة الصفحة بلا منطق) لا تحتاج تعليقًا.
• تعليق واحد، حقيقة واحدة. لا تجمع ثلاث قواعد في ملاحظة واحدة؛ أصحاب المصلحة يحتاجون إلى الموافقة على كل قاعدة بشكل منفصل.
• وثِّق الـ ماذا لا الـ كيف. اكتب "يتحقق من صيغة البريد الإلكتروني عند مغادرة الحقل" لا "استخدم تعبيرًا نمطيًا". التنفيذ مجال المطور.
• استشهد برقم المتطلب. "الأوقات مُحضَرة من Scheduler API (FR-07-b)" يربط الإطار السلكي بالمواصفات ولا يضيع شيء.

مكوّنات الإطار السلكي: مرجع سريع

يسرد ما يلي المفردات القياسية للإطارات السلكية، المعترف بها في كل الأدوات — رسومات القلم والورق وBalsamiq وFigma وحتى المخططات النصية في مستند Word:

• [ تسمية الزر ] — إجراء قابل للنقر؛ الأجراء الرئيسية مملوءة، والثانوية ذات حدود فقط.
• [ ____________ ] — حقل إدخال نصي؛ التسمية فوقه، والنص البديل بداخله.
• ( ▾ خيار ) — قائمة منسدلة.
• ⊠ تسمية خانة / ◉ تسمية راديو — عناصر تحكم المنطق الثنائي والاختيار الأحادي.
• مستطيل رمادي بخط يقطع زاوياه — عنصر صورة أو وسائط بديل.
• أسطر أفقية متفاوتة الطول — فقرات النص الأساسي أو عناصر القوائم.
• مستطيل بحدود سميكة أو منطقة بظل خفيف — حدود بطاقة أو نافذة حوار أو لوحة.

سير العمل العملي: من المتطلبات إلى الإطار السلكي

يُنتج المحلل الإطارات السلكية عبر ثلاث مراحل:

1. المرحلة الأولى — جرد العناصر. سرد كل قطعة بيانات وكل إجراء يجب أن تدعمه الشاشة، مستخرَجةً مباشرةً من حالات الاستخدام والمتطلبات الوظيفية. لشاشة الحجز: منتقي الطبيب ومنتقي التاريخ والأوقات وحقل السبب وأزرار التأكيد والإلغاء وملخص الحجز.
2. المرحلة الثانية — مسودة التخطيط. ترتيب العناصر حسب الأولوية (الأهم أعلى اليسار للواجهات ذات الاتجاه اليساري). الرسم بالقلم والورق أو شبكة بسيطة بلا أدوات. تجميع العناصر ذات الصلة في لوحات.
3. المرحلة الثالثة — التعليق التوضيحي. لكل عنصر تفاعلي أو مدفوع بالبيانات، كتابة القاعدة التي يجب اتباعها مع الإشارة إلى رقم المتطلب. تسجيل الحالات الحدّية (الحالة الفارغة ورسائل الخطأ وحالة التحميل) في التعليقات حتى لو لم تظهر في الإطار الرئيسي.

فقط بعد هذه المراحل الثلاث يصبح الإطار السلكي جاهزًا لمراجعة أصحاب المصلحة. في تلك المراجعة، تجوَّل صراحةً في كل تعليق — لا تفترض أن أصحاب المصلحة سيقرؤون الملاحظات من تلقاء أنفسهم.

الخلاصة

يُوصل الإطار السلكي البنية والتسلسل الهرمي والسلوك دون أي أسلوب بصري. تكمن قوته في الضبط المتعمد: باستخدام الصناديق والعناصر البديلة والتعليقات فحسب، يُبقي مراجعات أصحاب المصلحة مُركَّزة على التحقق من وجود المعلومات والإجراءات الصحيحة. يجب أن يُحيل كل تعليق إلى رقم متطلب، ويجب أن تغطي مجموعة الإطارات المسار السعيد والحالة الفارغة وحالة الخطأ وحالة النجاح. في الدرس القادم ستُضيف التفاعل والصقل المرئي للوصول إلى النموذج المرئي الكامل والنموذج الأولي القابل للنقر.