Adobe अनुभव डिजाइन ट्रिक्स, सुझावहरू, र प्रविधिहरू

01 को 07

Adobe अनुभव डिजाइन ट्रिक्स, सुझावहरू, र प्रविधिहरू

जब Adobe ले सार्वजनिक पूर्वावलोकनको रूपमा अनुभव डिजाइन प्रस्तुत गरे, कम्पनीले एकै समयमा दुई अचम्मको अचम्मको पात पूरा गर्यो। पहिलो, तिनीहरूले उभरिरहेको प्रोटोटाइप सफ्टवेयर मार्केटमा एक ठाउँ टाँस्यो। दोस्रो, तिनीहरूले प्रयोगकर्ताहरूलाई "काम-इन-प्रगति" सँग खेल्नको लागि एक अवसर सिर्जना गर्दछन् र प्रयोगकर्ताहरूले प्रगतिलाई प्रभाव पार्छन्। अब त्यो अनुप्रयोग केही महिनाको लागि उपलब्ध भएको छ, मैले सोचेको छु यो केहि अनुभव डिजाइन चालहरू, सुझावहरू र प्रविधिहरू साझेदारी गर्न राम्रो समय हुनेछ।

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

मोबाइलको अभाव र अयोग्य, प्रयोगकर्तामा लेजर-जस्तै फोकसको साथ, यो डिजाइनरको लागि केहि स्केचहरू सफा गर्न पर्याप्त छैन, केही कम्पोजलाई एकै ठाउँमा राख्नुहोस् र त्यसपछि यसलाई रिलीज गर्नुहोस् वा वेब सर्भरमा अपलोड गर्नुहोस्। UI / UX कार्यप्रवाहले मौलिक रूपमा चीजहरू परिवर्तन गरेको छ। प्रक्रियाको प्रत्येक चरण, प्रयोगकर्ता, स्केच, wireframes, mockups र prototyping पहिचान गर्न व्यापक प्रयोगकर्ता परीक्षणको विषय हो।

यो अन्तिम चरण हो - प्रोटोटाइप - जहाँ दुखाइ बिन्दुहरू पत्ता लगाइरहेका छन् र यो अन्तिम चरणमा प्रोजेक्ट अघि निश्चित हुन्छ। यो जहाँ अन्तरक्रियात्मकता, गति, स्क्रिन संक्रमण र पर्दामा सबै चीजको स्थान धेरै महत्वपूर्ण छ। मुद्दाहरू र समस्याहरू सजिलै स्थिर तथ्याङ्कको रूपमा देखाउन सकिँदैन वा मौलिक रूपमा व्याख्या गर्न सकिन्छ। सबै पछि, यी उत्पादनहरू वास्तविक मानिसहरूका लागि हुन्। बरु सबै कोडमा सार्नको लागी, प्रोटोटाइप प्रक्रिया बढ्दै गएको ग्राफिक्स सफ्टवेयरद्वारा त्यस उद्देश्यको लागि डिजाइन गरिएको हो। यो गल्ति ठीक गर्न सजिलो छ, छवि प्रतिस्थापन गर्नुहोस्, केहि पाठ पुन: लेख्नुहोस्, बटन सार्नुहोस् र निरन्तर पुन: लेख्ने र डिबग गर्ने कोड डिबग गर्ने भिजुअल सम्पादक प्रयोग गरेर।

वास्तवमा, यो सफ्टवेयर आजको "रैपिड प्रोटोटाइप" डिजाइन र विकास वातावरणमा एक महत्वपूर्ण घटक भएको छ।

त्यसो भए, हामीसँग अनुभव डिजाइनको साथ केही मजा छ।

02 को 07

एडोब अनुभव डिजाइनमा एक साधारण सर्कलको साथ गन्तव्य पिन सिर्जना गर्नुहोस्

XD को एक स्वच्छ पहलू यसको वेक्टर चित्रकारी उपकरण को उपयोग हो। प्रतिमा फेला पार्न सकिएन? समस्या छैन। आफैलाई रोल गर्नुहोस्। यहाँ कसरी छ:

