質問: マテリアルデザインでのツリーナビゲーション マテリアルデザイン でツリーナビゲーションをデザインする方法の例またはガイドラインを探しています。スタイルガイドはデータテーブルとリストをカバーしますが、ツリーは言及されていません。唯一のリファレンスはネストされたサブメニューであり、複数のレベルにうまくスケーリングできず、ナビゲートが困難です。 ツリービュー は避けるべきだと思いますが、ファイルブラウザなどの一部のアプリケーションは階層的なコンテンツに重点を置いています。インスピレーションを得るためのさまざまなアプリケーションに興味がありますが、私の主な使用例は、科学的分類または分類法における概念の選択です。いくつかの例を挙げます: 生命の分類法 医療主題の見出し regensburger verbundklassifikation すべての例には、おそらく多数のレベルがあります。これまでの私の考えは、あるリストの系統(ルートから親、現在のノード)を折りたたみ、以下の別のリストに子ノードを表示することです。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分類法の例は問題ありませんが、材料設計のために調整する必要があります。現在の マテリアルデザインガイドライン は、表示方法や使用方法が異なるメニューを除いて、階層ナビゲーションを参照していません。
回答: 次元の階層を反映するために、互いに下から出てくるパネルを検討してください。上部は、まだ遡ることができるいくつかの主要な分類です。階層をさらに深く見ていくと、前のパネルが左にずれます。右にスワイプすると、ツリーを上に戻ることができます。その下に分類がないオプションを最後にヒットすると、その情報がフルスクリーンで表示され、そのタイトルが上部に表示されます。次に、戻る矢印を押すと、パネルが後方にスワイプします。 この例では多くの空白がありますが、他のパネルにはより多くのコンテンツがあります。