हमारी भविष्य की पुस्तक Refactoring UI से अनुकूलित

क्या आपने इन ट्रेंडी कलर पैलेट जनरेटर को देखा है? जब आप एक रंग का चयन करते हैं, तो "ट्रायड" या "चौथा प्रमुख" जैसे संगीत वाक्यांशों के साथ कुछ मापदंडों को समायोजित करें - और अपनी वेबसाइट के लिए पांच सही रंग प्राप्त करें?



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

ठीक है, अगर आप नहीं चाहते कि साइट इस तरह दिखे:

आपको वास्तव में क्या चाहिए

आपने पांच हेक्स कोड के साथ कुछ भी नहीं किया है। कुछ वास्तविक बनाने के लिए बहुत अधिक पूर्ण पैलेट की आवश्यकता होती है।



एक अच्छे रंग पैलेट को तीन श्रेणियों में विभाजित किया जा सकता है।

धूसर

पाठ, पृष्ठभूमि, पैनल, फार्म तत्व - यह लगभग सभी ग्रे इंटरफ़ेस में मौजूद है।



और आपको लगता है कि आपको अधिक ग्रे रंगों की आवश्यकता होगी। ऐसा लगता है कि तीन या चार शेड बहुत हैं, लेकिन बहुत जल्द आप छाया नंबर 2 की तुलना में थोड़ा गहरा चाहते हैं, लेकिन छाया नंबर 3 की तुलना में थोड़ा हल्का है।

व्यवहार में, 8-10 रंगों (बाद में इस पर अधिक) का चयन करना उचित है। यह इतना नहीं है जैसा कि शेड नंबर 77 और नंबर 78 के बीच के अंतर को देखना है, लेकिन काफी पर्याप्त मात्रा में है।



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

प्राथमिक रंग

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

ग्रे पैलेट के साथ, आपको हल्के और गहरे रंगों के एक पैलेट (5-10) का चयन करने की आवश्यकता है।



सबसे हल्की शेड्स अलर्ट जैसी चीजों के लिए टिंटेड बैकग्राउंड के रूप में उपयोगी हो सकते हैं, जबकि गहरे रंग टेक्स्ट के लिए बढ़िया हैं।

रंगों का उच्चारण करें

मुख्य के अलावा, प्रत्येक साइट को उपयोगकर्ता के साथ संवाद करने के लिए कई उच्चारण रंगों की आवश्यकता होती है।

इसलिए, एक नए फ़ंक्शन को हाइलाइट करने के लिए, आप एक आकर्षक रंग चुन सकते हैं, उदाहरण के लिए, पीला, गुलाबी या नीला-हरा:



विभिन्न अर्थ राज्यों पर जोर देने के लिए रंगों की भी आवश्यकता हो सकती है, उदाहरण के लिए, विनाशकारी क्रियाओं की पुष्टि करने के लिए लाल:



... चेतावनियों के लिए पीला:



... या एक सकारात्मक प्रवृत्ति पर जोर देने के लिए हरा:



और इन रंगों के कुछ रंगों, हालांकि उन्हें यूआई में बहुत कम इस्तेमाल किया जाना चाहिए।

यदि आप एक ऐसा डिज़ाइन बनाते हैं जिसमें रंग समान तत्वों को भेद या वर्गीकृत करने में मदद करता है (उदाहरण के लिए, रेखांकन पर रेखाएँ, कैलेंडर ईवेंट या किसी प्रोजेक्ट में टैग), तो अधिक उच्चारण रंगों की आवश्यकता हो सकती है।

सामान्य तौर पर, एक जटिल यूआई में अक्सर 5-10 रंगों के साथ दस अलग-अलग रंगों की आवश्यकता होती है।

रंगों को पहले से परिभाषित करें

जब थोड़ा हल्का या गहरा छाया की आवश्यकता होती है, तो आपको सीएसएस प्रीप्रोसेसर कार्यों को हल्का या गहरा करने की आवश्यकता नहीं होती है। तो आप 35 अलग-अलग नीले रंग के साथ समाप्त होते हैं जो सभी समान दिखते हैं।

इसके बजाय, चुनने के लिए शेड्स के एक निश्चित सेट को परिभाषित करें।



ऐसे पैलेट कैसे बनाएं?

पहले एक आधार रंग चुनें

आधार रंग से शुरू करें, जिस पर प्रकाश और अंधेरे रंग आधारित हैं।

कोई वास्तविक वैज्ञानिक तरीका नहीं है, लेकिन बुनियादी और उच्चारण रंगों के लिए, अंगूठे का एक अच्छा नियम एक छाया चुनना है जो बटन पृष्ठभूमि के साथ अच्छी तरह से काम करता है।



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

सीमाएँ निर्धारित करें

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

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



एक रंग से शुरू करें जो प्राथमिक रंग के स्वर से मेल खाता है, और तब तक संतृप्ति और चमक को बदल दें जब तक आप संतुष्ट न हों।

रिक्त स्थान भरें

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

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

नौ एक बड़ी संख्या है क्योंकि यह अच्छी तरह से विभाजित होता है, जो रिक्त स्थान को भरना थोड़ा आसान बनाता है। चलो सबसे गहरा शेड 900 , बेस 500 और सबसे हल्का 100 कहते हैं ।

700 और 300 के शेड्स चुनकर शुरू करें, जो कि दो अंतराल के बीच में सही हैं: वे दोनों तरफ के शेड्स के बीच सही समझौता करेंगे।



यह स्केल ( 800 , 600 , 400 और 200 ) पर चार और अंतराल बनाता है, जो एक ही तरीके से भरे जाते हैं।



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

ग्रेज़ के बारे में क्या?

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



प्रोजेक्ट में सबसे गहरे पाठ के रंग से सबसे गहरे शेड का चयन करें, और सबसे हल्का - वह जो प्रकाश, लगभग सफेद पृष्ठभूमि के रूप में अच्छी तरह से काम करता है।

यह कोई विज्ञान नहीं है।

कोई फर्क नहीं पड़ता कि आप कैसे चाहते हैं, आपको सही रंग पैलेट चुनने के लिए गणित पर पूरी तरह से निर्भर नहीं होना चाहिए।

ऊपर की तरह एक व्यवस्थित दृष्टिकोण एक शुरुआत के लिए बहुत अच्छा है, लेकिन यदि आवश्यक हो तो इसे बदलने से डरो मत।

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

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