web-dev-qa-db-ja.com

HTMLテーブルに最適なUI。

私は頻繁に表形式のデータを表示する必要があり、すべての魔法が必要です。 。 。列の並べ替え、ページ分割など。列の名前をクリックしてユーザーに対して並べ替えが行われる列を使用することをお勧めします(通常はJavaScriptを使用しますが、ページネーションも行うと、画面、またはその列で並べ替えてから、最初のページに戻しますか?)しかし、ソートされていることをどのように示すのですか?そのための良いUIヒントは何ですか?列名はどのように見えるべきですか?また、私は他のすべての結果をグレーで色付けしたいのですが、画面が明るすぎて誰かが行を識別できるほどグレーではありませんが、グレーの量を増やすと表示されません黒いテキストを快適に読むのに十分なコントラスト。

正しく行われたテーブルの例は何ですか?

6
tooshel

従来、「並べ替え」は、昇順または降順の並べ替えを表す上向き/下向き矢印で示されていました。列名は、太字のテキストや影付きの背景など、値よりもコントラストのレベルを高くする必要があります。

個人的には、交互の行に色を付けるときは、ユーザーがテーブルを操作する時間が長くなるほど効果が大きくなるため、通常は暗くなるのではなく明るくなります。

以下に、テーブルレイアウトオプションのいくつかの優れた例を示します。 http://patterntap.com/tap/collection/tables

14
David Perini
  • 画面上のデータだけでなく、テーブル全体のデータをソートします。はい、新しい並べ替え順序の1ページ目から開始する必要がありますが、それでも問題ありません。IDで並べ替えていて、10ページで姓で並べ替えることにした場合、意味がわかると思いますか。
  • 並べ替えられている列のテーブルヘッダーセルの背景を強調表示して、並べ替えられていることを示します。さらに進んで、列全体を強調表示できます。矢印を使用すると、さらにわかりやすく(アクセスしやすく)なります。たとえば、並べ替えられていない場合は右向きの矢印、並べ替えられた場合は下向きの矢印です。
  • 列名は、単に列名として区別できる必要があります。表のセルのコンテンツよりも少し大きく太くする傾向があります。
  • 個々の行のスキャン可能性を高めるために必要な場合にのみ、他のすべての結果に灰色を付けます。それがあなたが設計しているものであるならば、ユーザーが読んでいるのではなくスキャンしているので、全体的な読みやすさをわずかに減らすトレードオフは問題ありません。そして、最終的には、すべての画面の明るさに対して設計することは不可能です。そのため、満足できるメディアを選択し、それを守るようにしてください。

現時点ですぐに使用できる例はありませんが、上記のアドバイス/設定に従っている、私のWebアプリ用に設計したテーブルの例を次に示します。

image of a table

5
Rahul

純粋に視覚的な観点から、 http://www.datatables.net/ (jQueryのプラグイン)を確認してください。ホームページのサンプルテーブルには、すでに説明した機能が実装されています。

技術的には、バックエンド技術が何を使用しているかによって異なります。 .Netサーバー上で実行している場合、ASP 3.5および4に含まれるコントロールは、jQueryとプラグインの依存関係なしで説明するように、非常に簡単に機能します。

4
Rob Allen

ExtJSグリッドを確認してください。 http://dev.sencha.com/deploy/dev/examples/#sample-

私が見たJSフレームワークの最高のユーザー相互作用。 Marketoでのアプリケーションは、これに大きく依存しています。

4
Glen Lipka

「すべての魔法」を備えたデータグリッドが必要な場合は、dhtmlxGridを試してください: http://www.dhtmlx.com/docs/products/dhtmlxGrid/index.shtml

これは、私が目にした中で最も強力なJavaScriptグリッドの1つです。

2
Steve E.

両方の方法で並べ替える場合は、Windowsエクスプローラー/ノームノーチラスのように、上向き/下向きの古典的な矢印があり、通常はセルよりも暗い色です。

alt text

1
dierre