Make a hi-fidelity prototype in Atomic

Sep 12, 2025
कैसे करना है

एक स्थिर मॉकअप या फ्लैट फ़ाइल ड्राइंग टूल के भीतर एक विचार विकसित करने की कोशिश में पकड़ा जाना आसान है, लेकिन ए प्रोटोटाइप एक हजार बैठकों के लायक है। आप अपने विचारों को एक इंटरैक्टिव तरीके से खोजने से कम कुछ भी क्यों व्यवस्थित करेंगे?

हो सकता है कि आपके पास एक विचार है कि एक संक्रमण कैसे व्यवहार कर सकता है, लेकिन आप निश्चित रूप से सुनिश्चित नहीं हैं कि यह उपयोगकर्ता को सही महसूस करेगा। संक्रमण को जल्दी से प्रोटोटाइप करना और इसके साथ बातचीत करना आपको वास्तविक दुनिया में अंतिम उत्पाद कैसे काम कर सकता है इसका एक और यथार्थवादी अनुभव देता है।

भी)।

इस ट्यूटोरियल में हम एक मौसम ऐप के अंदर एक साधारण स्वाइप संक्रमण का पता लगाएंगे कि हम परमाणु में बनाएंगे। हम संक्रमणों को क्राफ्ट करने के लिए आसान चरणों के माध्यम से चलेंगे, और यदि आपको चुनौती चाहिए, तो मैं आपके लिए अन्वेषण करने के लिए कुछ और उन्नत प्रोटोटाइप सुविधाओं को भी कवर करूंगा।

01. साइन अप करें

आएँ शुरू करें! यदि आपके पास पहले से कोई खाता नहीं है, तो Google क्रोम खोलें, जाएं atomic.io और एक नि: शुल्क परीक्षण के लिए साइन अप करें। यह 30 दिनों तक रहता है, जो आपके लिए परमाणु का पता लगाने और अपना पहला प्रोटोटाइप बनाने के लिए पर्याप्त समय होना चाहिए।

02. चारों ओर एक नज़र डालें

[5 9] The Sample Project contains sample files to help you get familiar with Atomic

नमूना परियोजना में परमाणु से परिचित होने में आपकी सहायता के लिए नमूना फ़ाइलें हैं

अब आप अपने खाते में साइन इन हैं, यह अन्वेषण करने का एक अच्छा समय है। आप देखेंगे कि एक नमूना परियोजना आपके लिए स्थापित की गई है। इसमें कुछ प्रारंभिक नमूना फ़ाइलें हैं जो आप परमाणु से परिचित होने के दौरान चारों ओर खेल सकते हैं। वैकल्पिक रूप से आप हमारी यात्रा कर सकते हैं प्रदर्शन , जिसमें दूसरों द्वारा निर्मित प्रोटोटाइप का संग्रह है। यदि आप अटक जाते हैं, तो समाधान देखने के लिए सबसे अच्छी जगह हमारी है सहायता केंद्र ।

03. नई परियोजना

'नई परियोजना' पर क्लिक करके एक नई परियोजना बनाएं और इसे 'नुस्खा ऐप' नाम दें। प्रेस प्रोजेक्ट फ़ोल्डर खोलेंगे। यहां आप इस विशेष परियोजना के भीतर सभी डिज़ाइन देख सकते हैं। चूंकि यह एक नई परियोजना है, यह खाली है। हालांकि, जब आप उन्हें बनाते हैं तो समय के साथ डिजाइन यहां भरेंगे।

04. एक नमूना पकड़ो

[8 9] 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. सहेजे गए व्यंजनों

[1 9 1] [1 9 2] [1 9 3]

परमाणु पृष्ठ 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 ; मोशन: ई एएस इन-आउट ; समयांतराल: 250 ।

20. आगे और पीछे

हम दो संक्रमणों के बीच आगे और आगे टॉगल करने में सक्षम होना चाहते हैं, इसलिए हमें पृष्ठ 2 पर वापस लेने के लिए अब भी एक हॉटस्पॉट लगाने की आवश्यकता होगी। कीबोर्ड शॉर्टकट का उपयोग करके पृष्ठ 1 से हॉटस्पॉट कॉपी करें, और पेस्ट करें यह 'हेडर' में 'सभी व्यंजनों' पाठ पर पृष्ठ 2 पर। पृष्ठ 1 में नए हॉटस्पॉट की गंतव्य पृष्ठ सेटिंग को अपडेट करना याद रखें।

21. पूर्वावलोकन

Click the Preview button to see your transition in action

कार्रवाई में अपने संक्रमण को देखने के लिए पूर्वावलोकन बटन पर क्लिक करें

यह आपके संक्रमण का पूर्वावलोकन करने का समय है! पेज 1 पर नेविगेट करें पैनल में और संपादक के निचले दाएं भाग में पूर्वावलोकन करें (शॉर्टकट) cmd + दर्ज करें )। पृष्ठ 2 पर जाने के लिए अपने प्रोटोटाइप पर 'सहेजे गए व्यंजनों' पर क्लिक या टैप करें। फिर, 'सभी व्यंजनों' प्रोटोटाइप को पेज 1 पर वापस ले जाने का चयन करें।

22. सब किया!

अब आप एक समर्थक हैं! संपादक पर वापस जाने के लिए 'संपादित करें' का चयन करें, फिर यदि आप संपत्तियों और दो संदर्भ पृष्ठों को हटाते हैं (पृष्ठ के हैमबर्गर मेनू का चयन करके और फिर 'पृष्ठ हटाएं'), आपने अभी बनाया है प्रोटोटाइप साझा करने के लिए तैयार है। आप संपादक के निचले दाएं भाग में 'शेयर' दबाकर आसानी से एक शेयर लिंक बना सकते हैं।

[2 9 5] यह लेख मूल रूप से दिखाई दिया [2 9 6] [2 9 5] नेट पत्रिका [2 9 6] [2 9 5] अंक 283; [2 9 6] [2 9 5] यहां खरीदें [2 9 6] [2 9 5] ! [2 9 6]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to clean paintbrushes: The definitive guide

कैसे करना है Sep 12, 2025

(छवि क्रेडिट: सनी फ्लानगान) [1 9] पेंटब्रश को ठी..

Get started with Adobe Dimension CC

कैसे करना है Sep 12, 2025

एडोब आयाम इसे जटिल दृश्यों को स्थापित करने के लिए ए�..

बेहतर चरित्र एनिमेशन बनाने के 10 तरीके

कैसे करना है Sep 12, 2025

वर्ष में 3 डी उद्योग के बढ़ते वर्ष के आकार के साथ, यह सुनिश्चित करने के लिए �..

How to correct a flawed composition

कैसे करना है Sep 12, 2025

मैंने पिछले साल इस समय के आसपास अपनी मूल चित्रकला बनाई थी, जिसे डोंगबियाओ..

Paint a mischievous hare in watercolour

कैसे करना है Sep 12, 2025

प्राणीशास्त्र, जानवरों और वन्यजीवन का अध्ययन करने के बाद हमेशा मेरे लिए �..

Fashion flexible layouts with CSS Grid

कैसे करना है Sep 12, 2025

सीएसएस ग्रिड पंक्तियों और स्तंभों के दो-अक्षीय ल�..

Master the Bridge tool

कैसे करना है Sep 12, 2025

पुल उपकरण क्या है? यदि आप सीजीआई के लिए नए है�..

13 tips for making a VR gaming world

कैसे करना है Sep 12, 2025

Tethered एक समीक्षकों द्वारा प्रशंसित तीसरे व्यक्ति र..

श्रेणियाँ