Nghiên cứu lược đồ màu nổi bật

Hầu hết các lập trình viên đều có sở thích cá nhân của riêng họ đối với các phối màu làm nổi bật cú pháp, nhưng tôi đã tự hỏi, có ai đã từng thực hiện một nghiên cứu khoa học thực tế về cách phối màu tốt nhất sẽ là gì không? Tôi tưởng tượng một nghiên cứu như vậy sẽ xem xét những thứ như tính dễ đọc của mã, liệu mắt của lập trình viên có bị thu hút vào những phần quan trọng nhất không, v.v.

Có lẽ điều này đã được thực hiện cho một cái gì đó giống như chủ đề Visual Studio mặc định, nhưng tôi muốn biết liệu có bất kỳ nghiên cứu công khai nào ngoài đó không, và những gì họ tìm thấy.

Phối màu cụ thể không thể khách quan hơn tất cả các bảng màu khác, thứ hạng của chúng sẽ mang tính chủ quan riêng dựa trên các yếu tố văn hóa và hương vị.

Tuy nhiên, một số quy tắc nhất định về khả năng đọc / rõ ràng, sử dụng trong môi trường ánh sáng xung quanh cụ thể, v.v ... đều có thể áp dụng, chúng sẽ được chuyển từ thiết kế đồ họa / kiểu chữ, giao diện máy tính của con người và các nghiên cứu liên quan khác.

Dự án Solarized của Ethan Schoonover là một tác phẩm thú vị: http://ethanschoonover.com/solarized

Họ chỉ nghiên cứu gần đây có liên quan từ xa đến chủ đề mà tôi biết là từ năm 2004: "Tác động của sự kết hợp màu nền văn bản trang web đến khả năng đọc, duy trì, thẩm mỹ và ý định hành vi" của Hall & Hanna . Tuy nhiên, nó không dành cho mã mà là các trang web và bảng màu duy nhất họ xem xét là màu nền trước và màu nền.

Tôi đã đặt câu hỏi về các nghiên cứu về các bảng màu liên quan cho các lập trình viên trên Skepics.SE: "Các lược đồ màu sáng cho màn hình máy tính có tốt hơn cho các lập trình viên không?" . Nó đã không được trả lời trong gần 2 năm nay, trong khi thông thường loại câu hỏi đó được trả lời khá nhanh ở đó. Điều đó khiến tôi tin rằng không có nghiên cứu khoa học nào như vậy.

Gần đây chúng tôi đã thực hiện một nghiên cứu người dùng về các bản trình bày mã phong phú hơn về mặt cú pháp. Mặc dù nó không hoàn toàn là một nghiên cứu về các lược đồ làm nổi bật cú pháp, bạn có thể thấy nó sâu sắc:

D. Asenov và O. Hilliges và P. Müller - Ảnh hưởng của trực quan hóa hơn đối với việc hiểu mã và đây là video về cuộc nói chuyện 10 phút tại CHI 2016.

Chúng tôi đã so sánh cú pháp Eclipse tiêu chuẩn làm nổi bật với hai bản trình bày mã phong phú hơn với các phần mở rộng trực quan như:

• Phác thảo thay vì niềng răng xoăn
• Màu nền xen kẽ, thay vì dấu phẩy, để phân tách các thành phần danh sách
• Biểu tượng thay vì một số từ khóa
• Màu nền bổ sung cho một số câu lệnh và biểu thức

Nghiên cứu cho thấy việc tăng sự đa dạng trực quan của bản trình bày có ảnh hưởng khá lớn đến tốc độ mà các nhà phát triển có thể hiểu cấu trúc mã - thời gian đã giảm tới 75%. Điều quan trọng cần lưu ý là đây là về các câu hỏi đơn giản liên quan đến cấu trúc mã (ví dụ: "Có các vòng lặp lồng nhau trong phương thức không?"). Chúng tôi đã không kiểm tra các nhiệm vụ đòi hỏi tư duy phức tạp (ví dụ: "Phương pháp này làm gì?"), Vì chúng bị chi phối bởi kỹ năng của người đó hơn là hiệu ứng của việc trình bày mã.

