web-dev-qa-db-ja.com

幅の広い2列のテーブルでのデータの表示

それで、私は自分を片隅に入れて、他のUXDが何をするのだろうと思って、これにかなり立ち往生していると感じました。幅の広いテーブル(960px)と2つの列しかありません。それを表示する最良の方法は何ですか?ありがとう enter image description here

4
foch

このような広い間隔の画面は「奇妙」に見える可能性があることに同意しますが、UIの他の部分と一致している場合、これはそれほど問題ではない可能性があります(そのため、レイアウトを変更することへの抵抗をある程度理解できます)。

私にとって、最大の問題は、Action要素の1つをクリックしようとすると、「1つずつ見逃して」、間違った行。

Maisa's answer の一部は1つの解決策を提供します。代替行をシェーディングすると、間違った行をクリックするのを最小限に抑えることができます。ただし、これを行うと他の画面やカードとの一貫性が損なわれると感じる場合は、マウスを行の上に置くと、行全体を網掛けすることもできます。こうすることで、右側のActionボタンに近づくと、影響を受けるアイテムを簡単に確認できます。

(もちろん、ホバリングは携帯電話/タブレットでは機能しません。携帯電話のディスプレイはおそらく狭いため、ワイドスペースは問題になりません。タブレットの場合、行をタップしてハイライト/陰影を付けることができます。同様の効果が得られます)。

0
TripeHound

情報を結合するデータのサイズに応じて、テーブルのサイズを縮小できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

1
Maisa Barros

まず、「アイテム」のテキストが長くなる可能性があることを考慮する必要があります。それを覚えておきましょう。ユーザーが長いテキストを持っている場合は、見栄えが良いかもしれません;)

そうすると、アクションはボタンのようになります(正確には何ですか?)。

2列しかないので、これが最高の方法です。

リストがアクションのリストである場合は、アクションボタン/行動を促すフレーズの左側に期限列を含めることができます。

お役に立てば幸いです。

0
Didier