web-dev-qa-db-ja.com

構文強調色スキーム研究

ほとんどのプログラマーは、構文を強調表示する配色について独自の好みを持っていますが、私は疑問に思っていました。そのような研究は、コードの可読性、プログラマーの目が最も重要な部分に向けられているかどうかなどを検討することになると思います。

おそらく、これはデフォルトのVisual Studioテーマのようなものですでに行われているかもしれませんが、公開されている研究がそこにあるかどうか、そして彼らが何を見つけたかを知りたいのです。

40

特定の配色は、他のすべての配色より客観的に優れているわけではありません。それらのランク付けは、味と文化的要因に基づいて個別に主観的になります。

ただし、可読性/明瞭性、特定の周囲光環境での使用などに関する特定のルールが適用されます。これらは、グラフィックデザイン/タイポグラフィ、ヒューマンコンピューターインターフェイス、およびその他の関連する研究から引き継がれます。

Ethan SchoonoverのSolarizedプロジェクトは興味深い作品です: http://ethanschoonover.com/solarized

17
ocodo

彼らが私が知っている主題に遠く離れて関連している適度に最近の研究は2004年の1つです: "Webページのテキストと背景色の組み合わせが可読性、保持、美学に与える影響と行動意図」ホール&ハンナ 。ただし、これはコード用ではなく、Webページであり、彼らが検討する唯一の配色は前景色と背景色です。

Skepics.SEのプログラマー向けの配色に関連する研究について質問しました:"コンピューター画面のライトオンダークの配色はプログラマーにとってより良いですか?"。ほぼ2年間は回答されていませんが、通常、この種の質問はすぐに回答されます。そのため、そのような科学的研究はないと信じています。

7
vartec

最近、構文の強調表示よりも視覚的に豊富なコードプレゼンテーションについてユーザー調査を行いました。これは構文強調表示スキームに関する研究ではありませんが、洞察に富んでいるかもしれません。

D。AsenovとO. HilligesとP.Müller-コードの理解に対するより豊かな視覚化の効果 そして、これが 10分間のトーク CHI 2016。

標準のEclipse構文の強調表示を、次のような視覚的な追加機能を備えた2つの豊富なコードプレゼンテーションと比較しました。

  • 中括弧の代わりにアウトライン
  • リスト要素を分離するための、コンマではなく交互の背景色
  • 一部のキーワードではなくアイコン
  • 一部のステートメントおよび式の追加の背景色

この調査では、プレゼンテーションの視覚的な多様性を高めると、開発者がコード構造を理解する速度にかなり大きな影響があり、時間は最大75%短縮されました。これはコード構造に関する簡単な質問に関するものであることに注意することが重要です(たとえば、「メソッドにネストされたループはありますか?」)。複雑な思考を必要とするタスク(「このメソッドは何をするのか」など)はテストしませんでした。これらは、コードプレゼンテーションの効果ではなく、人のスキルによって左右されるためです。

私たちの研究からの興味深い発見は、豊富な視覚化による視覚的な過負荷を観察したではないことです。多くの参加者が視覚的な過負荷または混乱を感じたと述べましたが、私たちが収集したデータ(回答を提供する時間とそれが正しいかどうか)は、より豊かな視覚化で改善を示しただけでした。

構文の強調表示に関して、私たちの調査結果は、視覚的な多様性(たとえば、より多くの色、およびより多くの種類のプログラミング構成の色)を使用することが有益であることを間接的に示唆しています。例えば。組み込みタイプ、制御フローキーワード、および残りのキーワードに個別の色を使用したテーマは、すべてのキーワードに単一の色を使用するプレーンテーマと比較して、場合によってはコード構造の理解を向上させる可能性があります。

7
Dimitar Asenov

そのような研究は存在しないと思います。実際には、会社が新しいIDEを作成するとき、構文を強調表示するカラースキームは既存のスキームに基づいています他のIDEの。

