Pixate میں پروٹوٹائپ ایک سچل کارروائی کے بٹن

Sep 13, 2025
کيسے

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

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

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

آپ کو لوڈ، اتارنا Android یا iOS کے لئے Pixate موبائل اپلی کیشن بھی کی ضرورت ہوگی. اس سے کوئی فرق نہیں پڑتا کہ آپ کیا آلہ پیش نظارہ پیش کرتے ہیں، کیونکہ اے پی پی آپ کے آلے کی اسکرین کو فٹ کرنے کے لئے خود کار طریقے سے پروٹوٹائپ کا پیمانہ کرے گا.

تمام فائلوں کو تلاش کریں جو آپ کو اس ٹیوٹوریل کے لئے ضرورت ہوگی یہاں .

01. شروع کرو

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

ایک بار جب آپ محفوظ کریں پر کلک کریں گے، آپ کو اس آلہ کو منتخب کرنے کے لئے کہا جائے گا کہ آپ کے لئے پروٹوٹائپ. یہ اس آلہ پر آپ کو پیش نظارہ کرنے کی ضرورت نہیں ہے - اس مثال کے لئے، ہم گٹھ جوڑ کو منتخب کر رہے ہیں. آپ اب ایک خالی کینوس کو دیکھنا چاہئے.

02. اپنی تصاویر درآمد کریں

Import all the necessary assets for your prototype

اپنے پروٹوٹائپ کے لئے تمام ضروری اثاثوں کو درآمد کریں

شروع کرنے کے لئے، ہم اس ٹیوٹوریل کے لئے تصاویر درآمد کرنا چاہتے ہیں. آپ نے تمام اثاثوں کو تلاش کیا ہے جو میں نے استعمال کیا ہے یہاں (یہ سب 3x پروٹوٹائپ کے لئے ہیں). اسکرین کے اوپری بائیں ہاتھ کونے میں، درمیانی ٹیب پر کلک کریں اور پھر '+' بٹن پر کلک کریں. فولڈر کو نیویگیشن جہاں آپ کے اثاثے ہیں، ان سب کو منتخب کریں اور کھولیں پر کلک کریں.

03. شامل کریں اور پوزیشن

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

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

04. اپنی فواب کی مثالیں شامل کریں

Add four instances of the FAB to your blank canvas

اپنے خالی کینوس پر فاب کے چار مثالیں شامل کریں

اب کینوس میں 'fab_option' کے چار مثال شامل کریں. سب سے پہلے ڈریگ کریں تاکہ نیچے کی سرحد 'fab_normal' کے سب سے اوپر تک، اور عمودی طور پر مرکز سے منسلک ہے.

باقی تین 'fab_option' تہوں کو سیدھ کریں تاکہ وہ عمودی طور پر مرکز سے منسلک ہیں اور ایک دوسرے کے اوپر بیٹھے ہیں. اس طرح یہ توسیع کی جاتی ہے جب FAB مینو ظاہر ہوتا ہے.

05. اختیار شبیہیں شامل کریں

تمام اختیار شبیہیں ('icon_school'، 'icon_flight'، 'icon_cake'، 'icon_cake' اور 'icon_basket' شامل کریں) کینوس کو اور ان میں سے ہر ایک کو 'fab_option' کے بٹن کے ساتھ سیدھا کریں. ایک بار پھر، کیونکہ سائے تصویر فائل میں شامل ہے، دائرے کا مرکز پرت کا مرکز نہیں ہے. آپ کو تین پوائنٹس کے بارے میں ہر شبیہیں میں سے ہر ایک کو ٹکرانے کی ضرورت ہوگی تاکہ وہ مرکز میں نظر آئیں.

06. پریس فاب شامل کریں

Place the 'FAB_pressed' icon on top of the unpressed version

غیر متوقع ورژن کے سب سے اوپر پر 'fab_pressed' آئکن رکھیں

آخر میں، کینوس میں 'fab_pressed' شامل کریں اور اسے 'fab_normal' کے سب سے اوپر پر رکھیں. 'fab_pressed' کو نچلے حصے میں 'fab_normal' کے دائرے میچ کے کناروں. یہ مرکز سے منسلک سیدھ سے تقریبا تین پوائنٹس ہیں.

07. گھوںسلا تہوں

ایک دوسرے کے اندر گھوںسلا تہوں والدین / بچے کے تعلقات پیدا کرتا ہے. یہ آپ کو تہوں کے ایک گروپ میں متحرک تصاویر کو لاگو کرنے کی اجازت دیتا ہے اور انہیں ایک یونٹ کے طور پر متحرک ہے. پرت کی فہرست میں ایک پرت کو گھسیٹنے اور گرنے کی طرف سے حاصل کیا جاتا ہے (اسکرین کے اوپری بائیں ہاتھ کونے میں).

08. گھوںسلا اختیاری آئکن تہوں

Nest the option icon layers into their respective button layers

گھوںسلا آپ کے متعلقہ بٹن تہوں میں اختیار آئکن تہوں

