次の方法で共有


検索ボックス

手記

このデザイン ガイドは Windows 7 用に作成されたもので、新しいバージョンの Windows では更新されていません。 ガイダンスの多くは原則として適用されますが、プレゼンテーションと例には、現在の設計ガイダンス 反映されていません。

検索ボックスを使用すると、ユーザーは一致をフィルター処理または強調表示することで、大量のデータセット内の特定のオブジェクトまたはテキストをすばやく見つけることができます。 標準的な検索コントロールはありませんが、プログラムの検索機能が Windows の検索機能と一致するように努める必要があります。

検索には次の 2 種類があります。

  • クイック検索。ユーザーが入力するとすぐに結果が表示されます。 ボタンをクリックする必要がないため、虫眼鏡の検索記号はボタンではなくグラフィックとして表示されます。

    検索ボックスをポイントする

    インスタント検索を使用する一般的な検索ボックス。 検索は、すべてのキーストロークで自動的に実行されます。

  • 通常の検索。ユーザーが検索ボタンをクリックすると検索が実行されます。 虫眼鏡の検索記号がボタンに表示されます。

    通常の検索ボックススクリーン ショット

    通常の検索を使用する一般的な検索ボックス。 ユーザーがボタンをクリックして検索を実行します。

    ユーザーに対して、一方または両方の種類の検索オプションを指定できます。

これは適切なコントロールですか?

決定するには、次の質問を検討してください。

  • 特定のオブジェクトを見つけるのが難しいですか? これは、次の場合に発生する可能性があります。
    • オブジェクトは多数あります。
    • オブジェクトは 1 つの場所に配置されません。 検索は、ツリー内のオブジェクトを検索する場合に特に便利です。
    • 検索データは見つけにくい (メタデータなど)。
  • ユーザーはドキュメント内の特定のテキストを検索する必要がありますか?
  • 機能は 5 秒以内に関連する検索結果を返しますか? そうでない場合は、検索機能を提供できますが、検索ダイアログ ボックスなど、実行時間の長い検索に対応するために表示されるフィードバックを提供する代替設計を使用できます。

設計の概念

検索は、多くのシナリオで重要な最初のステップです。ユーザーは、オブジェクトを使用する前にオブジェクトを見つける必要があります。 ユーザーはますます大きなハード ディスクにオブジェクトを保存していますが、オブジェクトの参照はうまくスケーリングされません。 検索は、ユーザー エクスペリエンスのシンプルで一貫性のある信頼性の高い部分である必要があります。

Windows の検索ボックス:

  • すべてのエクスプローラー ウィンドウの一部であるため、簡単に見つけて認識できます。
  • 外観と動作が一貫している。
  • インスタント検索モードで瞬時の結果を与え、効率的かつ迅速です。

検索ボックスは、次の場所で Windows で使用されます。

  • 探検 家
  • エクスペリエンス (Microsoft Windows Media Player、Windows フォト ギャラリー、Windows Internet Explorer)
  • [スタート] メニュー (プログラムと最近使用したファイルを検索する場合)
  • コントロール パネルのホーム ページ (コントロール パネルの項目とタスクを検索する場合)
  • ヘルプ (関連するヘルプ トピックを見つける)

ルック アンド フィール

Windows での検索の操作性は、インスタント検索をサポートすることで大幅に強化されています。 すぐに結果を得ると、Windows はより強力で直接的に感じることができます。

Windows エクスプローラーとアプリケーション ウィンドウでは、追加のエントリ ポイントである場合、検索は右上隅にあります。 この場合、ユーザーはウィンドウで探しているものが見つからないときに検索メカニズムを探します。 ただし、Search がプライマリ エントリ ポイントの場合は、ウィンドウの上部の中央に配置されます。

[検索] ボタンは、検索ボックスに視覚的に接続されています。 スペースを最小限に抑えるために、オプションの プロンプト は、ラベルではなく検索ボックス内で使用されます。 プロンプトには、命令 (検索する型など) や検索範囲 (画像の検索など) を示す場合があります。

インスタント検索ボックススクリーン ショット

ラベルと個別のボタンがない場合、Windows でのクイック検索は軽量な外観になります。

検索が成功すると、検索結果の仮想ページが作成され、[戻る] スタックと [アドレス] バーに追加されます。 ユーザーは、元のページを復元して検索ボックスをクリアする方法がいくつかあります。たとえば、[戻る] をクリックする、アドレス バーで元のページをクリックする、Esc キーを押す、検索ボックスをクリアするなどです。

ユーザーは、結果の前のページを復元せずに、[検索] ボックスをオフにすることもできます。 インスタント検索モードでは、ユーザーが入力を開始した後にクリアボタンが表示されます。"x" は虫眼鏡の検索記号を置き換えます。 ホバーすると、"x" はボタンの外観を取得し、クリックできます。

[x] アイコンがする

