Search Bars

HIG에 근거한 Search Bars 만들어보기

내가 개인 프로젝트로 만들어볼 앱에 쓰일 Search Bar를 만들기 전, 애플에서 제안하는 가이드라인을 먼저 알아보았다.

 

Search Bars 

Search Bar는 사람들이 텍스트를 입력창에 입력하는 행위로 거대한 값들 중에 원하는 값을 찾을 수 있게 한다. 서치바는 혼자, navigation bar나 contentview에  배치될수 있다. Navigation bar에 배치될 때, 서치바는 navigation bar에 고정되어 항상 접근할 수 있게끔, 아니면 사용자가 swipes donw 하여 다시 보이기 전까지 안 보이게끔 한다.

 

요구사항

- Text Field 대신에 Search Bar을 사용하여 search를 구현하라. 

 왜냐? textfield는 사용자들이 원하는 기본적인 검색 형태가 없다.

 

- Clear button을 넣어라.

 왜냐? 대부분의 서치바는 Clear button으로 지우니깐

 

- 적절한 시기에 Cancel button을 넣어라.

 왜냐? 대부분의 친절한 서치바는 갑자기 검색을 끝낼때 Cancel 가능하게끔 해준다.

 

- 가능하면, Search Bar에 힌트와 context를 제공해라

서치바는 placeholder를 담을수 있는데 이로 하여금 “검색”이나 “어떤 것(항목)을 검색하세요” 등을 상기시켜준다

또한 적절한 구두점이 있는 한 줄 프롬프트는 검색 창 바로 위에 표시되어 지침을 제공할 수도 있습니다.

 

- 검색 창 아래에 유용한 바로 가기 및 기타 콘텐츠를 제공하는 것이 좋다. 사람들이 콘텐츠에 더 빨리 접근할 수 있도록 검색 창 아래 영역을 사용한다. 

어떻게? 예를 들어 검색필드를 탭 하는 즉시 책갈피 목록을 표시한다, 입력할 때 결과 목록을 미리 표시한다 등

 

Scope Bars

사람들이 검색 범위를 좁힐 수 있도록 범위 표시줄을 검색 표시줄에 추가할 수 있다.

Scope Bar를 포함시킴으로써 검색결과를 개선한다. Scope Bar는 검색할 범주가 명확하게 정의되어 있을 때 유용할 수 있다. 그러나 범위 지정이 필요하지 않도록 검색 결과를 개선하는 것이 가장 좋다.

 

이런 방식으로 내가 만들어 볼것? 

당 프로젝트에 api로 불러온 음식들을 검색화 시키기