web-dev-qa-db-ja.com

チェックボックス以外のモバイルで複数選択を行う別の方法は?

同様の質問が尋ねられたのを見ましたが、まったく同じではありませんでした。モバイルのチェックボックスはかなり手間がかかり、ウェブ上での検索を公平にするために、モバイルサイトで一般的に使用されるチェックボックスは見たことがありません。ニュース一覧ページをフィルターするフィルターがあります。現在、デスクトップ版はチェックボックスを使用して結果を調整しています。チェックボックス以外の複数選択オプションのためにモバイルで最も一般的に使用されるものは何ですか?

8
Reloaded

1つのオプションは、チェックボックスまたはトグル可能なボタンと組み合わせて全幅ボタンを使用することです。

両方のスタイルが表示されます jQuery Mobileで使用

jQuery Mobile checkboxes

jQuery Mobile toggle button set

それ以外の場合は、Henrik Ekblomの提案に従って、テーブルの行全体またはリストアイテムを選択可能にします。

そして Androidガイドライン に従って:

通常は、各チェックボックスオプションを縦に並べて表示する必要があります。

5
jfrej

ここでの問題はaffordanceです。チェックボックスは、その要素を選択すると、単にそれを選択し、他のアクションを実行しないことを明確に示します。

チェックボックスがまったくない場合、アフォーダンスが低下し、ユーザーが混乱する可能性があります。さらに、選択したアイテムを何らかの方法でマークする必要があります。これは通常、いずれにしてもチェックボックスになります。そのため、あまり効果がありません。


または、別のアクションボタンの後ろにを選択する機能を移動できます。これは通常iOSアプリで行われ、(通常は「編集」)ボタンを選択すると、選択するチェックボックスが表示されます。アイテムのどこかを選択すると、アイテムがチェックされます。

enter image description here


問題は、チェックボックスを「面倒」に減らす方法についてより多く、それらを回避する方法についてではありません。より良い方法の1つは、チェックボックスのアクティブ領域を視覚領域よりもはるかに大きくすることです。次に、アフォーダンスを表示するための小さな微妙なチェックボックスを用意し、簡単に選択できるようにします。これは、Gmail for Android=の機能であり、使いやすいことが証明されています。

enter image description here

5
JohnGB

行全体を選択可能にしますが、選択されている行を示すためにチェックボックスも使用します(チェックボックスが使用されていない場合、選択された状態と選択されていない状態を区別するのが難しい場合があります)。

Selected items

2
Henrik Ekblom