एडोब एक्सपीरियंस डिजाइन ट्रिक्स, टिप्स, और तकनीकें
जब एडोब ने एक सार्वजनिक पूर्वावलोकन के रूप में एक्सपीरियंस डिज़ाइन पेश किया, तो कंपनी ने एक ही समय में दो अद्भुत कामों को पूरा किया। सबसे पहले, वे उभरते प्रोटोटाइप सॉफ्टवेयर बाजार में एक जगह बाहर निकल गए। दूसरा, उन्होंने उपयोगकर्ताओं को "काम में प्रगति" के साथ खेलने का अवसर बनाया और उपयोगकर्ताओं को प्रगति को प्रभावित करने दे रहा है। अब यह एप्लिकेशन कुछ महीनों के लिए उपलब्ध है, मैंने सोचा कि यह कुछ अनुभव डिजाइन चाल, टिप्स और तकनीकों को साझा करने का एक अच्छा समय होगा।
लेकिन सबसे पहले, आप सोच रहे होंगे कि प्रोटोटाइपिंग सॉफ्टवेयर का क्या अर्थ है। इस जगह के प्रमुख खिलाड़ियों में से Proto.io, सिद्धांत, UXPin, Atomic.io, अनुभव डिजाइन और इनविजन हैं। स्केच 3, फ़ोटोशॉप और इलस्ट्रेटर जैसे अनुप्रयोगों के विपरीत जहां स्थिर डिज़ाइन तैयार किए जाते हैं, ये ग्राफिकल संपादक इंटरैक्टिविटी, गति और अन्य सुविधाओं को आज के मोबाइल और वेब डिज़ाइन स्पेस में आम तौर पर पेश करते हैं।
मोबाइल के उदय और अपरिहार्य, उपयोगकर्ता पर लेजर जैसी फोकस के साथ, डिजाइनर के लिए कुछ स्केच चाबुक करने के लिए पर्याप्त नहीं है, कुछ कंप को एक साथ खींचें और फिर प्रोजेक्ट को छोड़ दें या इसे वेब सर्वर पर अपलोड करें। यूआई / यूएक्स वर्कफ़्लो ने मूल रूप से चीजों को बदल दिया है। प्रक्रिया के प्रत्येक चरण, उपयोगकर्ता, स्केच, वायरफ्रेम, नकली, और प्रोटोटाइप की पहचान करने से अब व्यापक उपयोगकर्ता परीक्षण के अधीन हैं।
यह आखिरी चरण है - प्रोटोटाइप - जहां परियोजना के अंतिम उत्पादन में आने से पहले दर्द बिंदु खोजे और तय किए जाते हैं। यह वह जगह है जहां स्क्रीन पर सब कुछ की अंतःक्रियाशीलता, गति, स्क्रीन संक्रमण और प्लेसमेंट बहुत महत्वपूर्ण हैं। मुद्दों और समस्याओं को केवल स्थिर छवि के रूप में नहीं दिखाया जा सकता है या मौखिक रूप से समझाया जा सकता है। आखिरकार, ये उत्पाद असली इंसानों के लिए हैं। कोड के सभी को स्थानांतरित करने के बजाय, उस उद्देश्य के लिए डिज़ाइन किए गए ग्राफिक्स सॉफ़्टवेयर द्वारा प्रोटोटाइप प्रक्रिया को तेजी से किया जा रहा है। किसी गलती को ठीक करना, किसी छवि को प्रतिस्थापित करना, कुछ पाठ दोबारा लिखना, बटन को ले जाना और फिर लगातार रीमार्केटिंग और डिबगिंग कोड की तुलना में दृश्य संपादक का उपयोग करना आसान है।
वास्तव में, यह सॉफ्टवेयर आज के "रैपिड प्रोटोटाइप" डिजाइन और विकास पर्यावरण में एक महत्वपूर्ण घटक बन गया है।
इसके साथ, चलो अनुभव डिजाइन के साथ कुछ मज़ा है।
07 में से 02एडोब एक्सपीरियंस डिज़ाइन में एक सरल सर्किल के साथ गंतव्य पिन बनाएं
एक्सडी का एक साफ पहलू वेक्टर ड्राइंग टूल्स का उपयोग है। आइकन नहीं मिल रहा है? कोई बात नहीं। अपना खुद का रोल करो। ऐसे:
- चुनते हैं एलिप्स उपकरण और, विकल्प / Alt-Shift कुंजी दबाकर, एक सर्कल खींचे।
- चयनित सर्कल के साथ, सेट करें एफएफ 0000 रंग भरें और गुणों में सीमा "कोई नहीं"।
- एंकर पॉइंट दिखाने के लिए सर्कल को डबल-क्लिक करें। नीचे एंकर नीचे खींचें।
- चयनित एंकर पॉइंट को डबल-क्लिक करें और वक्र को लाइनों के साथ बदल दिया गया है।
- एक सफेद भरने और कोई स्टोक के साथ एक और छोटा सर्कल ड्रा। इसे स्थिति में ले जाएं और पिन और सर्कल का चयन करें। गुणों के शीर्ष पर संरेखण पैनल में क्षैतिज केंद्र बटन पर क्लिक करें और पिन बनाया गया है।
एडोब एक्सपीरियंस डिज़ाइन में पृष्ठभूमि ब्लर बनाएं
पृष्ठभूमि छवि पर टेक्स्ट या अन्य सामग्री रखना आम बात है। यहां समस्या यह है कि छवि, अधिक से अधिक नहीं, इसके ऊपर की सामग्री को अधिक शक्ति प्रदान करती है। इस मुद्दे को हल करने का एक तरीका पृष्ठभूमि छवि को धुंधला करना है। आप फ़ोटोशॉप या अन्य छवि संपादन सॉफ्टवेयर में छवि को धुंधला कर सकते हैं, लेकिन यह कुछ हद तक अक्षम है, खासकर जब से एक्सडी आपके लिए इस कार्य को संभाल सकता है। ऐसे:
- एक नया आर्टबोर्ड बनाएं और अपनी पृष्ठभूमि छवि जोड़ें।
- आयत उपकरण का चयन करें एछवि पर एक आयत खींचें। आयताकार के साथ, भरने के लिए सफेद और स्ट्रोक को कोई भी सेट करें।
- आयत के साथ चयनित, पृष्ठभूमि धुंध का चयन करें गुण पैनल में। तीन स्लाइडर ब्लर राशि, चमक और अस्पष्टता हैं। यहां वे क्या करते हैं:
- धुंध राशि: आकार के नीचे छवि की धुंध समायोजित करता है। अधिकतम मूल्य +50 है।
- चमक: छवि में हाइलाइट्स और छाया समायोजित करें। न्यूनतम मूल्य -50 है और अधिकतम मूल्य +50 है।
- अपारदर्शिता: आकृति के पारदर्शीपन और आकार के नीचे छवि की दृश्यता को प्रभावित करता है। मान 0% से 100% तक हैं।
यदि आप वास्तव में "चीजों को स्विच करना" चाहते हैं, तो आकार के रंग को बदलें और छवि के "लुक" को बदलने के लिए अस्पष्टता मान के साथ खेलो।
07 का 04एडोब एक्सपीरियंस डिज़ाइन में एक स्क्रिम बनाएं
एक सामान्य डिजाइन समस्या इंटरफ़ेस तत्व तत्वों को एक सामान्य रंग होना चाहिए, लेकिन पृष्ठभूमि छवि या ठोस रंग पर रखे जाने पर खो जाते हैं। समाधान एक scrim है। एक scrim इंटरफ़ेस तत्व और पृष्ठभूमि के बीच कुछ हद तक अपारदर्शी ढाल है। यह एक्सडी में पूरा करना आसान है। ऐसे:
- एक्सडी में अपना आर्टबोर्ड बनाएं, एक छवि जोड़ें और उचित से एक इंटरफेस तत्व कॉपी और पेस्ट करें यूआई किट - फाइल> ओपन यूआई किट … - आर्टबोर्ड में। उपर्युक्त छवि में फोटो स्टेटस बार और ऐप बार को देखना मुश्किल बनाता है।
- आयत उपकरण का चयन करें और एक आयत खींचें। प्रॉपर्टी पैनल में रंग पिकर में पॉप डाउन से ग्रेडियेंट भरें और चुनें। ढाल रंगों को काले और सफेद रंग में सेट करें। एक मान सेट करें - अस्पष्टता- 60% और यह सफेद एक मूल्य 0%।
- आयत के साथ चयनित, ऑब्जेक्ट> व्यवस्थित करें> पिछड़ा भेजें चुनें। इंटरफेस तत्व अब छवि पर दिखाई दे रहे हैं।
एडोब एक्सपीरियंस डिज़ाइन में एक छवि अवतार बनाएं
चैट ऐप्स में एक आम डिजाइन पैटर्न मिलता है जहां लोग एक-दूसरे से बात करते हैं और स्पीकर की तस्वीर स्क्रीन पर दिखाई देती है। ये अवतार आम तौर पर छवियों को मुखौटा कर दिया जाता है। एक्सडी में यह मृत सरल है। ऐसे:
- आप आर्टबोर्ड पर एक छवि और एक सर्कल या अन्य आकार के साथ शुरू करते हैं। आप सर्कल को किसी भी रंग से भर सकते हैं। स्ट्रोक रंग जोड़ने के लिए आपको क्या करने की ज़रूरत नहीं है। जब आप प्रभाव बनाते हैं तो यह गायब हो जाएगा, तो परेशान क्यों करें। यदि आपको सर्कल को रोकने की आवश्यकता है, तो उसे क्लिपबोर्ड पर कॉपी करें।
- सर्कल को छवि पर ले जाएं और छवि और सर्कल दोनों का चयन करें। बॉट वस्तुओं का चयन के साथ, ऑब्जेक्ट> आकार के साथ मास्क का चयन करें। जब आप माउस छोड़ते हैं, अवतार बनाया जाता है। वहां से आप इसका आकार बदल सकते हैं।
- यदि आपको स्ट्रोक जोड़ने की आवश्यकता है, तो अपने क्लिपबोर्ड पर बैठे सर्कल को आर्टबोर्ड पर पेस्ट करें। चयनित प्रतिलिपि के साथ गुणों में भरें बंद करें और स्ट्रोक रंग और चौड़ाई जोड़ें। उन्हें लाइन करने के लिए, दोनों ऑब्जेक्ट्स का चयन करें और गुण पैनल के शीर्ष पर संरेखण विकल्पों में केंद्र संरेखण बटन पर क्लिक करें।
- यदि आप मास्क में फोटो को चारों ओर ले जाना चाहते हैं, मास्क पर डबल क्लिक करें। यह छवि और मुखौटा आकार दिखाएगा। छवि पर क्लिक करें और इसे स्थिति में खींचें। जब आप माउस को छोड़ देते हैं, तो छवि मास्क के अंदर अपनी नई स्थिति में होगी।
एडोब एक्सपीरियंस डिजाइन आर्टबोर्ड के साथ खेलो
अनुभव डिज़ाइन आर्टबोर्ड केवल सामग्री रखने के लिए नहीं हैं। वे भी, छेड़छाड़ की जा सकती है। यहां कुछ चीज़ें दी गई हैं जो आप कर सकते हैं:
- यदि आपको किसी आर्टबोर्ड के लैंडस्केप और पोर्ट्रेट संस्करणों की आवश्यकता है, तो आर्टबोर्ड को डुप्लिकेट करें और चयनित डुप्लिकेट के साथ, प्रॉपर्टी पैनल में लैंडस्केप बटन पर क्लिक करें। आर्टबोर्ड लैंडस्केप ओरिएंटेशन में बदल जाएगा। यदि आर्टबोर्ड पर इसकी सामग्री है, तो आर्टबोर्ड के नाम पर क्लिक करें और आर्टबोर्ड गुण प्रॉपर्टी पैनल में दिखाई देंगे।
- आर्टबोर्ड में कस्टम रंग जोड़ने के लिए, और उस मामले के लिए प्रोजेक्ट जोड़ने के लिए, आर्टबोर्ड का चयन करें और प्रॉपर्टी पैनल के उपस्थिति अनुभाग में भरें रंग चिप पर क्लिक करें। रंग के लिए हेक्साडेसिमल मान दर्ज करें और + चिह्न पर क्लिक करें। रंग कस्टम रंग के रूप में जोड़ा जाएगा। उस रंग को कहीं और लागू करने के लिए, ऑब्जेक्ट का चयन करें और रंग लागू करने के लिए कस्टम रंग चिप पर क्लिक करें।
- आर्टबोर्ड को लंबवत स्क्रोल करने योग्य बनाया जा सकता है। ऐसा करने के लिए, आर्टबोर्ड का चयन करें और अपनी ऊंचाई को या तो गुण पैनलों पर या आर्टबोर्ड के नीचे खींचकर नीचे बदलें। गुण पैनल के स्क्रॉल करने योग्य क्षेत्र में, पॉप डाउन मेनू से लंबवत का चयन करें और स्क्रीन के लिए व्यूपोर्ट ऊंचाई दर्ज करें। वह धराशायी नीली रेखा आपको व्यूपोर्ट के नीचे दिखाती है। इसका परीक्षण करने के लिए, प्ले बटन पर क्लिक करें और स्क्रॉल करें। स्क्रॉलिंग को बंद करने के लिए, स्क्रॉलिंग पॉप डाउन में कोई भी चुनें।
एडोब एक्सपीरियंस डिज़ाइन में एक मोबाइल यूआई किट संपादित करें
अनुभव डिजाइन में आईओएस, एंड्रॉइड और विंडोज यूआई के विकास के लिए यूआई किट शामिल है। जब आप उन्हें पहली बार खोलते हैं, तो आप सोच सकते हैं कि वे जगह पर बहुत अच्छी तरह से सेट हैं। काफी नहीं है कि उन किटों में से प्रत्येक बिट्स और टुकड़े पूरी तरह संपादन योग्य हैं। आइए एक एंड्रॉइड वायरफ्रेम बनाकर पता लगाएं।
- आप आर्टबोर्ड टूल का चयन करके और चयन करके शुरू करते हैं प्रॉपर्टी पैनल के Google सेक्शन में एंड्रॉइड मोबाइल.
- फ़ाइल> ओपन यूआई किट> Google सामग्री का चयन करें। यह सामग्री डिजाइन यूआई किट खोलता है। बढ़ते ग्लास और मार्की टी का चयन करेंवह स्क्रीन गाइड आर्टबोर्ड। मुझे इस से शुरुआत करना पसंद है क्योंकि यह मुझे इंटरफ़ेस तत्वों के उचित ऑन-स्क्रीन प्लेसमेंट के लिए मार्गदर्शिका देता है। यदि आप ब्लू बार में से किसी एक पर क्लिक करते हैं तो आप देखेंगे कि यह लॉक है। इसे अनलॉक करने के लिए उनमें से प्रत्येक से जुड़े लॉक पर क्लिक करें। आर्टबोर्ड मार्की और क्लिपबोर्ड पर चयन की प्रतिलिपि बनाएँ। अपने दस्तावेज़ पर लौटें और स्क्रीन को अपने आर्टबोर्ड में पेस्ट करें।
- आर्टबार के शीर्ष पर ऐप बार पर एक बार क्लिक करें। ध्यान दें कि आप इसे कैसे चुन सकते हैं।ऑब्जेक्ट> व्यवस्थित करें> सामने लाएं चुनें। आपका चयन अब स्क्रीन गाइड के ऊपर है। यह आपको बताएगा कि स्क्रीन पर मौजूद प्रत्येक तत्व को संपादित करने में सक्षम है।
- स्टेटस बार पर डबल क्लिक करें शीर्ष पर और, गुण पैनल मेंऔर 455 ए 64 तक भरें रंग। ऐप बार पर डबल क्लिक करें और इसकी भरें 607 डी 8 बी पर सेट करें। यह आपको यूआई किट में प्रत्येक तत्व को परियोजना के रंग विनिर्देशों को पूरा करने के लिए संपादित किया जा सकता है।
- आइकन के बारे में क्या? यहां उनके रंग को बदलने का तरीका बताया गया है। डबल क्लिक करें दिल इसे चुनने के लिए। यदि आप प्रॉपर्टी पैनल देखते हैं, तो आप मान सकते हैं कि आप चयन संपादित नहीं कर सकते हैं। काफी नहीं। एक बार दिल को डबल क्लिक करें। गुण खुले हैं और आप भरने वाले रंग को FF0000 में बदलते हैं। शेष आइकन और टेक्स्ट के लिए इस डबल-डबल-क्लिक चाल को दोहराएं।
