01 को 09
UXPin बाट कसरी सुरु गर्न पाउनु हुन्छ
हामी मोबाइल डिजाइनको दायरामा जानुहोस्, एप्स डिजाइन र उत्तरदायी डिजाइन त्यहाँ UX (प्रयोगकर्ता अनुभव) र wireframing , पारस्परिक प्रोटोटाइप र मकअप मा बढेको फोकस भएको छ। त्यहाँ उपकरणको एक टन टाढा यो आला उद्देश्य छ र तिनीहरू जटिल, फीचर लेडीन बीथमाथीबाट पूर्ण जुवा खेल्छन् र सफा गर्न उपयोगी। मेरो आँखा पकडिएको उपकरण मध्ये एक UXPin हो किनभने यो डिजाइनरहरूको डिजाइनरहरूको द्वारा विकसित गरिएको थियो।
अगाडि बढ्नु अघि हामी ... एक caveat। यदि तपाइँको एक सफ्टवेयर हो जुन सफ्टवेयरको स्वामित्व लिन मनपर्छ त्यस पछि UXPin तपाईँका लागि होइन। यस अनुप्रयोगमा गरेको सबै काम ब्राउजरमा गरिन्छ र तपाईंले बचत गर्नुभएको परियोजनाहरू तपाईंको खातामा बचत गरिएका छन्।
UXPin को साथ सुरू गर्न तपाईंले ब्राउजर लन्च र UXPin सम्म हेड गर्नुहोस्। यहाँ बाट तपाइँ नि: शुल्क परीक्षणको लागि साइन अप गर्न सक्नुहुन्छ वा तपाइँको अपेक्षित आवश्यकताको आधारमा मासिक प्लानको व्यवस्था गर्न सक्नुहुन्छ। साइन अप प्रक्रिया एकदम सजिलो छ र एक पटक तपाईंले आफ्नो प्रयोगकर्ता नाम र पासवर्ड सेट गर्नुभयो भने, तपाइँ सुरू गर्न तयार हुनुहुन्छ।
02 को 09
UXPin मा एक परियोजना कसरी सुरु गर्ने
जब तपाईं लग इन गर्नुहुन्छ ड्याशबोर्डमा आइपुग्छ र, यहाँबाट तपाईं नयाँ तारफ्रेम, नयाँ मोबाइल परियोजना वा उत्तरदायी वेब डिजाइन प्रोजेक्ट सिर्जना गर्न निर्णय गर्न सक्नुहुनेछ। त्यहाँ UXPin को लागि प्लग-इन पनि छन् जुन तपाइँले तपाइँको फोटोशप वा स्केच परियोजनाहरू ल्याउन अनुमति दिनेछ। यसका लागि म केहि टेक्स्टसँग ब्यानर सिर्जना गर्न र ब्यानरमा इमेल बटन थप्न जाँदैछु। यो पूरा गर्न मैले चयन गरेको नयाँ तारफ्रेम सिर्जना गर्नुहोस्।
03 को 09
UXPin इन्टरफेस कसरी प्रयोग गर्ने
डिजाइन सतह चार क्षेत्रहरूमा तोडिएको छ। बाँयामा कालो क्षेत्रमा तपाइँ उपकरणहरूको एक श्रृंखला हो जुन तपाइँलाई ड्याशबोर्डमा फर्केर जानुपर्ने तत्वहरू खोल्नुहोस्, तपाईले प्रयोग गर्नुहुने तत्वहरू खोल्नुहोस्, स्मार्ट तत्व प्यानल खोल्नुहोस्, तत्वहरूको खोजी गर्नुहोस्, पृष्ठमा नोटहरू थप्नुहोस् र टोलीका सदस्यहरू थप गर्नुहोस्। तलको एउटा बटन हो जुन छोटो ट्यूटोरियल खोल्छ, अर्कोलाई तपाइँले आफ्नो खाता र अन्यलाई पहुँच गर्न अनुमति दिन्छ कि FAQ को पहुँच गर्दछ, तपाईले प्रश्न सोध्नुहुन्छ र प्रतिक्रिया प्रदान गर्नुहोस्।
माथिको नीलो क्षेत्रमा उपकरण र गुणहरूको श्रृंखला हो। दाहिने छेउमा कालो बटनले तपाइँलाई तपाइँको डिजाईन पुनरक्षण गर्न, परियोजना सेटिङ समायोजन गर्न, पृष्ठ साझेदारी गर्न र पेजको इन-ब्राउजर अनुकरण गर्न अनुमति दिन्छ।
तत्व प्यानल जहाँ तपाइँ बिट्सहरू र डिजाइन सतहको लागि टुक्राहरू लिनुहुन्छ, तपाईंको परियोजनाको नाम राख्नुहोस् र पृष्ठहरू थप्नुहोस् वा हटाउनुहोस्।
तत्वों लाइब्रेरी UX डिजाइनरहरूको लागि सुखद आश्चर्य छ। यो पप डाउनले तपाईंलाई आईओएस 30 एन्ड्रोइड ललिपपपबाट अनन 30 लाइब्रेरीहरूको छनौट गर्न अनुमति दिन्छ। साथसाथै तपाईंसँग बूटस्ट्रैप र फाउन्डेशन तत्वहरू फन्ट अद्भुत आइकनहरू, मोबाइलका लागि गेस्चर आइकनहरू र सामाजिक विजेटहरूको संग्रहको साथमा पहुँच छ।
04 को 09
एक UXPin पृष्ठमा एक तत्व थप्न कसरी
सुरू गर्न मैले बक्स तत्व डिजाईन सतहमा तान्नुभयो र, जब मैले माउस छोड्छु, गुण प्यानल खोल्छ। गुण बटनले तपाईंलाई तत्वलाई नाम दिन्छ र तत्वको चौडाइ उचाइ र स्थिति मानहरू सेट गर्दछ। तपाईं तत्वमा प्याडिंग थप्न सक्नुहुन्छ, कोनेहरू बाट राउन्ड र यसको अस्पष्टता समायोजन गर्नुहोस्। पृष्ठभूमि रङ बटन क्लिक गर्नाले RGBA रङ पिकर खोल्छ।
तपाइँले चयन गरिएको तत्वमा फन्ट, बोर्डर र ढाँचा असाइन गर्न सक्नुहुन्छ। लाइटनिंग बोल्टले तपाइँलाई चयन गरिएको तत्वमा अन्तरक्रियाशीलता थप्न सक्ने क्षमता दिन्छ।
05 को 09
UXPin मा पाठ कसरी थप्नुहोस् र ढाँचा गर्नुहोस्
पाठ थप्न, पाठ तत्व डिजाइन सतहमा तान्नुहोस् र तपाईंको पाठ प्रविष्ट गर्नुहोस्। पाठ गुण खोल्न र आफ्नो पाठ ढाँचा गर्न पाठ सम्पत्ति बटन क्लिक गर्नुहोस्। यदि तपाईंलाई डमी पाठको ब्लक चाहिन्छ भने, पाठ तत्त्व थप्नुहोस् र फन्ट गुणहरूमा GENERATE LOREM IPSUM बटन क्लिक गर्नुहोस्।
06 को 09
एक इक्सपिन पृष्ठमा एउटा छवि थप्न कसरी
यो काम पूरा गर्न केहि तरिकाहरू छन्। तपाईं उपकरणपट्टीमा छवि उपकरण प्रयोग गर्न सक्नुहुनेछ, छवि लाइब्रेरीबाट छवि तत्त्व थप्नुहोस् वा केवल डेस्कटपबाट छवि ड्र्याग गर्नुहोस् र ड्रप गर्नुहोस् जस्तै माथि देखाइएको डिजाइन सतहमा तत्व।
07 को 09
एक युक्सपिन पृष्ठमा कसरी बटन थप्नुहोस्
यद्यपि त्यहाँ एक बटन तत्व हुन्छ, खोजी क्षेत्रमा " बटन " प्रविष्ट गर्दा, माथि देखाइएको छ, सबै पुस्तकालयमा पाइने सबै बटन खोल्छ। एउटा तान्नुहोस् जो डिजाइन सतहमा तपाईंको लागि काम गर्दछ र रङ, फन्ट, र भित्री त्रिज्या परिवर्तन गर्न गुणहरू प्रयोग गर्नुहोस्। बटन भित्र पाठ परिवर्तन गर्न, पाठमा एकपटक क्लिक गर्नुहोस् र नयाँ पाठ प्रविष्ट गर्नुहोस्।
08 को 09
एक UXPin पृष्ठमा अन्तरक्रियात्मकता थप्न कसरी
यो जटिल रूपमा होइन किनकि यो पहिलो हुन सक्छ। इमेल आगतको लागि, मैले एक इनपुट तत्व थप्नुभयो, यसलाई पुन: आकार दिईयो, पाठ प्रविष्ट गरी पाठ ढाँचा। आगत तत्व चयन गरिएको गुण बटनमा क्लिक गर्नुहोस् र, जब एलिलाइट विशेषताहरू देखा पर्दछ क्लिक गर्नुहोस् दृश्यता बटन- नेत्र - प्यानलको माथिल्लो दायाँ कुनामा।
बटन चयन गर्नुहोस् र अन्तर्क्रिया बटन क्लिक गर्नुहोस् - लाइटनिंग बोल्ट- गुणहरूमा। जब अन्तरक्रिया प्यानल खुल्छ, नयाँ अन्तरक्रिया चयन गर्नुहोस्। ट्रिगर पपबाट क्लिक गर्नुहोस् क्लिक गर्नुहोस्। कार्य क्षेत्रमा चयन ए तत्व देखाउनुहोस्। अब तपाईलाई सोध्नेछ कुन तत्वलाई देखाउने। बन्दूकसाइटमा एक पटक क्लिक गर्नुहोस् र इनपुट तत्वमा क्लिक गर्नुहोस्। पहिचान को तत्व संग, अब तपाईं तत्व को चेतन गर्न को लागी या नहीं निर्धारित गर्न सक्छन्। यस अवस्थामा मैले आगत बक्समा सजिलै संग देखाउने निर्णय गरे र 300 मिलियन को डिफल्ट अवधि मानको साथ गए।
म पनि बटनमा क्लिक गर्न दाँयामा 65 पिक्सेलमा घुमाउन चाहन्छु। मैले बटन चयन गरेको छु, अन्तरक्रिया प्यानल खोलियो र चयन गरिएको नयाँ अन्तरक्रिया । मैले यी सेटिङ्हरू प्रयोग गरें:
- ट्रिगर : क्लिक गर्नुहोस्
- कार्य: द्वारा सार्नुहोस्
- दिशा सार्नुहोस् : 65 px x अक्षमा
- एनिमेशन : रैखिक
- अवधि: 300 एमएस
एक अन्तरक्रिया हटाउन तत्व चयन गर्नुहोस् र अन्तरक्रिया प्यानल खोल्नुहोस्। प्यानलमा अन्तरक्रिया चयन गर्नुहोस् र रद्दीटोकरी गर्न यो मेटाउन क्लिक गर्नुहोस्।
09 को 09
तपाईंको पृष्ठ कसरी UXPin मा परीक्षण गर्नुहोस्
तपाईले ब्राउजरमा काम गर्ने तथ्यको कारण, परीक्षण मृत सरल छ। सिमुलेट डिजाइन बटनमा क्लिक गर्नुहोस्। पृष्ठ ब्राउजरमा खोल्नेछ र तपाइँले परीक्षण गर्न सक्नुहुनेछ। त्यहाँ पृष्ठको बायाँ छेउमा प्यानल थपियो जुन टिप्पणीहरूको लागि अनुमति दिन्छ, एक साइट म्यापमा बहु पृष्ठहरू, उपयोगिता परीक्षण, प्रत्यक्ष साझेदारी, सम्पादन र ड्यासबोर्डमा फर्किने।
पृष्ठको तलमा अर्को सानो प्यानल हो जसले तपाईंलाई अन्तरक्रियात्मक तत्वहरू देखाउँछ, टिप्पणीहरू देखाउँदछ वा लुकाउन र अरूसँग अरूसँग परियोजना लिङ्क साझेदारी गर्न दिन्छ।