UX मोशन डिजाइनर्स के लिए 20 सर्वश्रेष्ठ मुफ्त सामान
इंटरफ़ेस डिजाइनर यूएक्स डिजाइन में अधिक रुचि ले रहे हैं, जो उपयोगकर्ता के कार्यों का अनुकरण करते हैं। ये यूएक्स मॉकअप हैं गति पर भरोसा करें परिभाषित करने के लिए एनिमेटेड प्रभावों के साथ कैसे एक यूजर इंटरफेस के लिए जवाब देना चाहिए.
अधिकांश UX डिज़ाइनर इन एनिमेशन को बनाने के लिए सॉफ़्टवेयर का उपयोग करना सीखते हैं। दो सबसे लोकप्रिय विकल्प हैं Adobe After Effects और सिद्धांत (केवल OS X)। आप ऐसा कर सकते हैं डिजाइन इंटरफ़ेस मॉकअप फ़ोटोशॉप जैसे प्रोग्राम में, और इन कार्यक्रमों में UI को स्थानांतरित करें एनीमेशन के लिए.
यदि आप UX एनीमेशन सीखने में रुचि रखते हैं, तो मुफ्त में एक जबरदस्त संपत्ति होगी। आप दूसरों के काम का अध्ययन कर सकते हैं, और उनके डिजाइनों के साथ खेलकर देख सकते हैं कि यह कैसे काम करता है.
नीचे आपको सिर्फ़ सिद्धांत और AE उपयोगकर्ताओं के लिए सर्वश्रेष्ठ फ़्रीबीज़ मिलेंगे UX गति डिजाइन में हो रही है. वे निश्चित रूप से आपको समझने में मदद करेंगे UX एनीमेशन कैसे काम करता है, और अपना खुद का निर्माण कैसे करें.
1. कार्रवाई हटाएँ
स्वाइप विभिन्न प्रयोजनों के लिए मोबाइल एप्लिकेशन में एक बहुत ही सामान्य कार्रवाई है। डिफ़ॉल्ट iOS स्वाइप एक्शन का उपयोग किया जाता है आइटम संपादित / हटाने के लिए वैकल्पिक विकल्प प्रदर्शित करें, और ठीक यही आपको रामिल डेरोगोंगुन द्वारा बनाए गए इस फ्रीबी में मिलता है.
आप After Effects के लिए मुफ्त AEP फ़ाइल डाउनलोड कर सकते हैं, और इसे स्वयं आज़मा सकते हैं। UI निम्नानुसार है बहुत बुनियादी वायरफ्रेम योजना उपयोगकर्ता इनपुट के साथ एक नीले बिंदु के रूप में प्रदर्शित होता है। इस प्रकार के उपयोगकर्ता व्यवहार दिखाए जाने के लिए सबसे अच्छे हैं एनीमेशन के माध्यम से क्योंकि यह डेवलपर्स को देखने का मौका देता है इंटरफ़ेस कैसे काम करना चाहिए.
2. विजेट स्वाइप करें
यहां एक और स्वाइप एनिमेटेड मॉकअप है जो फोकस करता है स्लाइड शो में कार्ट आइटम पर. लियोन वू द्वारा डिज़ाइन किया गया, यह मुफ्त स्वाइप एनीमेशन एक पीआरडी फ़ाइल के साथ आता है जो सिद्धांत के लिए बनाया गया है.
एनीमेशन अत्यंत सरल है, और प्रदर्शित करता है कि आइटम को स्क्रीन पर कैसे चलना चाहिए जब दबाव लागू किया जाता है. तुम भी एक के लिए लग रहा है सहज प्रभाव जब भी स्वाइप एक्शन जारी होता है.
3. डुअलशॉक यूआई
यहां अलेक्जेंडर बॉयचेंको द्वारा साझा किया गया एक अविश्वसनीय रूप से गतिशील यूएक्स एनीमेशन प्रभाव है। यह मॉकअप एक मोबाइल ऐप UI के लिए PlayStation नियंत्रक पर आधारित है। इसमें एक स्केच और सिद्धांत फ़ाइल शामिल है जिसे आप मुफ्त में डाउनलोड कर सकते हैं.
यह फ्रीबी दिखाता है कि संक्रमण कैसे पैदा करें स्क्रीन के बीच स्वाइप करें. लेकिन आपको यह भी देखने को मिलता है कि स्क्रीन के चारों ओर पेज एलिमेंट्स किस तरह से हैं विभिन्न दिशाओं में.
4. हैमबर्गर मेनू एनीमेशन
हैम्बर्गर प्रतीक अभी भी मोबाइल इंटरफेस में सभी क्रोध हैं। यह मेनू आइकन freebie दर्शाता है कि कैसे "X" आइकन में तीन-बार आइकन को चेतन करें.
यह है दोहराए जाने वाला एनीमेशन, तो "X" भी हैमबर्गर मेनू आइकन में वापस एनिमेट करता है। यह जानने के लिए एक महान फ्रीबी है UI तत्वों के लिए वेक्टर हेरफेर.
5. स्नैपस्टर
यह फ्री मॉकअप Snapster नाम के एक मोबाइल ऐप के लिए है। यह ध्यान आकर्षण स्वागत / ऑनबोर्डिंग स्क्रीन पर जहां उपयोगकर्ता ऐप के डेमो देख सकते हैं, और सीख सकते हैं कि यह वास्तव में कैसे कार्य करता है.
यह एक PRD फ़ाइल है, और दुर्भाग्य से यह After Effects के साथ अच्छा नहीं खेलता है, इसलिए केवल सिद्धांत वाले उपयोगकर्ता ही इससे लाभ उठा सकते हैं.
6. लोड हो रहा है
यहाँ एक AEP है After Effects के लिए freebie मोबाइल लोडिंग स्पिनर. इस प्रकार के एनिमेटेड जीआईएफ बहुत लोकप्रिय हो गए जब अजाक्स ने मुख्यधारा के वेब विकास में अपना रास्ता बनाया.
अब ये मोबाइल लोडर एक दर्जन से अधिक हैं, और वे भी हो सकते हैं भारी अनुकूलित कुछ इंटरफेस फिट करने के लिए। यदि आप उन्हें संशोधित करना चाहते हैं तो यह फ्रीबी एईपी फ़ाइल और वैक्टर को संपादित करने के लिए एक स्केच फ़ाइल के साथ आता है.
7. खेल / रोकें संक्रमण
संक्रमण प्रभाव अक्सर बहुत सरल लगता है, लेकिन वास्तव में अच्छी मात्रा में काम करने की आवश्यकता होती है। एलेक्स प्रैंकी द्वारा बनाया गया यह नाटक / ठहराव एनीमेशन एक महान उदाहरण है.
इस फ्रीबी के साथ आप विभिन्न पतली रेखा के आइकनों को कैसे एनिमेट कर सकते हैं, इसकी जांच कर सकते हैं आकार और प्रतीकों में. एक बार जब आप प्रोग्राम सीख लेते हैं, तो इस प्रकार का सामान करना बहुत आसान हो जाता है, इसलिए यह शोध के लिए आपके निपटान में मुफ्त में मदद करता है.
8. आईफोन मॉकअप
हालांकि इस फ्रीबी में सीधे तौर पर एनीमेशन नहीं है, इसका उपयोग करने के लिए है iPhone अनुप्रयोगों पर उत्पादन कार्य के लिए. यह एक नि: शुल्क iPhone 5S AEP फ़ाइल है में उपयोग के लिए After Effects एक iPhone टेम्पलेट के रूप में.
बस अपने इंटरफ़ेस मॉकअप आयात करें, और प्रभाव में एनिमेशन बनाएँ। फिर आप इसे अपनी टीम के साथ साझा करने के लिए इस iPhone मॉकअप में प्लग कर सकते हैं.
9. iPhone टेम्पलेट
यह एक और है कस्टम प्रभाव टेम्पलेट के बाद के साथ अधिक आधुनिक iPhone डिजाइन. फ्रीबी इस पेज से यूएक्स इन मोशन में उपलब्ध है.
टेम्पलेट में सब कुछ है अनुकूलित करने के लिए सुपर आसान है. डाउनलोड पृष्ठ पर, आपको "वीडियो निर्देश" नामक एक खंड भी मिलेगा जहाँ आप सीख सकते हैं कि ऐप को कैसे चेतन करें.
10. माइक्रो एनिमेशन
यहां तक कि सबसे छोटा ऐप एनिमेशन उपयोगकर्ता के अनुभव पर एक बड़ा प्रभाव डाल सकता है। यह फ्रीबी प्रदर्शित करता है a "जैसे" सूक्ष्म एनीमेशन जब भी कोई उपयोगकर्ता किसी पोस्ट को "पसंद" करता है.
दिल का आइकन इसका अपना एनीमेशन है उपयोगकर्ता की प्रोफ़ाइल फ़ोटो के साथ पसंद के ढेर में जोड़ा गया। यह फ्रीबी केवल सिद्धांत के लिए है और आपके पास भी है .mov यदि आप चाहें तो डाउनलोड करने के लिए फ़ाइल.
11. वॉलेट ऐप
डिजिटल वॉलेट अधिक लोकप्रिय हो रहे हैं, और यह फ्रीबी एक डिजाइन करना आसान बनाता है। आपको सभी कच्चे वेक्टर तत्वों के साथ एक स्केच फ़ाइल मिलती है, साथ ही सिद्धांत एनीमेशन के लिए एक मुफ्त पीआरडी फ़ाइल.
इस फ्रीबी को सर्गेई बाइकोव ने एक मजेदार छोटी साइड परियोजना के रूप में डिजाइन किया था। लेकिन यह बहुत ही शैक्षिक हो सकता है यदि आप इसे अलग लेते हैं, और एनीमेशन के साथ कदम-दर-चरण काम करते हैं.
12. iOS स्विच
Apple के iOS 7 के साथ, दुनिया को चालू / बंद लेबल के लिए नए सिरे से डिज़ाइन किया गया स्विच मिला। यह एक मुफ्त एनीमेशन सहित कई अलग-अलग प्रभावों का कारण बना देशी / बंद स्विच की नकल करता है.
इस फ़ाइल में, आप एक बुनियादी सहजता के साथ एक बहुत ही सरल एनीमेशन प्रभाव प्राप्त करते हैं। स्विच आगे बढ़ता है, और पृष्ठभूमि हरी हो जाती है, फिर स्विच बंद होने पर वापस लौट जाता है.
13. रीटर ऐप
यहां एक और महान फ्रीबी है जिसे सर्टी बयकोव ने रिटर एप के लिए जारी किया है। इसमें वेक्टर इंटरफ़ेस के लिए एक मुफ्त स्केच फ़ाइल शामिल है, साथ ही प्रिंसिपल एनीमेशन के लिए एक मुफ्त पीआरडी फ़ाइल है.
आपको मिलेगा विभिन्न एनिमेशन का एक बहुत इस फ्रीबी में, इसलिए मुझे लगता है कि यह एक मध्यवर्ती-से-उन्नत डिजाइनर के लिए अधिक उपयोगी होगा। शुरुआती इसके साथ ही बहुत कुछ सीख सकते हैं, लेकिन एक सीखने की अवस्था हो सकती है.
14. दोस्तों को आमंत्रित करें
हम सभी जानते हैं और Google के प्लस आइकन फ्लाईआउट मेनू से प्यार करते हैं। खैर, जैडसन अल्मेडा ने एक साधारण सामग्री डिजाइन अवधारणा के आधार पर एक मित्र आमंत्रण मेनू बनाया.
सब कुछ स्केच में डिज़ाइन किया गया था, और एनीमेशन के लिए सिद्धांत के लिए आयात किया गया था। आप दोनों फ़ाइलों को मुफ्त में डाउनलोड करने और खिलौने के साथ चारों ओर ले जाएं.
15. कार्ड स्वाइप
यहाँ एक और सामान्य स्वाइप फ्रीबी है जो केवल सिद्धांत उपयोगकर्ताओं के लिए बनाया गया है। यह है एक कार्ड स्वाइप इंटरफ़ेस सामान्य प्रयोजन स्लाइडशो या देशी ऐप UI के लिए बनाया गया.
मुझे लगता है कि यह एक शुरुआती के लिए एकदम सही फ्रीबी है जो सिर्फ सिद्धांत में हो रहा है। यह इतना जटिल नहीं है कि आप खोए हुए महसूस करेंगे, फिर भी यह इतना सरल नहीं है कि आप तुच्छ महसूस करेंगे.
16. मानचित्र पर चैट करें
कई डिजाइनर अभी भी इंटरफेस के लिए फ़ोटोशॉप का उपयोग करते हैं, और यह इस मैप चैट फ्रीबी के बारे में भी सच है। आप इंटरफ़ेस के लिए एक PSD फ़ाइल और सिद्धांत एनीमेशन के लिए एक PRD फ़ाइल डाउनलोड कर सकते हैं.
यह शैली के लिए आश्चर्यजनक रूप से वश में किया गया एनीमेशन है, लेकिन यह अभी भी बहुत अच्छा लग रहा है और ठीक वैसे ही काम करता है जैसा कि आप एक साधारण नक्शे / जियोलोकेशन ऐप में चाहते हैं.
17. ऐप लोड हो रहा है
मोबाइल ऐप अक्सर इस्तेमाल करते हैं लोड हो रहा है स्क्रीन आगंतुकों को बताने के लिए कि बैकएंड में कुछ हो रहा है। इस संग्रह में मेरे पसंदीदा मुफ्त में से एक रोमन लोडर द्वारा बनाया गया यह लोडिंग एनीमेशन है.
यह व्यक्तिगत तत्वों को लोड करता है एक के बाद एक एक बार लोडिंग स्क्रीन समाप्त हो गई है। यह एनीमेशन बहुत चिकनी है, और मोबाइल ऐप डिज़ाइन के दायरे में पूरी तरह से विश्वसनीय है.
18. जहाज पर कार्ड
उपयोगकर्ता जहाज पर हर नए मोबाइल एप्लिकेशन के लिए एक महत्वपूर्ण कदम है। इस स्तर पर कुछ एनिमेशन शामिल करना हमेशा अच्छा होता है, यही कारण है कि ये ऑनबोर्डिंग कार्ड एनिमेशन ऐप डिजाइनरों के लिए बहुत मददगार हो सकते हैं.
यह ऑस्टिन बेयर्ड द्वारा बनाया गया था, और किसी भी यूआई / यूएक्स प्रोजेक्ट पर उपयोग करने के लिए मुफ्त में जारी किया गया था.
19. सिद्धांत डेमो
जैसे-जैसे आप सिद्धांत में आगे बढ़ेंगे, आप कई उन्नत वर्कफ़्लो तकनीक सीखेंगे। आगे जाने के लिए सबसे अच्छा मुफ्त में से एक यह यालंटिस रचनात्मक टीम के लिए बनाया गया है.
यह प्रिंसिपल उपयोगकर्ताओं के लिए डाउनलोड करने और उनके साथ खेलने के लिए पूरी तरह से नि: शुल्क संसाधन है। यह कुछ ट्रिक्स को दर्शाता है कि सिद्धांत एनीमेशन में एक समर्थक कैसे बनें.
20. ड्रॉपडाउन मेनू
मेनू ड्रॉपडाउन अक्सर हमारा ध्यान खींचने के लिए पागल एनिमेशन का उपयोग करते हैं। यह After Effects फ्रीबी एक का उपयोग करता है ड्रॉपडाउन सीढ़ियों एनीमेशन व्यक्तिगत तत्वों के लिए मेनू पर उन्हें सीढ़ियों की तरह गिराने के लिए.
यह सभी के लिए उपयोगी नहीं हो सकता है, लेकिन यह निश्चित रूप से प्रभाव इंटरफ़ेस एनीमेशन के बारे में जानने का एक शानदार तरीका है.
अंतिम शब्द
ये सभी संसाधन आपकी अपनी परियोजनाओं के साथ डाउनलोड करने और खिलौने बनाने के लिए पूरी तरह से स्वतंत्र हैं। यदि आप UX एनीमेशन के लिए एकदम नए हैं, तो मुझे लगता है कि आप इन मुफ्त का अध्ययन करके बहुत कुछ सीखेंगे। यदि आप जानते हैं कि कोई अन्य महान संसाधन टिप्पणी में लिंक छोड़ने के लिए स्वतंत्र महसूस करते हैं.
