条件の開始と終了を視覚的に示す

Question

UIでifブロックの開始と終了を視覚的に表示したい。

各ifブロックはifで始まり、endで終わります。状態は赤で書かれています。 ifブロックの開始と終了を強調表示して、ifブロックの開始と終了を表示する方法をいくつか見つけました。これを示すより良い方法はありますか？

Answer 1

UI/UXを改善し、凡例をどこかに配置することを強くお勧めします。これにより、ユーザーには明らかであり、ユーザーに通知する限り、ブロックの開始/終了をどのように表示するかはそれほど重要ではありません。インターフェイスの色/ブロックの意味について。それはあなたの問題の本質とそれをどのように示すかという問題が二次的な性質になることを解決します。

さらに、一般的にUXを改善するには、以下のことをお勧めします

• 配色を微調整して、ざらつきを少なくし、バランスを少し高めます。 （いくつかのテキストエディタースキームをオンラインで見てください： http://devthemez.com/themes/sublime-text-2 または同様に、好みに合わせて1つ選択してください。私たちの文化の典型的な色の象徴と一致するように、ブロックの始まりとブロックの終わりの赤い色）

• テキストエディターのフォントを、ArialやHelveticaなどのよりサンセリフに変更します。またはモノスペース。現在、Times new romanを使用しているようで、テキストエディターには最適ではありません。

• テキストエディタブロックと保存ボタンの間にスペースを追加します:)

Answer 2

私の理解では、UIマーカーよりもレイアウトを理解することが重要です。 Steve McConnellによるコードコンプリートブック には、どのコードブロック形式が堅牢に理解可能であり、問​​題を引き起こすかに関する実証的研究があります。

要するに、私が覚えているように、ネストされたブロックはインデントされ、ブロックは左揃えにされるべきです。空白が出力に影響するため、これを行う際に問題がある場合は、ブロックをグラフィカルマップとして視覚的に表示できます。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}