web-dev-qa-db-ja.com

サイドバーを可能な限り折りたたむ方法

では、クラシックな折りたたみ可能なサイドバーのスクリーンショットを2つ示します。 this is collapsedand this is expanded ご覧のとおり、折りたたんだ状態でも、サイドバーにはスペースが残っています。問題は、この問題を克服するために使用できる設計パターンは何ですか?頭の上から、下/上に矢印を表示できます。折りたたみモードでは、この矢印のみを表示できます。

2
shabunc

削減されたサイドパネルの面積をゼロにすることを意図している場合、設計パターンに関して利用できるオプションは非常にわずかしかありません。質問は単に「ボタンをどこに置くか」になります

たとえば、Operaデスクトップブラウザの左下には、パネルの表示を切り替えるステータスバーのボタンがあります。

enter image description here

その他の位置は、タブヘッダーの左端、ツールバー、プルダウンメニュー、またはコンテキスト(右マウス)メニューで、キーボードショートカットからのアクセスを忘れないようにすることができます。それらのいずれかまたはすべてを使用できます!

ウィンドウの左端の数ピクセルにカーソルを合わせると、ドラッグ可能なサッシが表示される可能性がありますが、これは発見や使いやすさの点で優れていません。以前にパネルのサイズを好きなように設定している場合、パネルをドラッグアウトするのは面倒なので、そのルートはお勧めしません。

マウスでボタンに近づくと拡大するボーダーに(質問の画像にあるサッシに示されているものと同様の)永続的で個別のボタンを組み込むことができます。これにより、クリック可能な領域が大きくなります。 。 (そして、あなたが離れると、それは元に戻ります。)

たとえば、以下の簡単なモックアップのように、タブを持ち上げるための小さなドロップシャドウを使用し、ボタンのツールチップを使用してこれを説明します。

enter image description here

6
Roger Attrill