web-dev-qa-db-ja.com

モバイルで多くの複数選択アクションを提供する最良の方法は何ですか？

ユーザーは、複数のリストアイテムに対して多くのアクションを実行できる必要があります。

現時点では、デザインは画面下部の3つのテキストベースのアクションのみをサポートしています。アクションはアイコンとして効果的に伝達するには難しすぎます。ただし、テキストを使用すると、水平方向の不動産のため、3つのアクションに制限されます。

モバイルで複数の選択アクションを処理するためのソリューションはありますか？

enter image description here

mobilemulti-selection
2
David Saunders

ダイアログにオプションを表示するために追加のステップを追加することもオプションです（このタスクが頻繁に使用されず、効率に関連付けられていない場合、追加のステップはそれほど害にはなりません）。

Image shows transition from OP's screenshot to a dialog with multiple options

材料ガイドライン のこの選択ダイアログに似ています（ただし、追加の確認手順はありません）。

5
Big_Chair

これは、複数選択と複数アクションの例です。

enter image description here

2
Ren

オプションが多すぎると、ユーザーが混乱する可能性があります。モバイル画面は小さく、できれば片手で使用できるので、シンプルで簡単に保つことを忘れないでください。

最も一般的なアクションに合わせて、より多くのアクションのためにケバブアイコンを追加できます

または、ユーザーが選択したときに展開される小さなグループに分けます。例えば。ユーザーはグループ1を選択し、そのグループの下でアプリのプロンプトアクションを選択します。

または、これらのアクションを「アクションの実行」ボタンを使用して単一の長いドロップダウンに収めるか、アクションを含む単一のページにリダイレクトできます。

選択したアイテムが同時に複数のアクションを実行できる場合は、新しいページ/ダイアログを作成することをお勧めします。

1
selharxets

これが役立つかどうかはわかりませんが、以下の方法を試すことができます。ここでは、詳細メニューを使用する（少し隠しすぎている可能性があります）、またはユーザーがオプションを選択すると、その下にアクションボタンがいくつか表示されますオプションを選択すると、アクションが選択ごとに異なり、多くのアクションを実行できます。

下部にアクションメニューを残したい場合は、水平スクロールを使用することをお勧めします:)

[1]: https://i.stack.imgur.com/kOG9O.png

0
Amanda R.

angularマテリアルを探す場合、実際にはそれを処理する方法が複数あります。

  • big_Chairによって既に提案されているようなモーダル
  • Selharxetsによって提案されたような拡張パネル
  • ステッパー
  • タブ付きフォーム

しかし、それはすべてあなたの非常に正確なニーズに依存します。例えば、あなたは本当にユニークなアクションのために同じフォームにそれらのすべての情報を入力する必要がありますか？

そうでない場合は、独立したアクションボタンを使用してフォームへのアクセスをフォームごとに分割することをお勧めします。

はいの場合、私の選択はさまざまですが、やるべきことが多ければ多いほど、ステッパーを使うようになります。これは、他の方法よりも少ないクリックで実行できるためです。

単純な縦型フォームと複数の選択肢のものについては、選択した情報のみがフォームに表示されます。次に、それらの情報を使用して、「編集」ボタンを追加し、ステッパーでモーダルを開いて、これらのすべての情報を設定します。

0
Walfrat