अडोब अनुभव डिझाईन युक्त्या, टिपा, आणि तंत्र

01 ते 07

अडोब अनुभव डिझाईन युक्त्या, टिपा, आणि तंत्र

जेव्हा Adobe ने पब्लिक पुर्व्हवेझ म्हणून अनुभव डिझाइन सादर केले, तेव्हा कंपनीने एकाच वेळी दोनदा आश्चर्यकारक गोष्टी पूर्ण केल्या. प्रथम, त्यांनी उदयोन्मुख प्रोटोटाइप सॉफ्टवेअर बाजारात एक जागा घोटाळा. दुसरे म्हणजे, त्यांनी वापरकर्त्यांना "कार्य प्रगतीपथावर" खेळण्याची संधी उपलब्ध करून दिली आणि वापरकर्त्यांना त्या प्रगतीवर प्रभाव पाडण्यास अनुमती दिली. आता काही महिन्यांपर्यंत हा अनुप्रयोग उपलब्ध आहे, मला वाटले की काही अनुभव डिझाईन युक्त्या, टिपा आणि तंत्र सामायिक करण्याची ही चांगली वेळ असेल.

प्रोटोटाइप सॉफ्टवेअरचा अर्थ काय आहे हे आधी विचार करता येईल. या जागेतील प्रमुख खेळाडूंपैकी प्रॉटो.इओ, प्रिन्सिपल, यूएक्सपीन, अणुअभियांत्रिकी , एक्सपिरियन्स डिझाइन आणि इनव्हीजन आहेत. अशा स्केच 3, फोटोशॉप आणि इलस्ट्रेटरसारख्या ऍप्लिकेशन्सच्या विपरीत, जिथे स्थिर डिझाईन तयार केले जातात, हे चित्रलेखीय संपादक आजच्या मोबाईल आणि वेब डिझाइन जागेत आंतरक्रियाशीलता, हालचाली आणि इतर वैशिष्ट्यांचा परिचय देतात.

वापरकर्त्याच्या मोबाईलवर आणि अपरिहार्य उद्रेवामुळे, लेसर सारख्या वापरकर्त्यावर लक्ष केंद्रित करणे, काही डिझाईर काही स्केचेस चार्ज करण्यासाठी पुरेसे नाही, काही कॉम्प्स एकत्र करा आणि नंतर प्रोजेक्ट सोडा किंवा वेब सर्व्हरवर अपलोड करा UI / UX वर्कफ़्लोने मुळात गोष्टी बदलल्या आहेत. प्रक्रियेचा प्रत्येक चरण, वापरकर्त्यास ओळखण्यापासून, स्केचेस, वायरफ्रेम, मॉकअप आणि प्रोटोटायिंग आता विस्तृत वापरकर्ता चाचणीच्या अधीन आहे.

हे शेवटचे टप्पा आहे- प्रोटोटायिपिंग - जेव्हा अंतिम उत्पादनामध्ये प्रकल्प आणले जातात तेव्हाचे वेदनांचे गुण शोधून काढले जातात. येथेच परस्पर क्रियाशीलता, हालचाल, पडदा संक्रमणे आणि स्क्रीनवरील प्रत्येक गोष्टीचे स्थान इतके गंभीर आहे. समस्या आणि समस्या केवळ स्थिर प्रतिमा म्हणून दर्शविले जाऊ शकत नाही किंवा तोंडी स्पष्ट केली जाऊ शकत नाहीत. अखेरीस, ही उत्पादने वास्तविक मानवांसाठी आहेत त्या कोडमध्ये सर्व हलविण्याऐवजी, प्रोटोटाइप प्रक्रियेची वाढत्या अंमलबजावणी ग्राफिक्स सॉफ्टवेअरद्वारे करण्यात येत आहे जी त्या प्रयोजनासाठी केली आहे. एखाद्या त्रुटीचे निराकरण करणे, एका प्रतिमेस पुनर्स्थित करणे, काही मजकूर पुन्हा लिहीणे, बटण फिरवणे आणि सतत कोड पुन्हा लिहिणे आणि डीबगिंग करण्यापेक्षा व्हिज्युअल संपादक वापरणे सोपे आहे.

खरं तर, आजच्या "रॅपिड प्रोटोटाइपिंग" डिझाईन आणि विकास वातावरणात हे सॉफ्टवेअर मुख्य घटक बनले आहे.

म्हणाले की, अनुभव डिझाइनसह काही मजा द्या.

02 ते 07

अडोब अनुभव डिझाईनमध्ये साध्या मंडळासह गंतव्य पिन तयार करा

