كيفية تسريع عملية التخطيط الشبكي باستخدام Photoshop و Adobe XD

قبل البدء في أي مشروع تصميم ، هناك كلمة واحدة من المؤكد أنها ستتبعك منذ البداية: التخطيط الشبكي. اليوم ، سوف نتعلم كيفية إنشاء إطار سلكي في Adobe XD وكيفية تنفيذ بعض الرسومات من Photoshop فقط باستخدام المكتبات.

لكن أولاً ، ما هو الإطار السلكي بالضبط؟

الإطار الشبكي هو تمثيل مرئي لهيكل مشروعك. إنه يحدد العظام والعناصر التي ستعمل في التخطيط الخاص بك وموضع المحتوى لنموذجك الأولي.

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

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

تتمثل الخطوة الأولى في إنشاء مشروع وتسميته "أقسام" ، ثم عمل قائمة "بالعناصر" التي تحتاجها لإكمال الخطوات المختلفة ، حتى إنشاء "البنية" النهائية.

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

في هذا البرنامج التعليمي ، سنتناول الخطوات التالية:

1. أنشئ إطارًا سلكيًا ، وحدد وأدخل أصول PS من خلال المكتبات ؛
2. قم بتحديث ملفات PS وشاهد النتائج في Adobe XD.

سننشئ مجموعة من الكائنات لاستخدامها في إطارنا الشبكي. سنضعها جانبًا في أصولنا حيث كان لدينا لوحة إضافية حيث يمكننا أخذ أدواتنا.

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

ستحتاج إلى عناصر Photoshop التي أعددتها لاستخدامها في الإطار الشبكي الخاص بنا.

إليك ما سننشئه:

1. أنشئ إطارًا سلكيًا وحدد وأدخل أصول PS من خلال المكتبات

أفضل مكان لبدء تطوير إطار سلكي من البداية هو رسمه يدويًا أولاً.

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

الخطوة الأولى : ها هي إطاراتي السلكية المرسومة يدويًا.

كما ترى ، لا يوجد الكثير من المعلومات عنها. النية الأولى هي فقط إظهار كيفية تكوين التخطيط والعناصر التي يجب أخذها في الاعتبار. نظيف وبسيط.

الخطوة الثانية : أعد إرسال الإطار السلكي بحجم أصغر مع بعض ملاحظات الهامش التي أستخدمها لشرح العناصر واستخدامها:

الخطوة الثالثة : لنبدأ في إنشاء إطار سلكي رقمي باستخدام Adobe XD.

افتح Adobe XD واختر "Web 1920" من النافذة المفتوحة.

احفظ مشروعك باسم "Wireframe" بتحديد ملف ← حفظ باسم .

بمجرد حفظ الملف الخاص بك ، قم بإنشاء لوحة فنية أخرى لـ iPhone ⁶ ⁄ ₇ Plus أيضًا.

انقر فوق الزر A (Artboard) على الجانب الأيسر ، واختر "iPhone 6/7/8" في الشريط الجانبي الأيمن.

وإليك لوحتي الرسم: واحدة لسطح المكتب والأخرى للجوال.

يمكننا الآن البدء في إنشاء كائنات الإطار السلكي. بعد الرسومات المرسومة يدويًا ، سنقوم الآن بإنشاء نفس الكائنات في XD.

صورة البطل
حدد أداة المستطيل ( R ) وارسم شكلاً حيث يجب أن تكون صورتك البطل. ثم امسك أداة الخط ( L ) وارسم خطين يصلان بالرؤوس. هذا النوع من الأشكال يمثل العنصر النائب لصورتنا.

جمّع الشكل والخطوط واتصل بالمجموعة "Hero":

الآن دعنا نتابع قسم "الأيقونات". أضع بعض النص قبل أيقوناتي ، وسأقوم بتمثيل ذلك بصريًا مع بعض الأسطر. أمسك أداة الخط ( L ) مرة أخرى وارسم خطًا أفقيًا واحدًا. انقر فوق أداة Repeat Grid ( ⌘ + R في نظام Mac أو CTRL + R في نظام التشغيل Windows) ، واسحب الخط حتى تحصل على ثلاثة منها.

