web-dev-qa-db-ja.com

6歳から18歳までの年齢を選択する

かなり簡単な要件がありますが、それをユーザーに提示する魅力的な方法は思いつきません。

要件を満たすには、ユーザーは6〜18の範囲で1つ以上の年齢グループを選択できる必要があります。最も単純な形式では、6〜18の値を持つ13個のチェックボックスの行またはグリッドになります。

選択は完全にランダム、つまり7、10、18にすることができるため、最大値で機能するスライダーやその他のセレクターは機能しません。

これをユーザーにとってより魅力的なものにする方法についてのアイデアを聞きたいです。

9

多分このようなものがうまくいくかもしれません:

このような少数のオプションがあるため、タップするとチェックマークが表示される押し可能なボタンを大きくします。

このリストは明らかに画面外にスクロールしますが、あなたはそのアイデアを理解していると思います。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

11
MonkeyZeus

1つのアイデア:ドラッグ可能な複数の範囲スライダー

13個のチェックボックスの代わりに、ユーザーが複数の範囲と単一の値を選択できる1つのスライダーを使用できます。

そのようなスライダーの例をここで参照してください: http://blog.153.io/Elessar/ 。スライダーは6から18に移動し、時間ラベルを使用する代わりに、選択した年齢を表示できます。スパンを移動するときは、ラベルを更新する必要があります。

enter image description here

14
Marvin

数字の行をペイントする

ボックスに数字の行があるとします。個々のボックスをクリックしてそれらを選択/選択解除したり、クリックしてドラッグして複数の年齢を選択したりできます。

Click to select ages (click and drag to select multiple ages)
          | 6| 7| 8| 9|10|11|12|13|14|15|16|17|18|
5
bluntfakie