ایڈوب XD کے ساتھ ایک موبائل ایپ پروٹوٹائپ کیسے کریں

یہ سبق، آپ کو ایڈوب ایکس ڈی میں موبائل ایپ پروٹوٹائپ بنانے کے لئے کس طرح دکھا رہا ہے، اس کا استعمال کرتے ہوئے ایک ساتھ ڈال دیا گیا تھا ایڈوب XD سی سی (2017 بیٹا) 2016 میں نیا آغاز ایڈوب XD سی سی کچھ مواقع موجود ہیں، اس کا استعمال بھی آسان بناتا ہے.

• یہاں ایڈوب تخلیقی بادل پر 15٪ رعایت حاصل کریں

اگر آپ موبائل اطلاقات یا ویب سائٹس کے لئے صارف کے تجربات تخلیق کرتے ہیں تو، آپ کو مختلف کاموں کے لئے متعدد ٹولز استعمال کرنے کے لئے استعمال کیا جا سکتا ہے پروٹوٹائپ .

آپ تحقیق کے ساتھ شروع کرتے ہیں. اس کے بعد آپ قلم اور کاغذ پر خیالات کو خالی کرتے ہیں، اور بعد میں اپنے خیالات کو ڈیزائن کے آلے میں منتقل کرتے ہیں. بہترین بہاؤ کے ساتھ آنے کے لئے، آپ اپنے تمام اثاثوں کو برآمد کرتے ہیں اور انہیں ایک پروٹوٹائپ بنانے کے لئے ایک اور آلے میں لے آتے ہیں. وہاں سے، آپ اپنے پروٹوٹائپ کا اشتراک یا جانچ، تاثرات جمع کرتے ہیں، اور سائیکل کے وسط میں آپ کے ڈیزائن کو بہتر بنانے کے طور پر آلے سے آلے سے سوئچنگ کرتے ہیں.

کئی ڈیزائن کے اوزار ہر مسئلے کا ایک مختلف حصہ سے نمٹنے کے لئے. لیکن آپ کی زندگی کو ڈیزائنر کے طور پر آسان بنانے کے بجائے، ان تمام آلات کے درمیان سوئچنگ صرف آپ کی رفتار کم ہوتی ہے.

کیا اگر ایک واحد آلہ تھا جس کا مطلب یہ تھا کہ آپ کو مکمل طور پر منسلک کام کے بہاؤ سے لطف اندوز ہوسکتا ہے؟ جہاں آپ منٹ میں اپنے تجربات کو ڈیزائن اور پروٹوٹائپ کرسکتے ہیں، انہیں ویب پر رائے پر قبضہ کرنے کے لۓ اشتراک کریں، پھر آپ کی مدد کے بغیر آسانی سے ترمیم کریں؟ ایڈوب تجربے کے ڈیزائن سی سی - یا، جیسا کہ ہم اسے فون کرتے ہیں، ایڈوب XD - صرف ایسا کرنا تھا.

اس ٹیوٹوریل میں، ہم آپ کو ایڈوب ایکس ڈی کے اہم علاقوں کو ڈیزائن کرنے، پروٹوٹائپ اور ایک سادہ 'ٹیم ٹیم سے ملنے کی طرف سے اشتراک کریں گے.

ہم ایک مواد کے صفحے کو مصنوعات کی ٹیم کے ارکان کی لسٹنگ کریں گے، پھر صارفین کو انفرادی اندراجات پر کلک کرنے کے قابل ہو جائے گا جس میں زیادہ سے زیادہ گہرائی بائیو پیج میں لے جایا جائے گا. آپ سیکھیں گے کہ کس طرح اعلی مخلص ڈیزائن، پروٹوٹائپ بنانے اور رائے جمع کرنے کے لئے ان کا اشتراک کریں.

اوپر ویڈیو دیکھیں اور ایڈوب XD کے ساتھ پروٹوٹائپ کس طرح سیکھنے کے لئے ذیل میں تحریری اقدامات پر عمل کریں. نہ صرف ہم آپ کو یہ دکھائے جائیں گے کہ یہ کس طرح بنانے کے لئے، ہم آپ کو یہ بھی دکھائے گا کہ کس طرح اس کی جانچ پڑتال کریں، کارروائی میں اس کا ایک پیش نظارہ ویڈیو ریکارڈ کریں، اور اسے کس طرح اشتراک اور برآمد کرنے کے لئے.

نوٹ کریں کہ ایڈوب ایکس ڈی کے نئے ورژن میں کچھ عمل تھوڑا سا تبدیل ہوسکتا ہے.

