web-dev-qa-db-ja.com

小さなスペースで明確な階層を表示するにはどうすればよいですか？

私は次のようなものを作っています：

screenshot of the thing

タグのあるページの一覧です。これらのタグは、次のような階層を持つことができます。

programming
|
\-> Perl
|
\-> python
|   |
|   \-> python 2
|   |
|   \-> python 3
|
\-> Ruby
    |
    \-> Ruby on Rails

各ページの下にある限られたスペースにこの階層を表示する方法が必要です。上記のように1行に1つのタグの形式を使用することはできません。

また、どのタグがどの親の子であるかをすぐに明確にする必要もあります。私はこのようなことをすることを考えていました：

{プログラミング} {> Perl} {> python} {>> python 2} {>> python 3} {> Ruby} {>> Ruby on Rails}

これは、どのタグがどれであるかを明確に識別します。ただし、一目で判断するのは困難です。

さらに複雑なことに、これは幅の狭い画面のモバイルデバイス上にある可能性があるため、すべてのタグが1行に収まる保証はありません。

このタグ階層をどのようにフォーマットできますか？

  • それが占めるスペースを維持する合理的に小さい（つまり、1行に1つのタグではない）
  • どのタグがどのタグの親/子であるかをすぐに明確にする
  • 小さな画面のモバイルデバイスでも動作します

？

website-designnavigationlayouthierarchylegibility
2
Doorknob

KRY DRY

カテゴリー情報を使用すると、必ずしもカテゴリー・ラベルを繰り返し表示する必要はありません。 グループへの近接度カテゴリと件名を使用します。あなたのimgに基づく私の推測では、ユーザーは非常に精通しており、アイコンを認識します。それらを活用してスペースを節約します。このようにして、物事が3または4レベルの深さであっても、それらを{icon} / {subject}または{icon} / ... / { subject }スラッシュは、知識のある群衆が階層を表現するのにも適している場合があります。

隣人を知る

ユーザーがよく知っている他のアプリの感触をつかむことをお勧めします。これにより、認識可能なパターンを活用する方法がいくつか提供されます。人々は通常、あるアプリが別のアプリと同じ規則を共有していないことを理解していません。無料のサイトや競争力のあるサイトを活用すると、何かをより直感的にすることができます。

1
Ken