web-dev-qa-db-ja.com

テーブル内の行の高さの背後にある調査？

Webベースのテーブルデザインでは、テーブルの各行に多くのスペースを使用する傾向があるようです。特に、新しいGmailのデフォルトの「快適」。

私が一緒に作業している開発者がブートストラップを使用しているときに使用しているテーブルの高さにもそれが見られます。次に例を示します。 Table with tall rows

行の高さのサイズのこの変更の背後にあるものは何ですか？より読みやすく、ページが見やすくなりますか？

いつテーブルをコンパクトにするか、各行にこの余分な空白をいつ入れるかについてのガイドラインを知っている人はいますか？

web-apptables
16
Laura Beckwith

nutshell[1] ： 情報[2]密度[3] 。

正確には調査していませんが、なぜ変更を加えたのかについて、Googleから引用することができます（ Google GMail Blog から）。

新しいデザインでは、画面上の情報の密度についてもかなり考えました。 Gmailの古いデザインでは、大量の情報が小さなスペースに詰め込まれています。これは一部にとっては完璧ですが、多くの人々は、ページ上の行と要素の間の空白が多い、より風通しの良いデザインを高く評価しています。これは特に大型のモニターに当てはまります。

デフォルトではGmailがより魅力的で読みやすくなるようにしたかったので、大きなモニターを使用している場合は、受信トレイ内のアイテムの間隔が以前のデザインよりも離れていることがわかります。これにより全体的なエクスペリエンスが向上すると信じていますが、慣れるにはある程度の時間がかかります。

...

密度の設定は、Gmailの新しいデザインをより応答性が高く、個人的で美しいものにするという設計哲学を反映しています。

Jason Cornwell、ユーザーエクスペリエンスデザイナー（Gmail）

[1]http://www.codinghorror.com/blog/2006/07/information-density-and-dr-bronner.html

[2]http://hcil.cs.umd.edu/trs/98-13/node126.html

[3]http://www.lukew.com/ff/entry.asp?15

16
JonW

さらに、行の高さを高くすると、インライン編集などの大きなクリックターゲットも提供されます（<label for="">タグの動作を考えてください）。

7
msanford

これは、行の高さを増やすことによる読みやすさ（および混乱）の改善です。 ここの例 からわかるように、行の高さは読みやすさにとって重要です。

別の記事では、行の高さについて 黄金比 を提案していますが、少々具体的すぎるかもしれません。

より一般的には、空白が良いという単純に受け入れられつつあり、紙が高価であるという印刷ベースの概念を排除しています。ウェブでは、必要な場所に空白を導入するための十分なスペースがあります。

3
Ben Brocka

私の考え -

  1. Google Mailのような行の高さは、さまざまなユーザーが画面を見る方法に適しています。高齢者は、行の高さをより読みやすくするため、行の高さをより広々と感じたいと思っています。視覚とアクセシビリティ。

  2. Googleの行の高さ（想像上のテーブルと見なしてください）Chromeブラウザは[履歴]ページで最小化されています。これにより、行が非常に近くて読みやすくなるため、情報を一目で確認することが簡単になります行間隔を大きくする-私には不便である-また、行間をジャンプする必要があるため、読み取り速度が大幅に低下すると私が感じる限り、行の高さが次の行のオブジェクトをかすめるのに時間がかかります長さが長くなるため、増加しますが、これはモバイルでは当てはまりませんが、行も離れています。

  3. 行の高さは視覚的なスタイリングにもリンクします。ページに行が多すぎる場合、行のストリッピングが恩恵を受けるためです。また、行の高さのデザインでモバイルページとWebページの外観を変えることができます。モバイルページを見てください。クリック可能性の問題により、タッチスクリーンの場合のように、モバイルページを近づけることはありません。常に離れています。

したがって、そのアクセシビリティ、コンテキスト、コンテンツ、および視覚的なルールが行の高さを管理します。

2
inkmarble

" 数字を見せて、表とグラフを設計して啓蒙する "の本の表設計のベストプラクティス

  • 列と行の輪郭を描く

    • ホワイトスペース
    • ルールとグリッド
    • 塗りつぶしの色

したがって、空白は、データを列と行に配置するための推奨される方法です。これにより、行のコンテンツを簡単に追跡できます。

1
Kyleinincubator

ビジュアル

  • ルックアンドフィール
  • 比例する行の高さ
  • マウスホバーの色の変更
  • さまざまなタイプのフォントスタイルを使用する場合は、スペースを確保する必要があるため、情報がより見やすくなります。

使いやすさ

  • クリック可能な領域
  • 特定の行を選択して実行すれば、どの行にいるかを知ることができます
  • マウスをホバーしている間、より多くのアクションを実行できます
1
jelumalai

読みやすさの向上は否定できません。彼らは5年以上前だったでしょう。

トレンドを引き起こしたと私が思うのは、人々がスクロールする能力とスクロールする意欲です。デザイナーはそれを理解しました。固定位置の出現と、これまで以上に簡単にスクロールできるようにするマウスホイール、トラックパッド、スワイプジェスチャーの遍在性についてまとめます。

掘り下げることはできませんが、どこかで2年ほど前に記事を読んだところ、人々が思っているほどスクロールを気にしないことが研究で示されていると述べました。主流のウェブデザインに達しました。

0
Itumac