XD चे एक सुबोधक पैलू वेक्टर ड्रॉइंग साधनांचा वापर आहे. चिन्ह सापडत नाही? काही हरकत नाही आपल्या स्वत: च्या रोल करा. कसे ते येथे आहे:

1. ओलिप्से टूल निवडा आणि, पर्याय / Alt-Shift की दाबल्यास, एक वर्तुळ काढा.
2. निवडलेल्या मंडळासह, FF0000 मध्ये फिल रंग आणि गुणधर्मांमध्ये "none" पर्यंत बॉर्डर सेट करा.
3. अँकर बिंदू दर्शविण्यासाठी मंडळ दुहेरी-क्लिक करा. खालचा अँकर खाली ओढा
4. निवडलेल्या अँकर पॉइण्ट वर दोनवेळा क्लिक करा आणि वक्र ओळींसह बदलले आहेत.
5. पांढरे भरलेले एक लहान मंडळ आणि स्टोक नाही. त्याला स्थितीत हलवा आणि पिन आणि मंडळ निवडा प्रॉपर्टीजच्या सर्वात वर असलेल्या संरेखन पॅनेलमध्ये Horizontal Centre बटण क्लिक करा आणि पिन तयार होईल.

03 पैकी 07

Adobe अनुभव डिझाइनमध्ये एक पार्श्वभूमी अंधूक तयार करा

पार्श्वभूमी प्रतिमेवर मजकूर किंवा अन्य सामग्री असणे सामान्य आहे. येथे समस्या ही प्रतिमा आहे, अधिक वेळा नाही, तिच्या वरील सामग्रीवर अधिक जोर देते. या समस्येचे निराकरण करण्याचा एक मार्ग म्हणजे पार्श्वभूमीची प्रतिमा अस्पष्ट करणे आपण फोटोशॉप किंवा अन्य प्रतिमा संपादन सॉफ्टवेअरमध्ये प्रतिमा अस्पष्ट करू शकता परंतु हे काहीसे अकार्यक्षम आहे, विशेषत: XD आता हे कार्य आपल्यासाठी हाताळू शकते. कसे ते येथे आहे:

1. एक नवीन आर्टबोर्ड तयार करा आणि आपली पार्श्वभूमी प्रतिमा जोडा
2. आयत टूल निवडा आणि चित्रांवर एक आयत काढा. आयत निवडल्याबरोबर, Fill to White आणि Stroke to None असे सेट करा.
3. आयत निवडल्याबरोबर, गुणधर्म पॅनेलमधील Background Blur निवडा . तीन स्लाइडर ब्लर राइट्स, ब्राइटनेस आणि ओपॅसिटी आहेत. ते काय करतात ते येथे आहे:

• अंधुक रक्कम: आकार खाली प्रतिमा blurriness समायोजित अधिकतम मूल्य +50 आहे
• ब्राइटनेस: प्रतिमेत हायलाइट्स आणि सावल्या समायोजित करते. किमान मूल्य -50 आणि अधिकतम मूल्य +50 आहे.
• अपारदर्शकताः आकाराच्या पारदर्शकता आणि आकार अंतर्गत प्रतिमा दृश्यमानता प्रभावित करते. मूल्ये 0% ते 100% पर्यंत आहेत.

आपण खरोखर "गोष्टी बदलू इच्छित असल्यास", आकाराचे रंग बदलू आणि प्रतिमाची "देखावा" बदलण्यासाठी Opacity मूल्य घेऊन खेळू शकता.

04 पैकी 07

अडोब एक्सपिरियन्स डिझाइन मधील सिंचन तयार करा

एक सामान्य डिझाइन समस्या म्हणजे इंटरफेस घटका घटकांना एक सामान्य रंग असणे आवश्यक आहे परंतु पार्श्वभूमी प्रतिमेवर किंवा घनते रंगावर ठेवल्यास ते गमावले जातात. उपाय एक scrim आहे. एक scrim इंटरफेस घटक आणि पार्श्वभूमी दरम्यान ठेवलेल्या एक थोडी अपारदर्शक ग्रेडियंट आहे. हे XD मध्ये पूर्ण करणे सोपे आहे कसे ते येथे आहे:

