4

当面の問題: ある種の退屈なアプリケーション フォームに入力する、コンピューターに疎いユーザー向けに、Web UI で 2 つの大きな階層を表示する方法。

ユースケース: ユーザーが階層「A」からアイテム「a」を選択し、次に (まったく関係のない) 階層「B」からアイテム「b」を選択し、短い自由形式のテキストを入力して選択を補足します。

両方の階層の深さは 10 レベル未満 (通常は - 5) ですが、各レベルは非常に広い場合があります (20、40、50、100 項目)。

したがって、「ツリー」全体を描画し、ユーザーが「クリック」できるようにすることは問題外です。ツリーを徐々に下降することは可能ですが、1) ユーザーが迷子になったり、どこに移動すればよいかわからない場合があります -> 探しているものが見つかるまで、別のブランチをバックトラックする必要があります 2) がある「幅の広いサブツリー」の問題 - 幅が広すぎて、画面上の 1 行または 1 列に表示できない場合があります。

コンピューターに精通したユーザーは、ツリーを動的にトリミングするインクリメンタル検索によって救われる可能性があります (プロセス中に UI が十分に高速であることが前提です)。

現在、マウスを捨てていくつかのキーを押すことに消極的なユーザーと格闘しています。

私に何かアイデアはありますか？

4

2 に答える 2

1

Windows Vista または Windows 7 のメニューがどのように機能するかを考えてみてください。それを開き、「すべてのプログラム」メニューの音声をクリックします。アイテムのリスト全体が新しいコンテンツで変更されます。

マルチレベルで考えてみましょう。レベル 1 のアイテムのリストを提示します。1 つクリックすると、リスト全体がその子レベル 2 項目で変わります。次にアイテムをクリックすると、リスト全体がその子のレベル 3 アイテムで変わります。

次のようなブレッドクラム ナビゲーションで補完します。ここにいる -> レベル 1 のアイテム -> レベル 2 のアイテム - レベル 3 のアイテム -> など

パンくずリストのどのアイテムもクリック可能で、そのレベルにテレポートできます。

キーワードによるクイック検索を追加します。

私はあなたに言うことができます、それは非常に機能的です。Jquery と Ajax の json 呼び出しに基づいてこのコンポーネントを開発し、現在取り組んでいる Web アプリケーションで使用しています。

興味があれば、サンプル付きのコンポーネントをお送りします。いずれにせよ、今後のブログでオープンソースにする予定です。

于 2010-06-29T15:02:36.780 に答える
1

1 つのオプションは、iPhone/iPod のメニュー スタイルのスクロール リストを試すことです。これらはメニューとして表示されますが、このフィラメント グループの例では、パンくずリストのあるものと戻るナビゲーションのあるものを示しています。おそらく、ある種の垂直スクロール可能な でこれを実装したいと思うでしょうdiv。左右のスライド アニメーションとパンくずリストは、状況に応じたヒントをユーザーに提供します。どの選択肢が枝でどれが葉かは明らかです。深さ制限はありません。さらに、このナビゲーション スキームは、iPhone/iPod/iPad を使用したことがある人なら誰でも知っているでしょう。

これはどこかで実装されているに違いない。1つ掘り下げたら、それに応じて編集します。

于 2010-06-29T15:07:34.893 に答える