1. हेलीपस उपकरण चयन गर्नुहोस् र, विकल्प / Alt-Shift कुञ्जी थिचेर, सर्कल ड्र्याग गर्नुहोस्।
2. सर्कल चयन गरी, भरिएको रंग FF0000 र सीमाहरूमा "कुनै" सीमामा सेट गर्नुहोस्।
3. एंकर बिन्दुहरू देखाउन सर्कललाई डबल-क्लिक गर्नुहोस्। तल तल एंकर तान्नुहोस्।
4. चयन गरिएको एंकर प्वाइन्टमा डबल-क्लिक गर्नुहोस् र कभरहरू रेखाहरूसँग बदलिन्छन्।
5. सेतो भर्याङको साथ अर्को सानो सर्कल कोर्नुहोस् र कुनै स्टक छैन। यसलाई स्थितिमा सार्नुहोस् र पिन र सर्कल चयन गर्नुहोस्। गुणको शीर्षमा पङ्क्तिबद्ध प्यानलमा क्षैतिज केन्द्र बटनमा क्लिक गर्नुहोस् र पिन बनाइएको छ।

03 को 07

Adobe अनुभव डिजाइनमा पृष्ठभूमि ब्लर सिर्जना गर्नुहोस्

यो पृष्ठभूमि छविमा पाठ वा अन्य सामग्रीको लागि एक सामान्य हो। समस्या यहाँ छवि हो, अधिक भन्दा अधिक छैन, माथिको सामाग्री माथि अधिवेशन गर्दछ। यो मुद्दा सुल्झाउने एक तरिका पृष्ठभूमि छवि ब्लर गर्न हो। तपाईं छवि फोटोशप वा अन्य छवि सम्पादन सफ्टवेयरमा ब्लर गर्न सक्नुहुन्छ, तर यो केहि हद सम्म अक्षम छ, खासगरी जब XD अब तपाईंको लागि यो कार्यलाई सम्भाल्न सक्छ। यहाँ कसरी छ:

1. नयाँ कलाबोर्ड सिर्जना गर्नुहोस् र आफ्नो पृष्ठभूमि छवि थप्नुहोस्।
2. आकृतिमा एक आयत आय आकृतिमा आयत उपकरण चयन गर्नुहोस् । आयतको साथ चयन गरिएको, भरिएको सेतो र स्ट्रोक कुनै पनि पनि सेट गर्नुहोस्।
3. आयतको साथ चयन गरिएको छ, गुण कक्षमा गुणस्तर प्यानल चयन गर्नुहोस् । तीन स्लाइडहरू ब्लर राशि, उज्ज्वल र अस्पष्टता हुन्। यहाँ के तिनीहरू के गर्छन:

• धब्बा रकम: आकारको तल छविको धमिलोपन समायोजन गर्दछ। अधिकतम मूल्य +50 हो।
• चमक: छविमा हाइलाइटहरू र छायाहरू समायोजन गर्दछ। न्यूनतम मूल्य -50 र अधिकतम मान +50।
• अस्पष्टता: आकार को पारदर्शिता को आकार र आकार को तहत छवि को दृश्यता को प्रभावित गर्दछ। मान 0% देखि 100% सम्म दायरा।

यदि तपाईं वास्तवमा "चीजहरू स्विच गर्न" चाहनुहुन्छ भने, छविको "हेर्न" परिवर्तन गर्न आकारको रङ परिवर्तन गर्नुहोस् र अस्पष्टता मूल्यको साथ खेल्नुहोस्।

04 को 07

एडोब अनुभव डिजाइनमा एक चिन्ता सिर्जना गर्नुहोस्

एक सामान्य डिजाईन समस्या इन्टरफेस तत्वहरू तत्वहरू एक आम रङ हुनुपर्छ तर पृष्ठभूमिमा छवि वा ठोस रङ हुँदा गुमाएका हुन्छन्। समाधान एक चिन्ता हो। एक इन्फ्रामेन्ट इन्टरफेस तत्व र पृष्ठभूमिबीच केही अप्ठ्यारो ढाँचा राखिएको छ। यो XD मा पूरा गर्न सजिलो छ। यहाँ कसरी छ:

