รูปภาพและภาพถ่าย · โปรแกรมแก้ไขรูปภาพและภาพวาดของเบราว์เซอร์
วิธีใส่คำอธิบายประกอบภาพหน้าจอรายงานข้อบกพร่องเพื่อให้นักพัฒนาดำเนินการได้
· เหตุใดจึงสำคัญ
การแก้ไขภาพ ผ้าใบ การประมวลผลเบราว์เซอร์
ภาพหน้าจอที่มีกล่องใส ลูกศรหนึ่งอันและคำอธิบายภาพสั้นๆ จะบันทึกคำถามหนึ่งรอบ ภาพหน้าจอเปล่าเชิญชวนพวกเขา โพสต์นี้กำหนดแบบแผนคำอธิบายประกอบเล็กๆ น้อยๆ และแสดงวิธีนำไปใช้ในตัวแก้ไขเบราว์เซอร์
ภาพหน้าจอที่สร้างคำถามชี้แจงสามข้อ — เหตุใด 'ดูที่แนบมา' จึงไม่ใช่รายงานข้อผิดพลาด
ภาพหน้าจอข้อบกพร่องที่เป็นประโยชน์จะตอบคำถามแรกก่อนที่ผู้อ่านจะต้องถาม การจับภาพเปล่าที่มีป้ายกำกับ 'ดูที่แนบมา' ทำให้นักพัฒนาค้นหาข้อบกพร่อง การควบคุมที่ได้รับผลกระทบ และผลลัพธ์ที่คาดหวัง คำศัพท์ภาพเล็กๆ น้อยๆ ของบรรณาธิการก็เพียงพอที่จะลดความคลุมเครือนั้นได้ เช่น ครอบตัดบริเวณที่เกี่ยวข้อง วาดรูปสี่เหลี่ยมผืนผ้ารอบๆ ปัญหา ใช้เส้นเพื่อดึงความสนใจ และเพิ่มคำบรรยายที่กระชับ
ถือว่าภาพเป็นหลักฐานมากกว่าเป็นรายงานทั้งหมด ข้อความจะกลายเป็นพิกเซลทันที ดังนั้นควรเขียนคำบรรยายก่อนส่งออกและย่อให้สั้นพอที่จะสแกนได้ ขั้นตอนการทำซ้ำ บันทึก และพฤติกรรมที่คาดหวังยังคงอยู่ข้างรูปภาพ เนื่องจากไม่มีเครื่องหมายใดที่สามารถอธิบายการโต้ตอบหรือระบุว่าเฟรมที่ถ่ายไม่แสดง
หนึ่งปัญหาต่อภาพ — การครอบตัดตามภูมิภาคที่เกี่ยวข้อง ดังนั้นข้อบกพร่องจึงเป็นสิ่งแรกที่ผู้อ่านเห็น
ปัญหาหนึ่งรายการต่อรูปภาพทำให้ผู้อ่านมองเห็นเป้าหมายที่ชัดเจน ครอบตัดแผง โครเมียมของเบราว์เซอร์ และส่วนควบคุมใกล้เคียงที่ไม่เกี่ยวข้องออกไป เว้นแต่จะสร้างบริบทที่จำเป็น การครอบตัดที่แน่นหนาจะทำให้เห็นข้อบกพร่องเป็นสิ่งแรก ในขณะที่กรอบที่กว้างขึ้นเล็กน้อยสามารถรักษาความสัมพันธ์ระหว่างส่วนควบคุมที่เสียหายและเค้าโครงโดยรอบได้
เปรียบเทียบการครอบตัดกับต้นฉบับก่อนส่งออก เพื่อให้รายงานไม่ลบเบาะแสที่จำเป็นในการสร้างปัญหาโดยไม่ตั้งใจ เครื่องหมายคอนทราสต์สูงควรโดดเด่นเมื่อเทียบกับบริเวณอินเทอร์เฟซทั้งแบบสว่างและสีเข้ม และภาพหน้าจอควรเป็นส่วนเสริมแทนที่จะแทนที่ขั้นตอน บันทึก และลักษณะการทำงานที่คาดหวัง
รูปร่างที่มีความหมาย: กล่อง ลูกศร คำบรรยาย — รูปแบบขั้นต่ำสำหรับสิ่งที่แต่ละเครื่องหมายบอกและเวลาที่ควรใช้
แต่ละเครื่องหมายควรมีหนึ่งงาน สี่เหลี่ยมผืนผ้าจะแยกส่วนควบคุมหรือขอบเขตที่ได้รับผลกระทบ เส้นจะกำหนดทิศทางของดวงตาไปยังช่องว่างหรือการวางแนวที่ไม่ตรง และคำอธิบายภาพจะอธิบายความแตกต่างที่คาดไว้และความแตกต่างที่เกิดขึ้นจริง เครื่องมือแก้ไขนี้มีเครื่องหมายสี่เหลี่ยม เส้น และข้อความ ไม่มีลูกศรแบบดั้งเดิม ดังนั้นให้อธิบายทิศทางในคำบรรยายเมื่อสามารถอ่านบรรทัดธรรมดาได้อย่างคลุมเครือ
รักษาแบบแผนให้คงที่ทั่วทั้งทีม เพื่อให้ผู้อ่านไม่ต้องถอดรหัสตัวเลือกการตกแต่ง ข้อความจะถูกแรสเตอร์ลงในรูปภาพ ณ ตำแหน่ง และไม่สามารถแก้ไขได้ซ้ำเป็นออบเจ็กต์แยกต่างหาก ซึ่งทำให้ควรตรวจสอบถ้อยคำและตำแหน่งก่อนที่จะส่งออก รูปภาพยังคงเป็นหลักฐานสนับสนุน ไม่ใช่การทดแทนรายละเอียดพฤติกรรมของรายงาน
รูปร่างที่มีความหมาย: สี่เหลี่ยม เส้น และคำบรรยาย; เครื่องมือแก้ไขนี้ไม่มีเครื่องมือลูกศร
สีและน้ำหนักเป็นทางเลือกในการสื่อสาร ไม่ใช่การตกแต่ง เส้นสีแดงบางๆ อาจหายไปในอินเทอร์เฟซที่มืดหรืออ่านได้ยากหลังจากลดขนาดรูปภาพแล้ว เลือกสีที่มีคอนทราสต์ที่ชัดเจน ให้สี่เหลี่ยมผืนผ้ามีความกว้างเพียงพอที่จะส่งออกได้ และหลีกเลี่ยงการวางเส้นทับรายละเอียด UI ที่ต้องการระบุโดยตรง
ตรวจสอบภาพที่เสร็จสมบูรณ์ในขนาดที่นักพัฒนาจะเห็นจริงในตัวติดตามปัญหา คอนทราสต์ควรคงอยู่ทั้งบริเวณสว่างและมืด ในขณะที่คำบรรยายควรอ่านได้โดยไม่บดบังข้อบกพร่อง รายงานสนับสนุนยังคงต้องมีขั้นตอนการทำซ้ำและบันทึก การเน้นด้วยภาพสามารถชี้ไปที่หลักฐานได้ แต่ไม่สามารถระบุพฤติกรรมที่ขาดหายไปได้
คาดหวังกับที่เกิดขึ้นจริง — เพิ่มคำบรรยายสั้นๆ ที่ระบุสิ่งที่ควรเกิดขึ้นในตัวมันเอง
การใช้ถ้อยคำที่คาดหวังเทียบกับที่เกิดขึ้นจริงจะเปลี่ยนข้อบกพร่องที่เน้นไว้เป็นคำกล่าวอ้างเล็กๆ น้อยๆ “คาดหวัง: ปุ่มสอดคล้องกับอินพุต จริง: ปุ่มอยู่ 12 px ต่ำ” ช่วยให้ผู้อ่านมีทิศทางมากกว่ากล่องสีเพียงอย่างเดียว รักษาคำอธิบายภาพให้ตรงประเด็นและกะทัดรัด เนื่องจากรูปภาพที่ส่งออกควรชี้แจงความไม่ตรงกันที่มองเห็นได้ชัดเจน แทนที่จะกลายเป็นย่อหน้าของการวินิจฉัยเชิงคาดเดา
วางข้อความใกล้กับขอบเขตที่ทำเครื่องหมายไว้โดยไม่ปิดบังตัวควบคุมหรือช่องว่าง ตัวแก้ไขจะแรสเตอร์ข้อความในตำแหน่ง ดังนั้นให้แก้ไขถ้อยคำและตำแหน่งก่อนที่จะส่งออก แทนที่จะคาดว่าจะแก้ไขออบเจ็กต์ข้อความในภายหลัง ขั้นตอนและบันทึกการทำซ้ำควรมีรายละเอียดที่ไม่สามารถสร้างได้จากเฟรมคงที่เฟรมเดียว
ตัวอย่างการทำงาน: ปุ่มที่ไม่ตรงแนว — ครอบตัด, ใส่องค์ประกอบลงในกล่อง, ลูกศรไปที่ช่องว่าง, คำอธิบายภาพพร้อมตำแหน่งที่คาดหวัง
ใช้ปุ่มที่ไม่ตรงแนวเป็นตัวอย่างการทำงาน ครอบตัดให้แน่นพอที่จะแสดงปุ่มและการอ้างอิงการจัดตำแหน่งที่อยู่ใกล้เคียง วาดรูปสี่เหลี่ยมผืนผ้ารอบๆ ตัวควบคุม และใช้เส้นเพื่อชี้ไปที่ช่องว่างที่มองเห็นได้ เนื่องจากตัวแก้ไขไม่มีเครื่องมือลูกศร ให้บรรทัดระบุตำแหน่งและให้คำอธิบายสั้น ๆ ระบุว่าควรวางปุ่มไว้ที่ใด
คำอธิบายภาพ เช่น “คาดหวัง: สอดคล้องกับฟิลด์ จริง: เลื่อนลง” ทำให้การเปรียบเทียบภาพมีความชัดเจนโดยไม่ต้องแกล้งทำเป็นวินิจฉัยสาเหตุ ตรวจสอบคอนทราสต์ของเส้นขีดและตำแหน่งข้อความ จากนั้นส่งออกแรสเตอร์ที่ทำเครื่องหมายไว้ เพิ่มเส้นทางการทำซ้ำ รายละเอียดเบราว์เซอร์ และบันทึกในตั๋ว เพื่อให้ภาพหน้าจอยังคงเป็นหลักฐานที่ชัดเจนชิ้นเดียว แทนที่จะเป็นรายงานทั้งหมด
ตัวอย่างการทำงาน: ปุ่มที่ไม่ตรงที่มีเครื่องหมายกล่อง เส้นชี้ และคำอธิบายภาพ
ภาพหน้าจอที่ทำเครื่องหมายไว้ไม่สามารถแสดงลำดับของการคลิก จังหวะการแข่งขัน ข้อยกเว้นของคอนโซล การตอบสนองของเครือข่าย หรือสถานะที่ปรากฏหลังจากโหลดซ้ำเท่านั้น ไม่ได้แทนที่การบันทึกหน้าจอเมื่อการเคลื่อนไหวมีความสำคัญ และไม่สามารถทนต่อขั้นตอนหรือบันทึกการสร้างซ้ำได้ รูปภาพควรจำกัดการสืบสวนให้แคบลง ไม่ใช่แสร้งทำเป็นว่ามีเหตุการณ์ทั้งหมด
ทำให้ขอบเขตเหล่านั้นมองเห็นได้ในตั๋ว รวมสภาพแวดล้อม ผลลัพธ์ที่คาดหวัง ผลลัพธ์จริง ขั้นตอน และการวินิจฉัยที่เกี่ยวข้องควบคู่ไปกับการครอบตัด เครื่องหมายสี่เหลี่ยม เส้น และข้อความทำให้มองเห็นข้อบกพร่องได้ง่ายขึ้น ในขณะที่ส่วนที่เหลือของรายงานจะอธิบายวิธีทำให้มันเกิดขึ้นอีกครั้ง และสิ่งที่ภาพหน้าจอไม่สามารถระบุได้
ประเด็นสำคัญ: เครื่องหมายน้อยลง รายงานที่ชัดเจนยิ่งขึ้น — เครื่องมือครอบตัด คำอธิบายประกอบ และการวาดภาพของ Browser Image & Drawing Editor สร้างภาพหน้าจอที่ไม่จำเป็นต้องติดตามผลได้อย่างไร
คะแนนที่น้อยลงมักจะทำให้รายงานชัดเจนยิ่งขึ้น ครอบตัดไปที่จุดบกพร่อง วาดรูปสี่เหลี่ยมผืนผ้าหนึ่งอัน ใช้เส้นตรงที่ทิศทางมีความสำคัญ และเพิ่มคำบรรยายสั้นๆ ที่ตั้งชื่อความแตกต่างที่คาดไว้กับที่เป็นจริง โปรแกรมแก้ไขรูปภาพและภาพวาดของเบราว์เซอร์ให้ความสามารถในการครอบตัด เส้น รูปร่าง และข้อความในรูปแบบการแก้ไขแรสเตอร์ โดยไม่ต้องอ้างสิทธิ์ลูกศรแบบดั้งเดิมหรือระบบรายงานข้อบกพร่องที่สมบูรณ์
ส่งออกหลังจากตรวจสอบคอนทราสต์ ตำแหน่ง และข้อความตามขนาดที่ผู้ชมน่าจะเป็นไปได้เท่านั้น จากนั้นจับคู่รูปภาพกับขั้นตอนการทำซ้ำ บันทึก และรายละเอียดสภาพแวดล้อม เครื่องมือที่นำมาใช้สามารถทำให้พิกเซลสำคัญชัดเจน พวกเขาไม่สามารถขจัดความจำเป็นในการมีหลักฐานเชิงพฤติกรรมที่ช่วยให้นักพัฒนาทำซ้ำและแก้ไขข้อบกพร่องได้