たとえば、デフォルトのVisual Studioテーマには新規もオリジナルもありませんです。青い色は、古いAda IDEを含め、何年もキーワードに使用されていました。緑のコメントについても同じことが言えます。一部の色は、クラスの名前のティールのように多かれ少なかれ「新しい」ものでしたが、それらの色の選択の背後にある理由を簡単に理解できます。青から遠くない色を設定するのが妥当です(これらは予約語とほぼ同じ:Int32(.NETの場合)、int(C#の場合など)ですが、既に使用されている青とは異なる基本色のままにする必要があります。

さて、暗い背景に人気の明るいテキストのような代替スキームはどうですか?それらは何年もの間主題を研究し、正確な完全な一致を得るためにいくつかの複雑な計算を行った科学者によって作成されたのではありません。代わりに、開発者は彼にとって読みやすいスキームを作成します。彼はそれをウェブサイトで共有し、そして人気が高まる。それはすべての魔法です。

最後に:読みやすさのルールはありますか?多すぎない程度に。

  • ほとんどの場合、それは主観的なものです:誰かが彼よりも返信することができるので、青いキーワードは紫のキーワードより読みやすいと主張することはできません。彼のモニターでは、紫のキーワードは青いものよりもはるかに読みやすいです。

  • 別の部分については、それは単なる論理的ですです。白黒のスキームは、デフォルトのスキームほど読みやすくありません。同様に、キーワードを薄い黄色に、コメントを薄い灰色に設定することはできません(#eee)白い背景の上。それは読めないので、理由を説明する必要さえありません。これらは、ウェブサイトを作成したり、本を印刷したりするときと同じ規則です。

2

大まかな調査として、以下のスクリーンショットは、XSLTを構文的に強調するために使用される3つのカラーテーマを示しています。 XSLTを選択した理由は、言語要素の数が多いため、また多くの開発者がXSLTを醜いと説明しているため、XSLTは特定の課題を引き起こしているためです。

ソラリゼーション

enter image description here

Tommorow Night

enter image description here

Github

enter image description here

観測

サンプルで使用されている色の数は、さまざまな言語要素を区別するのに役立ちますが、開発者の注意をそらすかもしれません。

言語のよりニュートラルな部分に冷たい色を使用して、可能であれば冷たい色から暖かい色に進むのに役立ちます。別の方法は、パステルシェードからより鮮やかなシェード(色相の彩度)にシフトすることです。

背景色は、前景色の認識に大きな違いをもたらします。

いくつかの隣接する前景色は、目を妨げる悪い衝突を引き起こす可能性があり、特に赤と緑は、うまく調和していないようです。

背景が暗い場合は、相互と背景とのコントラストを十分にして、さまざまな前景色を提供する方が簡単です。

最後に、環境光やモニターの品質とキャリブレーションなどの外部要因が大きな違いを生みます。

結論

カラーテーマを設定する拡張可能な方法を提供するツールを使用することをお勧めします。単一のカラーテーマがすべての開発者のニーズを満たす可能性は低く、同じ開発者でもさまざまな要因に応じて設定を頻繁に変更する可能性があるためです。

1
pgfearo

さて、最初の質問は、白い背景がこのような素晴らしいアイデアであるかどうかです。それが本当の紙に近づいていて、最近インターネット上のどこにでも見つけることができるからといって、必ずしもそれが良い(または私が完璧と言ってもよい)選択になるとは限りません。

(非常に多くの)年前は、黒に黄色の「配色」しかなかったことを覚えています。そして、それはそれほど悪くなかったことも覚えています。白黒ほどのコントラストはありませんでした。少し前に、人間の目にも良いことを学びました。

時々私は本当に誰がその配色をデザインするのかと思っていますオペレーティングシステムに同梱されます。私は通常それらを無視しますが、私はピンクとグリーンの本当に素晴らしい混合物を見たことを覚えています。麻薬はしません...

色があなたの潜在意識に何をするかについてのいくつかの研究があります(落ち着いて、攻撃を引き起こして...)。よく使われている配色はそれをベースにしていると思います。多分彼らは単に読みやすさを追加しました。コーディングは自殺の使命であってはなりません。

しかし、現在のIDEの配色に関しては、問題ありません。それに直面しよう:その背後にある単純なアイデアは、一般的な「コードノイズ」とは異なるものを見つけやすくすることです。そして、正直に言うと、彼らがそれを可能にするために彼らがどの色を使用するかは本当に気にしません。私の目を傷つけたり、コードの一部を頭の後ろに焼き付けたりしてはいけません。

コーディングはリラックスする必要があります。そして、それは私にとってそれです。

0
sjngm