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

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

हमें एक डार्क थीम की आवश्यकता क्यों है

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

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

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

रंग प्रणाली

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

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

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

रंग प्रणाली को व्यवस्थित करने के संदर्भ में, हमने मटेरियल डिज़ाइन के दृष्टिकोण को सबसे अधिक पसंद किया। हमने एक समान प्रणाली में तीन विस्तारित पैलेट तैयार किए: ग्रे, ठंडा ग्रे और नीला। उसी समय, हमने पारंपरिक मूल्यों के विपरीत रंगों को 0 से 1000 तक विभाजित किया, जहां 0 सबसे हल्का है और 1000 सबसे गहरा है। ये नंबर पैलेट के नाम के साथ रंगों के पहचानकर्ता बन गए - ग्रे 100, ब्लू 300 और इसी तरह।

रंगों का चयन करते समय, एचएसबी रंग मॉडल मदद करता है। इसमें, ह्यू रंग टोन है, संतृप्ति संतृप्ति है, और चमक चमक है। रंग 0–360 ° से होता है, और हम अपने ब्रांड रंग टोन के रूप में इंटरफेस में 212 ° के एक निश्चित मान का उपयोग करते हैं। संतृप्ति और चमक 0 से 100% तक निर्धारित की जाती है।

चूंकि हम ग्रे पैलेट को 10 मुख्य रंगों में विभाजित करते हैं, ब्राइटनेस में हम 10% के एक चरण का उपयोग करते हैं। फिर हम एक छोटे से वक्र के साथ संतृप्ति के साथ नीले रंग को मिलाते हैं, साथ ही हमें अपनी आवश्यकता के विपरीत ढाल को संरक्षित करने के लिए चमक मूल्यों को समायोजित करते हैं।

उसी तरह, हमने ठंडी ग्रे और नीली पट्टियाँ उठाईं। ठंडे ग्रे का उपयोग उन जगहों पर किया जाता है जहां नीले रंग के साथ संयोजन के लिए अधिक संतृप्त छाया की आवश्यकता होती है, और लहजे, विभिन्न बटन, पाठ और लिंक के लिए कई नीले रंगों की आवश्यकता होती है।

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

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

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

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

एक अंधेरे विषय में रंगों का मिलान

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

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

प्रयुक्त प्राथमिक रंगों की तालिका

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

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

इस तरह के उदाहरणों से पता चला है कि हमें अंधेरे विषय को लागू करते समय अधिक लचीली प्रणाली की आवश्यकता है।

तकनीकी कार्यान्वयन

मॉकअप पर डार्क थीम के लिए उपयुक्त रंगों को लेने के बाद, हमने इस मामले को कोड में स्थानांतरित करना शुरू कर दिया।

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

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

ऐसी योजना तत्व पहचानकर्ताओं और उनकी शैलियों के साथ सीएसएस फ़ाइल के समान है, लेकिन JSON प्रारूप में है।

बैकग्राउंड_ कॉन्टेंट और टेक्स्ट_प्रिमरी टोकन वाली स्कीम क्या लगती है?

हमारे पास GitHub पर जो कुछ भी उपलब्ध है:

• सभी रंगों और उनके अद्वितीय नामों के साथ एक पैलेट ;
• प्रकाश और अंधेरे विषयों में सभी टोकन और उनके मूल्यों के साथ योजना ।

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

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

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

आमतौर पर इस्तेमाल किए जाने वाले टोकन के उदाहरण

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

आगे सर्किट के साथ काम करते हैं

स्केच और ज़ेपलिन

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

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

यह कैसे टोकन प्रतीक की तरह दिखता है

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

उपयोग किए गए टोकन का विवरण जोड़ना

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

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

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

स्कीमा अपडेट

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

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

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

हम इस तरह के अपडेट स्कीम को रिफलेक्ट करते समय जारी कर सकते हैं: जब टोकन को नाम देने का सबसे अच्छा तरीका क्या है, या तर्क को संरक्षित करते हुए कई टोकन को एक में मिलाने का तरीका क्या है, इसकी समझ है।

क्रॉस-प्लेटफॉर्म और वीकेयूआई

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

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

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

आप वीकेयू स्टाइलगाइड पर प्रतिक्रिया घटकों के रूप में वीके डिजाइन प्रणाली के कार्यान्वयन को देख सकते हैं। और सबसे दिलचस्प बात यह है कि इस पृष्ठ पर आप उन घटकों को लाइव देख सकते हैं जिनका उपयोग हम थीम और प्लेटफ़ॉर्म को स्विच करने की क्षमता के साथ करते हैं।

निकट भविष्य में हम वीकेयूआई के प्रलेखन को अपडेट करेंगे और हमारी डिजाइन टीम के काम के बारे में अधिक जानकारी एकत्र करेंगे - कई चीजें होंगी many

संदेशवाहक के लिए अलग विषय

वीके मी, जिसे अभी तक केवल कजाकिस्तान में परीक्षण किया जा रहा है, एक अलग मैसेंजर है जिसमें फोन नंबर द्वारा पंजीकरण करने की क्षमता है। इसमें, हमने न केवल संचार को छोड़कर, कार्यक्षमता को सुविधाजनक बनाया, बल्कि डिजाइन को भी सरल बनाया।

प्रकाश विषय में टोपी संचार पर ध्यान केंद्रित करने के लिए सफेद हो गई, और नीला उज्ज्वल और अधिक संतृप्त हो गया।

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

काफी सरल तरीके से, हम थोड़े समय में पूरे एप्लिकेशन को फिर से बनाने में सक्षम थे, जिससे एक नया डिज़ाइन थीम तैयार किया गया।

ग्राफिक्स के साथ काम करें

अनुप्रयोगों में उपयोग किए जाने वाले माउस के पूरे सेट को सफेद रंग में काट दिया जाता है और सर्किट से टोकन का उपयोग करके आसानी से पुन: प्राप्त किया जा सकता है।

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

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

परिणाम

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

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

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

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