Search Bars

https://developer.apple.com/design/human-interface-guidelines/ios/bars/search-bars/

サーチバー

A search bar allows people to search through a large collection of values by typing text into a field. A search bar can be displayed alone, or in a navigation bar or content view. When displayed in a navigation bar, a search bar can be pinned to the navigation bar so it's always accessible, or it can be collapsed until the user swipes down to reveal it.

検索バーを使用すると、フィールドにテキストを入力して、大きな値のコレクションから検索することができます。検索バーは、単独で、またはナビゲーションバーまたはコンテンツビューで表示できます。ナビゲーションバーに表示されると、検索バーをナビゲーションバーに固定して常にアクセスできるようにしたり、ユーザーがスワイプして開くするまで折りたたむことができます。

Use a search bar instead of a text field to implement search. A text field doesn’t have the standard search bar appearance that people expect.

検索を実装するには、テキストフィールドの代わりに検索バーを使用します。 テキストフィールドには、ユーザーが期待する標準的な検索バーの外観はありません。

Enable the Clear button. Most search bars include a Clear button that erases the contents of the field.

[クリア]ボタンを有効にします。 ほとんどの検索バーには、フィールドの内容を消去するクリアボタンが含まれています。

Enable the Cancel button when appropriate. Most dedicated search bars include a Cancel button that immediately terminates the search.

必要に応じて[キャンセル]ボタンを有効にします。 ほとんどの専用検索バーには、検索を直ちに終了する[キャンセル]ボタンがあります。

Clear button

Cancel button

If necessary, provide hints and context in a search bar. A search bar's field can contain placeholder text—like “Search Clothing, Shoes and Accessories” or simply “Search”—as a reminder of the context being searched. A succinct, one-line prompt with appropriate punctuation can also appear directly above a search bar to provide guidance. Stocks uses a prompt to let people know they can enter a company name or stock symbol.

必要に応じて、検索バーにヒントとコンテキストを入力します。 検索バーのフィールドには、検索対象のコンテキストを示す「プレースホルダテキスト」（「衣服、靴およびアクセサリーの検索」または単に「検索」など）を含めることができます。適切な句読点を含む簡潔な1行のプロンプトは、検索バーの上に表示され、ガイダンスを提供することもできます。Stocksはプロンプトを使用して、企業名や株価記号を入力できることを人々に知らせています。

Placeholder text

Introductory text

Consider providing helpful shortcuts and other content below a search bar. Use the area under a search bar to help people get to content faster. Safari, for example, shows your bookmarks as soon as you tap the search field. Select one to go right to it without entering any search terms. Stocks shows a list of results as you type into the search field. Tap one at any time without typing any more characters.

検索バーの下に役立つショートカットやその他のコンテンツを提供することを検討してください。 検索バーの下の領域を使用して、人々がコンテンツにすばやくアクセスできるようにします。たとえばSafariでは、検索フィールドをタップするとすぐにブックマークが表示されます。検索語を入力せずに右に移動するには、1つを選択します。検索フィールドに入力すると、検索結果のリストが表示されます。それ以上の文字を入力することなく、いつでも1つをタップします。

For developer guidance, see UISearchController and UISearchBar.

Scope Bars

スコープバー

A scope bar can be added to a search bar to let people refine the scope of a search.

スコープバーを検索バーに追加すると、検索範囲を絞り込むことができます。

Favor improving search results over including a scope bar. A scope bar can be useful when there are clearly defined categories in which to search. However, it’s best to improve search results so scoping isn’t necessary.

スコープバーを含めることで検索結果を改善することをお勧めします。 スコープバーは、検索するカテゴリが明確に定義されている場合に便利です。それでいて、検索結果を改善して有効範囲を指定する必要はありません。

For developer guidance, see UISearchBar.