การศึกษาชุดรูปแบบสีเน้นไวยากรณ์


39

โปรแกรมเมอร์ส่วนใหญ่มีการตั้งค่าส่วนตัวของตนเองสำหรับโครงร่างสีที่เน้นไวยากรณ์ แต่ฉันสงสัยว่ามีใครเคยทำการศึกษาทางวิทยาศาสตร์จริงเกี่ยวกับโทนสีที่ดีที่สุดจะเป็นอย่างไร ฉันคิดว่าการศึกษาดังกล่าวจะมองสิ่งต่าง ๆ เช่นความสามารถในการอ่านรหัสไม่ว่าดวงตาของโปรแกรมเมอร์จะถูกดึงดูดไปยังส่วนที่สำคัญที่สุด ฯลฯ

บางทีนี่อาจทำไปแล้วสำหรับบางสิ่งเช่นชุดรูปแบบ Visual Studio เริ่มต้น แต่ฉันต้องการทราบว่ามีการศึกษาที่เปิดเผยต่อสาธารณะหรือไม่และสิ่งที่พวกเขาพบ


ฉันไม่คิดว่าจะมีใครได้ศึกษาโครงร่างสีของไวยากรณ์โดยเฉพาะ แต่หลักการจากสาขาอื่นยังคงดำเนินต่อไป ตัวอย่างเช่นสีแดงมีแนวโน้มที่จะดึงดูดความสนใจ
Maxpm

+1 ฉันสงสัยว่าแอพพลิเคชั่นชุดเดียวกันหรือสีและระบบปฏิบัติการจริง
stijn

คำตอบ:


17

โทนสีที่เฉพาะเจาะจงไม่สามารถมีความหมายได้ดีกว่าแบบแผนสีอื่น ๆ การจัดอันดับจะเป็นแบบอัตนัยตามปัจจัยด้านรสนิยมและวัฒนธรรม

อย่างไรก็ตามกฎบางอย่างสำหรับความสามารถในการอ่าน / ความคมชัด, ใช้ในสภาพแวดล้อมที่มีแสงโดยรอบ ฯลฯ ฯลฯ สามารถใช้งานได้, สิ่งเหล่านี้จะมาจากการออกแบบกราฟิก / การพิมพ์, อินเตอร์เฟซคอมพิวเตอร์ของมนุษย์และการศึกษาอื่น ๆ ที่เกี่ยวข้อง

โครงการ Solarized ของ Ethan Schoonover เป็นงานที่น่าสนใจ: http://ethanschoonover.com/solarized


เป็นไปได้ที่จะมีชุดรูปแบบสีที่ดีที่สุดอย่างเป็นกลางหรืออย่างน้อยก็เป็นกลุ่มบุคคล เมื่อเราพูดว่า "ดีที่สุด" เราหมายถึงค่าเฉลี่ยสำหรับประชากรส่วนใหญ่หรือวัฒนธรรมย่อย / ประชากรของเรา สิ่งที่เราต้องการคือวิธีการสั่งซื้อสินค้าและตอบคำถามให้ชัดเจน ('X ดีที่สุดคือให้ Y. ') มิฉะนั้น "ดีที่สุด" จะไม่มีความหมาย นอกจากนี้ยังมีความเป็นไปได้ที่แท้จริงของเครื่องกำเนิดไฟฟ้าสีที่ดีที่สุดซึ่งคำนึงถึงการเล่นโวหารทุกคนโดยการสแกนสมองของคุณ (ทศวรรษที่ผ่านมาในอนาคต)
Annan

@ อันนัน: การทำมันข้ามกลุ่มโดยเฉลี่ยแม้ว่ามีแนวโน้มที่จะนำไปสู่ประสบการณ์ที่แน่นอนว่าเลวร้ายยิ่งกว่าเพียงแค่ปานกลางสำหรับผู้คนที่ไปยังขอบสเปกตรัม การสแกนสมอง ... ใช่ว่าจะดี แต่ฉันคาดว่า WW3 จะเกิดขึ้นเร็วกว่านั้น
Darren Ringer

7

พวกเขาเพียง แต่การศึกษาล่าสุดในระดับปานกลางที่เกี่ยวข้องกับระยะไกลกับเรื่องที่ฉันรู้เป็นหนึ่งจาก 2004: "ผลกระทบของหน้าเว็บของการผสมสีข้อความพื้นหลังในการอ่าน, การเก็บรักษาความงามและความตั้งใจพฤติกรรม"โดยฮอลล์และฮันนา อย่างไรก็ตามมันไม่ได้มีไว้สำหรับโค้ด แต่เป็นหน้าเว็บและโทนสีเดียวที่พวกเขาพิจารณาคือสีพื้นหน้าและสีพื้นหลัง

