Sözdizimi vurgulama renk şeması çalışmaları


39

Çoğu programcının sözdizimi vurgulayan renk şemaları için kendi kişisel tercihleri ​​vardır, ama merak ediyorum, hiç kimse en iyi renk şemasının ne olacağı konusunda gerçek bir bilimsel çalışma yaptı mı? Böyle bir çalışmanın, kodun okunabilirliği, programcının gözlerinin en önemli kısımlara çizilip çizilmediği gibi şeylere bakacağını hayal ediyorum.

Belki de bu zaten varsayılan Visual Studio teması gibi bir şey için yapıldı, ama orada kamuya açık bir çalışma olup olmadığını ve ne bulduğunu bilmek istiyorum.


Kimsenin özellikle sözdizimi renklendirme şemaları üzerinde çalıştığını sanmıyorum, ancak diğer alanlardaki ilkeler hala geçerli. Örneğin, kırmızı renk dikkat çekmeye meyillidir.
Maxpm

+1 Uygulamaların ve işletim sisteminin aynı veya renk şemalarını merak ediyorum.
stijn

Yanıtlar:


17

Belirli renk şemaları, diğer tüm renk şemalarından nesnel olarak daha iyi olamaz, sıralaması, tat ve kültürel faktörlere bağlı olarak bireysel olarak özneldir.

Bununla birlikte, okunabilirlik / netlik, belirli ortam ışık ortamlarında vb. Kullanım için belirli kurallar geçerlidir. Bunlar grafik tasarım / tipografi, insan bilgisayar arayüzü ve diğer ilgili çalışmalardan geçerli olacaktır.

Ethan Schoonover'ın Solarized projesi ilginç bir eser: http://ethanschoonover.com/solarized


Objektif olarak en iyi renk düzenine sahip olmak veya en azından grup öznel olmak mümkündür. "En iyi" derken, nüfusun çoğunluğu veya alt kültür / nüfusumuz için ortalama olarak kastediyoruz. İhtiyacımız olan tek şey, bir şeyler sipariş etmek ve açıklamaları cevaplamak. Aksi takdirde "en iyi" anlamını kaybeder. Ayrıca, beyninizi tarayarak (gelecekte onlarca yıl) her bir tuhaflığı hesaba katan en iyi renk şeması üreticilerinin gerçek olasılığı da vardır.
Annan

@Annan: Bir gruba ortalama olarak göre yapmak, insanlar için yalnızca spektrumun kenarlarına doğru sıradan bir vasattan bile, kesinlikle ÇALIŞAN olan bir deneyime yol açma eğilimindedir. Beyin taraması ... evet bu iyi olurdu, ancak WW3'ün bundan daha kısa sürede olmasını öngörüyorum.
Darren Ringer,

7

: Uzaktan bildiğim konu ile ilgilidir Onlar sadece orta derecede yeni bir çalışmada 2004 biridir "okunabilirliği, saklama, estetik ve davranışsal niyeti üzerinde web sayfası metin arka plan renk kombinasyonları darbe" Hall & Hanna tarafından . Ancak, kod için değil, web sayfaları için geçerlidir ve dikkate aldıkları tek renk şeması ön plan ve arka plan renkleridir.

: Ben Skepics.SE üzerine programcılar için renk şemaları ile ilgili çalışmalar hakkında soru sordunuz "Daha iyi programcılar için bilgisayar ekranları için açık-koyu renk düzenleri mı?" . Neredeyse 2 senedir cevaplanmadı, normalde bu tür bir soru oldukça çabuk cevaplandı. Bu da beni böyle bir bilimsel çalışma olmadığına inanmaya itiyor.


7

Kısa süre önce, görsel olarak sözdizimi vurgulamasından daha zengin olan kod sunumları hakkında bir kullanıcı çalışması yaptık. Sözdizimi vurgulama şemaları üzerinde tam bir çalışma olmasa da, bunu anlayışlı bulabilirsiniz:

D. Asenov ve O. Hilliges ve P. Müller - Daha Zengin Görselleştirmelerin Kod Anlama Üzerine Etkisi ve İşte CHI 2016'daki 10 dakikalık konuşmanın videosu .

