डिज़ाइन सिस्टम में दृश्य ब्रेकिंग परिवर्तन

हम कोड एपीआई का सम्मान करते हैं। लेकिन रंग, प्रकार और स्थान के बारे में क्या?

श्रृंखला के 6 में से # 4 डिज़ाइन रिलीज़ सिस्टम:
आउटपुट | ताल | संस्करण | ब्रेकिंग | निर्भरता | प्रक्रिया

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

तो, अपने आप से पूछो ...

क्या कोई माइनर रिलीज़ के लिए अपग्रेडर्स को भरोसा हो सकता है कि सिस्टम के विज़ुअल बदलावों के कारण उनका UI नहीं टूटेगा?

सिमेंटिक वर्जनिंग (SemVer) प्रमुख, लघु और पैच पदनामों का उपयोग करके रिलीज़ में परिवर्तन को संप्रेषित करने के लिए स्पष्ट मानदंड प्रदान करता है। मेरे द्वारा डिजाइन की गई प्रत्येक डिज़ाइन प्रणाली उनके पैकेज के अनुप्रयोग प्रोग्रामिंग इंटरफ़ेस, या एपीआई में सेमी वीयर और निगरानी परिवर्तन का उपयोग करती है। यह डेवलपर्स के लिए परिचित क्षेत्र है जावास्क्रिप्ट कोड और HTML मार्कअप कोडिंग। अपने एपीआई को तोड़ें, और आपके अगले संस्करण को संस्करण को अगले प्रमुख रिलीज में बढ़ाना होगा, जैसे कि 1.4.0 से 2.0.0 तक।

संरचना दृश्य शैली के लिए एक इंटरफ़ेस निर्दिष्ट हमें eludes। शैली में बदलावों की निगरानी के लिए स्पष्ट, सरल नियमों को परिभाषित करना बहुत मुश्किल है। सिस्टम निर्माता यह स्पष्ट करने के लिए संघर्ष करते हैं कि "इस शैली को बदलने से क्या या क्यों नहीं" अपनाने वाले का UI "बनाम" उस शैली को परिवर्तित किया जा रहा है। " मैं पूछता हूं कि "किस विशिष्ट प्रकार के दृश्य परिवर्तन आपके लिए एक प्रमुख संस्करण है?" उनकी प्रतिक्रिया: What \ _ (ツ) _ / types।

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

ब्रेकिंग कलर

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

एक प्राथमिक बटन की पृष्ठभूमि का रंग समायोजित करना

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

हालाँकि, कहीं और रंग बदलने से पेरेतिल को नुकसान हो सकता है। निम्नलिखित परिदृश्य पर विचार करें।

उदाहरण: कस्टम पृष्ठभूमि पर सिस्टम पाठ

रंग विपरीत को बेहतर बनाने के लिए एक सिस्टम टीम फाइन ट्यूनिंग इंटरेक्टिव ब्लू की कल्पना करें। V1.4.0 का इंटरैक्टिव-ब्लू एक सफेद पृष्ठभूमि पर सुलभ था, लेकिन चारकोल पृष्ठभूमि पर विफल रहा।

रंग कंट्रास्ट चेकिंग कॉन्ट्रास्ट-grid.eightshapes.com

इसलिए, v1.5.0 के लिए, टीम ने इंटरैक्टिव-ब्लू को हल्का, अधिक संतृप्त टोन में समायोजित किया जो सफेद और लकड़ी का कोयला दोनों पर काम करता था।

अप्रत्याशित पृष्ठभूमि पर एक भूत बटन लेबल का पाठ रंग समायोजित करना

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

उदाहरण: कस्टम ओवरलेड टेक्स्ट के साथ सिस्टम बैकग्राउंड

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

कार्ड का बैकग्राउंड कलर एडजस्ट करना जिसमें निहित कंटेंट की अनुमति हो

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

कल्पना करें कि आपके सिस्टम की छोटी रिलीज़ में उन समायोजन शामिल थे। पिछड़े संगत, आपने कहा? उन्नयन में कोई जोखिम नहीं, उन्होंने भरोसा किया? नहीं! आपके सिस्टम ने उनके उत्पाद को तोड़ दिया!

इसलिए, यदि सिस्टम परिवर्तित हुआ, तो यह निर्धारित करने के लिए परिवर्तित रंगों के गुणों का मूल्यांकन करें:

  • पाठ का रंग जो किसी गोद लेने वाले की पृष्ठभूमि-रंग, छवि या अन्य बनावट के ऊपर दिखाई दे सकता है।
  • पृष्ठभूमि-रंग जिस पर किसी गोद लेने वाले का पाठ रंग ओवरले होता है।
  • बैकग्राउंड-कलर, बॉर्डर-कलर, टेक्स्ट कलर, बॉक्स-शैडो या किसी अन्य घटक के किनारे या कंटेंट के नीचे या उसके ऊपर बनी अन्य प्रॉपर्टी ताकि तत्वों के बीच कंट्रास्ट कम हो सके।

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

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

ब्रेकिंग टाइपोग्राफी (लपेटकर)

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

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

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

उदाहरण: रैपिंग टैब्स लाजवाब हैं

कल्पना करें कि आपका सिस्टम सामान्य से बोल्ड तक टैब लैबफोंट-वेट को समायोजित करता है।

एक मामूली संस्करण के उन्नयन के बाद, अनुत्तरदायी टैब लपेटे जाते हैं। अच्छा नही।

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

उदाहरण: पत्र का स्थान तबाही

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

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

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

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

ब्रेकिंग स्पेस और आकार

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

HTML में, जब आप किसी घटक के बॉक्स मॉडल गुणों को बदलते हैं - पैडिंग, मार्जिन, चौड़ाई, ऊंचाई, प्रदर्शन, बॉक्स-आकार, स्थिति, बाएं, दाएं, ऊपर, नीचे - आप अन्य घटक तत्वों के साथ उस घटक को व्यवस्थित करने वाली लेआउट संरचना को प्रभावित करने का जोखिम उठाते हैं।

उदाहरण 1: वर्टिकल स्पेसिंग को हटाना

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