01. ایڈوب ایکس ڈی انسٹال کریں اور ایک نیا ڈیزائن شروع کریں

سب سے پہلے، یقینی بنانے کے ایڈوب XD ہے آپ کے کمپیوٹر پر انسٹال . اسے شروع کریں، خوش آمدید اسکرین پر نظر ڈالیں اور آئی فون آرٹ بورڈ ٹیمپلیٹ کے ساتھ ایک نیا ڈیزائن شروع کریں.

02. ایک دوسرے آرٹ بورڈ بنائیں

آرٹ بورڈ کا آلہ استعمال کریں ( A. ) ایک دوسرے آرٹ بورڈ بنانے کے لئے، پھر 'آئی فون - ٹیم پیج' اور 'آئی فون - تفصیل پیج' کو ان کے عنوانات (ان پر ڈبل کلک کرکے) تبدیل کریں. آپ کے حق پر جائیداد انسپکٹر کا استعمال کرتے ہوئے سیاہ کرنے کے لئے آرٹ بورڈز کے پس منظر کے رنگ دونوں کو تبدیل کریں. منتخب کریں کے آلے کے ساتھ ( وی ) منتخب کردہ، آپ اپنے ڈیزائن میں کسی بھی وقت کسی بھی وقت اسپیس بار دبائیں کرسکتے ہیں.

03. ٹیوٹوریل اثاثوں کو ڈاؤن لوڈ کریں

میں نے اثاثوں کے ایک فولڈر کو ایک ساتھ ڈال دیا ہے کہ میں اس سبق بھر میں استعمال کروں گا. آپ ان کو ڈاؤن لوڈ کرسکتے ہیں یہاں . تلاش کرنے والے سے، 'آئی فون کی حیثیت-بار. ایس وی جی' آرٹ بورڈ کے سب سے اوپر 1 ( x: 8، y: 5. ). اس کے بعد اسے آرٹ بورڈ 2 میں کاپی اور پیسٹ کریں، لہذا دونوں آرٹ بورڈز کے پاس سب سے اوپر پر حیثیت بار ہے. مارا CMD + L. دونوں آرٹ بورڈز میں ان حیثیت کی سلاخوں کو بند کرنے کے لئے تاکہ ان کی خصوصیات میں ترمیم نہیں کی جا سکتی. ان کو غیر مقفل کرنے کے لئے، آپ شارٹ کٹ دوبارہ دوبارہ استعمال کرسکتے ہیں یا 'لاک' آئکن پر کلک کریں.

04. ایک آئتاکار اور مقرر کردہ طول و عرض کی طرف متوجہ کریں

