web-dev-qa-db-ja.com

入力フィールドに複数のチップを表示するにはどうすればよいですか？

ユーザーが複数の項目を選択できる入力フィールドがあります。現在、ユーザー入力をキャプチャするためにチップを使用しています。

設計： - enter image description here

問題

  1. この例でN個のチップ、たとえば10個のチップを表示するにはどうすればよいですか？
  2. ユーザーは選択したすべてのチップを表示できるはずです

制約

  1. この問題の既知の解決策は、入力フィールドを拡張し続けることです。行を拡張しないという制約があります。入力ボックスの高さは、決して高くしないでください。

私が考えたインタラクションは、入力フィールドにクリック+ドラッグインタラクションを追加することです。

この問題を解決する最良の方法は何ですか？

enter image description here

interaction-designuser-centered-designmicrointeractions
3
Swapna

入力ボックスを拡張できない場合の1つの解決策は、フィルターの下にチップを配置することです。 Polaris設計システム の例を次に示します。

Polaris design system example

1
Stacy H

Swapna：デザインの問題に対する有用で使用可能なソリューションアプローチを紹介する記事を偶然見つけました。セクション「4.オーバーフローシナリオを検討し、設計に対応できるようにする」をチェックしてください VMware Designによる記事 =。

enter image description here

ビューポートに表示されるよりもフィールドに多くの項目があることを示すインジケーターを表示し、それらの項目にある種のホバーパネル/ツールチップを提供することも、デザインコンテキストで機能する可能性があります。

（画像のキャプションがこれらの各フィールドが最大32のラベルをサポートすることを示していることに注意してください。これはかなりたくさんです。）

幸運を！

0
JochenW