Human Interface Guidelines - Bars - Search Bars

Search Bars

Search Bar 는 어디서나 정말 흔하게 볼 수 있는 bar 이다. Navigation bar 에 비하면 UI 측면에서 개발자가 구현할 내용들이 그렇게 많지는 않으나, 그래도 웬만하면 쓰이지 않을 수가 없는 ... 매우 중요한 bar 이니만큼 한번정도는 정독하는 것도 나쁘지 않을 것이다. 

 

 

Search bar 는 field 에 text 를 입력함으로써 거대한 자료 뭉터기에서 원하는 것을 찾을 수 있도록 해줍니다. Search bar 는 혼자 쓰일수도, 또는 navigation bar, content view 내에서 쓰일수도 있습니다. Navigation bar 안에서 쓰이는 경우 고정될 수 있어서, 항상 접근 가능하며 또한 유저가 아래로 스와이프해 이것을 꺼내기 전까지 쉬에 숨어있을 수도 있습니다. 

 

 

 

 

 

 

 

Search 기능을 구현하기 위해 TextField 을 넣지 말고 seearch Bar 를 사용해주세요.  

Text Field 는 유저들이 기대하고 있는 search bar 의 외향과 다릅니다.

 

Clear 버튼을 사용할 수 있도록 해주세요.

대부분의 search bars 는 field 내 contents 를 초기화 할 수 있는 Clear button 을 포함하고 있습니다. 

 

때에 따라 Cancel 버튼을 사용할 수 있도록 해주세요. 대부분의 search bars 는 바로 search 를 종료할 수 있는 Cancel button 을 포함합니다. 

 

 

 

필요할 경우, 적절한 힌트를 search bar 에 주세요. Search bar's field 는 placeholder text 를 포함할 수 있습니다. Search 에 대한 안내를 돕기 위해 한 줄의 prompt 역시 search bar 의 바로 위에 적어줄 수 있습니다. Stock(apple 의 주식 앱) 에서는 아래와 같이 사용자들이 회사명 또는 주식 symbol 을 이용할 수 있다고 search bar 바로 위에서 말해주고 있습니다. 

 

 

 

 

 

도움이 될만한 shortcuts 또는 다른 content 들을 search bar 아래에 넣어줄 수 있습니다. 

 

 원하는 content 들을 더 빠르게 접근할 수있도록 돕기 위해 search bar 아래 영역을 활용해보세요. Safari 에서는 search field 를 누르면 바로 bookmarks 가 나와서 자주 방문하는 사이트에 가기가 더 편하고, stock 에서는 characters 의 일부만 입력해도 관련된 결과들이 나와서 더 타이핑할 필요가 없습니다. 

(Developer guidance :  UISearchController and UISearchBar)

 

 

 

 

 

 

 

 

 

Scope Bars

Scope Bar (search bar 에 추가 가능 ) 를 이용하면 검색의 범위를 조정 할 수 있습니다.

 

 

scope bar 를 포함시키는 것 대신 search 기능을 더 좋게 만들어주세요. 

Scope bar 는 search 를 하는 것에 있어 명확하게 정의된 categories 가 있을 때 유용합니다. 하지만, search 기능을 더 좋게 만들어서 scoping 이 필요하지 않도록 하는게 더 좋습니다. 

 

( Developer guidance:  UISearchBar )

 

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