ฉันถามคำถามเกี่ยวกับการศึกษาโครงร่างสีที่เกี่ยวข้องกับโปรแกรมเมอร์บน Skepics.SE: "โครงร่างสีอ่อนบนสีเข้มสำหรับหน้าจอคอมพิวเตอร์ดีกว่าสำหรับโปรแกรมเมอร์หรือไม่" . มันยังไม่ได้รับคำตอบในเกือบ 2 ปีแล้วในขณะนี้โดยปกติแล้วคำถามประเภทนั้นจะได้รับคำตอบอย่างรวดเร็ว ซึ่งทำให้ฉันเชื่อว่าไม่มีการศึกษาทางวิทยาศาสตร์เช่นนั้น


7

เมื่อเร็ว ๆ นี้เราได้ทำการศึกษาผู้ใช้งานเกี่ยวกับการนำเสนอโค้ดที่สมบูรณ์ยิ่งขึ้นกว่าการเน้นไวยากรณ์ แม้ว่ามันจะไม่ได้เป็นการศึกษาเกี่ยวกับโครงร่างการเน้นไวยากรณ์ แต่คุณอาจพบว่ามันมีความชาญฉลาด:

D. Asenov และ O. Hilliges และ P. Müller - ผลของการสร้างภาพข้อมูลที่สมบูรณ์ยิ่งขึ้นเกี่ยวกับความเข้าใจโค้ด และนี่คือวิดีโอของการสนทนา 10 นาทีที่ CHI 2016

เราเปรียบเทียบไวยากรณ์ Eclipse มาตรฐานที่ไฮไลต์กับการนำเสนอที่สมบูรณ์ยิ่งขึ้นของโค้ดที่มีความพิเศษด้านภาพเช่น:

  • แสดงแทนวงเล็บปีกกา
  • การสลับสีพื้นหลังแทนเครื่องหมายจุลภาคสำหรับการแยกองค์ประกอบรายการ
  • ไอคอนแทนคำหลักบางคำ
  • สีพื้นหลังเพิ่มเติมสำหรับบางข้อความและนิพจน์

การศึกษาแสดงให้เห็นว่าการเพิ่มความหลากหลายทางภาพของงานนำเสนอมีผลค่อนข้างมากต่อความเร็วที่นักพัฒนาสามารถเข้าใจโครงสร้างรหัสได้ - เวลาลดลงมากถึง 75% เป็นสิ่งสำคัญที่จะต้องทราบว่านี่เป็นคำถามเกี่ยวกับโครงสร้างของโค้ดอย่างง่าย (เช่น "มีวิธีซ้อนกันหลายวิธีหรือไม่?") เราไม่ได้ทดสอบงานที่ต้องใช้การคิดที่ซับซ้อน (เช่น "วิธีการนี้ทำอะไรได้บ้าง") เนื่องจากสิ่งเหล่านี้ถูกครอบงำโดยความสามารถของบุคคลมากกว่าผลกระทบของการนำเสนอโค้ด

การค้นพบที่น่าสนใจจากการศึกษาของเราคือเราไม่ได้สังเกตการโอเวอร์โหลดภาพใด ๆ เนื่องจากการสร้างภาพข้อมูลที่สมบูรณ์ยิ่งขึ้น แม้ว่าผู้เข้าร่วมหลายคนบอกว่าพวกเขารู้สึกว่ามีการโอเวอร์โหลดหรือความสับสนในการมองเห็นข้อมูลที่เรารวบรวม (เวลาเพื่อให้คำตอบและไม่ว่าจะถูกต้อง) แสดงให้เห็นว่ามีการปรับปรุงด้วยการสร้างภาพข้อมูลที่สมบูรณ์ยิ่งขึ้นเท่านั้น

ด้วยความเคารพต่อการเน้นไวยากรณ์การค้นพบของเราโดยอ้อมแนะนำว่าการใช้ความหลากหลายทางภาพมากขึ้น (เช่นสีมากขึ้นและสีสำหรับประเภทของการเขียนโปรแกรมประเภทเพิ่มเติม) จะเป็นประโยชน์ เช่นชุดรูปแบบที่มีสีแยกต่างหากสำหรับชนิดในตัวคำหลักควบคุมการไหลและคำหลักที่เหลือมีแนวโน้มที่จะปรับปรุงความเข้าใจโครงสร้างรหัสในบางกรณีเมื่อเทียบกับชุดรูปแบบธรรมดาที่ใช้สีเดียวสำหรับทุกคน คำหลัก


