グリッドで、長い列ヘッダーを表示する方法
グリッドにデータを表示する場合（各行にレコードが含まれ、各列に異なるレコードフィールドが含まれます）、垂直スペースの必要性は、スクロールまたはページングで簡単に解決されます。
列または列データの数が多くなると、通常はすぐに水平方向のスペースが不足します。このトピックは既にここで説明されています： 多すぎるデータを表示する方法 これは私の質問のポイントではありません。
一部の列には少しスペースを占めるデータ（チェックボックス、日付、またはアイコン）がありますが、ヘッダーラベルが長くなっています。結果として、データではなくヘッダーのために列が広くなり、水平方向のスペースが明らかに失われます。
いくつかの簡単な解決策があります：
- 短いヘッダーテキストを見つける
- ヘッダーテキストを複数行に折り返す
- ヘッダーテキストを垂直に表示する
- 完全なラベルを含むツールチップの上にマウスを置いて略語を表示する
- アイコンをヘッダーとして使用する
これらのソリューションのいずれも適用できない場合があり、同時に明確で理解しやすいUIを維持します。あなたの解決策は何ですか？
私が見た中で最も広く使用されているアプローチは、次のように、省略記号を使用してさらにテキストがあることを示すことです。
次に、ホバーに関するツールチップを提供して、完全な名前をユーザーに表示できます。 Mac OSでは、Appleは最初のステップとしてテキストを圧縮しようとします。文字と単語の間のスペースを減らすことによってそれを行います。アイデアは、追加する前にできるだけ多くの文字を表示することです最後の手段としての省略。
アプリのどこかで、表示可能な最後の文字が消えていく、もっとエレガントなアプローチを見たことがあります。アプリの名前は思い出せませんが、次のように見えました。
これは明らかに手間がかかりますが、確かによりモダンで高級感があります。 Mac OSの標準機能になっていないことに驚いています。といえば、Apple does Spotlightでフェードを使用して、長いファイルパスを表示します。
フェードされたファイルパスに加えて、ファイル「YLListenerBase.cpp」を参照してください。hファイルと比較すると、ファイルが圧縮されていることがわかります。フェージング効果のあるファイルパスはウィンドウの下部にあります。
他の質問のコメントでこれを提案したと思いますが、要約すると...アイコンが列の意味を正確に説明できるアイコンを提案します。
他の質問について コメント から引用：
例えば。単一の文字（Y/N/?、 0/1/2/3/?、 T/Fなど）のみを含む列がある場合、ヘッダーでアイコンまたは省略されたテキストを使用できます。列幅を大幅に縮小できます。例えば「数値」列がある場合は、代わりに「＃」を使用するとスペースが節約されます。
あなたのリストはかなり網羅的です。他にできることはあまりありませんが、状況に最適なものを選択してください。
ヘッダーが複数の単語である場合は、折り返しがおそらく最良のオプションです。適切なハイフネーションを使用すると、たまに長いWordを分割することもできます。任意の場所で単語を分割しないでください。
アイコンがアプリの他の場所に既に設定されていない限り、通常はアイコンよりも推測可能な略語を取得するほうが運が良いです。確立された略語を使用していない場合は、コンテキストでそれらをテストして、ユーザーがそれらを推測できることを確認します。はい、アイコンや略語を使用しているかどうかに関係なく、ツールチップを使用しますが、通常の使用ではそれらに依存しないでください。省略形は通常ピリオドを必要としないため、スペースを節約できます。
ヘッダーを垂直に表示すると、文字を上下に重ねるよりも、横向きに書くことで読みやすくなります。
ヘッダーを垂直に表示するのではなく、列を上部に「曲げ」、ヘッダーテキストを30〜45度の角度で表示します。今では、それらを読むために頭の軽い先端が必要です。ただし、これは、長いヘッダーを持つ隣接する列がたくさんある場合にのみ機能します。
フィールド値が異なるフィールド全体で同じ幅になる傾向がある場所（電車のスケジュールを表示する場合など）の一部のグリッドでは、列を行と入れ替えることが理にかなっています。これで、列ヘッダーは行ヘッダーになり、スペースを無駄にすることなく、必要に応じて長くすることができます。
グリッドの水平スクロールに対する法律はないことを覚えておいてください。ユーザーはスプレッドシートを使用して何年もそれを行ってきました。
列が聞こえる上に積み重ねられた「雲」を使用しないのはなぜですか？彼らが長い間本当に重要であるなら、夢中になる：
________________ _____________
|Super Long Title| |I'm also long|
^ ^
| Foo | Bar | | | Baz | | | FooBar |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
すでに述べたいくつかの良い解決策。ここでもう1つ考慮すべき点：列と凡例には、色、数字、または文字の識別子を使用します。
