الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية WirFrames - التصميم الرقمي - ثالث ثانوي

رابط الدرس الـ www.ien.edu.sa الخطوات الإجرائية الأساسية لرسم المخططات الهيكلية WirFrames 3-6 المفاهيم الرئيسة المخطط الهيكلي WirFrame أهداف الموضوع يتوقع من الطلبة بعد دراسة هذا الموضوع أن يكونوا قادرين على: 1. رسم المخطط الهيكلي لصفحة التصميم بأنواعه المختلفة الورقي والرقمي 2. إنشاء الطبقات في برنامج أدوبي إكس دي Adobe XD. الهدف الأول أن يكون الطلبة قادرين على رسم المخطط الهيكلي لصفحة التصميم بأنواعه المختلفة الورقي والرقمي. ثانيًا: التعامل مع المخطط الهيكلي WireFrame. من أهم المخططات أو الرسومات التي يستخدمها المصمم في واجهات الموقع هو ما يسمى بالإطار الشبكي أو مخطط الصفحة أو المخطط الهيكلي WireFrame ، ويحدد تصميم الصفحة أو طريقة تنظيم المحتويات فيها بما في ذلك عناصر الواجهة وأنظمة التصفح وكيفية التكامل بينها. وفي بعض الأحيان يمكن عمل الإطار الشبكي أو مخطط الصفحة على ورق وغالبًا ما يتم إنشاء المخططات الهيكلية WireFrame باستخدام أشكال بسيطة بالأبيض والأسود قبل الانتقال لتصميمه رقميًا ومن ثم تصميمه بشكل مرئي، وفي الشكل التالي مثالان يوضّحان دور الإطار الشبكي أو المخطط الهيكلي أو مخطط الصفحة WireFrame: وزارة التعليم 2024-1446 tion Email Sign In Email Sign in Password Forgot Password? Password Forgot Password? Login Login مثال (1): 212

213 وزارة التعليم Ministry of Education 2024-1446 Chats 3 Chats Jane Gilbert 12:14 Hey! I'm in the city today. Name Bill Jonson 11:10 Name Send me a letter, plz Jane Philips 10:45 Hey Name Joan Hey 10:35 0 Name Marry Smith See U tomorrow Joan Hey 08:35 Name 10:35 0 Name التصميم الورقي Paper design التصميم الرقمي Digital design التصميم المرئي Visual design 3 00:00 00:00 00:00 00:00 00:00 00:00 مثال (2) مراحل المخطط الهيكلي:

< -> -> -> Image Title ↑ XXX XX ↑ -> Line Work Bird T شكل رقم (18-6) مراحل المخطط الهيكلي بدءًا من التصميم الورقي ثم الرقمي ثم المرئي وزارة التعليم 2024-1446 ation ↑ إثراء من المواقع المتخصصة في رسم المخططات وتمكن من نسخ القوالب التخطيطية بكل سهولة: 214

Enter Tile Here Esteribe Here COPY TEMPLATE COPY TEMPLATE COPY TEMPLATE النشاط التطبيقي باستخدام الدلالات الآتية نفذ بشكل فردي أو مع مجموعتك الخطوات الإجرائية الآتية لرسم مخطط هيكلي WireFrame لصفحة موقع أو تطبيق من اختيارك بتصميمها أولا ورقيًا ثم رقميًا ورقيًا ثم رقميًا في برنامج Adobe XD أو برامج أخرى. الأزرار Buttons oooo 215 وزارة التعليم Ministry of Education 2024-1446 × < كتل النص Text Blocks محتويات الصور Picture Containerss: التظليل Shading الخطوط العريضة للشاشة screen outline:

