검색창 디자인: 첫 입력부터 올바른 결과까지

Pixso UI 디자인 메이커에서 검색 필드, 제안, 결과와 돌아가기를 연결해 돋보기 이상의 다음 행동을 설계하세요. 무엇을 찾고 어떤 결과를 여는지 알려야 합니다.

1. 입력 전 검색 범위를 보여 주기

프로젝트 목록이면 Search로 충분하지만 같은 헤더가 사람, 파일과 도움말까지 검색한다면 범위를 계속 보여 줍니다. “프로젝트 검색”, “청구서 검색”처럼 목적을 설명하세요.

Placeholder에 Project name or client처럼 기억할 정보를 적습니다. 댓글을 색인하지 않는다면 검색된다고 약속하지 마세요.

2. 입력, 지우기와 전송을 분리하기

Spring launch — client review처럼 현실적인 길이를 입력합니다. Enter와 검색 버튼은 같은 동작을 하고 clear는 글자와 제안을 지우되 임의로 이동하지 않습니다.

빈 전송은 기본 탐색으로 돌아갈지 오류를 보여 줄지 결정합니다. 제안이 실패해도 서비스가 살아 있으면 Enter 검색을 유지합니다.

3. 제안과 직접 목적지를 구분하기

제안 행이 검색어를 완성하는지 알려진 프로젝트를 여는지 드러내세요. “Project · Studio team”처럼 유형과 맥락을 넣고 고정된 행 수를 채우지 않습니다.

4. 키보드와 불안정한 연결

Combobox에서 Down Arrow, Enter, Escape의 의미를 명세합니다. 결과가 나타났다고 첫 행을 몰래 선택하지 말고 사용자가 이동했을 때만 강조합니다.

Spring을 Summer로 바꾸면 이전 응답이 새 제안을 덮어쓰지 않게 합니다. 제안이 중단되어도 직접 검색을 유지합니다.

5. 모바일에 충분한 공간 주기

좁은 화면에서는 검색 아이콘으로 전용 뷰를 열고 접근 가능한 이름, 보이는 필드, 닫기와 키보드 공간을 제공합니다. 돌아올 때 query와 결과 위치를 복원하세요.

6. Pixso에서 전체 query를 프로토타입하기

기본 라이브러리, spring 제안 팝업, spring launch 결과의 세 화면을 연결합니다. 리뷰어에게 검색을 사용하라고 하지 말고 고객 프로젝트를 찾는 과업을 줍니다.

핸드오프에는 Enter 동작, 선택된 제안 표시, clear의 영향과 돌아올 때 복원할 상태를 적습니다.

결론

좋은 검색창은 범위, 제안, 키보드, 연결 실패, 모바일과 복귀 상태를 하나의 의도로 설계합니다. Pixso에서 query 시작부터 결과까지 확인하세요.