1. XD मध्ये आपले आर्टबोर्ड तयार करा, एक प्रतिमा जोडा आणि योग्य UI किट - फाइल> ओपन UI किट ... मधील इंटरफेस घटक कॉपी आणि पेस्ट करा ... - आर्टबॉर्डमध्ये उपरोक्त प्रतिमेत फोटो स्टेटस बार आणि अॅप बार पाहणं अवघड करते.
2. आयत साधन निवडा आणि आयत काढा. गुणधर्म पॅनेलमधील रंग निवडक मध्ये पॉप डाउन मधून ग्रेडियंट निवडा आणि निवडा. ग्रेडीयन कलर ब्लॅक अॅण्ड व्हाईट मध्ये सेट करा. A मूल्य - अपारदर्शकता- 60% आणि पांढरे अ मूल्य 0% असे सेट करा .
3. आयत निवडल्याबरोबर, ऑब्जेक्ट> क्रम लावा> बॅकवर्ड पाठवा निवडा . इंटरफेस घटक आता प्रतिमेवर दृश्यमान आहेत.

05 ते 07

Adobe Experience Design मध्ये एक प्रतिमा अवतार तयार करा

चॅट अॅप्समधील एक सामान्य डिझाईन पॅटर्न आढळते जेथे लोक एकमेकांशी बोलतात आणि स्क्रीनवर स्पीकरचे चित्र दिसते. हे अवतार सामान्यत: प्रतिमा आहेत जे नकाशावर केले गेले आहेत. हे एक्सडी मध्ये मृत साधी साध्य आहे कसे ते येथे आहे:

1. आपण आर्टबोर्डवरील प्रतिमा आणि मंडळासह किंवा अन्य आकारासह प्रारंभ करता आपण कोणत्याही रंगासह मंडळ भरू शकता. आपल्याला स्ट्रोक रंग जोडण्याची आवश्यकता नाही. आपण प्रभाव निर्माण केल्यावर हे अदृश्य होईल, मग का त्रास आहे. आपल्याला मंडळाला ठोठावण्याची आवश्यकता असल्यास, ती क्लिपबोर्डवर कॉपी करा
2. वर्तुळाला इमेज वर हलवा आणि इमेज आणि वर्तुळ दोन्ही निवडा. निवडलेल्या बॉट ऑब्जेक्ट्ससह, ऑब्जेक्ट> मास्क ऑब्जेक्ट निवडा . जेव्हा आपण माऊस सोडता, तेव्हा अवतार तयार होते. तिथून आपण त्याचा आकार बदलू शकता.
3. आपल्याला स्ट्रोक जोडण्याची आवश्यकता असल्यास, कलाबोर्डवर आपल्या क्लिपबोर्डवर बसलेला मंडळ पेस्ट करा निवडलेल्या प्रति ने गुणधर्मांमध्ये भरून बंद करा आणि स्ट्रोक रंग आणि रुंदी जोडा. अप लाईन करण्यासाठी दोन्ही ऑब्जेक्ट निवडा आणि प्रॉपर्टीस पॅनेलच्या सर्वात वर असलेल्या Align पर्यायातील सेंटर संरेखन बटणावर क्लिक करा.
4. आपण मास्कमध्ये सुमारे फोटो हलवू इच्छित असल्यास, मास्क वर डबल क्लिक करा. हे चित्र आणि मास्क आकार दर्शवेल. प्रतिमेवर क्लिक करा आणि स्थितीत त्यास ड्रॅग करा. जेव्हा आपण माऊस सोडता, तेव्हा प्रतिमा मास्कच्या आत त्याच्या नव्या स्थितीत असेल.

06 ते 07

अडोब अनुभव डिझाईन कलाबोर्डसह खेळा

आपल्यासाठी सामग्री ठेवण्यासाठी अनुभव डिझाईन आर्टबॉर्ड्स केवळ तेथे नाहीत ते देखील, हाताळले जाऊ शकते. येथे काही गोष्टी आहेत ज्या आपण करू शकता:

