यूएक्सपीन के साथ खुद को कैसे शुरू करें
जैसे-जैसे हम मोबाइल डिज़ाइन, ऐप डिज़ाइन और उत्तरदायी डिज़ाइन के क्षेत्र में जाते हैं, वहां यूएक्स (यूजर एक्सपीरियंस) और वायरफ्रेमिंग, इंटरेक्टिव प्रोटोटाइपिंग और मैक अप पर बढ़ते फोकस रहे हैं। इस जगह पर लक्षित उपकरणों का एक टन है और वे जटिल, फीचर लेटे हुए बीमियोथ्स से स्पैस और मुश्किल से उपयोगी होने के लिए पूरी तरह से चलते हैं। मेरी आंखों को पकड़ने वाले औजारों में से एक यूएक्सपीन है क्योंकि यह डिजाइनरों द्वारा डिजाइनरों के लिए विकसित किया गया था।
आगे बढ़ने से पहले … एक चेतावनी। यदि आपका संगठन ऐसा संगठन है जो सॉफ़्टवेयर का मालिक होना पसंद करता है तो यूएक्सपीन आपके लिए नहीं है। इस ऐप में किए गए सभी काम ब्राउज़र में किए जाते हैं और आपके द्वारा सहेजी गई परियोजनाओं को आपके खाते में सहेजा जाता है।
यूएक्सपीन के साथ शुरू करने के लिए आप एक ब्राउज़र लॉन्च करते हैं और यूएक्सपीन पर जाते हैं। यहां से आप एक नि: शुल्क परीक्षण के लिए साइन अप कर सकते हैं या अपनी अनुमानित आवश्यकता के आधार पर मासिक योजना की व्यवस्था कर सकते हैं। साइन अप प्रक्रिया काफी आसान है और एक बार जब आप अपना उपयोगकर्ता नाम और पासवर्ड सेट कर लेते हैं, तो आप शुरू करने के लिए तैयार हैं।
UXPin में एक परियोजना कैसे शुरू करें
जब आप लॉग इन करते हैं तो आप डैशबोर्ड पर पहुंचते हैं और यहां से आप एक नया वायरफ्रेम, एक नई मोबाइल प्रोजेक्ट या उत्तरदायी वेब डिज़ाइन प्रोजेक्ट बनाने का निर्णय ले सकते हैं। यूएक्सपीन के लिए प्लग-इन भी हैं जो आपको अपने फ़ोटोशॉप या स्केच परियोजनाओं को लाने की अनुमति देंगे। इसके लिए मैं कुछ पाठ के साथ बैनर बनाने और बैनर में एक ईमेल बटन जोड़ने के लिए कैसे जा रहा हूं। इसे पूरा करने के लिए मैंने एक नया वायरफ्रेम बनाया है।
यूएक्सपीन इंटरफेस का उपयोग कैसे करें
डिजाइन सतह चार क्षेत्रों में टूट गई है। बाईं ओर के काले क्षेत्र में उपकरण की एक श्रृंखला है जो आपको डैशबोर्ड पर वापस जाने देती है, आपके द्वारा उपयोग किए जाने वाले तत्वों को खोलें, स्मार्ट एलिमेंट्स पैनल खोलें, तत्वों की खोज करें, पृष्ठ पर नोट्स जोड़ें और टीम के सदस्यों को जोड़ें। नीचे एक बटन है जो एक छोटा ट्यूटोरियल खोलता है, दूसरा जो आपको अपने खाते तक पहुंचने की अनुमति देता है और दूसरा जो FAQs तक पहुंचता है, आइए आप प्रश्न पूछें और यहां तक कि प्रतिक्रिया दें।
शीर्ष के साथ नीले क्षेत्र में उपकरण और गुणों की एक श्रृंखला है। दाएं तरफ के गहरे बटन आपको अपने डिज़ाइन को पुन: सक्रिय करने, प्रोजेक्ट सेटिंग्स को समायोजित करने, पृष्ठ साझा करने और पृष्ठ के इन-ब्राउज़र सिमुलेशन करने की अनुमति देते हैं।
एलिमेंट्स पैनल वह जगह है जहां आप डिज़ाइन सतह के लिए बिट्स और टुकड़े लेते हैं, अपनी प्रोजेक्ट का नाम देते हैं और पृष्ठों को जोड़ते या हटाते हैं।
तत्व पुस्तकालय यूएक्स डिजाइनरों के लिए एक सुखद आश्चर्य है। यह पॉप डाउन आपको आईओएस से एंड्रॉइड लॉलीपॉप तक की एनी 30 पुस्तकालयों में से चुनने देता है, साथ ही आपके पास फ़ॉन्ट विस्मयकारी आइकन, मोबाइल के लिए इशारा आइकन और सोशल विजेट्स के संग्रह के साथ बूटस्ट्रैप और फाउंडेशन तत्वों तक पहुंच है।
04 का 04एक UXPin पृष्ठ पर एक तत्व कैसे जोड़ें
शुरू करने के लिए मैंने बॉक्स तत्व को डिज़ाइन सतह पर खींच लिया और, जब मैं माउस को छोड़ देता हूं, तो गुण पैनल खुलती। गुण बटन आपको तत्व का नाम देने और तत्व की चौड़ाई ऊंचाई और स्थिति मान सेट करने देता है। आप तत्वों में पैडिंग भी जोड़ सकते हैं, कोनों से घूमते हैं और इसकी अस्पष्टता समायोजित कर सकते हैं। पृष्ठभूमि रंग बटन पर क्लिक करने से एक आरजीबीए रंग पिकर खुलता है।
आप चयनित तत्व को फ़ॉन्ट, सीमा और पैटर्न भी निर्दिष्ट कर सकते हैं। लाइटनिंग बोल्ट आपको किसी चयनित तत्व पर अंतःक्रियाशीलता जोड़ने की क्षमता देता है।
05 में से 05UXPin में टेक्स्ट कैसे जोड़ें और प्रारूप कैसे करें
टेक्स्ट जोड़ने के लिए, टेक्स्ट तत्व को डिज़ाइन सतह पर खींचें और अपना टेक्स्ट दर्ज करें। टेक्स्ट प्रॉपर्टी पर क्लिक करें फ़ॉन्ट गुणों को खोलने और अपने पाठ को प्रारूपित करने के लिए बटन। यदि आपको डमी टेक्स्ट के ब्लॉक की आवश्यकता है, तो टेक्स्ट तत्व जोड़ें और क्लिक करें सामान्य लॉरम आईपीएस फ़ॉन्ट गुणों में बटन।
06 का 06एक यूएक्सपीन पेज पर एक छवि कैसे जोड़ें
इस कार्य को पूरा करने के कुछ तरीके हैं। आप इसका उपयोग कर सकते हैं छवि उपकरण टूलबार में, लाइब्रेरी से एक छवि तत्व जोड़ें या ऊपर दिखाए गए अनुसार डिज़ाइन सतह पर तत्व पर अपने डेस्कटॉप से एक छवि खींचें और छोड़ें।
07 का 07एक UXPin पृष्ठ पर एक बटन कैसे जोड़ें
हालांकि एक बटन तत्व है, " बटन " में खोज जैसा कि ऊपर दिखाया गया है, क्षेत्र सभी पुस्तकालयों में पाए गए सभी बटन खोलता है। उस डिज़ाइन को खींचें जो आपके लिए डिज़ाइन सतह पर काम करता है और रंग, फ़ॉन्ट और यहां तक कि सीमा त्रिज्या को बदलने के लिए गुणों का उपयोग करें। बटन के अंदर पाठ को बदलने के लिए, टेक्स्ट पर एक बार क्लिक करें और नया टेक्स्ट दर्ज करें।
08 का 08एक UXPin पृष्ठ पर अंतःक्रियाशीलता कैसे जोड़ें
यह उतना जटिल नहीं है जितना कि यह पहले दिखाई दे सकता है। ईमेल इनपुट के लिए, मैंने एक इनपुट तत्व जोड़ा, इसका आकार बदल दिया, टेक्स्ट दर्ज किया और टेक्स्ट स्वरूपित किया। इनपुट तत्व चयनित के साथ गुण बटन पर क्लिक करें और, जब तत्व गुण दिखाई दें क्लिक करें दृश्यता बटन- आंखों की गेंद - पैनल के ऊपरी दाएं कोने में।
बटन का चयन करें और क्लिक करें इंटरैक्शन बटन - लाइटनिंग बोल्ट- गुणों में। जब इंटरैक्शन पैनल खुलता है, तो नई इंटरैक्शन चुनें। ट्रिगर पॉप डाउन से क्लिक करें का चयन करें। क्रिया क्षेत्र में तत्व दिखाएँ का चयन करें। अब आपसे पूछा जाएगा कि कौन सा तत्व दिखाना है। बंदूक पर एक बार क्लिक करें और इनपुट तत्व पर क्लिक करें। तत्व की पहचान के साथ, अब आप यह निर्धारित कर सकते हैं कि तत्व को एनिमेट करना है या नहीं। इस मामले में मैंने इनपुट बॉक्स को आसानी से दिखाने का फैसला किया और 300 एमएमएस के डिफ़ॉल्ट अवधि मूल्य के साथ चला गया।
जब भी क्लिक किया जाता है तो मैं बटन को 65 पिक्सल तक दाएं स्थानांतरित करना चाहता हूं। मैंने बटन का चयन किया, इंटरैक्शन पैनल खोला और चुना नई बातचीत। मैंने इन सेटिंग्स का इस्तेमाल किया:
- उत्प्रेरक: क्लिक करें
- क्रिया: द्वारा ले जाएं
- दिशा ले जाएँ: एक्स अक्ष पर 65 पीएक्स
- एनीमेशन: रैखिक
- अवधि: 300 एमएस
एक बातचीत को हटाने के लिए तत्व का चयन करें और इंटरैक्शन पैनल खोलें। पैनल में बातचीत का चयन करें और इसे हटाने के लिए ट्रैश कैन पर क्लिक करें।
09 में से 09UXPin में अपने पृष्ठ का परीक्षण कैसे करें
इस तथ्य के कारण आप ब्राउज़र में काम कर रहे हैं, परीक्षण मृत सरल है। दबाएं डिजाइन अनुकरण करें बटन। पृष्ठ ब्राउज़र में खुल जाएगा और आप मार्ग का परीक्षण कर सकते हैं। पृष्ठ के बाईं तरफ एक पैनल भी जोड़ा जाएगा जो टिप्पणियों की अनुमति देता है, यदि एक से अधिक पेज हैं, उपयोगिता परीक्षण, लाइव शेयरिंग, संपादन और डैशबोर्ड पर वापसी।
पृष्ठ के निचले भाग में एक और छोटा पैनल है जो आपको इंटरएक्टिव तत्व दिखाता है, टिप्पणियां दिखाता है या छुपाता है और प्रोजेक्ट लिंक को दूसरों के साथ साझा करता है।
