web-dev-qa-db-ja.com

マテリアルデザインでのツリーナビゲーション

マテリアルデザイン でツリーナビゲーションをデザインする方法の例またはガイドラインを探しています。スタイルガイドはデータテーブルとリストをカバーしますが、ツリーは言及されていません。唯一のリファレンスはネストされたサブメニューであり、複数のレベルにうまくスケーリングできず、ナビゲートが困難です。 ツリービュー は避けるべきだと思いますが、ファイルブラウザなどの一部のアプリケーションは階層的なコンテンツに重点を置いています。

インスピレーションを得るためのさまざまなアプリケーションに興味がありますが、私の主な使用例は、科学的分類または分類法における概念の選択です。いくつかの例を挙げます：

すべての例には、おそらく多数のレベルがあります。これまでの私の考えは、あるリストの系統（ルートから親、現在のノード）を折りたたみ、以下の別のリストに子ノードを表示することです。

cellular organisms      # root
...25...                # indicate lineage, expandable
Catarrhini              # parent
----------------------
Hominoidea              # current
----------------------
Hominidae (great apes)  # child
Hylobatidae (gibbons)   # child
----------------------

非常に小さなディスプレイの場合、これはおそらく唯一の妥当なビューですが、スペースが許せば（フルタブレットサイズなど）より多くのレベルを表示したいので、従来のツリービューに戻ります。

----------------------
Hominoidea            
----------------------
Hominidae (great apes)
  Homininae
  Ponginae
Hylobatidae (gibbons) 
  Hoolock
  Hylobates
  Nomascus
  Symphalangus
----------------------

上記のTree of Life分類法の例は問題ありませんが、材料設計のために調整する必要があります。現在の マテリアルデザインガイドライン は、表示方法や使用方法が異なるメニューを除いて、階層ナビゲーションを参照していません。

hierarchytreematerial-design
7
Jakob

次元の階層を反映するために、互いに下から出てくるパネルを検討してください。上部は、まだ遡ることができるいくつかの主要な分類です。階層をさらに深く見ていくと、前のパネルが左にずれます。右にスワイプすると、ツリーを上に戻ることができます。

その下に分類がないオプションを最後にヒットすると、その情報がフルスクリーンで表示され、そのタイトルが上部に表示されます。次に、戻る矢印を押すと、パネルが後方にスワイプします。

enter image description here

この例では多くの空白がありますが、他のパネルにはより多くのコンテンツがあります。

8
Eric Stoltz

情報を階層的に表示する優れた方法であるため、メガメニュードロップダウンの使用をお勧めします。また、ページの上部に配置された追加の「マテリアルの一部」のように見せることができるという点で、マテリアルデザインとの相性も良好です。

小さい画面で使用するためにスタイルを設定する場合、以下のこの質問への回答で提案されているように、複雑さを軽減することができます（優雅に低下させる）。

タッチスクリーン/モバイルデバイスでのサイトナビゲーションのドロップダウンメニューに代わる優れた方法は何ですか？

2
Yvonne Aburrow