HIG - Search fields

[ffalswo2]

Search fields

Search field를 사용하면 사용자가 입력한 특정 용어로 content collection을 검색할 수 있습니다.

Search field는 수정 가능한 텍스트 필드로, Search button, clear button, optional placeholder text가 표시되는 경우가 많습니다. 플랫폼에 따라 검색 텍스트 필드는 토큰을 사용하여 사람들이 입력하는 검색어 또는 사람들이 필터로 사용할 수 있는 앱 정의 항목을 나타낼 수 있습니다. 토큰은 용어나 항목을 캡슐화하는 시각적 처리를 사용하여 사람들이 그 안에 있는 텍스트를 선택하지 않고도 토큰을 쉽게 복사하거나 드래그할 수 있음을 나타냅니다. macOS에서 토큰의 예는 토큰 필드를 참조하세요.

Token fields example

Best practices

검색을 안내하는 데 도움이 되는 힌트를 제공하는 것도 고려해 보세요.

예를 들어 음악에는 "아티스트, 노래, 가사 등"이라는 플레이스홀더 텍스트가 포함되어 사람들이 검색할 수 있는 항목을 제안합니다. 플레이스홀더 텍스트에 '검색'과 같은 용어는 유용한 정보를 제공하지 않으므로 사용하지 마세요.

Search field 근처에 유용한 바로 가기 및 기타 콘텐츠를 제공하는 것이 좋습니다.

예를 들어 Safari에서는 검색 필드를 탭하거나 클릭하는 즉시 책갈피를 표시하여 사용자가 책갈피를 선택하여 바로 열 수 있도록 합니다. 개발자 지침은 UISearchSuggestion을 참조하세요.

Start the search at an appropriate time.

사용자가 입력을 시작하자마자 검색을 시작하거나 사용자가 Return 또는 Enter를 선택할 때까지 기다릴 수 있습니다. 사용자가 입력하는 동안 검색하면 텍스트가 더 구체화됨에 따라 지속적으로 정제된 결과가 제공됩니다. 사용자가 입력을 마친 후에 검색이 시작되는 경우에는 입력하는 동안 최근 검색어 또는 제안한 용어 중에서 선택할 수 있는 메뉴를 표시하는 것이 좋습니다.

Clear Button을 포함하세요.

사람들은 현재 검색어를 빠르게 삭제할 수 있는 지우기 버튼을 선호합니다.

검색 기록을 표시하기 전에 개인정보 보호를 고려하세요.

다른 사람들이 볼 수 있는 곳에 자신의 검색 기록이 표시되는 것을 달가워하지 않을 수도 있습니다. 대안으로 검색 결과의 범위를 빠르게 좁힐 수 있는 scope bar를 제공하는 것도 고려해 보세요.

Scope bars

검색 범위를 구체할 수 있도록 도와준다.

scope bar를 포함하는 것보다 검색 결과를 개선하는 것을 선호합니다.

검색 범주가 명확하게 정의된 경우 범위 표시줄이 유용할 수 있지만, 일반적으로 검색 결과를 개선하는 것이 더 좋으므로 범위 표시줄은 필요하지 않습니다.

Platform considerations

navigation bar 또는 content area 내에 search field를 표시할 수 있습니다. 시스템에서 제공하는 구성 요소를 사용하여 navigation bar에 search field를 포함하면 자동으로 적절한 모양이 지정되고 사람들이 expect하는 대로 작동합니다. 예를 들어 search field는 사용자가 아래로 스와이프하여 검색창을 표시할 때까지 숨길 수 있습니다.

Developer note📌

navigation bar내에서 search field의 시스템 제공 모양과 동작을 활용하려면 searchController를 사용하십시오. search field에 대한 사용자 지정 모양과 동작을 구현해야 하는 경우 UISearchBar를 사용하여 bar에 넣을 field를 만들거나 UISearchTextField를 사용하여 콘텐츠 영역의 검색 필드에 사용자 지정 배경을 적용하는 것을 고려하세요.