تعلم أساسيات Adobe XD في ساعة واحدة

تعلم أساسيات Adobe XD في ساعة واحدة

فهم تجربة التصميم لتنفيذ مشاريع التصميم الخاصة بك

 

 

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

 

ستساعدك هذه المقالة على فهم إمكانات Adobe XD وكيفية البدء في مشروع التصميم الخاص بك لنظام Android أو iOS. لن يستغرق الأمر أكثر من ساعة! Adobe XD متاح لكل من Windows و Mac iOS.

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

 

1. البدء مع ADOBE XD

 

يمكنك تنزيل الإصدار المجاني من XD من موقع Adobe على الويب. بمجرد فتح البرنامج ، ستجد قوالب تصميم مختلفة لمشاريعك الجديدة.

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

 

 

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

 

للتحريك: استخدم لوحة التعقب ، أو اضغط على مفتاح المسافة + الماوس ، أو اضغط على عجلة الماوس.

 

للتكبير: لوحة تعقب بإصبعين ، أو (Ctrl (Cmd + عجلة الماوس ، أو Ctrl Cmd)) + (+/-). يمكنك أيضًا تكبير عنصر محدد بالضغط على Ctrl (Cmd) +3.

 

للتحديد: استخدم زر الماوس الأيسر. لتحديد مجموعات داخل منطقة مستطيلة ، انقر واسحب.

 

استخدم خيارات التنقل البسيطة هذه لتكبير شاشات المشروع ، وسترى شيئًا مثل هذا:

 

تم إنشاء البرنامج التعليمي بحيث يمكنك إنهاء تطبيق Campvives ، من Talin Wadsworth. من الآن ، يمكننا اتباع خطوات البرنامج التعليمي. سأشرحها وأضيف بعض التدريبات الجديدة الأخرى لتغطية الأساسيات.

 معاينة التصميم الحالي

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

 

ستكون هذه المعاينة هي شاشة النموذج الأولي لدينا مع Adobe XD. يمكننا اختبار التطبيق عن طريق الضغط على الأزرار والتحقق من الشاشات والتحولات المختلفة.

 

نصيحة: سيتم تحديث شاشة المعاينة تلقائيًا عندما تقوم بتغيير أي شيء في مساحة العمل الخاصة بك. يمكنك فتحه على شاشة ثانية لمعاينة تغييراتك في الوقت الفعلي!

 

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

 

نصيحة: يمكنك التقاط لقطات شاشة أو تسجيل الشاشة (Cmd + Shift + 5 لنظام التشغيل Mac أو Windows + G لـ W10) لمشاركة المعاينة وتلقي التعليقات. ومع ذلك ، سوف نتعلم طريقة أفضل لمشاركة المعاينة في الفصل الأخير.

 

2. إنشاء شاشة Splash

 

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

 

حدد أداة Artboard من لوحة الأدوات (الجانب الأيسر أو الاختصار "A") ، وسترى أن لوحة الخيارات ستتغير لتظهر لك قوالب لوحات فنية مختلفة تتوافق مع الأجهزة الأكثر استخدامًا.

 

في هذه الحالة ، يتم إنشاء المشروع للوحات رسم iPhone 6/7/8. فقط انقر داخل المربع لإضافة الشاشة البيضاء الجديدة. بالنسبة للمشاريع المختلفة ، يمكنك اختيار أي قالب آخر لإنشاء شاشة بالأبعاد الدقيقة لجهازك المستهدف.

 

  

يمكنك تغيير الاسم في الجزء العلوي الأيسر من الشاشة بالنقر المزدوج عليه. أعد تسميته بـ "سبلاش".

 

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

 

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

 

باستخدام التدرجات. بالنقر فوق علامة التبويب "Solid Color" ، ستفتح قائمة التدرجات اللونية. يمكنك استخدامها لإنشاء خلفية متدرجة.

 

القطارة. بالطبع ، يمكنك استخدام أداة القطارة لتحديد أي لون متاح في شاشتك.

  

 

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

 

 

 

تغيير الحجم وتحديد المواقع

 

