Hình ảnh & hình ảnh · Trình chỉnh sửa hình ảnh & bản vẽ của trình duyệt
Cách chú thích ảnh chụp màn hình báo cáo lỗi để nhà phát triển xử lý nó
· Tại sao nó quan trọng
image-editing vải vẽ browser-processing
Ảnh chụp màn hình có ô trong suốt, một mũi tên và chú thích ngắn sẽ lưu lại một loạt câu hỏi; một ảnh chụp màn hình trần mời họ. Bài đăng này đưa ra một quy ước chú thích nhỏ và chỉ ra cách áp dụng nó trong trình chỉnh sửa trình duyệt.
Ảnh chụp màn hình tạo ra ba câu hỏi làm rõ — tại sao 'xem tệp đính kèm' không phải là báo cáo lỗi
Ảnh chụp màn hình lỗi hữu ích trả lời câu hỏi đầu tiên trước khi người đọc phải hỏi. Bản chụp trần được gắn nhãn 'xem đính kèm' giúp nhà phát triển tìm kiếm lỗi, điều khiển bị ảnh hưởng và kết quả mong đợi. Vốn từ vựng trực quan nhỏ của người biên tập đủ để giảm bớt sự mơ hồ đó: cắt theo khu vực có liên quan, vẽ hình chữ nhật xung quanh vấn đề, sử dụng một đường thẳng để hướng sự chú ý và thêm chú thích ngắn gọn.
Hãy coi hình ảnh này là bằng chứng chứ không phải là toàn bộ báo cáo. Văn bản sẽ trở thành pixel ngay lập tức, vì vậy hãy viết chú thích trước khi xuất và giữ chú thích đủ ngắn để quét. Các bước sao chép, nhật ký và hành vi dự kiến vẫn thuộc về hình ảnh vì không có dấu hiệu nào có thể mô tả các tương tác hoặc trạng thái mà khung hình được chụp không hiển thị.
Một vấn đề trên mỗi hình ảnh - cắt xén vùng có liên quan để lỗi là điều đầu tiên người đọc nhìn thấy
Một vấn đề trên mỗi hình ảnh giúp người đọc có được mục tiêu trực quan rõ ràng. Cắt bỏ các bảng không liên quan, chrome của trình duyệt và các điều khiển lân cận trừ khi chúng thiết lập được ngữ cảnh cần thiết. Việc cắt xén chặt chẽ khiến khuyết điểm được nhìn thấy đầu tiên, trong khi khung rộng hơn một chút có thể duy trì mối quan hệ giữa phần điều khiển bị hỏng và bố cục xung quanh.
So sánh phần cắt với bản gốc trước khi xuất để báo cáo không vô tình loại bỏ manh mối cần thiết để tái tạo vấn đề. Các dấu có độ tương phản cao phải nổi bật trên cả vùng giao diện sáng và tối, đồng thời ảnh chụp màn hình phải bổ sung thay vì thay thế các bước, nhật ký và hành vi dự kiến.
Các hình dạng có ý nghĩa: hộp, mũi tên, chú thích — một quy ước tối thiểu về ý nghĩa của từng nhãn hiệu và thời điểm sử dụng từng nhãn hiệu
Mỗi nhãn hiệu nên thực hiện một công việc. Một hình chữ nhật sẽ cô lập vùng hoặc điều khiển bị ảnh hưởng, một đường thẳng hướng mắt về một khoảng trống hoặc sự lệch hướng và chú thích giải thích sự khác biệt giữa dự kiến và thực tế. Trình chỉnh sửa này cung cấp các dấu hình chữ nhật, đường kẻ và văn bản; nó không có mũi tên nguyên thủy, vì vậy hãy mô tả hướng trong chú thích khi một dòng đơn giản có thể được đọc một cách mơ hồ.
Giữ quy ước ổn định trong toàn nhóm để người đọc không phải giải mã các lựa chọn trang trí. Văn bản được phân loại thành hình ảnh tại vị trí và không thể chỉnh sửa lại dưới dạng một đối tượng riêng biệt, điều này khiến cho từ ngữ và vị trí đáng được kiểm tra trước khi xuất. Hình ảnh vẫn là bằng chứng hỗ trợ chứ không phải là sự thay thế cho các chi tiết về hành vi của báo cáo.
Các hình có ý nghĩa: hình chữ nhật, đường thẳng và chú thích; trình soạn thảo này không có công cụ mũi tên
Màu sắc và trọng lượng là sự lựa chọn để giao tiếp chứ không phải để trang trí. Một nét màu đỏ mỏng có thể biến mất trên giao diện tối hoặc trở nên khó đọc sau khi hình ảnh bị thu nhỏ. Chọn màu có độ tương phản rõ ràng, cung cấp cho hình chữ nhật đủ chiều rộng để tồn tại khi xuất và tránh đặt một đường trực tiếp lên chi tiết giao diện người dùng mà nó dùng để xác định.
Kiểm tra hình ảnh hoàn thiện ở kích thước mà nhà phát triển thực sự sẽ xem trong trình theo dõi vấn đề. Độ tương phản phải tồn tại ở cả vùng sáng và vùng tối, trong khi chú thích vẫn có thể đọc được mà không che đi khuyết điểm. Báo cáo hỗ trợ vẫn cần các bước sao chép và nhật ký; sự nhấn mạnh trực quan có thể chỉ ra bằng chứng nhưng không thể cung cấp hành vi còn thiếu.
Dự kiến so với thực tế - thêm chú thích ngắn nêu rõ điều gì đáng lẽ phải xảy ra, ngay trong chính hình ảnh đó
Cách diễn đạt dự kiến so với thực tế biến một khiếm khuyết nổi bật thành một tuyên bố nhỏ. “Dự kiến: nút được căn chỉnh với đầu vào; thực tế: nút nằm 12 px ở mức thấp” cung cấp cho người đọc nhiều hướng hơn là chỉ sử dụng một hộp màu. Hãy giữ chú thích đó thực tế và ngắn gọn vì hình ảnh được xuất sẽ làm rõ sự không khớp có thể nhìn thấy được thay vì trở thành một đoạn chẩn đoán mang tính suy đoán.
Đặt văn bản gần vùng được đánh dấu mà không che mất điều khiển hoặc khoảng trống. Trình chỉnh sửa sắp xếp văn bản tại vị trí, vì vậy hãy sửa lại từ ngữ và vị trí trước khi xuất thay vì mong đợi chỉnh sửa đối tượng văn bản sau đó. Các bước sao chép và nhật ký phải chứa các chi tiết không thể thiết lập từ một khung tĩnh.
Ví dụ đã hoạt động: nút bị căn chỉnh sai - cắt, đóng hộp phần tử, mũi tên tới khoảng trống, chú thích với vị trí mong đợi
Lấy một nút bị lệch làm ví dụ hoạt động. Cắt đủ chặt để hiển thị nút và tham chiếu căn chỉnh lân cận của nó, vẽ hình chữ nhật xung quanh điều khiển và sử dụng một đường thẳng để trỏ vào khoảng trống hiển thị. Vì trình chỉnh sửa không có công cụ mũi tên nên hãy để dòng xác định vị trí và để một chú thích ngắn cho biết vị trí của nút.
Chú thích chẳng hạn như “Dự kiến: căn chỉnh với trường; thực tế: dịch chuyển xuống” làm cho việc so sánh trực quan trở nên rõ ràng mà không giả vờ chẩn đoán nguyên nhân. Kiểm tra độ tương phản của nét và vị trí văn bản, sau đó xuất raster đã đánh dấu. Thêm đường dẫn sao chép, chi tiết trình duyệt và nhật ký yêu cầu để ảnh chụp màn hình vẫn là một bằng chứng thuyết phục thay vì toàn bộ báo cáo.
Ví dụ hoạt động: nút bị căn chỉnh sai được đánh dấu bằng hộp, đường trỏ và chú thích
Ảnh chụp màn hình được đánh dấu không thể hiển thị chuỗi nhấp chuột, cuộc đua thời gian, ngoại lệ bảng điều khiển, phản hồi mạng hoặc trạng thái chỉ xuất hiện sau khi tải lại. Nó không thay thế bản ghi màn hình khi chuyển động quan trọng và nó không thể hỗ trợ các bước tái tạo hoặc nhật ký. Hình ảnh nên thu hẹp cuộc điều tra chứ không phải giả vờ chứa đựng toàn bộ sự việc.
Giữ những ranh giới đó hiển thị trong phiếu. Bao gồm môi trường, kết quả mong đợi, kết quả thực tế, các bước và chẩn đoán có liên quan cùng với vụ mùa. Các dấu hình chữ nhật, đường kẻ và văn bản giúp tìm ra lỗi hình ảnh dễ dàng hơn, trong khi phần còn lại của báo cáo giải thích cách khiến lỗi đó xảy ra lần nữa và những gì mà ảnh chụp màn hình không thể xác định được.
Bài học rút ra: ít điểm hơn, báo cáo rõ ràng hơn - cách các công cụ cắt, chú thích và vẽ của Trình chỉnh sửa Hình ảnh & Bản vẽ của Trình duyệt tạo ra ảnh chụp màn hình mà không cần theo dõi
Ít điểm hơn thường làm cho báo cáo rõ ràng hơn. Cắt theo khuyết điểm, vẽ một hình chữ nhật, sử dụng một đường thẳng ở vị trí quan trọng và thêm chú thích ngắn nêu tên sự khác biệt giữa dự kiến và thực tế. Trình chỉnh sửa hình ảnh & bản vẽ của trình duyệt cung cấp các khả năng cắt, đường, hình dạng và văn bản dưới dạng chỉnh sửa raster mà không cần yêu cầu một mũi tên nguyên thủy hoặc hệ thống báo cáo lỗi hoàn chỉnh.
Chỉ xuất sau khi kiểm tra độ tương phản, vị trí và từ ngữ ở kích thước phù hợp với người xem. Sau đó ghép nối hình ảnh với các bước tái tạo, nhật ký và chi tiết môi trường. Các công cụ được triển khai có thể làm cho các pixel quan trọng trở nên rõ ràng; họ không thể loại bỏ nhu cầu về bằng chứng hành vi cho phép các nhà phát triển tái tạo và sửa lỗi.