2

ฉันไม่คิดว่ามีการศึกษาดังกล่าวอยู่ ในทางปฏิบัติเมื่อ บริษัท สร้าง IDE ใหม่รูปแบบสีที่เน้นไวยากรณ์จะขึ้นอยู่กับโครงร่างที่มีอยู่ของ IDE อื่น ๆ

ยกตัวอย่างเช่นเริ่มต้นธีม Visual Studio มีอะไรใหม่หรือเดิม สีน้ำเงินใช้สำหรับคำหลักเป็นเวลาหลายปีรวมทั้ง Ada IDEs เก่า สิ่งเดียวกันสำหรับความคิดเห็นสีเขียว บางสีมี "ใหม่" มากกว่าหรือน้อยกว่าเช่นชื่อนกเป็ดน้ำในชั้นเรียน แต่คุณสามารถเข้าใจเหตุผลที่อยู่เบื้องหลังการเลือกสีเหล่านั้นได้อย่างง่ายดาย: มันสมเหตุสมผลที่จะตั้งค่าสีซึ่งไม่ไกลจากสีฟ้า ค่อนข้างคล้ายกับคำสงวน: Int32สำหรับ. NET, intสำหรับ C #, ฯลฯ ) แต่จะต้องมีสีพื้นฐานซึ่งแตกต่างจากสีน้ำเงินที่ใช้ไปแล้ว

ทีนี้รูปแบบทางเลือกเช่นตัวหนังสือสีอ่อนยอดนิยมบนพื้นหลังสีเข้มเป็นอย่างไร? พวกเขาไม่ได้ถูกสร้างขึ้นโดยนักวิทยาศาสตร์ที่ศึกษาวิชานี้มาหลายปีและสร้างแคลคูลัสที่ซับซ้อนเพื่อให้ได้คู่ที่สมบูรณ์แบบแน่นอน แต่ผู้พัฒนาจะสร้างรูปแบบที่สามารถอ่านได้สำหรับเขาแทน เขาหุ้นบนเว็บไซต์และมันจะกลายเป็นที่นิยม นั่นคือความมหัศจรรย์ทั้งหมด