ان کے متعلقہ بٹن تہوں میں اختیاری آئکن تہوں. مثال کے طور پر، نیس 'icon_school' اس کے متعلقہ 'fab_option' میں 'icon_school' پرت کی پرت کی لسٹنگ پر لے کر 'icon_school' پرت کی لسٹنگ کی طرف سے.

09. کللا اور ریپیر

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

10. ایڈجسٹ خصوصیات

'fab_pressed' کو دوبارہ ترتیب دیں تو یہ 'icon_add' سے نیچے بیٹھتا ہے لیکن 'fab_normal' سے اوپر. اب 'icon_add' کو منتخب کریں اور پرت کی فہرست کے اوپر '+' پر کلک کریں. پرت پراپرٹیز پینل میں (اسکرین کے اوپری دائیں ہاتھ کونے میں) 'fab_pressed' (80 x 92) سے ملنے کے لئے چوڑائی اور اونچائی اقدار کو تبدیل کریں. اس بات کو یقینی بنائے گا کہ انٹرایکٹو علاقے پورے فاب کو شامل کرتا ہے.

11. ایک ٹیپ کی بات چیت شامل کریں

Set the colour swatch in the Properties panel to transparent, and add a Tap interaction

شفاف پینل میں رنگ سوئچ کو شفاف کرنے کے لئے مقرر کریں، اور ایک نل بات چیت میں شامل کریں

پراپرٹیز پینل میں، شفاف طور پر رنگ سوئچ سیٹ کریں اور پرت رکھیں تاکہ یہ 'fab_pressed' کے ساتھ مرکز سے منسلک ہے. اس کے بعد فہرست میں پرت پر ایک ٹیپ کی بات چیت ھیںچیں. پکڑو اسے سی ایم ڈی اور 'fab_option' تہوں کے ساتھ ساتھ 'fab_pressed' کے ساتھ ساتھ منتخب کریں، پھر دھندلاپن کو مقرر کریں 0. . آئکن تہوں کی دھندلاپن کو تبدیل نہ کرو! چونکہ آپ والدین تہوں کو ایڈجسٹ کر رہے ہیں، آئکن تہوں کی دھندلاپن ان سے وراثت ہے.

12. آئکن کو گھومیں

چلو ہماری فاب آئکن کو نل پر گھومتے ہیں. Pixate میں، متحرک تصاویر ایک اور پرت کی حالت کا حوالہ دے سکتے ہیں. اس سے آپ کو ایک بار پھر ایک بار کھیلنے کے لئے ایک حرکت پذیری مقرر کرنے کی اجازت دیتا ہے. ہم 'icon_add' کو گھومنے کے لئے چاہتے ہیں تاکہ ہم اس پر دیگر حرکت پذیری کے حالات کی بنیاد بنا سکیں. 'icon_add' پر گھومنے والی حرکت پذیری کو گھسیٹنا اور مندرجہ ذیل اختیارات مقرر کریں. کی بنیاد پر: پرت پرت اور نل ، اگر: icon_addpng.rotation == 0. ، گھومنے کے لئے: -225. ، وکر کو آسان بنانے: آسانی سے اور کیوبک ، دورانیہ: 0.3. .

13. ریورس شرط

Add a reverse condition to rotate the icon back to its original position

آئکن واپس آئکن کو اپنی اصل پوزیشن پر گھومنے کے لئے ایک ریورس حالت شامل کریں

حرکت پذیری کے نچلے حصے پر '+ حالت' کے لنک پر کلک کریں اور مندرجہ ذیل مقرر کریں: اور اگر: icon_addpng.rotation! = 0. ، گھومنے کے لئے: 0. ، وکر کو آسان بنانے: آسانی سے اور کیوبک ، دورانیہ: 0.3. .

14. دھندلا میں شامل کریں

Adjust the settings so the FAB fades in on tap

ترتیبات کو ایڈجسٹ کریں تاکہ نل پر فیب fades

ہم چاہتے ہیں کہ FAB اختیارات کو ٹیپ پر ختم کرنے کے لئے. لہذا ہم دیکھ سکتے ہیں کہ ہم کیا کر رہے ہیں، ہم سب سے پہلے اختیار کے بٹن پر دھندلا شامل کریں گے. ایک اختیار کے بٹن پر ایک دھندلا حرکت پذیری کو گھسیٹیں اور مندرجہ ذیل مقرر کریں.

کی بنیاد پر: پرت پرت اور نل ، اگر: icon_addpng.rotation == 0. ، دھندلا: 100. ، دورانیہ: 0. . پھر 'حالت' اور اور اگر: icon_addpng.rotation! = 0. ، دھندلا: 0. ، وکر کو آسان بنانے: آسانی سے اور کیوبک . یہ ہر اختیار کے بٹن کے لئے کرو.

15. کم چیزیں نیچے

