Imej & foto · Imej Pelayar & Editor Lukisan
Cara menganotasi tangkapan skrin laporan pepijat supaya pembangun bertindak ke atasnya
· Mengapa ia penting
penyuntingan imej kanvas pemprosesan pelayar
Tangkapan skrin dengan kotak yang jelas, satu anak panah dan kapsyen pendek menyimpan pusingan soalan; tangkapan skrin kosong menjemput mereka. Siaran ini menetapkan konvensyen anotasi kecil dan menunjukkan cara menggunakannya dalam editor pelayar.
Tangkapan skrin yang menghasilkan tiga soalan penjelasan — mengapa 'lihat lampiran' bukan laporan pepijat
Tangkapan skrin pepijat yang berguna menjawab soalan pertama sebelum pembaca perlu bertanya. Tangkapan kosong berlabel 'lihat lampiran' meninggalkan pembangun mencari kecacatan, kawalan yang terjejas dan hasil yang dijangkakan. Perbendaharaan kata visual kecil editor sudah cukup untuk mengurangkan kekaburan itu: potong ke kawasan yang berkaitan, lukis segi empat tepat di sekeliling masalah, gunakan garis untuk mengarahkan perhatian dan tambah kapsyen ringkas.
Anggap imej sebagai bukti dan bukannya sebagai keseluruhan laporan. Teks menjadi piksel serta-merta, jadi tulis kapsyen sebelum mengeksport dan pastikan ia cukup pendek untuk mengimbas. Langkah pembiakan, log dan tingkah laku yang dijangkakan masih berada di sebelah imej kerana tiada tanda yang boleh menggambarkan interaksi atau menyatakan bahawa bingkai yang ditangkap tidak ditunjukkan.
Satu masalah bagi setiap imej — memotong ke kawasan yang berkaitan supaya kecacatan adalah perkara pertama yang dilihat oleh pembaca
Satu masalah bagi setiap imej memberikan pembaca sasaran visual yang bersih. Potong panel yang tidak berkaitan, krom pelayar dan kawalan jiran melainkan mereka mewujudkan konteks yang diperlukan. Tanaman yang ketat menjadikan kecacatan perkara pertama dilihat, manakala bingkai yang lebih lebar sedikit boleh mengekalkan hubungan antara kawalan yang rosak dan susun atur sekeliling.
Bandingkan tanaman dengan yang asal sebelum mengeksport supaya laporan tidak secara tidak sengaja mengalih keluar petunjuk yang diperlukan untuk menghasilkan semula isu tersebut. Tanda kontras tinggi harus menonjol pada kedua-dua kawasan antara muka terang dan gelap, dan tangkapan skrin harus menambah dan bukannya menggantikan langkah, log dan gelagat yang dijangkakan.
Bentuk dengan makna: kotak, anak panah, kapsyen — konvensyen minimum untuk perkara yang dinyatakan oleh setiap tanda dan masa untuk menggunakannya
Setiap markah hendaklah membawa satu pekerjaan. Segi empat tepat mengasingkan kawalan atau rantau yang terjejas, garisan menghalakan mata ke arah jurang atau salah jajaran, dan kapsyen menerangkan perbezaan jangkaan berbanding sebenar. Editor ini menawarkan tanda segi empat tepat, garis dan teks; ia tidak mempunyai anak panah primitif, jadi huraikan arah dalam kapsyen apabila garis biasa boleh dibaca dengan samar-samar.
Pastikan konvensyen stabil di seluruh pasukan supaya pembaca tidak perlu menyahkod pilihan hiasan. Teks dirasterkan ke dalam imej pada peletakan dan tidak boleh disunting semula sebagai objek berasingan, yang menjadikan perkataan dan lokasi bernilai diperiksa sebelum dieksport. Imej itu kekal sebagai bukti sokongan, bukan pengganti untuk butiran tingkah laku laporan itu.
Bentuk dengan makna: segi empat tepat, garisan dan kapsyen; editor ini tidak mempunyai alat anak panah
Warna dan berat adalah pilihan komunikasi, bukan hiasan. Strok merah nipis boleh hilang pada antara muka gelap atau menjadi sukar dibaca selepas imej dikurangkan. Pilih warna dengan kontras yang jelas, berikan segi empat tepat lebar yang mencukupi untuk bertahan dalam eksport, dan elakkan meletakkan garis terus di atas butiran UI yang ingin dikenal pasti.
Semak imej siap pada saiz yang sebenarnya akan dilihat oleh pembangun dalam penjejak isu. Kontras harus bertahan di kawasan terang dan gelap, manakala kapsyen harus kekal boleh dibaca tanpa menutupi kecacatan. Laporan sokongan masih memerlukan langkah pembiakan dan log; penekanan visual boleh menunjukkan bukti tetapi tidak dapat membekalkan tingkah laku yang hilang.
Dijangka berbanding sebenar — menambah kapsyen pendek yang menyatakan perkara yang sepatutnya berlaku, dalam imej itu sendiri
Perkataan jangkaan-berbanding-sebenar menukar kecacatan yang diserlahkan kepada tuntutan kecil. "Dijangka: butang sejajar dengan input; sebenar: butang duduk 12 px rendah" memberikan pembaca lebih arah daripada kotak berwarna sahaja. Pastikan kapsyen itu fakta dan padat, kerana imej yang dieksport harus menjelaskan ketidakpadanan yang boleh dilihat dan bukannya menjadi perenggan diagnosis spekulatif.
Letakkan teks berhampiran kawasan yang ditanda tanpa menutup kawalan atau jurang. Editor meraster teks pada peletakan, jadi semak semula perkataan dan kedudukan sebelum mengeksport dan bukannya mengharapkan untuk mengedit objek teks kemudian. Langkah-langkah pembiakan dan log harus membawa butiran yang tidak boleh diwujudkan daripada satu bingkai statik.
Contoh berfungsi: butang tidak sejajar — pangkas, kotak elemen, anak panah ke jurang, kapsyen dengan kedudukan yang dijangkakan
Ambil butang tidak sejajar sebagai contoh yang berfungsi. Pangkas cukup ketat untuk menunjukkan butang dan rujukan penjajaran bersebelahannya, lukis segi empat tepat di sekeliling kawalan dan gunakan garisan untuk menghala ke celah yang boleh dilihat. Oleh kerana editor tidak mempunyai alat anak panah, biarkan baris mengenal pasti lokasi dan biarkan kapsyen pendek menyatakan di mana butang harus diletakkan.
Kapsyen seperti "Dijangka: sejajar dengan medan; sebenar: beralih ke bawah" menjadikan perbandingan visual itu jelas tanpa berpura-pura mendiagnosis punca. Periksa kontras strok dan peletakan teks, kemudian eksport raster yang ditanda. Tambahkan laluan pembiakan, butiran pelayar dan log masuk tiket supaya tangkapan skrin kekal sebagai bukti kukuh dan bukannya keseluruhan laporan.
Contoh berfungsi: butang tidak sejajar ditandakan dengan kotak, garis penunjuk dan kapsyen
Tangkapan skrin yang ditanda tidak boleh menunjukkan urutan klik, perlumbaan masa, pengecualian konsol, respons rangkaian atau keadaan yang muncul sahaja selepas muat semula. Ia tidak menggantikan rakaman skrin apabila gerakan penting, dan ia tidak boleh digunakan untuk langkah pembiakan atau log. Imej itu harus menyempitkan penyiasatan, bukan berpura-pura mengandungi keseluruhan kejadian.
Pastikan sempadan tersebut kelihatan dalam tiket. Sertakan persekitaran, hasil yang dijangkakan, hasil sebenar, langkah-langkah dan diagnostik yang berkaitan di samping tanaman. Tanda segi empat tepat, garisan dan teks menjadikan kecacatan visual lebih mudah dicari, manakala laporan yang lain menerangkan cara membuatnya berlaku semula dan perkara yang tidak dapat diwujudkan oleh tangkapan skrin.
Bawa pulang: kurang markah, laporan lebih jelas — cara pemangkasan Imej Pelayar & Editor Lukisan, anotasi dan alat lukisan menghasilkan tangkapan skrin yang tidak memerlukan susulan
Kurang markah biasanya menjadikan laporan lebih jelas. Pangkas kepada kecacatan, lukis satu segi empat tepat, gunakan garisan yang penting arah dan tambahkan kapsyen pendek yang menamakan perbezaan yang dijangka-berbanding-sebenar. Editor Imej & Lukisan Pelayar membekalkan keupayaan pemangkasan, garisan, bentuk dan teks tersebut sebagai pengeditan raster, tanpa menuntut anak panah primitif atau sistem laporan pepijat yang lengkap.
Eksport sahaja selepas menyemak kontras, peletakan dan perkataan pada kemungkinan saiz penonton. Kemudian gandingkan imej dengan langkah pembiakan, log dan butiran persekitaran. Alat yang dilaksanakan boleh menjadikan piksel penting jelas; mereka tidak boleh mengalih keluar keperluan untuk bukti tingkah laku yang membolehkan pembangun menghasilkan semula dan membetulkan kecacatan itu.