web-dev-qa-db-ja.com

Webアプリにグリッドを使用する場合、サイドバー/サイドトレイはグリッド内またはグリッド外にありますか?

私はしばらくの間この問題を抱えていました。サイドバーナビゲーションを使用して多くのアプリケーションを設計しましたが、グリッド内でそれを最適に使用する方法について完全には結論付けていません。

enter image description hereA、グリッド内

数列を使い切っただけで、外側の余白が原因で残りのグリッドの中心が混乱しています。

B、グリッドの外

グリッドに含まれていない、実際に幅を追加する(これが当てはまる場合は、常に同じ幅を維持するようにグリッドを変更できます)

C、グリッドを押しつぶす

グリッドを押しつぶす;柱とガターが小さくなります。サイドバーが折りたたみ可能な場合にこれを表示します。

3
jonathanb

「アプリに依存します」という回答に加えて、「ユーザーの好みに依存します」という質問を投げかけます。

したがって、本当にユーザーを感動させたい場合は、オプション3をすべて実行することを許可します。しかし、もちろんこれはより多くの作業を意味します。

また、サイドメニューが、ユーザーが頻繁に開いたままにすることを期待するものであるかどうかを検討する必要があります。もしそうなら、おそらくオーバーレイのアプローチはユーザーにとってあまりにも煩わしい/扱いにくいかもしれません。

1

アプリケーションによって異なります。

  • サイドバーで何かをするときに、テーブルの情報を使用しますか?もしそうなら、私はメソッドA(透明度の有無にかかわらず)で行くでしょう。それはも最高のようですいくつかのスタイルガイドのプラクティス(ナビゲーションドロワーのGoogleのマテリアルデザインを https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-behavior で確認してください例)。
  • メソッドBは、データが少なければ大丈夫かもしれません。メソッドBは、アイテムの位置をシフトしますサイドバーを使用するときにユーザーがデータを必要とする場合、認知作業負荷が増加する可能性があるため、それを覚えておいてください。さらに、テーブルが設定サイズであり、サイドバーでは、水平スクロールバーが毎回飛び出したり出たりすることがあり、非常に煩わしいです。
  • メソッドCは受け入れられるかもしれませんが、はメソッドB(メニューが表示されている間、データの場所の認識を維持します)。

グリッドをそのままにして、方法Aでサイドバーをオーバーレイ(フローティング要素)として扱うことをお勧めします。

UPDATE:
この回答に関する議論から...

@jonathanbあなたのアプリケーションは私が期待したものとは違うようです。 あなたの応答に基づいて、私は実際に方法Bをお勧めしますが、AlvinfromDiasparが述べているように、念のためにユーザーでテストする必要があります。 水平スクロールを追加します(スプレッドシートアプリケーションを考えてください)が、グリッドにのみ追加されます。 サイドバーをアプリケーションの左側にドッキングしたままにします。方法Aが適用されない理由は、ユーザーがグリッドで作業しているときに必要になるためです。私の最初の推奨は、一時的に存在するサイドバーだけが必要であるという前提に基づいていました。

0
Philip Barcelon