Một phát hiện thú vị từ nghiên cứu của chúng tôi là chúng tôi đã không quan sát thấy bất kỳ sự quá tải thị giác nào do sự trực quan phong phú hơn. Mặc dù nhiều người tham gia nói rằng họ cảm thấy quá tải hoặc nhầm lẫn về hình ảnh, dữ liệu mà chúng tôi đã thu thập (thời gian để đưa ra câu trả lời và liệu nó có đúng không) chỉ cho thấy sự cải thiện với hình ảnh phong phú hơn.

Đối với việc làm nổi bật cú pháp, các phát hiện của chúng tôi gián tiếp gợi ý rằng sử dụng nhiều hình ảnh trực quan hơn (ví dụ như nhiều màu sắc hơn và màu sắc cho nhiều loại cấu trúc lập trình hơn) sẽ có ích. Ví dụ: một chủ đề có màu riêng cho các loại tích hợp, từ khóa dòng kiểm soát và phần còn lại của từ khóa, có khả năng cải thiện sự hiểu biết về cấu trúc mã trong một số trường hợp, so với một chủ đề đơn giản sử dụng một màu cho tất cả từ khóa.

Tôi không nghĩ rằng những nghiên cứu như vậy tồn tại. Trong thực tế, khi một công ty tạo ra một IDE mới, lược đồ màu làm nổi bật cú pháp dựa trên các lược đồ tồn tại của các IDE khác.