مواد ڈیزائن کے رہنماؤں میں، اختیارات پیمانے پر جب فیب ٹاپ کیا جاتا ہے. چونکہ ہمارے اختیارات مکمل پیمانے پر شروع ہوتے ہیں، ہم پروٹوٹائپ بوجھ جب ہم ان کو پیمانے پر کرنا چاہتے ہیں.

ایک اختیار کے بٹن پر پیمانے پر حرکت پذیری کو گھسیٹیں اور مندرجہ ذیل اختیارات مقرر کریں. کی بنیاد پر: * سکرین * اور لوڈ ، اسکیل ایکس اور اسکیل Y: 0. ، اور دورانیہ: 0. لنگر گرڈ میں نیچے مڈل لنگر کا انتخاب کریں. یہ ہر اختیار کے بٹن کے لئے کرو.

16. حرکت پذیری کے اختیارات

These settings will apply our animation to the FAB

یہ ترتیبات FAB پر اپنی حرکت پذیری کو لاگو کرے گی

اب ہم اختیارات کو بڑھانے کے لئے اختیارات مقرر کرتے ہیں جب FAB ٹاپ کیا جاتا ہے. سب سے اوپر کے بٹن پر پیمانے پر حرکت پذیری کو گھسیٹنا اور اوپر اسکرین شاٹ میں دکھایا گیا اختیارات مقرر کریں.

17. ترازو میں تاخیر

باقی اختیارات کے بٹن پر اس حرکت پذیری کو شامل کرتے وقت، اگر تاخیر کی جائیداد سے 0.02 سے کم ہوجائیں. سب سے اوپر سے دوسرا اختیار ہونا چاہئے 0.04. ، تیسری کی تاخیر ہوگی 0.02. ، اور آخری 0.0. . اب اختیارات ایک دوسرے کے بعد ایک پیمائش کریں گے.

18. زیادہ حرکت پذیری کے اختیارات

Add these settings to emulate the FAB being pressed

FAB پر دباؤ ڈالنے کے لئے ان ترتیبات کو شامل کریں

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

'fab_normal' اور 'fab_pressed' پر ایک دھندلا حرکت پذیری کو گھسیٹنا اور اسکرین شاٹ میں دکھایا گیا ترتیبات کو لاگو کریں.

19. استعمال کرنے کے لئے تیار

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

20. اپنی مرضی کے مطابق!

اپنے اپنے شبیہیں درآمد کریں اور رنگوں کو تبدیل کریں جیسے آپ فٹ دیکھتے ہیں. یہاں اقدامات کے ساتھ آپ اضافی فاب کے اختیارات کو شامل کرسکتے ہیں اور اختیار کے بٹن پر بعد میں نلیاں اور حرکت پذیری بھی ہک سکتے ہیں.

Google سے زیادہ Pixate مواد ڈیزائن اجزاء کے لئے ایک آنکھ کو باہر رکھیں، اور ڈیزائن!

یہ مضمون اصل میں شائع ہوا نیٹ میگزین مسئلہ 281؛ اسے خریدیں .

کيسے - انتہائی مشہور مضامین

انٹرایکٹو پروٹوٹائپ کی تعمیر کے لئے فریمر ایکس کا استعمال کریں

کيسے Sep 13, 2025

(تصویری کریڈٹ: فریمر) ڈیزائنرز کے طور پر، ہمیشہ آپ کے منصوبے کے لئ..

آپ کے ڈیزائن پورٹ فولیو کو کیسے بہتر بنانا

کيسے Sep 13, 2025

آپ کے پورٹ فولیو کو بیگ میں اگلے منصوبے کو حاصل کرنے کی کلید رکھتا ہے لہذا یہ بہت توجہ کا مستحق ہے. یاد رکھن..

کس طرح ایک شخص کو ڈراؤ

کيسے Sep 13, 2025

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

ایکسپو کے ساتھ ملکیت کا تعین شروع کریں

کيسے Sep 13, 2025

مقامی ردعمل ایک پلیٹ فارم ہے جو آپ کو جاوا اسکرپٹ کا استعمال کرتے..

ایک لچکدار کارسیل اجزاء بنائیں

کيسے Sep 13, 2025

vue.js حال ہی میں چھتوں اور حدوں پر آ چکا ہے، اب تک چھٹے سب سے زیادہ فورک من�..

حقیقت پسندانہ سی جی کپڑا کیسے بنائیں

کيسے Sep 13, 2025

3D میں کپڑے اور کپڑے کے ساتھ کام کرتے وقت، یہ اچھی قرارداد اور ایک عظیم ن�..

گیلے ان گیلے پینٹنگ کی تکنیک کے ساتھ گرفت میں جائیں

کيسے Sep 13, 2025

گیلے گیلے A. پینٹنگ کی تکنیک یہ اکثر مایوسی کا باعث بن سکتا ہے. ی�..

مجسمہ اور پینٹ کی نقل مکانی کے نقشے کو کیسے جوڑنا

کيسے Sep 13, 2025

بعض اوقات یہ ان سب کو مجسم کرنے کے بجائے، مختلف بے گھر نقشے کو یکجا کرنے ..

اقسام