1. जर आपल्याला आर्टबोर्डच्या लँडस्केप आणि पोर्ट्रेट आवृत्त्यांची गरज असेल, आर्टबोर्ड ची नक्कल करा आणि, निवडलेल्या डुप्लिकेटसह, गुणधर्म पॅनेलमधील लँडस्केप बटणावर क्लिक करा. आर्टबोर्ड लँडस्केप अभिमुखतेमध्ये बदलेल. जर आर्टबोर्डवर सामग्री आहे, तर कलाबोर्डचे नाव क्लिक करा आणि अॅर्टबोर्ड गुणधर्म गुणधर्म पॅनेलमध्ये दिसतील.
2. आर्टबोर्डवर एक सानुकूल रंग जोडण्यासाठी, आणि त्यादृष्टीनेचा प्रोजेक्ट, आर्टबोर्ड निवडा आणि प्रॉपर्टीस पॅनेलच्या स्वरूप विभागात फिल रंग चिन्हावर क्लिक करा. रंगासाठी हेक्झाडेसीमल मूल्य प्रविष्ट करा आणि + चिन्हावर क्लिक करा. रंग सानुकूल रंग म्हणून जोडला जाईल. त्या इतर रंगास लागू करण्यासाठी, ऑब्जेक्ट निवडा आणि रंग लागू करण्यासाठी कस्टम कलर चिप क्लिक करा.
3. आर्टबोर्डना अनुलंब स्क्रॉल केले जाऊ शकते. हे करण्यासाठी, आर्टबोर्ड निवडा आणि त्याची उंची गुणधर्म पॅनेलवर किंवा आर्टबोर्डच्या तळाशी खाली खेचून बदला. गुणधर्म पटल च्या स्क्रोल करण्यायोग्य क्षेत्रामध्ये, पॉप डाउन मेनूमधून अनुलंब निवडा आणि स्क्रीनसाठी व्ह्यूपोर्टची उंची प्रविष्ट करा. डॅशड ब्लू रेषा आपणास व्ह्यूपोर्टच्या तळाशी दाखविते. त्याची चाचणी घेण्यासाठी, प्ले करा बटण क्लिक करा आणि दूर स्क्रॉल करा स्क्रोलिंग बंद करण्यासाठी, स्क्रोलिंगमध्ये काहीही नाही पॉप डाउन निवडा.

07 पैकी 07

Adobe Experience Design मध्ये मोबाइल UI किट संपादित करा

अनुभव डिझाइनमध्ये iOS, Android आणि Windows UI चे विकसित करण्यासाठी एक UI किट आहे. जेव्हा आपण प्रथम त्यांना उघडता तेव्हा आपल्याला असे वाटेल की ते खूप चांगले असतात. या किट्समधील बिट्स आणि तुकड्यांच्या प्रत्येक गोष्टी पूर्णपणे संपादनयोग्य नाहीत. Android वायरफ्रेम तयार करून शोधू या.

1. आपण प्रॉपर्टीस पॅनेलच्या Google विभागामध्ये आर्टबोर्ड टूल निवडून आणि Android मोबाईल निवडून प्रारंभ करता.
2. फाइल> ओपन UI किट> Google साहित्य निवडा . हे मटेरियल डिझाईन UI किट उघडते. भव्यता ग्लास निवडा आणि तो विहंगावलोकन स्क्रीन मार्गदर्शकांचे आर्टबोर्ड मला हे एक सुरूवात करणे आवडते कारण ते मला इंटरफेस घटकांच्या योग्य ऑन-स्क्रीन प्लेसमेंटसाठी मार्गदर्शक देते. आपण ब्लू बारपैकी एकावर क्लिक केले तर आपल्याला लॉक केले जाईल. त्यास प्रत्येक अनलॉक करण्यासाठी लॉक जोडलेले आहे . आर्किटेक्टची रचना करा आणि क्लिपबोर्डवर निवड कॉपी करा. आपल्या दस्तऐवजावर परत जा आणि स्क्रीन आपल्या आर्टबॉर्डवर पेस्ट करा.
3. अॅप बार वर एकदा क्लिक करा जे आर्टबोर्डच्या शीर्षस्थानी आहे लक्षात घ्या की आपण ते कसे निवडू शकता. ऑब्जेक्ट निवडा> व्यवस्था करा> समोर आणा आपली निवड स्क्रीन मार्गदर्शकांपेक्षा वर आहे. हे आपल्याला स्क्रीनवरील प्रत्येक घटक संपादित करू शकेल हे सांगणे आवश्यक आहे.
4. डबल शीर्षस्थानी स्टेटस बार वर आणि, गुणधर्म पॅनेलमधील आणि फिल रंगाने 455A64 वर क्लिक करा . अॅप बारवर दोनदा क्लिक करा आणि त्याची भरण 607 डी 8 बी वर सेट करा. हे आपल्याला प्रोजेक्टचे रंग तपशील पूर्ण करण्यासाठी एक UI किटमध्ये प्रत्येक घटक संपादित केला जाऊ शकतो हे सांगणे आवश्यक आहे.
5. चिन्हांबद्दल काय? त्यांचे रंग कसे बदलावे ते येथे आहे. हे निवडण्यासाठी त्यावर डबल क्लिक करा . आपण गुणधर्म पॅनेलकडे पहात असाल तर आपण असे मानू शकता की आपण निवड संपादित करू शकत नाही. फार नाही हृदय आणखी एकदा वर क्लिक करा गुणधर्म उघडा आणि आपण FF0000 मध्ये भरलेले रंग बदलू शकता. उर्वरित चिन्हे आणि मजकूरासाठी या डबल-डबल-क्लिक युक्तीची पुनरावृत्ती करा.