左側の2つの折りたたみ可能なパネルの適切なデザインの選択は何ですか？
当社のUI標準は、次の全体的な設計を実施します。
- ウィンドウの左側にはメニューがあります（それ以外の場合はナビゲーションタブでした）
- 右側はアプリの作業領域です
- メニューは、アプリの作業領域の左上隅に配置されたハンバーガーアイコンを介して展開/折りたたみ可能です。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
私が直面する問題は、私のアプリでは、作業領域自体が2つの縦半分に分割されていることです。
- 左側の狭いフォルダーツリー
- 右側のそのツリーの個々のノードのデータを操作するための領域。
作業するツリーのノードを選択すると、ツリーはワークフローに不要になるので、それも折りたたみたいです。
問題は、それに適切な設計/ UIアプローチは何ですか？
私が考えたいくつかのこと：
アプローチ1：ナビゲーションタブと同じハンバーガーアイコンを用意します。
その欠点は、2つのハンバーガーアイコンが表示されるようになったことです。両方の折りたたみ可能領域が閉じているときにそれらをどのように処理すればよいかわかりませんか？木だけが閉じているときは？
アプローチ2：ドラッグできる縦の区切り線を用意する
短所：
まず、ツリーの左半分だけを表示しても、ツリーは意味がありません-ひどく見えて、あまり役に立ちません。したがって、スライディングセパレータを使用することは、バイナリの「オープン/クローズ」UIよりも劣ります。
第二に、垂直セパレーターは非常に狭い要素であるため、マウスでそれをつかんでドラッグすることは難しい作業です。
アプローチ3：中央に左向きまたは右向きの三角形のアイコンがある垂直の区切り線を使用します。アイコンをクリックすると、ツリー領域が展開/折りたたまれます。
短所：
まず、大きな労力をかけずにアイコンをクリックできるようにするには、アイコンの幅をいくらか広くする必要があります（10ピクセル以上）。そして、それを行うには、区切り線も広くなければならず、それは醜く見えます！ （これは現在のアプリの設計であり、ある程度同意するユーザーからの否定的なフィードバックがたくさんありました）。
2つ目は、大きく異なる2つのUI要素が同じ仕事をしていることです。エレガントではなく、さらに悪いことに、非常に混乱するかもしれません。
私がこれに取り組む方法は、すべてを少し考え直すことです。たとえば、設計している場合、ノードが選択される前に、ノードセレクターで作業領域全体を埋めるようにします。次に、ノードが選択されると、Spotify Webアプリのように、ノードセレクターが狭くなり、背景にフェードインします。
この例では、アーティストのページにいます。
次にそのアーティストのアルバムをクリックすると、アーティストページが左に移動して折りたたまれます
編集：この時点で折りたたまれたアーティストページをクリックすると、アルバムページが再び表示されなくなり、アーティストページが中心になります。
次に検索を呼び出すと、折りたたまれたアーティストページがカバーされます。
これをアプリに変換すると、ツリービューはアーティストページになり、不要になったときに折りたたまれ、必要になったときに再び表示されます。左側のハンバーガーメニューをアクティブにすると、ツリービューが完全に覆われます。それは本質的にスタックです。
OK、これがUXでの私の最初の答えですので、ご容赦ください。ただし、私のアプローチは次のようになります。
[〜＃〜] problem [〜＃〜] 1）サイドバーメニューが必要です2）2に分割される「コンテンツ」または「キャンバス」領域が必要です垂直半分。 3）この「キャンバス」にスペースを確保したい
提案されたソリューションこれを念頭に置いて、私はあなたの最善の策は「オンデマンド」で要素を非表示/表示することだと思います。いくつかの単純なjQueryを使用すると、「トグル」ボタン（前述のとおり必須）に最初のメニューが表示され、このメニューの項目をクリックすると2番目のメニュー（兄弟）が開き、親が非表示になります。メニュー。
これで、この2番目のメニューをより高いZインデックスで開いて、単に閉じるボタンを持つことができます。
しかし、よりエレガントなソリューションは、親を非表示にし、兄弟を展開し（Niceトランジションで）、兄弟の外側をクリックすると、トランジションに戻り、親が再び表示されます。
画像を見て、私の意味を理解してください。
注：赤いパネル（兄弟または2番目のメニュー）は高さ全体、または少なくともその大部分を占め、下のサイドバーを表示するためだけに画像の高さが低く表示されます
以下の組み合わせ：
ツリーを画面の右側に移動することを検討してください。
ユーザーがツリーを頻繁に表示したり非表示にしたりすると、作業領域のコンテンツは常に動き回ります。ツリーが右側にある場合は、作業領域の右半分のみをカバーしますが、コンテンツ領域の「最も重要な」要素はそのまま残ります。
「ノードの選択」をメニュー項目にします
唯一の欠点：ツリーにたどり着くには、1回ではなく2回タップする必要があります。
ノードが選択されたときにツリーを自動的に非表示にします。
ユーザーがツリーをナビゲートしているときに、ノードコンテンツのプレビューとして「作業領域」を使用したいので、ノードが選択されているときにツリーを非表示にできないと思います。
ただし、フォーカスが作業領域に移動した（または入力が発生した）ときに、ツリーを自動的に非表示にすることができます。
自動的に非表示にする場合は、右側にツリーを配置することを強くお勧めします。
1つのハンバーガーにそれを絞る
例えばクリックまたはタップしてツリーを展開/折りたたみ、右クリックまたはホールドしてナビゲーションメニューを表示します。
経験豊富なユーザーにとっては十分に機能するはずですが、ユーザーがナビゲーションメニューを見つけられない可能性があります。
ハンバーガーにツリーとメニューの両方を表示します
これは、ユーザーがノードを選択している間、作業領域のスペースを犠牲にします。
ハンバーガーにツリーとメニューの両方を表示し、ユーザーがツリーを操作しているときはメニューを非表示にします
ハンバーガーをタップすると、ツリーとメニューが表示されます。ユーザーが別のツリーノードを選択した場合は、メニューを非表示にします。
ツリーが表示されているがメニューが非表示になっているときにユーザーがハンバーガーをタップすると、ツリーとメニューが再度表示されます。