جوہری میں ایک ہیلو مخلص پروٹوٹائپ بنائیں

Sep 13, 2025
کيسے

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

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

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

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

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

01. سائن اپ

آو شروع کریں! اگر آپ کے پاس پہلے سے ہی اکاؤنٹ نہیں ہے تو، گوگل کروم کھولیں، ملاحظہ کریں ATOMIC.IO. اور مفت آزمائشی کے لئے سائن اپ کریں. یہ 30 دن تک رہتا ہے، جو آپ کو جوہری تلاش کرنے اور اپنے پہلے پروٹوٹائپ بنانے کے لئے بہت وقت ہونا چاہئے.

02. ایک نظر آتے ہیں

The Sample Project contains sample files to help you get familiar with Atomic

نمونہ پروجیکٹ آپ کو جوہری سے واقف ہونے میں مدد کرنے کے لئے نمونہ فائلوں پر مشتمل ہے

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

03. نئی پروجیکٹ

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

04. ایک نمونہ پکڑو

There's a ready-made sample file for this project

اس منصوبے کے لئے تیار کردہ نمونہ فائل ہے

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

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

05. ایڈیٹر کا پتہ لگائیں

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

06. عناصر کو چیک کریں

In the sample file's Assets page you’ll find the elements you need

نمونہ فائل کے اثاثوں کے صفحے میں آپ کو عناصر مل جائے گا

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

07. پیش نظارہ

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

08. شروع کرو

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

09. اپنی اثاثوں کا بندوبست کریں

کسی بھی عناصر کے بغیر منتخب کردہ، آپ کے کینوس کے پس منظر کو # F6F7F8 (دائیں ہاتھ پراپرٹیز پینل میں نظر آتے ہیں) کو مقرر کریں. کینوس، اوپر اور مرکز پر ہیڈر کو رکھیں.

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

10. اپنے کارڈوں کو اسٹیک کریں

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

11. ایک طومار کنٹینر بنائیں

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

12. اپنے عناصر کو رکھیں

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

13. ٹرانسمیشن ٹیپ کریں

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

14. نقل و حرکت

For our transition, duplicate page 1

ہمارے منتقلی کے لئے، ڈپلیکیٹ پیج 1.

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

15. محفوظ شدہ ترکیبیں

Atomic will animate any changes you make between Page 1 and your new Page 2

جوہری آپ کو صفحہ 1 اور آپ کے نئے صفحہ 2 کے درمیان کسی بھی تبدیلی کو متحرک کرے گا

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

16. مزید ٹرانزیشن

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

17. مزید حرکت پذیری

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

18. مزہ حصہ

Add an interaction hotspot over the area you want users to interact with

اس علاقے میں ایک بات چیت ہاٹ پوٹ شامل کریں جو آپ چاہتے ہیں کہ صارفین کے ساتھ بات چیت کریں

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

19. منتقلی کی ترتیبات

Customise your transition, including the trigger gesture and motion type

اپنی منتقلی کو اپنی مرضی کے مطابق بنائیں، بشمول ٹرگر اشارہ اور موشن کی قسم

ایک بار جب آپ نے اپنے ہاٹ پوٹ کو تیار کیا ہے، اس کے ساتھ اب بھی منتخب کیا گیا ہے، آپ دیکھیں گے کہ آپ کو صحیح طریقے سے پراپرٹیز پینل میں ایک بات چیت کا حصہ نظر آتا ہے. یہ وہی ہے جہاں آپ ٹرگر اشارہ، منزل کے صفحے، تحریک کی قسم اور منتقلی کی مدت کی وضاحت کرسکتے ہیں. اس منتقلی کے لئے مندرجہ ذیل ترتیبات کی وضاحت: اشارہ: کلک کریں یا نل ؛ کے پاس جاؤ: صفحہ 2. ؛ موشن: ای Ase In-Out. ؛ دورانیہ: 250. .

20. پیچھے اور آگے

ہم دو ٹرانزیشن کے درمیان آگے بڑھنے کے قابل ہونا چاہتے ہیں، لہذا اب ہم صفحہ 2 پر HotSpot رکھنے کی ضرورت بھی صفحہ پر واپس لے جائیں گے. کی بورڈ شارٹ کٹس کا استعمال کرتے ہوئے صفحہ 1 سے ہاٹ پوٹ کاپی کریں یہ صفحہ 2 پر 'ہیڈر' میں 'تمام ترکیبیں' متن پر. صفحہ 1 میں نئے ہاٹ پوٹ کی منزل کا صفحہ ترتیب کو اپ ڈیٹ کرنے کے لئے یاد رکھیں.

21. پیش نظارہ

Click the Preview button to see your transition in action

کارروائی میں آپ کی منتقلی کو دیکھنے کے لئے پیش نظارہ بٹن پر کلک کریں

یہ آپ کی منتقلی کا جائزہ لینے کا وقت ہے! صفحات کے پینل میں صفحہ 1 پر جائیں اور ایڈیٹر کے نچلے دائیں میں پیش نظارہ پر کلک کریں (شارٹ کٹ CMD + درج ). صفحہ 2. اس کے بعد آپ کے پروٹوٹائپ پر 'محفوظ شدہ ترکیبیں' پر کلک کریں یا ٹیپ کریں. پھر، 'تمام ترکیبیں' پروٹوٹائپ کو منتخب کریں صفحہ 1 میں واپس لے جائیں.

22. تمام کئے گئے!

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

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

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

فوٹوشاپ سی سی میں تصویر کولاج کیسے بنائیں

کيسے Sep 13, 2025

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

اپنی مرضی کے مطابق سلیک بوٹ بنائیں

کيسے Sep 13, 2025

(تصویری کریڈٹ: ویب ڈیزائنر) سلیک کاروباری اور ٹیموں کے لئے تیزی س�..

قابل رسائی ویب فارم کیسے بنائیں

کيسے Sep 13, 2025

فارم ویب کا ایک لازمی جزو ہیں کیونکہ وہ صارفین کو آپ کے کاروبار سے منسلک..

ناک کیسے ڈالو

کيسے Sep 13, 2025

ایک ناک کو کس طرح اپنی طرف متوجہ کرنے کے لئے ماسٹرنگ ایک چہرے ڈرائنگ کے �..

تصاویر سے واضح پورٹریٹ بنائیں

کيسے Sep 13, 2025

میں نے آرٹ آرٹ کا مطالعہ کیا پینٹنگ کی تکنیک اور ایک طویل عرصے ت..

فرنٹ اینڈ ٹیسٹنگ کا تعارف

کيسے Sep 13, 2025

صفحہ 1 کا 2: فرنٹ اینڈ ٹیسٹ کے مختلف اقسام (اور ان کا استعما..

سنیما 4 ڈی میں حقیقت پسندانہ پودوں بنائیں

کيسے Sep 13, 2025

آپ کے آخری استعمال سے کوئی فرق نہیں پڑتا، انسان ساختہ ڈھانچے پر مرکوز س�..

3D میں جلد کی شیڈنگ کیسے ماسٹر

کيسے Sep 13, 2025

ایک طویل عرصے سے اب میں اپنے ساتھ ایک رٹ میں پھنس گیا ہوں 3D آرٹ . ..

اقسام