विभिन्न अवस्थाओं के लिए रंगों का चयन और शेड्स कैसे निर्धारित करें: होवर, सक्रिय, प्रेस, अक्षम करें

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

1. प्राथमिक रंग को परिभाषित करना

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

2. रंग सामंजस्य का उपयोग करना

यह सुनिश्चित करने के लिए कि रंग अच्छी तरह मेल खाते हैं, विभिन्न रंग सामंजस्य योजनाओं जैसे मोनोक्रोमैटिक, पूरक, त्रिकोणीय और अन्य का उपयोग करना फायदेमंद है। वे एक सामंजस्यपूर्ण रंग पैलेट बनाने में मदद कर सकते हैं जो परियोजना के प्राथमिक रंग को पूरक करता है। हम वर्तमान में एक ऐसी दुनिया में रहते हैं जहां प्रौद्योगिकी तेजी से आगे बढ़ रही है, और ऐसी विशेष सेवाएं हैं जो आसानी से रंग योजना तैयार करती हैं। उदाहरण के लिए, मैं color.adobe.com का उपयोग करता हूं।

यहां बताया गया है कि मैं यह कैसे करता हूं:

एक। ड्रॉपडाउन सूची से वांछित योजना का चयन करें।

दो। आधार रंग के रूप में दर्शाए गए फ़ील्ड में आवश्यक रंग मान दर्ज करें

तीन। निर्धारित करें कि कौन से रंग मेरी आवश्यकताओं के अनुरूप हैं।

चार। मेरे मामले में, फिग्मा का उपयोग करके उन्हें मेरे कार्यक्षेत्र में स्थानांतरित करें।

3. स्वरों का चयन

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

पहली विधि में अधिक जटिल सूत्र शामिल है:

1. अपना हेडर रंग चुनें (जरूरी नहीं कि काला हो)।
2. एचएलएस मोड पर स्विच करें।
3. पहले सेल को छोड़ें, दूसरे सेल के लिए मान को 2 से कम करें और तीसरे सेल के लिए इसे 5 से बढ़ाएँ।

दूसरी विधि सेवा का उपयोग करना है (आसान और तेज़)

रंग.dopely.शीर्ष

एक। अपने इच्छित रंग का मान दर्ज करें.

दो। शेड्स और चरणों की संख्या चुनें (मैंने 5 का उपयोग किया)।

तीन। रंग और चरणों की संख्या चुनें.

चार . परिणामस्वरूप, एक रंग के लिए, मैंने निम्नलिखित तालिका बनाई

पी = प्राथमिक,

पी 60 = यह हमारा प्राथमिक रंग है,

पी 10 से पी 50 तक = ये हल्के स्वर हैं जिन्हें हमने टिंट्स में एकत्र किया है,

पी 60 से पी 100 तक = ये वे डार्क शेड्स हैं जिन्हें हमने शेड्स पैनल में एकत्र किया है।

4. रंग पहुंच की जाँच करना

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

फिग्मा प्लगइन - कंट्रास्ट

वेब सेवा - कूलर्स

5. विभिन्न इंटरफ़ेस स्थितियों के लिए रंगों को परिभाषित करना

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

• सक्षम (तत्व की शांत और सामान्य स्थिति)
• होवर (माउसओवर)
• सक्रिय (एक बटन या अन्य नियंत्रण पर क्लिक करना)
• अक्षम (अवरुद्ध तत्व)

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

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

होवर स्थितियाँ

यदि आपका मुख्य रंग काले और 70 के बीच है - तो आपको हल्के रंगों की ओर आधा कदम ऊपर जाना चाहिए।

यदि आपका मुख्य रंग 60 और सफेद के बीच है तो आपको आधा कदम नीचे गहरे रंगों की ओर जाना चाहिए।

दबाएँ / सक्रिय अवस्थाएँ

100 से 70 तक के मानों के लिए, सक्रिय अवस्था दो पूर्ण चरण हल्की हो जाती है

60 से 10 तक के मानों के लिए सक्रिय अवस्था दो पूर्ण चरण गहरी हो जाती है

चयनित राज्य

100 से 70 तक के मानों के लिए, चयनित स्थिति एक कदम हल्की हो जाती है

60 से 10 तक के मानों के लिए, चयनित स्थिति एक कदम और गहरी हो जाती है

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

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

मुझे आशा है कि आपको मेरा लेख पसंद आया होगा। यदि आपके कोई प्रश्न हैं या अधिक जानकारी की आवश्यकता है, तो कृपया बेझिझक एक टिप्पणी छोड़ें।