چلو آرٹ بورڈ 1 (ٹیم کے صفحے) پر توجہ مرکوز کرتے ہیں. آئتاکار کا آلہ استعمال کرتے ہوئے ( آر )، آرٹ بورڈ 1 میں ایک گلابی آئتاکار (# FF2B22 کے ساتھ کوئی سرحد کے ساتھ # FF2BC2) ڈرائیو اور اس کے طول و عرض کو 375 x 230 کو دائیں جانب جائیداد انسپکٹر پینل کا استعمال کرتے ہوئے مقرر کیا.

05. اشیاء کو دوبارہ ترتیب دیں

سرحد کو تبدیل کرنے یا بھرنے اور بند کرنے کے لئے، دائیں جانب 'آنکھ' آئکن پر کلک کریں. مارا شفٹ + سینٹی میٹر + [ اسے واپس کرنے کے لئے تمام راستے بھیجنے کے لئے، یا جانا آبجیکٹ اور جی ٹی؛ بندوبست اور جی ٹی؛ واپس بھیجو . اگر آپ Hexadecimal اقدار کا استعمال کرتے ہوئے رنگ تبدیل کرنا چاہتے ہیں تو، رنگ آئکن پر کلک کریں، اور جب مقامی رنگ چنندہ پاپ اپ، سب سے اوپر پر دوسرا ٹیب منتخب کریں اور ڈراپ-نیچے 'آرجیبی سلائیڈرز' کو تبدیل کریں.

06. ہیڈر بنائیں

ٹیکسٹ آلے کا استعمال کرتے ہوئے ( ٹی )، آپ کے ٹیم کے صفحے کے لئے ایک ہیڈر بنانے کے لئے کلک کریں. میرا ہیلیویٹیکا بولڈ، 20، #FFFFF، x: 18، Y: 123. چلو ٹیم کے ارکان کی ہماری فہرست ایک ساتھ مل کر شروع کرتے ہیں. ایک سرمئی مربع ڈرا جہاں ٹیم کے رکن کی تصویر بیٹھ جائے گی (100 ایکس 100، x: 8، Y: 238، # D0D0D0 سرحد کے ساتھ نہیں).

07. ایک اور آئتاکار شامل کریں

اس کے حق میں، ہمیں ایک سفید آئتاکار (260 x 100، x: 108، y: 268، #ffffff کی ضرورت نہیں ہے جس پر ہم ٹیم کے رکن کے نام کو ایک ہیڈر اور ملازمت کے عنوان کے طور پر ایک ذیلی ہیڈ کے طور پر شامل کریں گے. اب کے لئے، جگہ دار متن کا استعمال کریں، اور اس کے طور پر آپ کی خواہش کے طور پر سٹائل.

08. ایک تیر آئکن شامل کریں

یہ باکس دکھانے کے لئے ایک ٹاپبل علاقے ہو گا، ہم ایک تیر آئکن شامل کریں گے. ڈریگ 'PATH.SVG' تلاش کرنے والے سے XD کینوس پر آرٹ بورڈ آف پوائنٹ پر. اس کے بعد ایکس: 330، Y: 279 کو دوبارہ تبدیل کریں.

09. اپنا سر شاٹ رکھیں

فائنڈر سے، سرمئی مربع پر ایک سر شاٹ کو گھسیٹنا.

10. فہرست بنائیں

اب ہم اپنی فہرست بنا سکتے ہیں. اس موقع پر، آپ عام طور پر سب سے اوپر شے کاپی اور پیسٹ کریں گے، کاپی شدہ ورژن کو آگے بڑھانے اور مارجن کو ایڈجسٹ کرنا. آپ نئی اشیاء کے لئے اسی طرح کریں گے، اور اگر آپ مارجن کو تبدیل کرنا چاہتے ہیں، تو آپ کو دستی طور پر یہ کرنا پڑے گا، ایک طرف سے.

ٹھیک ہے، ایڈوب XD کے ساتھ نہیں - آپ کو دوبارہ گرڈ کی خصوصیت کا استعمال کر سکتے ہیں. ان اشیاء کو منتخب کریں جو آپ کو دوبارہ کرنا چاہتے ہیں، آپ کے دائیں جانب پراپرٹی انسپکٹر پر 'دوبارہ گرڈ' کے بٹن پر کلک کریں ( CMD + R. ) اور عمودی طور پر اشیاء کو دوبارہ کرنے کے لئے سبز ہینڈل استعمال کریں. آپ ایک ٹیبلٹ ورژن کے لئے افقی طور پر انہیں بھی دوبارہ کر سکتے ہیں.

11. مارجن کو ایڈجسٹ کریں

اپنی اشیاء کے کنارے پر کلک کرکے اپنی بار بار گرڈ کے مارجن کو ایڈجسٹ کریں، کلک کریں اور گھسیٹنے. چلو مارجن کو 7 تک مقرر کریں. آپ کے آرٹ بورڈ کے نچلے حصے میں دوبارہ گرڈ ڈریگ کریں. اب ہمارے ساتھ کھیلنے کے لئے چار قطار ہیں.

12. متن کے شعبوں میں ترمیم کریں

جبکہ خصوصیات (رنگ، ​​ایکس اور Y پوزیشنیں، اور اسی طرح) عالمی ہیں، ہر چیز کا مواد منفرد ہوسکتا ہے. ہر فرد کے نام اور نوکری کے عنوان میں متن کے شعبوں میں ترمیم کریں. آپ گرڈ اور گروپ میں داخل کرنے کے لئے ڈبل کلک کر سکتے ہیں، یا CMD + کلک کریں کسی گروپ یا بار بار گرڈ کے اندر کسی بھی عنصر کو براہ راست منتخب کریں. اب ہمیں صرف ایک ہی وقت میں تمام سر شاٹس پر قبضہ کرنے کی ضرورت ہے اور انہیں گرڈ پر گھسیٹنا اور ہم اس اسکرین کے ساتھ ختم ہو گئے ہیں.

13. ایک سیاہ اثر بنائیں

چلو آرٹ بورڈ 2 (تفصیل کے صفحے) پر جائیں. پھر، ہم ایک جگہ ہولڈر آئتاکار (375 x 444، x: 0، Y: 0، #FFFFFFFFف کے ساتھ شروع کریں گے اور کسی بھی سرحدی کے ساتھ) اور اسے بھرنے کے لئے ایک سر شاٹ کو گھسیٹنا. ہم تصویر کی دھندلاپن کو 60 فی صد تک تبدیل کرنے اور اسے واپس بھیجنے کے لۓ ایک سیاہ اثر پیدا کریں گے ( شفٹ + سینٹی میٹر + [ ).

14. ایک اور تیر شامل کریں

پھر سر شاٹ شے کو بند کردیں ( CMD + L. ) اور صارف کو ٹیم کی فہرست میں واپس آسکتا ہے اس کی نشاندہی کرنے کے لئے ایک اور تیر ('بیک arrow.svg') شامل کریں. یہ X: 20، Y پر بیٹھنے کی ضرورت ہے. 40. یہ سب سے پہلے تصویر کو بند کرنے کے لئے ضروری ہے، کیونکہ دوسری صورت میں SVG سر شاٹ کی جگہ لے لے گی.

15. رابطے کی معلومات بار شامل کریں

ہم ہر صفحے پر گلابی بار شامل کرنا چاہتے ہیں، جو ٹیم کے رکن کے رابطے کی تفصیلات درج کریں گے (375 x 45، x: 0، Y: 400). ٹیکسٹ آلے کا استعمال کریں ( ٹی ) 'پلیس ہولڈر لنک' پڑھنے ایک متن عنصر بنانے کے لئے، یہ مرکز، سٹائل اسے، اور اسے X: 169، Y: 416 میں رکھیں.

16. متن عنصر کے مزید مثال بنائیں

اس متن عنصر کے دو مزید مثال بنانے کے لئے دوبارہ گرڈ کا آلہ استعمال کرتے ہیں. سب سے پہلے، متن کو ایک بار پھر گرڈ میں تبدیل کریں ( CMD + R. )، پھر آپ کے گرڈ افقی طور پر بڑھانے کے دوران اختیار کی کلید کو پکڑو. خوبصورت، نہیں ہے؟ براہ راست متن منتخب کریں ( CMD + کلک کریں ) اور مواد کو 'ای میل'، 'ٹویٹر' اور 'لنکڈین' پڑھنے کے لئے تبدیل کریں.

17. نام اور بائیو باکس بنائیں

ڈیزائن ختم کرنے کے لئے، ایک سفید باکس بنائیں (360 x 214، x: 8، Y: 445) جس میں ٹیم کے رکن کا نام اور بائیو شامل ہوگا. سب سے پہلے جگہ ہولڈر 'شخص کا نام' کا استعمال کرتے ہوئے ایک متن عنصر شامل کریں. متن عنصر کے لئے جو بائیج رکھتا ہے، ہم علاقائی متن کا استعمال کرنا چاہتے ہیں. ایسا کرنے کے لئے، متن کا آلہ منتخب کریں ( ٹی ) اور اپنی نقل کے لئے علاقے کی وضاحت کرنے کے لئے کلک کریں اور ڈریگ کریں. پھر، اب کچھ جگہ دار متن ٹائپ کریں، اور اس کی اسٹائل خصوصیات کو ایڈجسٹ کریں.

18. دیگر ٹیم کے ارکان کے لئے آرٹ بورڈز بنائیں

اب ہم دوسرے ٹیم کے ارکان کے لئے کچھ نئے آرٹ بورڈز بناتے ہیں. سب سے پہلے اہم تصویر انلاک ( CMD + L. )، پھر اس کا انتخاب کرنے کے لئے آرٹ بورڈ 2 کے عنوان پر کلک کریں، اور مارا CMD + C. اسے کاپی کرنے کے لئے. دور کرنا ( CMD + - یا ٹریک پیڈ کو چوٹ سے زوم میں استعمال کریں)، پھر مارا CMD + V. تین نئے آرٹ بورڈز کو پیسٹ کرنے کے لئے. ہر صفحے پر کچھ بائیو معلومات شامل کریں. نام اور سر شاٹ تصاویر کو اپ ڈیٹ کریں، اور کینوس پر آرٹ بورڈز کا بندوبست کریں. ڈاؤن لوڈ، اتارنا! ہمارے ڈیزائن اب تک ختم ہو چکا ہے.

19. بہاؤ قائم

اے پی پی کے بہاؤ کی وضاحت شروع کرنے کا وقت ہے. ایک پروٹوٹائپ ہزار ہزار ملاقاتوں کے قابل ہوسکتا ہے، لہذا ہم اپنے ڈیزائن کے ارادے سے بات چیت کرنے کے لئے ایک تخلیق کریں گے. صرف پروٹوٹائپ موڈ (اوپر بائیں) پر جائیں، اس آئٹم کو منتخب کریں جو صارف کی طرف سے ٹپ کیا جائے گا (ہولڈ سی ایم ڈی براہ راست منتخب کرنے کے لئے)، اور دائیں آرٹ بورڈ پر تار ڈریگ کریں. جب ماؤس جاری کیا جاتا ہے تو، ہم سیگ، آسان اور مدت مقرر کر سکتے ہیں. سادہ.

20. مربوط

اگر یہ ایرر برقرار رہے تو ہمارے ہیلپ ڈیسک سے رابطہ کریں. اس ویڈیو پر غلط استعمال کی اطلاع دیتے ہوئے ایرر آ گیا ہے. براہ مہربانی دوبارہ کوشش کریں. اگر یہ ایرر برقرار رہے تو ہمارے ہیلپ ڈیسک سے رابطہ کریں. غلط استعمال کی اطلاع دیتے ہوئے ایرر آ گیا ہے. ان میں سے ہر ایک کے لئے، ہم بائیں سلائڈ کرنے کے لئے سیگ مقرر کرنا چاہتے ہیں، اور آسانی سے آسان کرنے کے لئے آسان ہے. اگلا ہم آرٹ بورڈ 1 میں سے ہر ایک تفصیل کے صفحات پر پیچھے تیر تار بنا سکتے ہیں 1 - اس وقت اس وقت سلائڈ کرنے کے لئے سیکھنے کے لئے یاد رکھیں. بوم - ہمارے پروٹوٹائپ تیار ہے.

21. پروٹوٹائپ ٹیسٹ کریں

پروٹوٹائپ کی جانچ کرنے کے لئے، اوپر دائیں (پیش نظارہ) پر کھیل کے بٹن پر کلک کریں. آپ کو اپنے ڈیزائن یا آپ کی تاروں کو اپ ڈیٹ کرنے کے لئے پیش نظارہ ونڈو کو بند کرنے کی ضرورت نہیں ہے. صرف تبدیلیوں کو شروع کرنا شروع کریں، اور وہ خود کار طریقے سے پیش نظارہ ونڈو پر ظاہر کئے جائیں گے.

22. ایک ویڈیو بنائیں

پروٹوٹائپ کی جانچ کرتے وقت آپ کی بات چیت کی ایک ویڈیو ریکارڈ کرنا آسان ہے. پیش نظارہ ونڈو کے ساتھ، ریکارڈنگ شروع کرنے اور ریکارڈنگ کو روکنے کے لئے ریکارڈ بٹن پر کلک کریں. '.mov' فائل کو محفوظ کریں اور اپنے اسٹیک ہولڈرز کے ساتھ اشتراک کریں.

23. اپنے کام کا اشتراک کریں

ویب پر پروٹوٹائپ کا اشتراک کرنے کے لئے، سب سے اوپر دائیں پر آخری بٹن پر کلک کریں (آن لائن اشتراک کریں). لنک بٹن پر کلک کریں. تمام اثاثوں کو تخلیقی کلاؤڈ پر اپ لوڈ کیا جائے گا اور ایک لنک تخلیق کیا جائے گا. اگر تبدیلی ضروری ہو تو، آپ ڈیزائن موڈ میں واپس جا سکتے ہیں، تبدیلیاں اور دوبارہ اشتراک کریں. پورے بہاؤ صرف کام کرتا ہے.

24. فائلیں برآمد کریں

XD سے، آپ مختلف سائز کے ساتھ ساتھ انتہائی مرضی کے مطابق SVG فائلوں میں ویب، iOS اور لوڈ، اتارنا Android کے لئے PNGS برآمد کرسکتے ہیں.

25. نتائج کا لطف اٹھائیں

مبارک ہو! آپ نے ایڈوب تجربہ ڈیزائن سی سی (پیش نظارہ) کی بنیادی باتوں کو مہارت حاصل کی ہے. ویب اور سوشل میڈیا پر اپنے پروٹوٹائپ کا اشتراک کرنے کے لئے آزاد محسوس کریں - شامل کریں #adobexd. تو ہم آپ کے کام کو دیکھ سکتے ہیں.

یہ مضمون اصل میں شائع ہوا نیٹ میگزین مسئلہ 280. یہاں نیٹ ورک سبسکرائب کریں .

متعلقہ مضامین

• پروٹوٹائپ کے نقصانات سے بچنے کے لئے کس طرح
• موبائل اطلاقات میں حرکت پذیری کا استعمال کیسے کریں
• بہتر موبائل UX ڈیزائن کے لئے 10 تجاویز