web-dev-qa-db-ja.com

ペアのリストを入力するための最良のグラフィカルインターフェイスは何ですか?

RPGゲームのスキルビルドオーダーを入力するためのグラフィカルインターフェイスを作成したいと思います。スキルビルドは(スキル、番号)ペアの順序付きリストのようになります。 (脚注を参照)

(A x1) -> (B *) -> (C x2) -> (A *)

この種類のリストに、できればリストの任意の位置に項目を追加できるグラフィカルインターフェイスを作成したいと考えています。

私が今持っている主なアイデアは、スキルを表すアイコンで、ある種のドラッグアンドドロップインターフェースを作ることです

current build = (A x1) -> (B *) -> ...
-----------------------------------------    
amount: [ 1 | 2 | 3 | 4 | * ] (radio buttons or drop-down selector)
skills: +---+  +---+  +---+
        | A |  | B |  | C |
        +---+  +---+  +---+

アイコンをクリックすると、項目と番号の組み合わせがリストの最後(追加する最も一般的な場所)に追加され、結果リストのスポットにドラッグすると、代わりにそこに挿入されます。

しかし、私は数を選択するために複数のクリックを行わなければならないことを想像し、アイコンは扱いにくいでしょう。別の方法として、可能なペアごとにボタンを用意することもできます。

+----+  +----+  +----+
|A  *|  |B  *|  |C  *|
+----+  +----+  +----+

+----+  +----+  +----+
|A x1|  |B x1|  |C x1|
+----+  +----+  +----+

+----+  +----+  +----+
|A x2|  |B x2|  |C x2|
+----+  +----+  +----+
//and so on

しかし、それはあまりにも乱雑になると思います。

このようなペアのリストを入力する最良の方法は何ですか?

同様の問題が解決され、インスピレーションを得られる場所はありますか?

いくつかの設計上の考慮事項:

  • 私には4-5のスキルがあり、その範囲は3-5(および*ワイルドカード)です。

  • 一部の番号(1および*)は、他の番号(2、3、4)よりも頻繁に選択されます。すべてのスキルが等しく選ばれる可能性が高いです。

  • 非対称のデザインを選択する場合、数字よりもスキルを優先する必要があります。

  • 私は主に高速でクリーンなワークフローを取得することに興味があります。最終的な結果が少し複雑になったり直感的でなくなったりしても問題ありません。

    • これはデフォルトのインターフェースを意図したものではありません。これは、各スキルを各レベルに手動で入力するシンプルで遅いインターフェイスよりも速くしたいです。

好奇心旺盛な方には、

(A x1) -> (B *) -> (C x2) -> (A *)

として解釈することができます

As a first priority, level up A once
As a second priority, level up B whenever possible
As a third priority, level up C twice
As a fourth priority, level up the remaining levels of A

これを使用する主な理由は、各レベルでどのスキルを採用するかを直接説明することは長く、不明確であるためです。

A, B, C, B, C, B, A, B ...  // this is simple, but less clear
2
hugomg

単一のドラッグアンドドロップアクションを使用してスキルを選択し、ドラッグする量に向かってドラッグして「収集」し、スキルのビルド順序のリストに向かってドラッグを続け、リストの挿入ポイントにドロップします。

これは、以下のシーケンスで示されています。

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

5
Roger Attrill