Ví dụ, chủ đề Visual Studio mặc định không có gì mới cũng như bản gốc . Màu xanh đã được sử dụng cho các từ khóa trong nhiều năm, bao gồm cả các IDE Ada cũ. Điều tương tự cho ý kiến ​​xanh. Một số màu ít nhiều "mới", như teal cho tên của các lớp, nhưng bạn có thể dễ dàng hiểu lý do đằng sau sự lựa chọn của các màu đó: sẽ hợp lý khi đặt màu không xa màu xanh lam (vì chúng là màu khá giống các từ dành riêng: Int32cho .NET, intcho C #, v.v.), nhưng nó phải giữ một màu cơ bản, khác với màu xanh đã được sử dụng.

Bây giờ, những gì về sơ đồ thay thế, như văn bản ánh sáng phổ biến trên nền tối? Chúng không được tạo ra bởi một nhà khoa học đã nghiên cứu đề tài này trong nhiều năm và thực hiện một số phép tính phức tạp để có được kết quả hoàn hảo chính xác. Thay vào đó, một nhà phát triển tạo ra một sơ đồ có thể đọc được cho anh ta. Ông chia sẻ nó trên một trang web, và nó trở nên phổ biến . Đó là tất cả sự kỳ diệu.

Điều cuối cùng: có quy tắc dễ đọc? Không quá nhiều.

• Đối với hầu hết các phần, đó là một cái gì đó chủ quan : bạn không thể tranh luận rằng một từ khóa màu xanh dễ đọc hơn từ khóa màu tím, bởi vì ai đó sẽ có thể trả lời hơn đối với anh ta, trên màn hình của anh ta, từ khóa màu tím dễ đọc hơn từ khóa màu xanh .

• Đối với một phần khác, nó chỉ hợp lý . Lược đồ đen trắng sẽ không thể đọc được như lược đồ mặc định. Theo cách tương tự, bạn không thể đặt từ khóa thành màu vàng nhạt và các nhận xét có màu xám nhạt (giả sử #eee) trên nền trắng, vì nó không thể đọc được và thậm chí bạn không phải giải thích tại sao. Đó là những quy tắc tương tự khi làm một trang web hoặc in một cuốn sách hoặc bất cứ điều gì.

Là một loại nghiên cứu sơ bộ, các ảnh chụp màn hình bên dưới hiển thị 3 chủ đề màu được sử dụng để làm nổi bật cú pháp XSLT. Tôi đã chọn XSLT vì nó đặt ra một thách thức đặc biệt vì số lượng lớn các yếu tố ngôn ngữ - và cũng vì nhiều nhà phát triển mô tả nó là xấu.

Năng lượng mặt trời

Đêm giao thừa

Github

Quan sát

Số lượng màu được sử dụng trong mẫu giúp phân biệt các yếu tố ngôn ngữ khác nhau, nhưng nó có thể gây mất tập trung cho nhà phát triển.

Nó giúp phát triển từ màu lạnh sang màu ấm nếu có thể, sử dụng màu lạnh cho các phần trung tính hơn của ngôn ngữ. Một cách khác là chuyển từ màu pastel sang màu sinh động hơn (màu sắc bão hòa).

Màu nền tạo ra sự khác biệt rất lớn đối với nhận thức về màu nền trước.

Một số màu nền trước liền kề có thể gây ra các xung đột xấu làm rối mắt, đặc biệt là màu đỏ và màu xanh lá cây dường như không phù hợp với nhau.

Với nền tối, việc cung cấp một loạt các màu nền trước có độ tương phản với nhau và nền sau sẽ dễ dàng hơn.

Cuối cùng, các yếu tố bên ngoài như ánh sáng xung quanh và chất lượng và hiệu chuẩn của màn hình tạo ra sự khác biệt rất lớn.

Phần kết luận

Tốt nhất là sử dụng các công cụ cung cấp một cách có thể mở rộng để thiết lập các chủ đề màu vì không chắc là bất kỳ chủ đề màu nào sẽ đáp ứng nhu cầu của tất cả các nhà phát triển và ngay cả cùng một nhà phát triển có thể thường xuyên thay đổi tùy chọn tùy thuộc vào nhiều yếu tố khác nhau.

Chà, tôi đoán câu hỏi đầu tiên sẽ là liệu nền trắng có phải là một ý tưởng tuyệt vời hay không. Chỉ vì nó gần với giấy thật và chúng ta có thể tìm thấy ở mọi nơi trên Internet những ngày này không nhất thiết phải làm cho nó trở thành một lựa chọn tốt (hoặc tôi có thể nói là hoàn hảo).

Tôi nhớ rằng (nhiều) năm trước chúng ta chỉ có "bảng màu" màu vàng-đen. Và tôi cũng nhớ rằng nó không tệ đến thế. Nó không có sự tương phản như đen trắng. Cách đây không lâu tôi đã biết rằng nó cũng tốt hơn cho mắt người.

Đôi khi tôi thực sự tự hỏi ai là người thiết kế các phối màu, ví dụ như được vận chuyển với các hệ điều hành. Tôi thường bỏ qua chúng, nhưng tôi nhớ đã thấy hỗn hợp thực sự tuyệt vời của màu hồng và màu xanh lá cây và không có gì. Chà, tôi không làm ma túy ...

Có một số nghiên cứu về những gì màu sắc làm cho tiềm thức của bạn (bình tĩnh, gây ra sự xâm lược, ...). Tôi nghĩ rằng các bảng màu thường được sử dụng phần nào dựa trên điều đó. Có lẽ họ chỉ cần thêm khả năng đọc. Mã hóa không nên là một nhiệm vụ tự sát.

Nhưng theo như cách phối màu của các IDE hiện tại thì tôi vẫn ổn với nó. Hãy đối mặt với nó: ý tưởng đơn giản đằng sau nó là giúp dễ dàng tìm thấy thứ gì đó khác với "nhiễu mã" chung. Và thành thật mà nói tôi không thực sự quan tâm màu sắc họ sử dụng để cho phép điều đó. Nó chỉ không làm tổn thương mắt tôi hoặc đốt một phần mật mã vào phía sau đầu tôi, giống như một màu đỏ chói trên một số tông màu xanh lá cây.

Mã hóa nên được thư giãn. Và đó là những gì nó là với tôi.