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

Sep 15, 2025
کيسے

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

  • 10 اوپر پروٹوٹائپ اوزار

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

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

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

ان اقدامات پر عمل کریں کہ آپ کو ایک پروٹوٹائپ کی تعمیر کے لئے اوریگامی سٹوڈیو استعمال کیا جا سکتا ہے.

01. ایک نیا پروٹوٹائپ

Start by creating a new iPhone 8 prototype

ایک نیا آئی فون 8 پروٹوٹائپ بنانے کی طرف سے شروع کریں

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

02. تہوں کو شامل کرنا

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

03. ایک بات چیت کی تشکیل

For interactions you'll need to create a patch

بات چیت کے لئے آپ کو ایک پیچ پیدا کرنے کی ضرورت ہوگی

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

04. تہوں میں منسلک بات چیت

Change the patch properties so that it only responds when you click in the right place

پیچ کی خصوصیات کو تبدیل کریں تاکہ یہ صرف جواب دیں جب آپ صحیح جگہ پر کلک کریں

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

05. حرکت پذیری

A pop animation will give users a bit of visual feedback

ایک پاپ حرکت پذیری صارفین کو تھوڑا بصری رائے دے گا

اب ہم کچھ بھی کرنا چاہتے ہیں جب ہماری بات چیت ٹرگر ہے. ایک اور پیچ بنائیں، اس وقت ایک 'پاپ حرکت پذیری'. یہ ایک بہار اثر پیدا کرنے کے لئے استعمال کیا جاتا ہے. جائیدادوں کو چھوڑ دو کیونکہ وہ اب کے لئے ہیں، لیکن ہم اس بات چیت کے نل کی پیداوار کے درمیان ایک لنک بنائے جائیں گے جو ہم نے پہلے اور ہماری نئی پاپ حرکت پذیری کی تعداد ان پٹ پیدا کی ہے. ہم یہ ہر ایک کے آگے چھوٹے حلقوں کے درمیان کلک اور گھسیٹ کر کرتے ہیں. اگر آپ اب دل پر کلک کریں تو، آپ اب دیکھیں گے کہ پاپ حرکت پذیری کے 'ترقی' کی پیداوار میں تبدیلی کو تبدیل کرنے میں مدد ملتی ہے.

06. ٹرانزیشن

You can change the extent to which objects change size when they're clicked

آپ اس حد تک تبدیل کرسکتے ہیں جس میں اشیاء کو سائز تبدیل کر سکتے ہیں جب وہ کلک کر رہے ہیں

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

07. سوئچ

Use switch patches to toggle objects between different states

مختلف ریاستوں کے درمیان اشیاء ٹوگل کرنے کے لئے سوئچ پیچ کا استعمال کریں

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

08. زیادہ پیچیدہ رویے

By experimenting with patches you can add more complex behaviour to your prototype

پیچ کے ساتھ استعمال کرتے ہوئے آپ اپنے پروٹوٹائپ کے لئے زیادہ پیچیدہ رویے شامل کرسکتے ہیں

مبارک ہو! اب آپ نے اپنی پہلی انٹرایکٹو خصوصیت تخلیق کی ہے، جو سب سے زیادہ عام پیچوں کا استعمال کرتے ہوئے آپ کو وقت اور وقت کا استعمال کرتے ہیں. ہم زیادہ پیچیدہ رویے پیدا کرنے کے لئے مزید پیچ ​​شامل کر سکتے ہیں. چلو ہمارے موجودہ ایک کے پیچھے براہ راست ایک مختلف رنگ کی دل کی پرت بناتے ہیں، پھر دونوں کو اس کے ساتھ ساتھ پیمانے پر نئے پیچ شامل کریں، اور ہماری اصل پرت کی دھندلاپن میں ترمیم کریں تاکہ یہ نظر آتا ہے. اب، جب آپ دل کو نلاتے ہیں، تو یہ بڑے اور چھوٹے ٹگگل کرے گا، لیکن رنگ تبدیل کرنے کے لئے بھی ظاہر ہوتا ہے.

09. Carousel.

It's time to bring on all the cats

یہ تمام بلیوں کو لانے کا وقت ہے

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

10. بائیں اور دائیں سوئپنگ

Follow these steps to add a classic swiping action to your carousel

اپنے carousel کے لئے ایک کلاسک سوئپنگ کارروائی کو شامل کرنے کے لئے ان اقدامات پر عمل کریں

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

11. اگلے مرحلے

Now you've learned the basics you can add more advanced features

اب آپ نے بنیادی طور پر سیکھا ہے جو آپ مزید اعلی درجے کی خصوصیات شامل کرسکتے ہیں

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

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین ویب ڈیزائنر کے مسئلہ 270 میں شائع کیا گیا تھا. مسئلہ 270 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

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

  • رجحانات جو 2018 میں اپلی کیشن ڈیزائن کریں گے
  • ویب سائٹ پروٹوٹائپ کی تعمیر کے 3 سب سے اوپر طریقوں
  • آپ کو مذاق، wireframes، اور پروٹوٹائپ کے بارے میں جاننے کی ضرورت ہے

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

کیا آپ کے ایپل iCloud اسٹوریج مکمل ہے؟ یہاں تک کہ خلا کو آزاد کرنے کا طریقہ ہے

کيسے Sep 15, 2025

(تصویری کریڈٹ: ایپل) ایپل کی iCloud سروس ایک میں سے ایک ہے بہترین..

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

کيسے Sep 15, 2025

(تصویری کریڈٹ: ویب ڈیزائنر) ورڈپریس ایک سادہ بلاگنگ پلیٹ فارم کے �..

آپ کے زبرش UI کے ساتھ سمارٹ کام کریں

کيسے Sep 15, 2025

جو کچھ بھی ہمارے دماغ کو حوصلہ افزائی کرتا ہے وہ ہماری پیداوری کو متاثر کرسکتا ہے، اور یہ ضروری ہے کہ عوام�..

ایک ہاتھی کیسے ڈالا

کيسے Sep 15, 2025

زمین پر سب سے بڑی زندہ زمین کی تیاری کے طور پر، ہاتھیوں کو کافی ناقابل یقین موجودگی ہے...

پیارے کارٹون حروف کیسے بنائیں

کيسے Sep 15, 2025

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 صفحہ 2. کردا�..

تین.js کے ساتھ انٹرایکٹو 3D بصری بنائیں

کيسے Sep 15, 2025

یہ ویبگل ٹیوٹوریل کا مظاہرہ کرتا ہے کہ کس طرح ایک 3D ماحولیاتی تخروپن پی�..

ایک گھوسٹ رائڈر تبدیلی کی سماعت

کيسے Sep 15, 2025

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 ..

آرٹری میں ایک اپنی مرضی کے اسٹیکر برش بنائیں

کيسے Sep 15, 2025

میں اسٹیکر سپرے کا استعمال کرتا ہوں artrage. - ایک شاندار آرٹ کا آلہ..

اقسام