1. आफ्नो कलाबोर्ड XD मा बनाउनुहोस्, एउटा छवि थप्नुहोस् र इन्टरफेस तत्वहरूलाई उपयुक्त यूआई किट - फाइल> ओपन यूआई किटबाट प्रतिलिपि गर्नुहोस् ... - कलाबोर्डमा। माथिल्लो छविमा तस्बिरले स्थिति पट्टी र अनुप्रयोग पट्टी हेर्न कठिन छ।
2. आयत उपकरण चयन गर्नुहोस् र आयत निकाल्नुहोस्। गुण प्यानलमा चयन गर्नुहोस् भर्नुहोस् र रङ पिकरमा पप डाउनबाट ग्रेडियन्ट चयन गर्नुहोस्। ब्ल्याक र सेतोमा ढाँचा रंगहरू सेट गर्नुहोस्। ए मान सेट गर्नुहोस् - अस्पष्टता- 60% र व्हाइट ए 0% मा मान।
3. आयतको चयन गरी, वस्तु चयन गर्नुहोस्> व्यवस्थित गर्नुहोस् पछाडि पठाउनुहोस् । इन्फेसमेन्ट तत्वहरू अब छविमा देखिन्छन्।

05 को 07

Adobe अनुभव डिजाइनमा छवि अवतार सिर्जना गर्नुहोस्

एक सामान्य डिजाईन पैटर्न च्याट अनुप्रयोगहरूमा पाइन्छ जहाँ मानिसहरूले एक-अर्कासँग कुरा गर्छन् र स्पिकरको चित्र स्क्रिनमा देखा पर्छन्। यी अवतारहरू सामान्यतया तस्बिरहरू मास्क गरिएका छन्। यो मृत सरल यो XD मा पूरा गर्दछ। यहाँ कसरी छ:

1. तपाईं एक छवि र सर्कलमा सर्कल वा अन्य आकारको साथ सुरू गर्नुहुन्छ। तपाइँ सर्कल कुनै पनि रङ्गले भर्न सक्नुहुन्छ। तपाईं के गर्न आवश्यक छैन स्ट्रोक रंग थप्न हो। तपाईंले प्रभाव सिर्जना गर्दा यो गायब हुनेछ, त्यसैले किन घृणा गर्दछ। यदि तपाइँ सर्कललाई खारेज गर्न आवश्यक छ भने, क्लिपबोर्डमा प्रतिलिपि गर्नुहोस्।
2. सर्कलमा छविमा सार्नुहोस् र छवि र सर्कल दुवै चयन गर्नुहोस्। बोट वस्तुहरू चयन गरी, आकारको साथ मास्क मास्क चयन गर्नुहोस् । जब तपाईं माउस रिलीज गर्नुहुन्छ, अवतार सिर्जना गरियो। त्यहाँबाट तपाई यसलाई पुनःआकार गर्न सक्नुहुन्छ।
3. यदि तपाईंलाई स्ट्रोक थप्न आवश्यक छ भने, तपाईंको क्लिपबोर्डमा सर्कलमा टाँस्नुहोस् कलाबोर्डमा। चयन गरिएको प्रतिलिपिको साथमा भर्नलाई बन्द गर्नुहोस् गुणमा र स्ट्रोक र चौडाई थप्नुहोस्। तिनीहरूलाई लाइन गर्नको लागि, दुवै वस्तुहरू चयन गर्नुहोस् र गुण पङ्क्तिको शीर्षमा पङ्क्तिबद्ध विकल्पहरूमा केन्द्र पङ्क्ति बटन क्लिक गर्नुहोस्।
4. यदि तपाईं तस्बिर मास्क मा चारैतिर सार्न चाहनुहुन्छ भने, मुखौटामा डबल क्लिक गर्नुहोस्। यसले छवि र मास्क आकार देखाउनेछ। छविमा क्लिक गर्नुहोस् र यसलाई स्थितिमा तान्नुहोस्। जब तपाईं माउस रिलीज गर्नुहुन्छ, छवि मास्क भित्रको नयाँ स्थितिमा हुनेछ।

06 को 07

Adobe अनुभव डिजाइन आर्टबोर्डहरूसँग प्ले गर्नुहोस्

अनुभव डिजाइन आर्टबोर्डहरू मात्र त्यहाँ छन् सामग्री राख्नको लागी। तिनीहरू पनि, हेरफेर गर्न सकिन्छ। यहाँ केहि चीजहरू छन् जुन तपाईले गर्न सक्नुहुनेछ:

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

07 को 07

एडोब अनुभव डिजाइनमा मोबाइल यूआई किट सम्पादन गर्नुहोस्

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

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