यूएक्सपीन के साथ खुद को कैसे शुरू करें

09 का 01

यूएक्सपीन के साथ खुद को कैसे शुरू करें

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

आगे बढ़ने से पहले ... एक चेतावनी। यदि आपका संगठन ऐसा संगठन है जो सॉफ़्टवेयर का मालिक होना पसंद करता है तो यूएक्सपीन आपके लिए नहीं है। इस ऐप में किए गए सभी काम ब्राउज़र में किए जाते हैं और आपके द्वारा सहेजी गई परियोजनाओं को आपके खाते में सहेजा जाता है।

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

02 में से 02

UXPin में एक परियोजना कैसे शुरू करें

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

03 का 03

यूएक्सपीन इंटरफेस का उपयोग कैसे करें

डिजाइन सतह चार क्षेत्रों में टूट गई है। बाईं ओर के काले क्षेत्र में उपकरण की एक श्रृंखला है जो आपको डैशबोर्ड पर वापस जाने देती है, आपके द्वारा उपयोग किए जाने वाले तत्वों को खोलें, स्मार्ट एलिमेंट्स पैनल खोलें, तत्वों की खोज करें, पृष्ठ पर नोट्स जोड़ें और टीम के सदस्यों को जोड़ें। नीचे एक बटन है जो एक छोटा ट्यूटोरियल खोलता है, दूसरा जो आपको अपने खाते तक पहुंचने की अनुमति देता है और दूसरा जो FAQs तक पहुंचता है, आइए आप प्रश्न पूछें और यहां तक ​​कि प्रतिक्रिया दें।

शीर्ष के साथ नीले क्षेत्र में उपकरण और गुणों की एक श्रृंखला है। दाएं तरफ के गहरे बटन आपको अपने डिज़ाइन को पुन: सक्रिय करने, प्रोजेक्ट सेटिंग्स को समायोजित करने, पृष्ठ साझा करने और पृष्ठ के इन-ब्राउज़र सिमुलेशन करने की अनुमति देते हैं।

एलिमेंट्स पैनल वह जगह है जहां आप डिज़ाइन सतह के लिए बिट्स और टुकड़े लेते हैं, अपनी प्रोजेक्ट का नाम देते हैं और पृष्ठों को जोड़ते या हटाते हैं।

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

04 का 04

एक UXPin पृष्ठ पर एक तत्व कैसे जोड़ें

शुरू करने के लिए मैंने बॉक्स तत्व को डिज़ाइन सतह पर खींच लिया और, जब मैं माउस छोड़ता हूं, तो प्रॉपर्टी पैनल खुलता है। गुण बटन आपको तत्व का नाम देने और तत्व की चौड़ाई ऊंचाई और स्थिति मान सेट करने देता है। आप तत्वों में पैडिंग भी जोड़ सकते हैं, कोनों से घूमते हैं और इसकी अस्पष्टता समायोजित कर सकते हैं। पृष्ठभूमि रंग बटन पर क्लिक करने से एक आरजीबीए रंग पिकर खुलता है।

आप चयनित तत्व को फ़ॉन्ट, सीमा और पैटर्न भी निर्दिष्ट कर सकते हैं। लाइटनिंग बोल्ट आपको किसी चयनित तत्व पर अंतःक्रियाशीलता जोड़ने की क्षमता देता है।

05 में से 05

UXPin में टेक्स्ट कैसे जोड़ें और प्रारूप कैसे करें

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

06 का 06

एक यूएक्सपीन पेज पर एक छवि कैसे जोड़ें

इस कार्य को पूरा करने के कुछ तरीके हैं। आप टूलबार में छवि उपकरण का उपयोग कर सकते हैं, लाइब्रेरी से एक छवि तत्व जोड़ सकते हैं या ऊपर दिखाए गए अनुसार डिजाइन सतह पर तत्व पर अपने डेस्कटॉप से ​​एक छवि खींचें और छोड़ें।

07 का 07

एक UXPin पृष्ठ पर एक बटन कैसे जोड़ें

यद्यपि कोई बटन तत्व है, ऊपर दिखाए गए अनुसार खोज क्षेत्र में " बटन " दर्ज करना, सभी पुस्तकालयों में पाए गए सभी बटन खोलता है। उस डिज़ाइन को खींचें जो आपके लिए डिज़ाइन सतह पर काम करता है और रंग, फ़ॉन्ट और यहां तक ​​कि सीमा त्रिज्या को बदलने के लिए गुणों का उपयोग करें। बटन के अंदर पाठ को बदलने के लिए, टेक्स्ट पर एक बार क्लिक करें और नया टेक्स्ट दर्ज करें।

08 का 08

एक UXPin पृष्ठ पर अंतःक्रियाशीलता कैसे जोड़ें

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

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

जब भी क्लिक किया जाता है तो मैं बटन को 65 पिक्सल तक दाएं स्थानांतरित करना चाहता हूं। मैंने बटन का चयन किया, इंटरैक्शन पैनल खोला और नई इंटरैक्शन का चयन किया। मैंने इन सेटिंग्स का इस्तेमाल किया:

• ट्रिगर : क्लिक करें
• कार्यवाही: द्वारा ले जाएं
• दिशा निर्देश : एक्स अक्ष पर 65 पीएक्स
• एनीमेशन : रैखिक
• अवधि: 300 एमएस

एक बातचीत को हटाने के लिए तत्व का चयन करें और इंटरैक्शन पैनल खोलें। पैनल में बातचीत का चयन करें और इसे हटाने के लिए ट्रैश कैन पर क्लिक करें।

09 में से 09

UXPin में अपने पृष्ठ का परीक्षण कैसे करें

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

पृष्ठ के निचले भाग में एक और छोटा पैनल है जो आपको इंटरएक्टिव तत्व दिखाता है, टिप्पणियां दिखाता है या छुपाता है और प्रोजेक्ट लिंक को दूसरों के साथ साझा करता है।