ربما تكون قد لاحظت أيضًا خيار الاستجابة السريعة (Responsive Resize option) ، أعلى خيارات المظهر مباشرةً. تأتي هذه الوظائف مع تحديث سبتمبر 2018 ، وهي تسمح لمجموعات الكائنات بالحفاظ على موضعها وقابليتها للتوسع عند تغيير الحجم.

 

للحصول على شرح أكثر تفصيلاً حول كيفية استخدام Responsive Resize ، أوصيك بقضاء 4 دقائق في مشاهدة الفيديو الرسمي من Adobe CC على Youtube.

 

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

  

3. اختر صورة للملف الشخصي

 

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

 

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

  

 

يمكننا استبدال المستطيل السفلي بآخر جديد. حدد المستطيل واضغط على Del ، أو انقر بزر الماوس الأيمن + حذف. لإنشاء مستطيل جديد ، اختر أداة Rectangle من لوحة الأدوات (الجانب الأيسر أو الاختصار "R").

 

حدد نقطة البداية للشكل ، واسحب الماوس إلى الزاوية المقابلة. يمكنك تحديد أي خيار Fill أو Border أو Shadow للمستطيل الجديد. على سبيل المثال ، يمكننا سحب صورة أخرى كما فعلنا مع دائرة الملف الشخصي.

 

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

 

أكثر من أداة Rectangle ، يمكنك أيضًا تجربة أدوات Ellipse (الاختصار "E") والخط (الاختصار "L") والقلم (الاختصار "P") لإنشاء نماذج مجانية.

 

4. قم بتكرار قائمة نشر المدونة

 

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

 

ما عليك سوى تحديد الشبكة بالكامل ، والضغط على زر Repeat Grid من القائمة اليمنى. سيتم تمييز الشبكة بخطوط خضراء منقطة. يمكنك تحديد وسحب أي من أزرار الحدود لتوسيع الشبكة ، والتي ستكرر محتوياتها.

  

باستخدام نصيحة Pro من البرنامج التعليمي ، يمكنك تحديث جميع الصور بسرعة. إذا كنت تريد تعديل شبكة العناصر بشكل منفصل ، يمكنك الضغط على زر Ungroup Grid.

 

 

 

 

5. السماح بالتمرير

 

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

 

ما عليك سوى تحديد لوح الرسم وتغيير خيار التمرير إلى عمودي. بعد ذلك ، قم بتوسيع الجزء السفلي من لوح الرسم إلى النقطة التي تريدها. منجز! يمكنك التحقق من التمرير في نافذة المعاينة.

  

 

تحديد الأشياء

 

قد ترغب في إصلاح العناصر  أثناء التمرير ، على سبيل المثال الشريط العلوي أو السفلي. ما عليك سوى تحديد العناصر وتحديد الخيار "إصلاح الوضع عند التمرير" Fix position when scrolling''”.

 

نصيحة : تأكد من أن العناصر الثابتة موجودة في الطبقات العليا من التصميم الخاص بك ، بحيث لا يتم تغطيتها بواسطة كائنات التمرير. للتحقق من ذلك ، انتقل إلى قائمة الطبقات في الزاوية السفلية اليسرى من مساحة العمل الخاصة بك (Ctrl [Cmd] + Y).

 

6. اجعله تفاعليًا

 

حان الوقت للتعرف على وضع النماذج الأولية. ابدأ بالنقر فوق علامة التبويب النموذج الأولي في الزاوية العلوية اليسرى من مساحة العمل الخاصة بك.

 

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

  

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

 

بمجرد إنشاء اتصال ، يمكنك تحديد العديد من المعايير والمقاييس :

 

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

 

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

 

المكان المقصود. إنها الشاشة التالية ، نهاية السهم الأزرق.

 

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

 

إنشاء القائمة

 

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

 

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

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

  

 

7. شارك النموذج الأولي الخاص بك للحصول على تعليقات

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

يعد التوثيق الرسمي لـ Adobe رائعًا بالفعل في هذه الحالة .

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

 

8. فصل إضافي: تصدير صورك

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

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

  

 

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

 

 

 

الخلاصة ||

 

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

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