สิ่งสุดท้าย: มีกฎการอ่านหรือไม่ ไม่มากเกินไป.

  • ส่วนใหญ่เป็นเรื่องส่วนตัว : คุณไม่สามารถยืนยันได้ว่าคำสำคัญสีน้ำเงินสามารถอ่านได้มากกว่าคำหลักสีม่วงเพราะบางคนสามารถตอบกลับได้มากกว่าเขาบนหน้าจอคำหลักสีม่วงสามารถอ่านได้มากกว่าคำสีฟ้า .

  • สำหรับส่วนอื่นมันเป็นตรรกะเพียง ชุดรูปแบบขาวดำจะไม่สามารถอ่านได้เป็นค่าเริ่มต้น ในทำนองเดียวกันคุณไม่สามารถตั้งค่าคำหลักให้เป็นสีเหลืองอ่อนและความคิดเห็นเป็นสีเทาอ่อน (สมมติว่า#eee) บนพื้นหลังสีขาวเนื่องจากไม่สามารถอ่านได้และคุณไม่ต้องอธิบายสาเหตุ เป็นกฎเดียวกันเมื่อสร้างเว็บไซต์หรือพิมพ์หนังสือหรืออะไรก็ตาม


1

เป็นการศึกษาแบบคร่าวๆภาพหน้าจอด้านล่างแสดงชุดรูปแบบสี 3 สีที่ใช้ในการเน้นไวยากรณ์ XSLT ฉันเลือก XSLT เนื่องจากมันท้าทายอย่างมากเพราะองค์ประกอบด้านภาษาจำนวนมาก - และเพราะนักพัฒนาหลายคนอธิบายว่ามันน่าเกลียด

solarized

ป้อนคำอธิบายรูปภาพที่นี่

พรุ่งนี้กลางคืน

ป้อนคำอธิบายรูปภาพที่นี่

Github

ป้อนคำอธิบายรูปภาพที่นี่

ข้อสังเกต

จำนวนสีที่ใช้ในตัวอย่างช่วยแยกความแตกต่างขององค์ประกอบภาษาที่แตกต่างกัน แต่อาจพิสูจน์ได้ว่านักพัฒนานั้นเบี่ยงเบนความสนใจ

มันจะช่วยให้พัฒนาการจากสีเย็นไปเป็นสีอุ่นถ้าเป็นไปได้โดยใช้สีเย็นสำหรับส่วนที่เป็นกลางมากขึ้นของภาษา อีกทางเลือกหนึ่งคือเปลี่ยนจากเฉดสีพาสเทลไปเป็นสีที่สดใสกว่า (ความอิ่มตัวของสี)

สีพื้นหลังสร้างความแตกต่างอย่างมากต่อการรับรู้สีพื้นหน้า

สีพื้นหน้าบางสีที่อยู่ติดกันอาจทำให้เกิดการปะทะที่ไม่ดีซึ่งรบกวนสายตาสีแดงและสีเขียวโดยเฉพาะดูเหมือนว่าจะไม่เข้ากัน

ด้วยพื้นหลังสีเข้มมันจะง่ายกว่าที่จะให้สีพื้นหน้าหลากหลายด้วยความคมชัดที่เพียงพอซึ่งกันและกันและพื้นหลัง

สุดท้ายปัจจัยภายนอกเช่นแสงโดยรอบและคุณภาพและการสอบเทียบของจอภาพสร้างความแตกต่างอย่างมาก

ข้อสรุป

เป็นการดีที่สุดที่จะใช้เครื่องมือที่ให้วิธีการที่กว้างขวางในการตั้งค่าชุดรูปแบบสีเนื่องจากเป็นไปได้ยากที่ชุดรูปแบบสีเดียวจะตอบสนองความต้องการของนักพัฒนาทั้งหมดและแม้แต่ผู้พัฒนารายเดียวกันก็อาจเปลี่ยนการตั้งค่าตามความเหมาะสม


0

ฉันเดาคำถามแรกว่าพื้นหลังสีขาวเป็นแนวคิดที่ยอดเยี่ยมหรือไม่ เพียงเพราะมันใกล้เคียงกับกระดาษจริงและเราสามารถหาได้ทุกที่บนอินเทอร์เน็ตทุกวันนี้ไม่จำเป็นว่าจะต้องเป็นตัวเลือกที่ดี (หรือฉันอาจจะบอกว่าสมบูรณ์แบบ)

ฉันจำได้ว่าหลายปีที่ผ่านมาเรามี "รูปแบบสีเหลือง" บนสีดำเท่านั้น และฉันก็จำได้ว่ามันไม่ได้แย่ขนาดนั้น มันไม่ได้มีความคมชัดที่เป็นขาวดำ เมื่อไม่นานมานี้ฉันเรียนรู้ว่ามันเป็นการดีต่อสายตามนุษย์

บางครั้งฉันก็สงสัยว่าใครเป็นผู้ออกแบบชุดสีเช่นรับมาพร้อมกับระบบปฏิบัติการ ฉันมักจะไม่สนใจพวกเขา แต่ฉันจำได้ว่าเห็นส่วนผสมที่ยอดเยี่ยมของสีชมพูและสีเขียวและอะไรก็ตาม ฉันไม่ทำยา ...

มีการศึกษาบางอย่างเกี่ยวกับสีที่มีผลต่อจิตใต้สำนึกของคุณ (สงบสติอารมณ์ทำให้เกิดความก้าวร้าว ... ) ฉันคิดว่าชุดรูปแบบสีที่ใช้กันทั่วไปค่อนข้างจะขึ้นอยู่กับที่ บางทีพวกเขาอาจเพิ่มความสามารถในการอ่าน การเข้ารหัสไม่ควรเป็นภารกิจฆ่าตัวตาย

แต่เท่าที่โครงร่างสีของ IDEs ปัจจุบันเกี่ยวข้องกับฉันก็ไม่เป็นไร ลองเผชิญหน้ากับมัน: ความคิดง่ายๆที่อยู่เบื้องหลังคือทำให้ง่ายต่อการค้นหาสิ่งที่แตกต่างจาก "รหัสเสียง" ทั่วไป และตามจริงแล้วฉันไม่สนใจว่าจะใช้สีอะไรเพื่อให้ได้ มันไม่ควรทำร้ายดวงตาของฉันหรือเขียนบางส่วนของรหัสลงในด้านหลังของหัวของฉันเช่นสีแดงแจ่มใสในโทนสีเขียว

การเข้ารหัสควรจะผ่อนคลาย และนั่นคือสิ่งที่ฉันต้องการ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.