छवियाँ और तस्वीरें · ब्राउज़र छवि और ड्राइंग एडिटर
बग रिपोर्ट स्क्रीनशॉट को कैसे एनोटेट करें ताकि डेवलपर्स उस पर कार्रवाई करें
· यह क्यों मायने रखती है
छवि संपादन कैनवास ब्राउज़र-प्रसंस्करण
एक स्पष्ट बॉक्स, एक तीर और एक संक्षिप्त कैप्शन वाला स्क्रीनशॉट प्रश्नों का एक दौर बचाता है; एक खाली स्क्रीनशॉट उन्हें आमंत्रित करता है। यह पोस्ट एक छोटा एनोटेशन कन्वेंशन सेट करती है और दिखाती है कि इसे ब्राउज़र एडिटर में कैसे लागू किया जाए।
वह स्क्रीनशॉट जिसने तीन स्पष्ट प्रश्न उत्पन्न किए - क्यों 'संलग्न देखें' एक बग रिपोर्ट नहीं है
एक उपयोगी बग स्क्रीनशॉट पाठक के पूछने से पहले ही पहले प्रश्न का उत्तर दे देता है। 'संलग्न देखें' लेबल वाला एक खाली कैप्चर डेवलपर को दोष, प्रभावित नियंत्रण और अपेक्षित परिणाम की खोज में छोड़ देता है। एडिटर की छोटी दृश्य शब्दावली उस अस्पष्टता को कम करने के लिए पर्याप्त है: संबंधित क्षेत्र को क्रॉप करें, समस्या के चारों ओर एक आयत बनाएं, ध्यान आकर्षित करने के लिए एक रेखा का उपयोग करें, और एक संक्षिप्त कैप्शन जोड़ें।
पूरी रिपोर्ट के बजाय छवि को साक्ष्य मानें। टेक्स्ट तुरंत पिक्सेल बन जाता है, इसलिए निर्यात से पहले कैप्शन लिखें और इसे स्कैन करने के लिए पर्याप्त छोटा रखें। पुनरुत्पादन चरण, लॉग और अपेक्षित व्यवहार अभी भी छवि के बगल में हैं क्योंकि कोई भी चिह्न इंटरैक्शन का वर्णन नहीं कर सकता है या यह नहीं बता सकता है कि कैप्चर किया गया फ़्रेम दिखाई नहीं देता है।
प्रति छवि एक समस्या - संबंधित क्षेत्र में काट-छाँट करना ताकि पाठक सबसे पहले दोष ही देखे
प्रति छवि एक समस्या पाठक को एक साफ़ दृश्य लक्ष्य देती है। असंबंधित पैनल, ब्राउज़र क्रोम और पड़ोसी नियंत्रणों को तब तक हटा दें जब तक कि वे आवश्यक संदर्भ स्थापित न कर दें। एक तंग क्रॉप से दोष सबसे पहले दिखाई देता है, जबकि थोड़ा चौड़ा फ्रेम टूटे हुए नियंत्रण और आसपास के लेआउट के बीच संबंध को संरक्षित कर सकता है।
निर्यात करने से पहले फसल की तुलना मूल फसल से करें ताकि रिपोर्ट गलती से समस्या को दोबारा उत्पन्न करने के लिए आवश्यक सुराग को न हटा दे। उच्च-विपरीत चिह्नों को प्रकाश और अंधेरे दोनों इंटरफ़ेस क्षेत्रों के सामने खड़ा होना चाहिए, और एक स्क्रीनशॉट को चरणों, लॉग और अपेक्षित व्यवहार को प्रतिस्थापित करने के बजाय पूरक होना चाहिए।
अर्थ सहित आकृतियाँ: बॉक्स, तीर, कैप्शन - प्रत्येक चिह्न क्या कहता है और प्रत्येक का उपयोग कब करना है, इसके लिए एक न्यूनतम परंपरा
प्रत्येक चिह्न में एक कार्य होना चाहिए। एक आयत प्रभावित नियंत्रण या क्षेत्र को अलग करता है, एक रेखा आंख को अंतराल या गलत संरेखण की ओर निर्देशित करती है, और एक कैप्शन अपेक्षित-बनाम-वास्तविक अंतर बताता है। यह एडिटर आयत, रेखा और पाठ चिह्न प्रदान करता है; इसमें कोई तीर आदिम नहीं है, इसलिए जब एक सीधी रेखा को अस्पष्ट रूप से पढ़ा जा सकता है तो कैप्शन में दिशा का वर्णन करें।
एक टीम में सम्मेलन को स्थिर रखें ताकि पाठक को सजावटी विकल्पों को डिकोड न करना पड़े। टेक्स्ट को प्लेसमेंट के समय छवि में व्यवस्थित किया जाता है और इसे एक अलग ऑब्जेक्ट के रूप में दोबारा संपादित नहीं किया जा सकता है, जो निर्यात से पहले शब्दों और स्थान की जांच करने लायक बनाता है। छवि साक्ष्य का समर्थन करती है, रिपोर्ट के व्यवहार विवरण का प्रतिस्थापन नहीं।
अर्थ सहित आकृतियाँ: आयत, रेखा और कैप्शन; इस एडिटर के पास कोई तीर टूल नहीं है
रंग और वजन संचार विकल्प हैं, सजावट नहीं। गहरे रंग के इंटरफ़ेस के सामने एक पतला लाल स्ट्रोक गायब हो सकता है या छवि कम होने के बाद पढ़ना मुश्किल हो सकता है। स्पष्ट कंट्रास्ट वाला रंग चुनें, निर्यात से बचने के लिए आयत को पर्याप्त चौड़ाई दें, और पहचाने जाने वाले UI विवरण पर सीधे एक रेखा लगाने से बचें।
तैयार छवि को उस आकार में जांचें जो डेवलपर वास्तव में इश्यू ट्रैकर में देखेगा। कंट्रास्ट को प्रकाश और अंधेरे दोनों क्षेत्रों में जीवित रहना चाहिए, जबकि कैप्शन दोष को कवर किए बिना पठनीय रहना चाहिए। सहायक रिपोर्ट को अभी भी पुनरुत्पादन चरणों और लॉग की आवश्यकता है; दृश्य जोर साक्ष्य की ओर इशारा कर सकता है लेकिन लापता व्यवहार की आपूर्ति नहीं कर सकता।
अपेक्षित बनाम वास्तविक - एक संक्षिप्त कैप्शन जोड़ना जो छवि में ही बताता है कि क्या होना चाहिए था
अपेक्षित-बनाम-वास्तविक शब्दांकन एक उजागर दोष को एक छोटे दावे में बदल देता है। "अपेक्षित: बटन इनपुट के साथ संरेखित है; वास्तविक: बटन 12 px नीचे बैठता है" पाठक को अकेले रंगीन बॉक्स की तुलना में अधिक दिशा देता है। उस कैप्शन को तथ्यात्मक और संक्षिप्त रखें, क्योंकि निर्यात की गई छवि को काल्पनिक निदान का पैराग्राफ बनने के बजाय दृश्य बेमेल को स्पष्ट करना चाहिए।
नियंत्रण या अंतराल को कवर किए बिना टेक्स्ट को चिह्नित क्षेत्र के पास रखें। एडिटर प्लेसमेंट पर टेक्स्ट को व्यवस्थित करता है, इसलिए किसी टेक्स्ट ऑब्जेक्ट को बाद में संपादित करने की अपेक्षा करने के बजाय निर्यात से पहले शब्दों और स्थिति को संशोधित करें। पुनरुत्पादन चरणों और लॉग में वे विवरण होने चाहिए जिन्हें एक स्थिर फ्रेम से स्थापित नहीं किया जा सकता है।
कार्यान्वित उदाहरण: एक गलत संरेखित बटन - तत्व को काटें, बॉक्स लगाएं, रिक्त स्थान पर तीर, अपेक्षित स्थिति के साथ कैप्शन
कार्यान्वित उदाहरण के रूप में एक गलत संरेखित बटन लें। बटन और उसके पड़ोसी संरेखण संदर्भ को दिखाने के लिए पर्याप्त रूप से काटें, नियंत्रण के चारों ओर एक आयत बनाएं, और दृश्यमान अंतराल को इंगित करने के लिए एक रेखा का उपयोग करें। क्योंकि एडिटर के पास कोई तीर टूल नहीं है, लाइन को स्थान की पहचान करने दें और एक संक्षिप्त कैप्शन बताएं कि बटन को कहां बैठना चाहिए।
"अपेक्षित: फ़ील्ड के साथ संरेखित; वास्तविक: नीचे स्थानांतरित" जैसा कैप्शन कारण का निदान करने का दिखावा किए बिना दृश्य तुलना को स्पष्ट करता है। स्ट्रोक कंट्रास्ट और टेक्स्ट प्लेसमेंट का निरीक्षण करें, फिर चिह्नित रैस्टर को निर्यात करें। टिकट में पुनरुत्पादन पथ, ब्राउज़र विवरण और लॉग जोड़ें ताकि स्क्रीनशॉट पूरी रिपोर्ट के बजाय सबूत का एक मजबूत टुकड़ा बना रहे।
कार्यान्वित उदाहरण: एक बॉक्स, पॉइंटिंग लाइन और कैप्शन के साथ चिह्नित एक गलत संरेखित बटन
एक चिह्नित स्क्रीनशॉट क्लिकों का क्रम, समय की दौड़, कंसोल अपवाद, नेटवर्क प्रतिक्रिया या वह स्थिति नहीं दिखा सकता जो केवल पुनः लोड होने के बाद दिखाई देती है। जब गति मायने रखती है तो यह स्क्रीन रिकॉर्डिंग को प्रतिस्थापित नहीं करता है, और यह पुनरुत्पादन चरणों या लॉग के लिए खड़ा नहीं हो सकता है। छवि को जांच को सीमित करना चाहिए, न कि पूरी घटना को समेटने का दिखावा करना चाहिए।
उन सीमाओं को टिकट में दृश्यमान रखें। फसल के साथ-साथ पर्यावरण, अपेक्षित परिणाम, वास्तविक परिणाम, कदम और प्रासंगिक निदान भी शामिल करें। आयत, रेखा और पाठ चिह्न दृश्य दोष को ढूंढना आसान बनाते हैं, जबकि बाकी रिपोर्ट बताती है कि इसे दोबारा कैसे किया जाए और स्क्रीनशॉट क्या स्थापित नहीं कर सकता है।
टेकअवे: कम अंक, स्पष्ट रिपोर्ट - कैसे ब्राउज़र छवि और ड्राइंग एडिटर की फसल, एनोटेशन और ड्राइंग टूल एक स्क्रीनशॉट तैयार करते हैं जिसके लिए किसी फॉलो-अप की आवश्यकता नहीं होती है
कम अंक आमतौर पर रिपोर्ट को स्पष्ट बनाते हैं। दोष को काटें, एक आयत बनाएं, जहां दिशा मायने रखती है वहां एक रेखा का उपयोग करें, और एक संक्षिप्त कैप्शन जोड़ें जो अपेक्षित-बनाम-वास्तविक अंतर का नाम देता है। ब्राउज़र इमेज और ड्रॉइंग एडिटर उन क्रॉप, लाइन, शेप और टेक्स्ट क्षमताओं को रैस्टर एडिट के रूप में प्रदान करता है, बिना एरो प्रिमिटिव या संपूर्ण बग-रिपोर्ट सिस्टम का दावा किए।
दर्शक के संभावित आकार पर कंट्रास्ट, प्लेसमेंट और शब्दों की जांच करने के बाद ही निर्यात करें। फिर छवि को पुनरुत्पादन चरणों, लॉग और पर्यावरण विवरण के साथ जोड़ें। कार्यान्वित टूल महत्वपूर्ण पिक्सेल को स्पष्ट कर सकते हैं; वे व्यवहार संबंधी साक्ष्य की आवश्यकता को दूर नहीं कर सकते हैं जो डेवलपर्स को दोष को पुन: उत्पन्न करने और ठीक करने की सुविधा देता है।