Standart Eclipse sözdizimini vurgulayarak, aşağıdaki gibi görsel ekstralarla daha zengin iki kod sunumu sunduk:

  • Kıvrımlı ayraçlar yerine anahatlar
  • Liste öğelerini ayırmak için virgül yerine alternatif arka plan renkleri
  • Bazı anahtar kelimeler yerine simgeler
  • Bazı ifadeler ve ifadeler için ek arka plan renkleri

Çalışma, sunumun görsel çeşitliliğinin arttırılmasının geliştiricilerin kod yapısını anlama hızları üzerinde oldukça büyük bir etkiye sahip olduğunu gösterdi - zaman% 75'e kadar azaldı. Bunun kod yapısıyla ilgili basit sorularla ilgili olduğunu belirtmek önemlidir (örn. "Yöntemde iç içe döngüler var mı?"). Karmaşık düşünme gerektiren görevleri test etmedik (örneğin, "Bu yöntem ne yapar?"), Çünkü bunlar kod sunumunun etkilerinden ziyade kişinin becerisi tarafından yönetilir.

Çalışmamızda ilginç bir bulgusu biz did olmasıdır değil nedeniyle zengin görselleştirme için herhangi bir görsel aşırı gözlemleyin. Birçok katılımcı görsel olarak aşırı yüklenme veya karışıklık hissettiğini söylemesine rağmen, topladığımız veriler (cevap verme zamanı ve doğru olup olmadığı) yalnızca daha zengin görselleştirmelerle gelişme gösterdi.

Sözdizimi vurgulamasıyla ilgili olarak, bulgularımız dolaylı olarak daha fazla görsel çeşitlilik (örneğin daha fazla renk ve daha fazla programlama yapısı türü için renk) kullanmanın faydalı olacağını önermektedir. Örneğin, yerleşik türler için ayrı renklere sahip bir tema, kontrol akışı anahtar sözcükleri ve anahtar kelimelerin geri kalanı, bazı durumlarda, herkes için tek bir renk kullanan düz bir temaya kıyasla bazı durumlarda kod yapısı anlayışını artırabilir. anahtar kelimeler.


2

Böyle çalışmaların var olduğunu sanmıyorum. Uygulamada, bir şirket yeni bir IDE oluşturduğunda, renk şemasını vurgulayan sözdizimi , diğer IDE'lerin mevcut şemalarına dayanır .

Örneğin, varsayılan Visual Studio teması yeni veya orijinal değildir . Eski Ada IDE'ler de dahil olmak üzere, yıllarca anahtar kelimeler için mavi renk kullanılmıştır. Yeşil yorumlar için de aynı şey. Bazı renkler sınıf adlarına göre daha fazla ya da daha az "yeni" idi, ancak bu renklerin seçiminin arkasındaki nedeni kolayca anlayabilirsiniz: maviden uzak olmayan bir renk ayarlamak mantıklı olacaktır (çünkü ayrılmış kelimelerden çok hoşlanıyor: Int32.NET intiçin, C #, vb.)

Şimdi, koyu arka plandaki popüler ışık metni gibi alternatif şemalara ne dersiniz? Yıllarca konuyu inceleyen ve tam olarak kusursuz bir eşleşme elde etmek için karmaşık bazı hesaplar yapan bir bilim adamı tarafından yaratılmamışlardır. Bunun yerine, geliştirici kendisi için okunabilir bir şema yaratır. Bir web sitesinde paylaşıyor ve popüler hale geliyor . Hepsi sihir.

Son şey: okunabilirlik kuralları var mı? Çok fazla değil.

  • Çoğunlukla, öznel bir şey : Bir mavi anahtar kelimenin mor bir anahtar kelimeden daha okunaklı olduğunu iddia edemezsiniz, çünkü birileri onun için cevaplayabiliyor, monitöründe mor anahtar kelimenin mavi olandan daha okunaklı olduğunu .

  • Başka bir bölüm için, sadece mantıklı . Siyah beyaz bir şema, varsayılan şema gibi okunamaz. Aynı şekilde, anahtar kelimeleri açık sarı olarak ayarlayamaz ve yorumların #eeebeyaz bir arka plan üzerinde açık gri (diyelim ) olduğunu söyleyemezsiniz , çünkü okunamaz durumdadır ve nedenini açıklamanıza gerek yoktur. Bunlar, bir web sitesi hazırlarken veya bir kitap yazdırırken veya herhangi bir şekilde yazarken aynı kurallardır.


