web-dev-qa-db-ja.com

週間スケジュールを表示するコンパクトな方法?

したがって、基本的にはクラスの週間スケジュールを表示する必要があります。これを非常にコンパクトにしたいので、クラスが毎日午前/午後/夕方に実行されるかどうかだけを示したいと思います(実際の時間範囲はいつか決定します)。

つまり、グリッドに配置された場合、21個のセルがあります(添付の画像を参照)。マウスオーバー/クリックの実際の時間をツールチップに含めます(例:14:00-16:00)。

21セルのグリッドよりも、この情報を表示するためのより効率的でコンパクトな方法があるに違いありませんか?アイデアや経験があれば教えてください。ありがとう。

EDIT:少しコンテキストについては、これらのコースを検索結果として表示しているため、これをコンパクトにする必要があります。スケジュール設定の「概要」として。

enter image description here

1
j_d

An example of how transposing the data gives the illusion of a more compact table

データの転置がよりコンパクトな(そしてモバイルフレンドリーな)テーブルの錯覚を与える方法の例

1
Alex P

いくつかの仮定を行いましたが、これは、表示する必要がある最も関連性の高い情報を考えると、私が考えることができる最もコンパクトなバージョンです。

  • 曜日:3文字のラベルは、おそらく曜日を示す最も短くて混乱の少ない方法です(TとSの重複を避けます)。
  • 週の順序:ユーザーがこれらのセクションを簡単に区別できるように、平日と週末を区切る線
  • クラス時間:グリッド内の位置はすでにこれを示しているため、異なる色を排除できます。すべてのスロットが常に埋められるわけではないため、グリッドでラベル(これらは小さくすることができます)を使用することもできるため、ユーザーが最初からスキャンし直す必要はありません。これは将来、実際の値に置き換えることができます。

enter image description here

1
Michael Lai

テーブルを転置する必要もありません。同じ向きでテーブルをさらにコンパクトにすることができます。

enter image description here

非常に迅速な「n」ダーティモックアップの謝罪...もちろん、さらにコンパクトにすることもできます。

0
Mattynabib

過去に似たようなことに取り組んだことを覚えています。オプションの1つは、粒子表示を使用することです。 Googleカレンダーアプリと同じように、複数のビューを使用して、「ズームイン」する(ビューを切り替える)と、より詳細に表示できます。これは、レイアウトをやり直すことも意味します。細かい粒度で時間の詳細を明らかにすることもできます。

0
Adarsh Sosale