نحتاج إلى ثلاثة رموز لأيقوناتنا ، لذا انقر فوق أداة Ellipse Tool / E ) وارسم دائرة. انقر مرة أخرى على أداة Repeat Grid ( ⌘ + R في نظام Mac أو CTRL + R في نظام التشغيل Windows) وأنشئ ثلاث دوائر. ثم حدد المسافة بين الدوائر واسحب لتوسيعها.

قسم الميزات
قم بإنشاء خلفية رمادية فاتحة ( #F8F8F8 ) باستخدام أداة المستطيل ( R ). كرر الخطوات من قسم صورة البطل السابق أعلاه لإنشاء عنصر نائب للصورة ، ثم كرر الخطوات من قسم الرموز (أعلاه أيضًا) لإنشاء سطر للنص. أخيرًا ، قم بإنشاء زر بسيط بمساعدة أداة Rectangle Tool ( R ).

هذه هي النتيجة النهائية:

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

سنقوم بذلك باستخدام Photoshop.

افتح ملف Photoshop الذي قدمته من خلال النقر على هذا الرابط.

أريد إدراج هذه الصورة كرمز باستخدام Libraries CC.

في Photoshop ، تأكد من رؤية لوحة Libraries بالانتقال إلى Window → Libraries . قم بإنشاء مكتبة جديدة من خلال النقر على الأيقونة الصغيرة أعلى اليمين (انظر الصورة):

أطلقت على مكتبتي اسم "Wireframe". لا تتردد في إعطاء مكتبتك الاسم الذي تريده.

الآن انقر واسحب الرمز الذي تريده في مكتبتك:

عد إلى XD ، وانتقل إلى File → Open CC Libraries وسترى الرمز الأخير الذي قمت بتحميله للتو من خلال Photoshop والمكتبة التي قمت بإنشائها.

اسحب رمز الاقتباس إلى الإطار السلكي الخاص بك في XD وضعه في المكان الذي تريده.

بالنسبة لأقسام "الأسعار والاشتراك والتذييل" ، سنقوم بتمثيلها باستخدام مربعات وخطوط إضافية مثل تلك التي تراها في الصورة أدناه.

ملاحظة : يمكنك العثور على رمز البريد الإلكتروني في ملف Photoshop الذي قدمته هنا .)

اتبع الخطوات الموضحة في قسم الميزة لإدراج الرمز في المكتبة من خلال Photoshop ، وافتحه في XD ، واسحبه إلى لوح الرسم السلكي.

هذه هي النتيجة:

آخر شيء يتعين علينا القيام به قبل المضي قدمًا هو ترتيب طبقاتنا. تأكد من تنشيط طبقاتك بالنقر فوق أيقونة الطبقة ( ⌘ + Y لنظام التشغيل Mac أو CTRL + Y لنظام التشغيل Windows).

قم بتجميع جميع عناصر القسم في مجلدات (قمت بتعيين نفس اسم القسم الذي يمثلونه). بهذه الطريقة ، سيتم ترتيب جميع العناصر الخاصة بك ولن تجد صعوبة في العثور عليها بسرعة (انظر الصورة).

لقد انتهينا الآن من الإطار السلكي الخاص بنا!

في الخطوة التالية ، سنبني تصميمنا باستخدام الإطار السلكي الخاص بنا واكتشاف كيفية تعديل عناصر المكتبات على الفور.

2. إضافة طبقة من الإخلاص للإطار السلكي الخاص بك

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

نحن على استعداد للمضي قدمًا وتحديث الإطار السلكي الخاص بنا لجعله "مباشرًا" بالصور والألوان ونسخة العنصر النائب.

انطلق واصنع التصميم الخاص بك. قم بتكرار الإطار السلكي الخاص بك عن طريق حفظه باسم آخر (مثل "Wireframe-Layout").

أولاً ، سنحتاج إلى صورة لقسم Hero (لقد تقدمت واستخدمت هذه الصورة بواسطة Priscilla Du Preez من Unsplash.)

افتح الصورة في Photoshop ، وقم بتقليل حجم الصورة بالنقر فوق الصورة ← حجم الصورة وتعيين العرض على 3000 بكسل:

