الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية WireFrames | الفصل السادس | الدرس الثالث

الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية WireFrames هو عنوان الدرس الثالث من الفصل السادس التي تحمل اسم “تصميم واجهات الموقع الإلكتروني” من مقرر “التصميم الرقمي” الفصل الدراسي الثاني.

تعرفنا في الموضوع السابق على أولى الخطوات الإجرائية للتعامل مع الأدوات الأساسية لبرنامج Adobe XD، وهي التعامل مع الأدوات الأساسية في برنامج Adobe XD، سنتعرف في هذا الموضوع على باقي هذه الخطوات الإجرائية.

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

أهداف الموضوع

1. رسم المخطط الهيكلي لصفحة التصميم بأنواعه المختلفة الورقي والرقمي.
2. إنشاء الطبقات في برنامج أدوبي إكس دي Adobe XD.

هيا لنبدأ!

ثانيًا: التعامل مع المخطط الهيكلي WireFrame

من أهم المخططات أو الرسومات التي يستخدمها المصمم في واجهات الموقع هو ما يسمى بالإطار الشبكي أو مُخطَّط الصفحة أو المُخطَّط الهيكلي WireFrame، ويُحدِّد تصميم الصفحة أو طريقة تنظيم المحتويات فيها بما في ذلك عناصر الواجهة وأنظمة التصفُّح وكيفية التكامل بينها.

في بعض الأحيان يُمكِن عمل الإطار الشبكي أو مُخطَّط الصفحة على ورق، وغالبًا ما يتم إنشاء المُخطَّطات الهيكلية WireFrame باستخدام أشكالٍ بسيطة بالأبيض والأسود قبل الانتقال لتصميمه رقميًا ومن ثم تصميمه بشكلٍ مرئي.

يعرض الشكل التالي مثالان يوضّحان دور الإطار الشبكي أو المُخطَّط الهيكلي أو مُخطَّط الصفحة WireFrame:

مثال 1:

مثال 2:

مراحل المُخطَّط الهيكلي:

1. التصميم الورقي (Paper design).
2. التصميم الرقمي (Digital design).
3. التصميم المرئي (Visual design).

يُمكِنك التعرُّف على المزيد من المعلومات عن الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية WireFrames من خلال الرابط التالي:

ثالثًا: التعامل مع الطبقات Layers

تُعدُّ الطبقات مكوِّنًا أساسيًا لبرنامج Adobe XD فكل كائن تقوم بإنشائه باستخدام Adobe XD هو طبقة، ويتم تكديس فوق بعضها، ومن ثم تحديد رؤيتها في اللوحات الفنية عن طريق لوحة الطبقات على الجانب الأيسر من الشاشة (إذا كانت هذه اللوحة غير مرئية، يُمكِن إظهارها بالنقر فوق رمز لوحة الطبقة في شريط الأدوات الأيسر).

لاحظ أن

• عند إضافة أي كائن فإنه يُضاف مباشرةً إلى قائمة اللوحة الفنية كطبقة مستقلة، وبجانب الطبقة يوجد ركزٌ يوضح محتوى الطبقة، فعند رسم مستطيل يظهر رمز مستطيل صغير بجانب اسم الطبقة، وعند رسم مثلث يظهر رمز مثلث صغير، وهكذا..
• يُمكِن تغيير اسم الطبقة بالنقر المزدوج عند اسم الطبقة وكتابة الاسم الجديد، ثم النقر على زر الإدخال Enter.
• عند اختيار أحد الطبقات، فإنه يظهر تظليلٌ يدل على الطبقة المختارة إلى جانب 3 خيارات على اليمين.

الخيارات الثلاث التي تظهر عند اختيار أحد الطبقات، هي:

1. أيقونة “التصدير”: تعني أنه يُمكِنك تصدير الطبقة ونقلها إلى تصدير المكوِّنات.
2. أيقونة “القِفل”: تؤدي إلى قفل الطبقة، فلا يُمكِن نقلها أو تعديلها إلا بإلغاء تأمينها، كما يُمكِن قفل كائنٍ عن طريق تحديده مباشرةً في لوح الرسم، والنقر بزر الفأرة الأيمن فوقه وتحديد “قفل”.
3. أيقونة “العين”: تعني إخفاء الطبقة لكنها تظل موجودة في لوحة الطبقات، مع ذلك تظل غير مرئية تمامًا في لوحة الرسم، يُمكِن أيضًا إخفاء كائن عن طريق تحديده مباشرةً في لوح الرسم، والنقر بزر الفأرة الأيمن فوقه وتحديد “إخفاء”.

يُمكِنك التعرُّف على المزيد من المعلومات عن الطبقات في Adobe XD من خلال الرابط التالي:

الطبقات في Adobe XD

تجميع الطبقات

• يُمكِن تجميع طبقتين أو أكثر عن طريق تحديدهم واختيار Object> Group أو باستخدام الاختصارات، كما يُمكِنك النقر بزر الفأرة الأيمن فوق الطبقات المُحدَّدة وتحديد “مجموعة”.
• يُعدُّ تكوين مجموعات الطبقات طريقةً جيدةً لتنظيم الكائنات، على سبيل المثال: عندما يكون هناك كائنات تنتمي إلى عنصر تصميم معيَّن مثل زر أو قسم كامل من الصفحة، مثل الرأس أو التذييل.
• يُمكِن الحفاظ على لوحة الطبقات مرتبة من خلال إنشاء مجموعة، حيث يُمكِن بسهولة تحديد المجموعة بأكملها أو نقلها أو تحويلها كما لو كانت طبقةً واحدة.
• لفك تجميع مجموعة طبقات: قم بتحديد مجموعة الطبقات واختر Object> Ungroup أو استخدام الاختصارات، كما يُمكِنك النقر بزر الفأرة الأيمن فوق مجموعة الطبقات وتحديد “Ungroup”.
• يُمكِن أيضًا تداخل مجموعات الطبقات ضمن مجموعات طبقات أخرى.

إلى هنا يكون قد انتهى موضوع “الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية WireFrames“، لا تنسوا مراجعة أهداف الموضوع أعلى المقال، وانتظرونا في الموضوع القادم!

روابط هامة

مقررات الفصل الدراسي الثاني