[iOS / HIG] Search 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.

search bar를 사용하면 필드에 텍스트를 입력하여 많은 값을 검색할 수 있습니다. 검색 줄은 단독으로 표시하거나 탐색줄 또는 내용 보기에 표시할 수 있습니다. 탐색 모음에 표시되는 검색 표시줄은 항상 액세스할 수 있도록 navigation bar에 고정하거나 사용자가 아래로 이동하여 표시할 때까지 축소할 수 있습니다.

 

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.

검색을 구현하려면 텍스트 필드 대신 search bar를 사용하십시오. 텍스트 필드는 사람들이 기대하는 표준 검색란 모양을 가지고 있지 않습니다.

 

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

Clear(지우기) 버튼을 활성화합니다. 대부분의 검색란에는 필드 내용을 지우는 지우기 단추가 있습니다.

 

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

적절한 경우 Cancel(취소) 버튼을 활성화합니다. 대부분의 전용 search bar에는 검색을 즉시 종료하는 취소 단추가 포함되어 있습니다.

 

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.

필요한 경우 search bar에 힌트와 컨텍스트를 제공합니다. 검색 줄의 필드에는 "의복, 신발 및 액세서리 검색" 또는 단순히 "검색"과 같은 자리 표시자 텍스트가 포함될 수 있습니다. 적절한 구두점이 있는 간결한 한 줄 프롬프트도 검색란 바로 위에 나타나 지침을 제공할 수 있습니다. 주식은 프롬프트를 사용하여 사람들에게 회사 이름이나 주식 기호를 입력할 수 있음을 알려줍니다.

 

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는 검색 필드를 누르자마자 책갈피를 표시합니다. 검색어를 입력하지 않고 바로 이동하려면 하나를 선택하십시오. 검색 필드에 입력하면 주식에서 결과 목록을 표시합니다. 문자를 더 이상 입력하지 않고 언제든지 하나를 누릅니다.

 

For developer guidance, see UISearchController and UISearchBar.

개발자 지침은 UISearchController 및 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.

개발자 지침은 UISearchBar를 참조하십시오.

 

 

 

※ 참고 출처

애플 개발자 문서

Search Bars - Bars - iOS - Human Interface Guidelines - Apple Developer