ユーザーは、コントロールの右端にある [x] をクリックして、[検索] ボックスをオフにすることができます。

通常の検索モードでは、クリア ボタンは省略可能です。 ユーザーは、たとえば、検索の完了に時間がかかっている場合などに役立つ場合があります。 ユーザーは "x" をクリックして、進行中の検索を停止できます。 検索が既に完了している場合、ユーザーは [x] をクリックして [検索] ボックスをオフにすることができます。

ガイドライン

場所

  • アプリケーション ウィンドウの場合は、右上隅にある [検索] を見つけます。
  • ポップアップ ウィンドウの場合は、最も適切で便利な場所を検索します。
  • 例外: 通常、ユーザーがウィンドウ (プライマリ エントリ ポイント) で行う最初の操作である場合は、ウィンドウの上部に中央揃えにします。

ほら

  • 標準の検索ボタンのグラフィックスを使用します。 次の 3 つのバージョンがあります。
    • 虫眼鏡の検索記号のみ (ホバー時のボタンなし)。 クイック検索に使用します。
    • ボタン付き虫眼鏡検索記号。 検索を開始するには、ボタンをクリックする必要がある場合に使用します。
    • ボタンとドロップダウン矢印が付いた虫眼鏡の検索記号。 ユーザーがスコープを変更できる場合、または他の設定が使用可能な場合は、ドロップダウン矢印を追加します。
      • クイック検索の場合は、ドロップダウン矢印のみを使用し、ホバー時にボタンを表示します。
      • 通常の検索では、ボタンにドロップダウン矢印を表示します。

さまざまな状態のインスタント検索ボックスの 図

クイック検索のビジュアル仕様。

状態が異なる通常の検索ボックスの図

通常の検索のビジュアル仕様。

  • ラベルは使用しないでください。代わりにオプションのプロンプトを使用してください。 検索が汎用ファイル検索であるとユーザーが想定する傾向がある場合は、プロンプトを使用してスコープを指定します。 それ以外の場合は、Type を使用して検索するか、類似の簡潔な語句を使用します。

    検索する種類のプロンプト のスクリーン ショット

    "すべてのガジェットを検索" プロンプトする

    これらの例では、ユーザーが検索を操作するのに役立つ簡単なテキスト プロンプトが表示されます。

相互作用

  • 入力フォーカスで、以前に入力したテキストを自動的に選択します。 これにより、ユーザーは入力して新しい検索を入力したり、方向キーを使用してキャレットを配置して前の検索を変更したりできます。

    テキストする

    この例では、以前に入力したテキストが入力フォーカスで選択されています。

  • 検索ボックスのキーボード ショートカットを Ctrl + E に割り当てます。

機能

  • 可能な限りインスタント検索をサポートします。 通常の検索が余分な待機時間の価値があるシナリオがある場合は、通常の検索とインスタント検索の両方を提供します。
  • 通常の検索では、5 秒以内に関連する結果が返され、インスタント検索では 2 秒以内に結果が返される必要があります。 この時点以降、プログラムの応答性が高く、ユーザーが他のタスクを実行できる限り、時間の経過と同時に検索で関連性の低い結果が入力され続ける可能性があります。 この応答性を確保するには、検索データのインデックスを作成する必要がある場合があります。
  • 通常の検索モードとインスタント検索モードの両方を指定する場合、インスタント検索結果は通常の検索結果のサブセットである必要があります。
  • すべての検索はプレフィックスベースです (部分文字列またはサフィックスの検索はありません)。 末尾のワイルドカード文字の使用は省略可能であり、結果には影響しません。 複数の単語を入力する場合は、OR 検索を使用します。
  • 検索が成功すると、検索結果を含む仮想ページが [戻る] スタックと [アドレス] バーに追加されます。 複数の検索結果が 1 つの仮想ページになるため、[戻る] をクリックすると常に元のページが返されます。
  • スケールに必要な場合は、関連性で検索結果をランク付けします。
  • 空白の検索では、元のページが返されます。

クイック検索ボックスのサイズ設定と間隔の図

クイック検索に推奨されるサイズ設定と間隔。

通常の検索ボックスのサイズ設定と間隔の図

通常の検索に推奨されるサイズ設定と間隔。

テキスト

  • 検索ボックスでプロンプトの文言を表示するには、指示 (検索する入力など) にするか、検索範囲 (画像の検索など) を指定します。
  • プロンプト テキストは簡潔にする必要があります。 1 つの単語または短い語句で十分です。
  • 文スタイルの大文字を使用します。
  • 終了句読点や省略記号は使用しないでください。

ドキュメンテーション

  • このコントロールを検索ボックスとして参照します。 最初の単語の最初の文字を大文字にします。ボックスの最初の文字を大文字にしないでください。
  • クイック検索と通常検索の 2 種類の検索を参照してください。 インスタント検索の最初の文字を大文字にします。通常の検索の最初の文字を大文字にしないでください。

用語集の