الهدف الثاني أن يكون الطلبة قادرين على إنشاء الطبقات في برنامج Adobe XD. ثالثا: التعامل مع الطبقات Layers تعد الطبقات مكونًا أساسيًا لبرنامج Adobe XD فكل كائن تقوم بإنشائه باستخدام Adobe XD هو طبقة، ويتم تكديس الطبقات فوق بعضها ، ومن ثم تحديد رؤيتها في اللوحات الفنية من خلال لوحة الطبقات على الجانب الأيسر من الشاشة (إذا كانت هذه اللوحة غير مرئية، يمكن إظهارها بالنقر فوق رمز لوحة الطبقة في شريط الأدوات الأيسر) (لاستخدام الاختصارات انظر الملف نهاية الفصل). T All items Design Prototype Share <ARTBOARD Line 1 Polygon 1 Ellipse 1 Rectangle 1 لإظهار الطبقات Artboard Untitled-July 17, 2.41.50 PM عند إضافة أي كائن فإنه يضاف مباشرةً إلى قائمة اللوحة الفنية كطبقة مستقلة، وبجانب الطبقة يوجد رمز يوضح محتوى الطبقة، فعند رسم مستطيل يظهر رمز مستطيل صغير بجانب اسم الطبقة وعند رسم مثلث يظهر رمز مثلث صغير وهكذا.. يمكن تغيير اسم الطبقة بالنقر المزدوج عند اسم الطبقة وكتابة الاسم الجديد ثم النقر على زر الإدخال Enter عند اختيار أحد الطبقات فإنه يظهر تظليل يدل على الطبقة المختارة إلى جانب ثلاثة خيارات على اليمين. وزارة التعليم Ministry of Education 2024-1446 216

1 أيقونة التصدير": وتعني أنه يمكنك تصدير الطبقة ونقلها إلى تصدير المكونات. 2 أيقونة "القفل": تؤدي إلى قفل الطبقة فلا يمكن نقلها أو تعديلها إلا 3 بإلغاء تأمينها، كما يمكن قفل كائن عن طريق تحديده مباشرة في لوح الرسم والنقر بزر الفأرة الأيمن فوقه وتحديد "قفل". أيقونة "العين": تعني إخفاء الطبقة لكنها موجودة في لوحة الطبقات ولكنها غير مرئية تماما في لوح الرسم، يمكن أيضًا إخفاء كائن عن طريق تحديده مباشرة في لوح الرسم، والنقر بزر الفأرة الأيمن فوقه وتحديد "إخفاء". تجميع الطبقات: 0 3 a Ey < WEB 1920-1 Line 1 Polygon 1 Ellipse 1 1 2 3 Rectangle 1 . يمكن تجميع طبقتين أو أكثر عن طريق تحديدهم واختيار Objects Group أو باستخدام الاختصارات، أو يمكنك النقر بزر الفأرة الأيمن فوق الطبقات المحددة وتحديد "مجموعة". يُعد تكوين مجموعات الطبقات طريقة جيدة لتنظيم الكائنات، على سبيل المثال عندما يكون هناك كائنات تنتمي إلى عنصر تصميم معين مثل زر أو قسم كامل من الصفحة مثل الرأس أو التذييل. من خلال إنشاء مجموعة، يمكن الحفاظ على لوحة الطبقات ،مرتبة، ويمكن بسهولة تحديد المجموعة بأكملها أو نقلها أو تحويلها كما لو كانت طبقة واحدة. لفك تجميع مجموعة طبقات: تحديد مجموعة الطبقات واختيار Object Ungroup أو استخدام الاختصارات، أو بالنقر بزر الفأرة الأيمن فوق مجموعة الطبقات وتحديد "Ungroup". يمكن أيضًا تداخل مجموعات الطبقات ضمن مجموعات طبقات أخرى. 217 وزارة التعليم Ministry of Education 2024-1446

218 النشاط التطبيقي وفق النشاط السابق لرسم المخطط الهيكلي الذي نفذته ورقيًا، انقل التصميم الورقي إلى التصميم الرقمي في برنامج Adobe D مع توظيف طرق التعامل مع الأدوات الأساسية في الرسم و مع الطبقات واللوحات. نشاط إثرائي شكل رقم :(1-6) رسم توضيحي للتصميم الورقي وتحويله إلى الرقمي تصفح أحد المواقع الآتية وبعد الاطلاع على محتوياتها والاستفادة من المعلومات حول مجالاتها، قيّم تجربة استخدامك للموقع: فوائد حماية الملكية الفكرية 2030 - الهيئة السعودية للملكية الفكرية (saip.gov.sa) وبالاطلاع على محتوياته والاستفادة من المعلومات حول تسجيل وحماية الملكية الفكرية الرقمية والبرامج التدريبية المقدمة فيه. - هيئة الأمن السيبراني وبالاطلاع على محتوياته والاستفادة من المعلومات حول الأمن السيبراني وأمن المعلومات. الهيئة السعودية للبيانات والذكاء الاصطناعي وبالاطلاع على محتوياته والاستفادة من المعلومات حول البيانات والذكاء الاصطناعي. قيم تجربة استخدامك للموقع. وزارة التعليم 2024-1446 ation