उपयोगकर्ता इंटरफ़ेस डिज़ाइन तकनीकें जो समय बचाती हैं

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

1. विरूपण से बचने के लिए स्केच में ज़ूम का उपयोग करना

क्या आपने कभी स्केच में तत्वों के एक समूह का आकार बदलने की कोशिश की है और उसके बाद भी आपके पास कुछ तत्व थे जो विकृत थे? पाठ को स्केल करना विशेष रूप से मुश्किल है, उदाहरण के लिए, जब आप उन्हें बढ़ाने या घटाने के लिए तत्वों के कोनों को खींचते हैं।

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



इस सुविधा का उपयोग करने के लिए, आपको उन सभी तत्वों या समूह का चयन करना होगा, जिनका आकार आप आकार बदलना चाहते हैं और मेनू में "स्केल" पर क्लिक करें या "CMD + K" दबाएँ। उसके बाद आप स्केलिंग प्रतिशत या आकार सेट कर सकते हैं और "ओके" पर क्लिक कर सकते हैं!

2. अस्थायी सामग्री के साथ स्वत: पूर्ण आइटम के लिए शिल्प प्लगइन का उपयोग करना

स्केच के लिए इनविट के क्राफ्ट प्लगइन में वास्तव में कूल वर्कफ़्लो टूल के टन हैं। आमतौर पर इस्तेमाल किया जाने वाला समय बचाने वाला उपकरण डेटा ऑटोफिल है।



इसका उपयोग करने के लिए, आपको अपनी फ़ाइल में छवि या पाठ का चयन करना होगा और फिर उस प्रकार की सामग्री का चयन करना होगा जिसे आप जोड़ना चाहते हैं।

यह उपकरण बहुत अच्छा है और पाठ अला लोरम इप्सम को जोड़ने या अनुप्रयोगों के डिजाइन के लिए अस्थायी सामग्री के साथ आने वाले समय बिताने की आवश्यकता को समाप्त करता है।

3. तुरंत इलस्ट्रेटर में एक रंग पैलेट बनाएं

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

एक पैलेट बनाने के लिए निर्देश:

⭡Step 1 : दो आयतें बनाएँ। अपने पैलेट में प्रयुक्त वांछित रंग में पहला आयत रंग, और दूसरा रंग सफेद में।


⭡ चरण 2 : दोनों आयतों का चयन करें और सम्मिश्रण विकल्प खोलें ( ऑब्जेक्ट> ब्लेंड> ब्लेंड विकल्प )। फिर रिक्ति को "निर्दिष्ट चरणों" फ़ील्ड में सेट करें और आपको आवश्यक रंग विकल्पों की संख्या दर्ज करें।


⭡ चरण 3 : दोनों आयतों का चयन करें, ( ऑब्जेक्ट> ब्लेंड> मेक या प्रेस + सीएमडी + बी ) पर जाएं - और पैलेट तैयार है!

4. सुव्यवस्थित और स्मार्ट संरेखण

स्केच और Figma में साफ मेरी पसंदीदा सुविधाओं में से एक है। यदि मेरे पास तत्वों का एक समूह है जिसे सूची में या ग्रिड पर संरेखित करने की आवश्यकता है, तो मैं उन्हें चुन सकता हूं और कोने में छवि के साथ नीले आइकन पर क्लिक कर सकता हूं। स्केच में, ऊपरी दाएं कोने में "साफ" पर क्लिक करें। फिर, Shift पकड़ते समय, तत्वों को वांछित मान के बीच इंडेंट खींचें।



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

5. किसी भी फॉन्ट की तुरंत पहचान

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

जब भी मुझे एक फ़ॉन्ट दिखाई देता है जो मुझे पसंद है, तो मैं क्रोम एक्सटेंशन आइकन पर क्लिक करता हूं और मैं तुरंत यह निर्धारित कर सकता हूं कि यह किस प्रकार का फ़ॉन्ट है। फिर मैं इसे Google पर खोजता हूं और यदि यह मुफ़्त है, तो इसे डाउनलोड करें।

6. कैलकुलेटर की तरह ही अनुमति और स्थिति इनपुट फ़ील्ड का उपयोग करना

यदि आप अभी भी यह नहीं जानते हैं, तो यहां निम्न जानकारी है - आप स्केच में किसी भी इनपुट फ़ील्ड में गणना कर सकते हैं। गणना XD, Figma, और अधिकांश अन्य डिज़ाइन टूल में भी काम करती है।

उदाहरण के लिए, यदि मेरे पास आयत 100 पिक्सेल चौड़ा है, तो मैं जल्दी से चौड़ाई क्षेत्र में 100/2 दर्ज कर सकता हूं और यह मेरी वस्तु को 50 पिक्सेल तक कम कर देगा। बेशक, यह एक सरल उदाहरण है, लेकिन जब आपको किसी आकार को मापना होता है जिसे आप अपने दिमाग में जल्दी से नहीं गिन सकते हैं, तो यह फ़ंक्शन पर्याप्त समय बचाता है, खासकर अगर बहुत सारी वस्तुएं हों।



जब भी आपको किसी वस्तु (* 2) के आकार को दोगुना करने या आधे (/ 2) से वस्तु को कम करने की आवश्यकता होती है, तो गणना काम में आ सकती है।

7. किसी संख्या कुंजी को दबाकर किसी वस्तु की अपारदर्शिता को बदलना

अस्पष्टता के लिए कीबोर्ड शॉर्टकट डिज़ाइन फ़ाइल में अस्पष्टता ऑब्जेक्ट को बदलने के लिए उचित समय बचाते हैं।

इस पद्धति का उपयोग करने के लिए, आपको बस एक ऑब्जेक्ट का चयन करना है और फिर कीबोर्ड पर किसी भी संख्या को दबाएं ('1' .. '9'), और अस्पष्टता तुरंत समायोजित हो जाती है। यह 70% अस्पष्टता चाहते हैं? अपने कीबोर्ड पर 7 दबाएं और आपका काम हो गया!

यह विधि सभी प्रमुख डिजाइन कार्यक्रमों में व्यावहारिक रूप से काम करती है।

8. स्मार्ट स्केच लेआउट

स्मार्ट लेआउट आपको पहले निर्दिष्ट किए गए इंडेंट को बदलने के बिना चरित्र की सामग्री को समायोजित करने की अनुमति देता है।



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

इस सुविधा के लिए धन्यवाद, आपके वर्कफ़्लो को बेहतर बनाने के कई अवसर हैं। यह जानने के लिए कि आप इसका पूरा लाभ कैसे उठा सकते हैं, स्केच ब्लॉग देखें ।

9. आइकनरज को व्यवस्थित करने के लिए आइकनजर का उपयोग करना

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

जब भी मुझे एक आइकन की आवश्यकता होती है, यह सीधे Iconjar में स्थित होता है।

यह काफी सरलता से काम करता है: सबसे पहले, मुझे एक आइकन लाइब्रेरी मिलती है जो मुझे पसंद है।
फिर मैं इस पुस्तकालय को लोड करता हूं और इसे इंजर में डाल देता हूं, और फिर इस लाइब्रेरी को एक नाम देता हूं।



Iconjar में संग्रहीत आइकन के साथ, आप जल्दी से उन्हें अपनी लाइब्रेरी में खोज सकते हैं, और फिर वांछित आइकन को सीधे अपने डिज़ाइन फ़ाइल में खींच सकते हैं।

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