it-swarm-ja.com

非常に長いドロップダウン値をどのように処理しますか?

通常、ドロップダウンメニューは最も長い値である限り作成されます。ただし、これは、事前に定義された値のセットを持つドロップダウンでのみ機能します。値を動的に受け取り、適切なサイズ制限のないユーザー生成値を表示するドロップダウンをどのように処理できますか?たとえば、ファイル名が非常に長い場合があります。私はこれを解決して、ドロップダウンを合理的な方法で使用できるようにする方法を探しています(たとえば、それが大きくなり、レイアウトが混乱するのを恐れて、常にそれを独自の行に配置する必要はありません)。

値の差が最後の文字になる可能性があるため、低いカットオフポイントでの値の切り捨てはうまく機能しません(ここでも、ファイル拡張子の例が適切です)。エッジケースにも使用できますが、なるべく遅くなるようにしたいです。

26

そして、ドロップダウンポップアップを広くして、コンボボックス自体で選択された値を表示する方法について考えてみませんか?

これがどのように見えるかの例です:

  1. ドロップダウンポップアップにはファイルへのパス全体が含まれ、コンボよりも幅が広い
  2. 選択された値が何らかの方法で変更されると(たとえば、パスを切り取って)、コンボボックスに収まるようになります。
  3. 必要に応じて、ツールチップに元の値が表示される場合があります

enter image description here

残念ながら、ファイル名を自動的に短縮する明白な方法はありません。最初からでも最後からでもトリミングできますが、それでも意味のない文字列になります。あなたがしようとするかもしれない方法は、アップロードする前に(または一定の制限内で)ファイルに名前を付けるか、プレビューアイコンをどこかに(画像の場合)配置し、何らかの方法でファイルに自動的に名前を付けることです(今日の日付を使用するか、または単に「1」、「2」など)なので、名前が収まります。

または、考えを再考して、可能であればコンボをまったく回避することもできます。

15
alexeypegov

メニューのコンテンツの種類によって、答えはおそらく異なります。お気づきのように、アイテムがファイル名を表す場合、Appleはアイテムのmiddleに省略記号を挿入することをお勧めします。そのようです:

The Finder showing filenames clipped in the middle

彼らはヒューマンインターフェイスガイドライン(HIG)でもこれを明示的に述べています

省略記号は、ドキュメントのタイトルまたはリストアイテムに表示する余地よりも多くのテキストがあることを示すこともできます。たとえば、アイテムの名前が長すぎてメニューやリストボックスに収まらない場合は、名前の最初と最後を維持したまま、名前の中央に省略記号を挿入する必要があります。これにより、一意である可能性が最も高い名前の部分が確実に表示されます。

14
Kit Grose

携帯電話で使用されている別のアイデアがあります。ドロップダウンメニューを使用する代わりに、ユーザーの選択を要求するリストを含むモーダルダイアログをポップアップできます。

これにより、各アイテムのレイアウトを自由に選択できるようになり、アイコンを追加して異なるタイプを区別することもできます。

長い値は、改行を追加するだけで切り捨てられる必要はありません。それでも、アイテムが選択されたら、アイテムの表示方法を選択する必要があります。この方法で移動できる場合、つまり、ドロップダウンフィールドを使用して「オプションリストダイアログ」をポップアップ表示することはオプションであり、より多くのテキストに合わせて2行のカスタムコントロールを設計できます。

このようなもの..

mockup

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

3
Mortalus

複数行のドロップダウンまたは複数行のラジオボタンのセットを使用できます。ファイル名の場合、「/」は行を分割するのに理想的な場所です(たとえば、幅0のスペースを挿入することにより)。

システム固有の名前の省略形もある場合があります。たとえば、/Users/myselfは伝統的に~に短縮されます。

1
Brian

答えは、ドロップダウンコントロールを使用しないでください。

表示しようとしているコンテンツが、使用したい特定のコントロールに適していない場合、それは実際に、使用したいコントロールが正しいものではないことを伝える手掛かりになるはずです。コンテンツをそれに適さないものにシューホーンしないでください。

それから私が推測する質問を読んで、主な要件は次のとおりです:

...その値を動的に受け取り、妥当なサイズ制限がないユーザー生成値を表示します

あなたはこれをドロップダウンにする必要がある理由をこのステートメント以外に述べません:

...レイアウトが大きくなったり混乱したりするのを恐れて、常に同じ列に配置する必要はありません

これを考慮すると、このプロジェクトの主な要件は次のようになります。

  • A.任意の数の文字にすることができる動的に生成された設定オプションを表示する方法が必要です。

  • B.このリストの内容に関係なく、固定した一定のレイアウトを維持したい。

したがって、そのようなコンテンツを処理できるコントロールを選択し、すべてが常にレイアウトされる方法を事前に指定できるようにする必要があります。

このため、次の制御をお勧めします。

mockup

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

これは標準的なコントロールであり、実装に特別なJavaScriptを必要とせず、さまざまなユーザーに理解されています。

コントロールをコンテンツに合わせてください。逆ではありません。

1
JonW

デスクトップアプリケーションの場合、レイアウトを維持するために切り捨てて、ツールチップとして完全な値を表示できます。

モバイルに最適なオプションは何なのかわかりません。 1つの可能性は次のとおりです。フルテキストを選択してオーバーレイで表示しますが、ドロップダウンはワンタッチで開いたままにします。ダブルドロップでドロップダウンを選択して閉じます。

ドロップダウンの代わりにサイズ変更とスクロールの両方が可能なリストビューを使用できます。これにより、初期サイズを制限しながら、ユーザーがスクロールまたはサイズ変更して長い値を読み取ったりコピーしたりできます。

ツールチップを使用すると、ユーザーは長い値を読み取ることができますが、複数の行の終わり(たとえば、単一のディレクトリ内のファイル名のみ)を表示したい場合は、マウスを値から値に移動する必要があります。読むために、右にスクロールしてから上下にスクロールする代わりに。

または、値の最初と最後の表示(間に...を入れてツールチップに完全な値を表示する)を検討し、ユーザーが各端から表示する文字数を定義することもできます(ファイルパス、グローバルな場所(例:ドライブと最上位フォルダー)とローカルな場所(例:ファイル名と直接の親フォルダー名))。

0
Danny Varod