احفظ صورتك ثم اسحبها إلى مكتباتك.

في XD ، اسحب الصورة من Libraries إلى Artboard. دعه يتناسب مع الشكل الذي أنشأناه للتو كعنصر نائب للصورة.

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

احفظه ، وسيتم حفظه تلقائيًا في جميع مكتباتك. عد إلى XD وسترى الصورة محدثة في لوح الرسم الخاص بك (لا داعي لسحبها مرة أخرى من المكتبة مرة أخرى).

ملاحظة : اعتمادًا على حجم الصورة ، قد يستغرق الأمر وقتًا أطول قليلاً حتى تقوم المكتبات بتحديث نفسها.

الآن دعنا ندخل شعارنا. افتح ملف Photoshop واسحب الزر "Learn!" الشعار في المكتبات. هذا هو الخط الذي استخدمته.

نظرًا لأن خلفيتنا مظلمة ، سنحتاج إلى شعار أبيض. عد إلى Photoshop وانقر نقرًا مزدوجًا على الشعار من المكتبات.

احصل على أداة الكتابة ، وقم بتمييز نص الشعار ، واجعله أبيضًا. احفظه ، وسيتم حفظه تلقائيًا في لوحة الرسم XD أيضًا.

أدخل نصًا وزرًا لإكمال قسم Hero.

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

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

الآن سننتقل إلى قسم الميزات . كما في السابق ، سنقوم بسحب صورة إلى العنصر النائب للصورة (لقد استخدمت هذه الصورة بواسطة Sonnie Hiles الموجودة على Unsplash). أضف بعض النص وزرًا كما أوضحت لك في الخطوات السابقة أعلاه.

افتح ملف Photoshop الذي قدمته وأضف رمز الاختيار إلى مكتباتك. افتح Libraries في XD وضع الرمز بالقرب من النص. استخدم شبكة التكرار لعمل ثلاث نسخ منها:

لنقم الآن بتغيير لون رمز الشيك. ارجع إلى Photoshop ، وافتحه من المكتبات واعطه Color Overlay كما هو موضح أدناه:

احفظه ، وشاهد أيقوناتك في XD محدثة مباشرة.

الآن دعونا ننتهي من تخطيطنا.

بالنسبة لقسم الشهادات ، أضف نصًا وصورة للشهادة (أخذت لي من وجوه واجهة المستخدم).

أخيرًا ، سنضيف معلومات لقسم السعر وقسم الاشتراك والتذييل. يمكنك العثور على جداول الأسعار في ملف Photoshop الذي قدمته. اسحبها إلى مكتباتك في Photoshop ، ثم افتح Libraries في XD واسحبها إلى لوح الرسم الخاص بك. لا تتردد في تعديلها كما تريد.

و ... انتهينا!

خاتمة

في هذا البرنامج التعليمي ، تعلمنا كيفية العمل مع Photoshop و Adobe XD لإنشاء إطار سلكي ، ثم كيفية إضافة الدقة إليه بسرعة عن طريق تعديل عناصر المكتبات. كمرجع لك ، لقد قمت بإنشاء إطار سلكي للجوال يمكنك استخدامه للتدرب على هذا البرنامج التعليمي ومتابعته. اتبع الخطوات كما فعلنا مع إصدار سطح المكتب لإضافة نصوص وصور.

دعني أرى نتيجتك في التعليقات!

هذه المقالة جزء من سلسلة تصميم UX التي ترعاها Adobe. تم تصميم أداة Adobe XD لعملية تصميم UX سريعة وسلسة ، حيث تتيح لك الانتقال من الفكرة إلى النموذج الأولي بشكل أسرع. التصميم والنموذج الأولي والمشاركة - كل ذلك في تطبيق واحد. يمكنك الاطلاع على المزيد من المشاريع الملهمة التي تم إنشاؤها باستخدام Adobe XD على Behance ، وكذلك الاشتراك في النشرة الإخبارية لتصميم تجربة Adobe للبقاء محدثًا ومطلعًا على أحدث الاتجاهات والرؤى لتصميم UX / UI.