1

Bir tür kaba çalışma olarak, aşağıdaki ekran görüntüleri XSLT'yi vurgulamak için kullanılan 3 renk temasını göstermektedir. XSLT'yi çok sayıda dil unsuru nedeniyle özel bir zorluk oluşturduğu için seçtim - ve ayrıca çoğu geliştirici bunu çirkin olarak nitelendirdi.

solarized

görüntü tanımını buraya girin

Tommorow Gecesi

görüntü tanımını buraya girin

Github

görüntü tanımını buraya girin

Gözlemler

Örnekte kullanılan renklerin sayısı, farklı dil öğelerini ayırt etmeye yardımcı olur, ancak geliştiricinin dikkatini dağıtabilir.

Dilin daha nötr kısımları için soğuk renkler kullanarak, mümkünse soğuktan sıcak renklere doğru ilerlemeye yardımcı olur. Bir alternatif pastel tonlardan daha canlı olanlara (ton doygunluğu) geçiş yapmaktır.

Arka plan rengi, ön plan renklerinin algılanmasında büyük fark yaratır.

Bazı bitişik ön plan renkleri, göze zarar veren kötü çatışmalara, özellikle kırmızı ve yeşilin birlikte iyi görünmediğine neden olabilir.

Koyu arka planla, birbirleriyle ve arka planla yeterli kontrast içeren çok çeşitli ön plan renkleri sağlamak daha kolaydır.

Son olarak, ortam ışığı ve monitörün kalitesi ve kalibrasyonu gibi dış faktörler büyük fark yaratır.

Sonuç

Herhangi bir renk temasının tüm geliştiricilerin gereksinimlerini karşılaması muhtemel olmadığı için renk temalarını genişletmek için genişletilebilir bir yol sağlayan araçlar kullanmak en iyisidir ve aynı geliştirici bile çeşitli faktörlere bağlı olarak tercihlerini sık sık değiştirebilir.


0

Sanırım ilk soru beyaz arkaplanın harika bir fikir olup olmadığı. Sırf kağıda yaklaştığı ve internette her yerde bulabildiğimiz için bu günlerde mutlaka iyi (veya mükemmel diyebilirim) bir seçim yapmıyoruz.

Yıllar önce, sadece siyah üstüne sarı renk düzenine sahip olduğumuzu hatırlıyorum. Ayrıca bunun o kadar da kötü olmadığını da hatırlıyorum. Siyah ve beyaz olarak o kontrastı yoktu. Çok uzun zaman önce, insan gözü için de daha iyi olduğunu öğrendim.

Bazen, örneğin işletim sistemleriyle sevk edilen renk şemalarını kimin tasarladığını gerçekten merak ediyorum. Genelde onları görmezden gelirim ama pembe ve yeşilin gerçekten harika karışımlarını gördüğümü hatırlıyorum. Ben uyuşturucu kullanmam ...

Bilinçaltınıza renklerin ne yaptığı ile ilgili bazı çalışmalar var (sakin ol, agresyona neden olur, ...). Yaygın olarak kullanılan renk şemalarının bir şekilde buna dayandığını düşünüyorum. Belki sadece okunabilirlik eklediler. Kodlama intihar görevi olmamalıdır.

Ancak mevcut IDE'lerin renk şeması söz konusu olduğunda, onunla iyiyim. Kabul edelim: arkasındaki basit fikir genel "kod gürültüsünden" farklı bir şey bulmayı kolaylaştırmak. Ve dürüst olmak gerekirse, buna izin vermek için hangi renkleri kullandıkları umurumda değil. Sadece gözlerimi incitmemeli veya kodun bazı kısımlarını kafamın arkasına yakmamalı, bir yeşil tonda göz kamaştırıcı bir kırmızı gibi.

Kodlama rahatlatıcı olmalı. Ve benim için olan bu.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.