الصور والصور · محرر الصور والرسم في المتصفح
كيفية إضافة تعليق توضيحي إلى لقطة شاشة لتقرير الخطأ حتى يتصرف المطورون بناءً عليها
· لماذا يهم
تحرير الصور قماش معالجة المتصفح
لقطة شاشة تحتوي على مربع واضح وسهم واحد وتعليق قصير تحفظ مجموعة من الأسئلة؛ لقطة شاشة عارية تدعوهم. تحدد هذه المقالة اتفاقية توضيحية صغيرة وتوضح كيفية تطبيقها في محرر المتصفح.
لقطة الشاشة التي أنتجت ثلاثة أسئلة توضيحية - لماذا لا يعد "انظر المرفق" تقريرًا عن الأخطاء
تجيب لقطة شاشة الأخطاء المفيدة على السؤال الأول قبل أن يطرحه القارئ. الالتقاط المسمى "انظر المرفق" يترك المطور يبحث عن الخلل، وعنصر التحكم المتأثر، والنتيجة المتوقعة. تكفي المفردات البصرية الصغيرة للمحرر لتقليل هذا الغموض: قم بقص المنطقة ذات الصلة، وارسم مستطيلًا حول المشكلة، واستخدم خطًا لتوجيه الانتباه، وأضف تعليقًا موجزًا.
تعامل مع الصورة كدليل وليس كتقرير كامل. يتحول النص إلى وحدات بكسل على الفور، لذا اكتب التسمية التوضيحية قبل التصدير واجعلها قصيرة بما يكفي لمسحها ضوئيًا. لا تزال خطوات الاستنساخ والسجلات والسلوك المتوقع تنتمي إلى جانب الصورة لأنه لا توجد علامة يمكنها وصف التفاعلات أو الإشارة إلى أن الإطار الملتقط لا يظهر.
مشكلة واحدة لكل صورة - الاقتصاص إلى المنطقة ذات الصلة بحيث يكون الخلل هو أول ما يراه القارئ
مشكلة واحدة لكل صورة تمنح القارئ هدفًا بصريًا نظيفًا. قم بإزالة اللوحات غير ذات الصلة، ومتصفح Chrome، وعناصر التحكم المجاورة ما لم تحدد السياق الضروري. يؤدي الاقتصاص الضيق إلى جعل العيب هو أول ما يتم رؤيته، بينما يمكن للإطار الأوسع قليلاً أن يحافظ على العلاقة بين عنصر التحكم المعطل والتخطيط المحيط.
قارن المحصول بالأصل قبل التصدير حتى لا يزيل التقرير الدليل المطلوب لإعادة إظهار المشكلة عن طريق الخطأ. يجب أن تبرز العلامات عالية التباين في مناطق الواجهة الفاتحة والداكنة، ويجب أن تكون لقطة الشاشة مكملة للخطوات والسجلات والسلوك المتوقع بدلاً من استبدالها.
الأشكال ذات المعنى: مربع، سهم، تسمية توضيحية - وهو الحد الأدنى من الاصطلاح لما تقوله كل علامة ومتى يتم استخدام كل منها
يجب أن تحمل كل علامة وظيفة واحدة. يعزل المستطيل عنصر التحكم أو المنطقة المتأثرة، ويوجه الخط العين نحو فجوة أو محاذاة غير صحيحة، وتشرح التسمية التوضيحية الفرق المتوقع مقابل الفعلي. يقدم هذا المحرر علامات مستطيلة وخطية ونصية؛ لا يحتوي على سهم بدائي، لذا قم بوصف الاتجاه في التسمية التوضيحية عندما يمكن قراءة خط عادي بشكل غامض.
حافظ على استقرار الاتفاقية عبر الفريق حتى لا يضطر القارئ إلى فك رموز الخيارات الزخرفية. يتم تنقيط النص في الصورة عند الموضع ولا يمكن إعادة تحريره ككائن منفصل، مما يجعل الصياغة والموقع يستحقان التحقق قبل التصدير. وتبقى الصورة دليلاً داعماً، وليست بديلاً عن التفاصيل السلوكية الواردة في التقرير.
الأشكال ذات المعنى: المستطيل والخط والتسمية التوضيحية؛ لا يحتوي هذا المحرر على أداة سهم
اللون والوزن هما خياران للتواصل، وليس للزينة. يمكن أن تختفي الخطوط الحمراء الرفيعة على واجهة داكنة أو قد يصعب قراءتها بعد تصغير الصورة. اختر لونًا بتباين واضح، وامنح المستطيل عرضًا كافيًا لتحمل عملية التصدير، وتجنب وضع خط مباشرة فوق تفاصيل واجهة المستخدم التي من المفترض أن يحددها.
تحقق من الصورة النهائية بالحجم الذي سيعرضه المطور فعليًا في أداة تعقب المشكلات. يجب أن يظل التباين في كل من المناطق الفاتحة والداكنة، بينما يجب أن يظل التعليق قابلاً للقراءة دون تغطية الخلل. لا يزال التقرير الداعم بحاجة إلى خطوات وسجلات إعادة الإنتاج؛ يمكن أن يشير التركيز البصري إلى الأدلة ولكن لا يمكنه توفير السلوك المفقود.
المتوقع مقابل الفعلي - إضافة تعليق قصير يوضح ما كان يجب أن يحدث، في الصورة نفسها
إن الصياغة المتوقعة مقابل الفعلية تحول العيب المميز إلى مطالبة صغيرة. "المتوقع: الزر يتماشى مع الإدخال؛ الفعلي: الزر يجلس 12 px منخفضًا" يمنح القارئ اتجاهًا أكثر من المربع الملون وحده. اجعل هذا التعليق واقعيًا ومضغوطًا، لأن الصورة المصدرة يجب أن توضح عدم التطابق المرئي بدلاً من أن تصبح فقرة من التشخيص التخميني.
ضع النص بالقرب من المنطقة المحددة دون تغطية عنصر التحكم أو الفجوة. يقوم المحرر بتنقيط النص عند الموضع، لذا قم بمراجعة الصياغة والموضع قبل التصدير بدلاً من توقع تحرير كائن النص لاحقًا. يجب أن تحمل خطوات وسجلات الاستنساخ التفاصيل التي لا يمكن إنشاؤها من إطار ثابت واحد.
مثال عملي: زر تمت محاذاته بشكل غير صحيح — قم بقص العنصر ووضعه في مربع، ثم قم بالسهم نحو الفجوة، ثم قم بالتسمية التوضيحية بالموضع المتوقع
خذ زرًا غير محاذٍ كمثال عملي. قم بالقص بإحكام كافٍ لإظهار الزر ومرجع المحاذاة المجاور له، وارسم مستطيلًا حول عنصر التحكم، واستخدم خطًا للإشارة إلى الفجوة المرئية. نظرًا لأن المحرر لا يحتوي على أداة سهم، فاسمح للسطر بتحديد الموقع واترك تسمية توضيحية قصيرة تشير إلى المكان الذي يجب أن يوجد فيه الزر.
تسمية توضيحية مثل "متوقع: محاذاة مع الحقل؛ فعلي: تم إزاحته لأسفل" تجعل المقارنة المرئية واضحة دون التظاهر بتشخيص السبب. افحص تباين الحدود وموضع النص، ثم قم بتصدير البيانات النقطية المميزة. أضف مسار النسخ وتفاصيل المتصفح والسجلات في التذكرة بحيث تظل لقطة الشاشة دليلًا قويًا بدلاً من التقرير بأكمله.
مثال عملي: زر تمت محاذاته بشكل غير صحيح تم وضع علامة عليه بمربع وخط تأشير وتعليق
لا يمكن أن تظهر لقطة الشاشة المميزة سلسلة من النقرات، أو سباق توقيت، أو استثناء وحدة التحكم، أو استجابة الشبكة، أو الحالة التي تظهر فقط بعد إعادة التحميل. فهو لا يحل محل تسجيل الشاشة عندما تكون الحركة مهمة، ولا يمكنه أن يحل محل خطوات أو سجلات إعادة الإنتاج. يجب أن تضيق الصورة نطاق التحقيق، لا أن تتظاهر بأنها تحتوي على الحادثة برمتها.
أبقِ هذه الحدود مرئية في التذكرة. قم بتضمين البيئة والنتيجة المتوقعة والنتيجة الفعلية والخطوات والتشخيصات ذات الصلة إلى جانب المحصول. تعمل العلامات المستطيلة والخطية والنصية على تسهيل العثور على الخلل البصري، بينما يشرح باقي التقرير كيفية حدوث ذلك مرة أخرى وما لا يمكن للقطة الشاشة تحديده.
الوجبات الجاهزة: علامات أقل، تقرير أكثر وضوحًا - كيف تنتج أدوات القص والتعليقات التوضيحية والرسم في محرر الصور والرسم في المتصفح لقطة شاشة لا تحتاج إلى متابعة
عادةً ما تجعل العلامات الأقل التقرير أكثر وضوحًا. قم بقص العيب، وارسم مستطيلًا واحدًا، واستخدم خطًا حيث يكون الاتجاه مهمًا، وأضف تعليقًا قصيرًا يشير إلى الفرق المتوقع مقابل الفعلي. يوفر محرر الصور والرسم في المتصفح إمكانيات الاقتصاص والخط والشكل والنص كتحريرات نقطية، دون المطالبة بأسهم بدائية أو نظام كامل لتقرير الأخطاء.
قم بالتصدير فقط بعد التحقق من التباين والموضع والصياغة بالحجم المحتمل للمشاهد. ثم قم بإقران الصورة بخطوات إعادة الإنتاج والسجلات وتفاصيل البيئة. يمكن للأدوات المطبقة أن تجعل وحدات البكسل المهمة واضحة؛ ولا يمكنهم إزالة الحاجة إلى الأدلة السلوكية التي تسمح للمطورين بإعادة إنتاج الخلل وإصلاحه.