[HIG] Search fields

고라니·2023년 12월 7일
0

HIG

목록 보기
5/11

이번에는 Search fields에 대해 알아보자

Search fields

Search fields를 사용하면 사용자가 입력한 특정 단어로 컨텐츠 모음을 검색할 수 있다.

보통 Search버튼, Clear버튼, 선택적으로 placeholder로 구성되어 있다.

Best practices

  • 사용자가 어떤 정보를 검색할 수 있는지 placeholder를 표시

  • 검색 경험을 개선하기 위해 제안 제공
    : 최근 검색 기록, 인기 검색어 등을 제안

  • Search field 근처에 관련 항목에 엑세스할 수 있도록 해라
    : 예를 들면 사파리처럼 검색 필드를 탭하면 북마크를 표시

  • 적절한 시점에 검색을 실행하라
    : 타이핑 식작하면 바로 or 'Return'또는 'Enter'를 선택 할 때 등

  • Clear 버튼을 포함해라

  • 검색 기록을 표시하기 전에 개인정보 보호를 고려해라
    : 검색 기록이 노출되는것을 싫어할 수 있다, 검색 결과를 빠르게 좁히도록 도와주는 스코프 바를 제공하면 좋음

Scope bars

사람들이 검색 범위를 구체화할 수 있게 도와준다.

  • scope bar를 제공하는 것보다 검색 결과의 개선을 우선시 해라
    : scope bar는 검색에 명확하게 정의된 범주가 있는 경우 유용하지만, 일반적으로 scope bar가 필요 없도록 검색 결과를 개선하는 것이 더 좋은 방법이다.

iOS, iPadOS

  • navigation bar또는 콘텐츠 영역 안에 search field를 표시할 수 있다
    : 네비게이션 바의 시스템에서 제공하는 요소를 사용하여 search field를 구성하면 적절한 디자인과 동작을 자동으로 가지게 된다.

상황에 맞는 search field 컴포넌트

  • searchController
    : 네비게이션 바 내에서 search field를 손쉽게 추가 가능, 시스템에서 제공하는 디자인과 동작 활용 가능, 통인된 디자인과 사용자 경험을 따를 때 유용

  • UISearchBar
    : 사용자 정의된 외관 및 동작 구현 가능, 바에 넣을 필드를 생성하는데 도움

  • UISearchTextField
    : 콘텐츠 영역 내에서 검색 필드에 사용자 정의 배경을 적용 할 수 있음, 이는 검색 필드를 네비게이션 바가 아닌 다른 부분에 적용시킬 때 유용

profile
🍎 무럭무럭

0개의 댓글