एनीमेशन का सहारा लिए बिना एक प्रोटोटाइप डिजाइन को गतिशील बनाने के लिए 8 सरल यूआई ट्रिक्स

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

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

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

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

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

और अगर आपके पास एक गंभीर परियोजना है, तो हमारी टीम हमारी सर्वोत्तम प्रथाओं के आधार पर संगठन के भीतर एक डिजाइन प्रणाली को तैनात करने के लिए तैयार है और यह फिगमा का उपयोग करके विशिष्ट कार्यों के लिए तैयार है। वेब / डेस्कटॉप, और कोई भी मोबाइल। हम React / React Native से भी परिचित हैं। टी को लिखें: @kamushken

इसलिए, मैं इस बारे में बात करूंगा कि स्टेट्स को स्टेटिक प्रोटोटाइप में कैसे जोड़ा जाए, इसमें कुछ डायनामिक्स जुड़ते हैं, कुछ इवेंट दिखाते हैं। चलो चलते हैं!

थोड़ा सा उठा हुआ

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





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

प्रेरित या सक्रिय

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



मैंने विशेष रूप से दाईं ओर "खाली" विकल्प छोड़ दिया ताकि आप तुलना करें और तय करें कि कौन सा सबसे आकर्षक है



एक साधारण तालिका को और अधिक गतिशील बनाया जा सकता है यदि कोशिकाओं में से एक होवर कर्सर की स्थिति का अनुकरण करता है और दूसरा, उदाहरण के लिए, हल्के पीले रंग के साथ रंगा हुआ, इसमें कुछ सशर्त महत्वपूर्ण दिखा। आँख झुका - लक्ष्य हासिल किया

उपयोगी कचरा

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



क्या यह नीले बटन के नीचे बूँद की तरह दिखता है, यह शब्द के शाब्दिक अर्थों में नेत्रहीन रूप से बड़ा और अधिक आकर्षक बनाता है?

और कभी-कभी पृष्ठभूमि में चलने से कुछ बेकार तत्व उपयोगी हो जाते हैं यदि यह वस्तुओं के बीच अंतर करने में मदद करता है:



जैसा कि आप बाईं ओर वाले संस्करण में देख सकते हैं, ग्रीन स्पॉट कार्ड में आकृति और गतिकी जोड़ता है, हालांकि यहां स्ट्रोक या शैडो का उपयोग करना भी उचित है।

चयनित या चिन्हित

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



बाईं स्क्रीन पर कुछ भी नहीं होता है, जबकि दाईं और केंद्र स्क्रीन माना जाता है कि एक विकल्प है और तत्व स्थिति बदल जाता है

इमोजी स्ट्रेंथ

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

महत्व का जोर

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

सक्रिय इनपुट

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

छाया के सिंहासन का खेल

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



कुछ लाइक और सब्सक्राइबर इकट्ठा करने के लिए मुझे सबसे आम git डैशबोर्ड प्रोटोटाइप को "ड्रिबल" करना पड़ा

सब कुछ सरल है: "उच्च" ऑब्जेक्ट शून्य विमान (पृष्ठभूमि) से है, छाया में अधिक पारदर्शिता, धुंधला और ऑफसेट। वैसे, आंकड़े में यह सामान्य आयत के साथ यथार्थवादी छाया बनाने के लिए अक्सर अधिक सुविधाजनक होता है, जिसके लिए इस उदाहरण में मैंने कोनों को गोल किया और एक धुंधला> 200 लगाया। इसके अलावा, एक साधारण आकार के साथ, मैंने इसे डैशबोर्ड पर "फ्लोटिंग" नेविगेशन के प्रभाव को बनाते हुए, इसे सबसे यथार्थवादी रूप में लाया। सौभाग्य से, उत्पादन में आपको ऐसी बकवास नहीं मिलेगी। आपको समझने के लिए ऐसी ट्रिकों का सहारा लेना होगा जो दर्शकों को सबसे अच्छी प्रतिक्रिया देती है। लेकिन यह एक डिज़ाइन उत्पाद को बढ़ावा देने का एक अलग विषय है, इसके बारे में कुछ और समय।

निष्कर्ष

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

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

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

इसके लिए जाओ! मजेदार प्रोटोटाइप है

आप डिजाइनर के लिए मेरे चैनल उपयोगी के लिए भी सदस्यता ले सकते हैं, वहां मैं कहता हूं कि मैं डिजाइन दृश्य के आसपास के डिजाइन और उत्पादों के बारे में सोचता हूं।

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