النماذج الأولية السريعة لتجربة المستخدم باستخدام اختصارات Adobe XD (ورقة الغش في ملف PDF)

(هذه مقالة برعاية.) أعلنت Adobe عن Project Comet في أكتوبر من العام الماضي لتقديم حل شامل سريع وفعال. قبل بضعة أشهر ، تم الكشف عن السر وراء الاسم الرمزي ونشره للجمهور في إصدار معاينة: Adobe Experience Design CC (Adobe XD). صُمم XD لتصميم UX سريعًا وسلسًا ، حيث يمنحك كل شيء في حزمة واحدة أنيقة: فهو يتيح لك رسم الأفكار وإنشاء نماذج أولية تفاعلية واختبارها ومشاركتها .

لمنحك السبق عند العمل مع XD ، قمنا بتجميع 15 نصيحة احترافية ، بما في ذلك الميزات التي قد لا تكون واضحة للوهلة الأولى ولكنها ستجعل سير عمل النماذج الأولية أكثر سلاسة. لقد جمعنا جميع الاختصارات في ملف PDF واحد (97 كيلوبايت) يمكنك تنزيله هنا.

لا يزال Adobe XD حاليًا في مرحلة تجريبية عامة ويمكن تنزيله مجانًا ، حتى لو لم تكن مشتركًا في Creative Cloud. أيضا ، يتم إضافة ميزات جديدة على أساس منتظم. يرجى ملاحظة أن إصدار Windows قيد التشغيل ومستحق لاحقًا في عام 2016 ، ولكن Adobe XD متاح حاليًا لنظام التشغيل Mac OS X فقط.

كرر الشبكة

تنمو شبكة تكرار

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

أدخل واخرج من تحرير السياق

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

ضبط المساحة المتروكة

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

أدخل البيانات

يعد التصميم باستخدام البيانات الحقيقية ميزة رائعة أخرى لـ XD. بدلاً من استخدام نفس نص العنصر النائب لكل كائن ، يمكنك سحب أي ملف TXT مفصول بإرجاع من Finder إلى أي كائن نصي لملء الشبكة بمحتوى فريد.

رسم

شبكات Artboard

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

رسم وتغيير الحجم من المركز

تريد الرسم أو تغيير الحجم من المركز؟ اضغط مع الاستمرار على مفتاح Option .

منحنيات بيزير

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

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

افتح مسارًا

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

قم بإيقاف تشغيل Smart Guides

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

تغيير التعتيم

لتغيير عتامة كائن ما بسرعة ، حدد الكائن وابدأ في كتابة الأرقام. 9 = 90٪ ، 8 = 80٪ ، إلخ ؛ و 0 يعيدك إلى 100٪.

الصور

قناع الصورة

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

النماذج

Unwire كائن

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

تقاسم النماذج

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

متنوع

إعادة استخدام أنماط النص

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

تحرير مجموعة

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

مزيد من الموارد

• قائمة بجميع اختصارات لوحة المفاتيح التي يمكنك استخدامها في Adobe Experience Design (رابط) ،
• توفر مقاطع الفيديو الخاصة بنصائح XD الاحترافية من Adobe إرشادات وسير عمل حول استخدام ميزات XD. يتيح لك ملف العينة تجربتها بنفسك ،
• موقع تعليمات Adobe مع الأسئلة الشائعة والنصائح والحيل والبرامج التعليمية القصيرة (رابط) ،
• مقالات حول أفضل ممارسات تصميم UX و UI على مدونة Adobe XD ،
• مشاريع ملهمة تم إنشاؤها باستخدام Adobe XD على Behance ،
• يتم إضافة ميزات جديدة إلى XD على أساس منتظم. لذا راقب إعلانات الميزات الجديدة حتى لا تفوت أي شيء ،
• يتطلع فريق Adobe XD إلى سماع ملاحظاتك حول Adobe XD UserVoice.

مزيد من القراءة على SmashingMag:

• كيفية تصميم حالات الخطأ لتطبيقات الجوال
• كيفية إنشاء أيقونات باستخدام Adobe XD
• تفاعلات الرسوم المتحركة الدقيقة في تطبيقات الجوال
• استكشاف شبكة التكرار في Adobe XD [] (https://www.smashingmagazine.com/2016/11/exploring-repeat-grid-in-adobe-xd/)

بفضل Elaine Chao (elainecchao) للمساعدة في هذه المقالة.