3-6 الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية Wireframes.
انظر إلى رأس الصفحة: نحن في الدرس الثالث من الفصل السادس، وموضوعنا هو الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية Wireframes. المفاهيم الرئيسة تدور حول مصطلح المخطط الهيكلي Wireframe. هدفنا الأول هو تعلم رسم هذا المخطط بأنواعه الورقية والرقمية. انظر إلى تعريف المخطط الهيكلي: هو الإطار الشبكي الذي يحدد تصميم الموقع أو الصفحة، وطريقة تنظيم المحتويات، وعناصر الواجهة، وأنظمة التصفح وكيفية التكامل بينها. عادة نبدأ بعمل مخطط على ورق باستخدام أشكال بسيطة بالأبيض والأسود قبل الانتقال للتصميم الرقمي والمرئي. انظر إلى مثال (1): في الجهة اليمنى تجد مخططاً هيكلياً مرسوماً يوضح أماكن تسجيل الدخول، بينما في الجهة اليسرى تجد التصميم الرقمي النهائي الذي نتج عن هذا المخطط.
يقوم الدرس على تنظيم واجهات المواقع والتطبيقات قبل تصميمها المرئي عبر رسم مخطط هيكلي أو إطار شبكي باستخدام الأشكال البسيطة بالأبيض والأسود على الورق ثم الانتقال إلى التصميم الرقمي عبر برامج مثل أدوبي إكس دي Adobe XD. يعتمد المخطط على كتل أساسية مثل الأزرار وكتل النصوص ومحتويات الصور. بعد ذلك يتم تنظيم العناصر في برنامج أدوبي إكس دي باستخدام الطبقات Layers حيث يمثل كل كائن طبقة مستقلة، ويمكن تجميع الطبقات أو قفلها أو إخفاؤها لتسهيل التحكم بها. مثال ذلك: حين ترسم واجهة محادثات، تبدأ بتخطيطها على الورق برسم دوائر للصور وخطوط للم الأسماء، ثم تنقلها إلى البرنامج وتضع صورة كل شخص في طبقة مستقلة لتعديلها أو قفلها دون التأثير على باقي العناصر.
الفكرة الأساسية
تخطيط واجهات المواقع والتطبيقات وترتيب محتوياتها باستخدام مخططات هيكلية أولية على الورق ثم تحويلها إلى تصاميم رقمية منظمة عبر نظام الطبقات في برامج التصميم.
الشرح
المخطط الهيكلي أو الإطار الشبكي Wireframe هو رسم تخطيطي يحدد تصميم الصفحة أو الموقع وطريقة تنظيم المحتويات وعناصر الواجهة وأنظمة التصفح. تمر عملية التصميم بمراحل تبدأ بالتصميم الورقي Paper design، ثم الانتقال للتصميم الرقمي Digital design، وانتهاء بالتصميم المرئي Visual design. تستخدم في رسم المخططات أدوات أساسية مثل الأزرار Buttons وكتل النصوص Text Blocks ومحتويات الصور Picture Containers والتظليل Shading والخطوط العريضة للشاشة screen outlines. في برنامج أدوبي إكس دي Adobe XD، تعد الطبقات Layers مكوناً أساسياً، فكل كائن تقوم بإنشائه هو طبقة، ويتم تكديس الطبقات فوق بعضها، وتحدد رؤيتها من لوحة الطبقات على الجانب الأيسر. يظهر بجانب كل طبقة رمز يوضح محتواها مثل مستطيل أو مثلث. توجد ثلاث خيارات رئيسية لكل طبقة عند اختيارها: أيقونة التصدير لتصدير الطبقة ونقلها، وأيقونة القفل لمنع نقلها أو تعديلها، وأيقونة العين لإخفاء الطبقة مع إبقائها موجودة في لوحة الطبقات. كما يمكن تجميع طبقتين أو أكثر عبر تحديدها واختيار Object ثم Group، أو فك التجميع عبر Ungroup.
مثال محلول خطوة بخطوة
لو أردت تصميم شاشة تطبيق تحتوي على عنوان وصورة وزر دخول: ١. الخطوة الأولى: ارسم المخطط على الورق Paper design باستخدام أشكال بسيطة بالأبيض والأسود؛ ارسم مستطيلاً كبيراً للأعلى للعنوان، ومربعاً بداخله علامة إكس للصورة، ومستطيلاً في الأسفل للزر. ٢. الخطوة الثانية: انتقل للبرنامج الرقمي Adobe XD، وارسم المستطيل الخاص بالعنوان فيظهر في لوحة الطبقات باسم Rectangle 1، ثم ارسم الصورة فتظهر طبقة جديدة باسم Ellipse 1 أو Polygon 1. ٣. الخطوة الثالثة: رتب هذه الطبقات؛ إذا أردت تثبيت الصورة حتى لا تحركها بالخطأ، انقر على أيقونة القفل بجانب طبقتها في لوحة الطبقات. وإذا أردت دمج عناصر العنوان معاً، حدد طبقاتها ثم اختر Object ثم Group لتصبح مجموعة واحدة متسقة.
أخطاء شائعة
- إهمال مرحلة التصميم الورقي والانتقال مباشرة للتصميم الرقمي الملون، مما يعيق التركيز على توزيع المحتوى.
- ترك الطبقات بدون تسميات واضحة أو عدم تجميع العناصر المرتبطة، مما يسبب فوضى في لوحة الطبقات وصعوبة تعديل التصميم.
- نسيان استخدام خاصية القفل للطبقات المكتملة، مما يؤدي إلى تحريكها بالخطأ أثناء العمل على عناصر أخرى.
سؤالان للتدريب مع الإجابة
السؤال الأول: ما الوظيفة التي تؤديها أيقونة العين في لوحة الطبقات ببرنامج أدوبي إكس دي Adobe XD؟ الإجابة: تعني إخفاء الطبقة لتصبح غير مرئية تماماً في لوحة الرسم، مع إبقاء وجودها في لوحة الطبقات. السؤال الثاني: كيف يمكنك تجميع طبقتين أو أكثر لتنظيم العمل في برنامج أدوبي إكس دي؟ الإجابة: يتم تحديد الطبقتين أو أكثر ثم اختيار Object ثم Group من القائمة، أو النقر بزر الفأرة الأيمن فوق الطبقات المحددة وتحديد مجموعة.