다음을 통해 공유


검색 상자

참고

이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙에 따라 적용되지만 프레젠테이션 및 예제는 현재 디자인 지침을 반영하지 않습니다.

검색 상자를 사용하면 일치 항목을 필터링하거나 강조 표시하여 큰 데이터 집합 내에서 특정 개체 또는 텍스트를 빠르게 찾을 수 있습니다. 표준 검색 컨트롤은 없지만 프로그램의 검색 기능을 Windows와 일치하도록 해야 합니다.

두 가지 유형의 검색이 있습니다.

  • 즉시 검색합니다. 여기서 결과는 사용자 유형으로 즉시 표시됩니다. 단추를 클릭할 필요가 없으므로 돋보기 검색 기호는 단추가 아닌 그래픽으로 표시됩니다.

    검색 상자를 가리키는 '프롬프트' 콜아웃과 돋보기 그래픽을 가리키는 '검색 기호' 콜아웃이 있는 인스턴트 검색 상자를 보여 주는 스크린샷.

    빠른 검색을 사용하는 일반적인 검색 상자입니다. 검색은 모든 키 입력에서 자동으로 실행됩니다.

  • 사용자가 검색 단추를 클릭할 때 검색이 수행되는 일반 검색입니다. 단추에 돋보기 검색 기호가 표시됩니다.

    일반 검색 상자의 스크린샷

    일반 검색을 사용하는 일반적인 검색 상자입니다. 사용자가 단추를 클릭하여 검색을 수행합니다.

    사용자에 대한 검색 옵션 중 하나 또는 두 종류를 모두 제공할 수 있습니다.

올바른 컨트롤인가요?

결정하기 전에 다음 사항을 고려합니다.

  • 특정 개체를 찾기 어렵나요? 이 문제는 다음과 같은 경우 발생할 수 있습니다.
    • 많은 개체가 있습니다.
    • 개체는 단일 위치에 있지 않습니다. 검색은 트리에서 개체를 찾는 데 특히 유용합니다.
    • 검색 데이터를 찾기가 어렵습니다(예: 메타데이터).
  • 사용자가 문서 내에서 특정 텍스트를 찾아야 합니까?
  • 기능이 5초 이내에 관련 검색 결과를 반환하나요? 그렇지 않은 경우 검색 기능을 제공할 수 있지만 검색 대화 상자와 같은 장기 실행 검색을 수용하기 위해 표시되는 피드백을 제공하는 대체 디자인을 사용할 수 있습니다.

설계 개념

검색은 많은 시나리오에서 중요한 첫 번째 단계입니다. 사용자는 개체를 사용하려면 먼저 개체를 찾아야 합니다. 사용자는 점점 더 큰 하드 디스크에 점점 더 많은 개체를 저장하지만 개체 검색은 잘 스케일링되지 않습니다. 검색은 사용자 환경의 간단하고 일관되며 신뢰할 수 있는 부분이어야 합니다.

Windows의 검색 상자:

  • 모든 Explorer 창의 일부이므로 쉽게 찾고 인식할 수 있습니다.
  • 모양과 동작이 일관됩니다.
  • 효율적이고 빠르며 즉각적인 검색 모드에서 즉각적인 결과를 제공합니다.

검색 상자는 다음과 같은 위치에서 Windows에서 사용됩니다.

  • 탐색기
  • 환경(Microsoft Windows 미디어 플레이어, Windows 사진 갤러리, Windows 인터넷 Explorer)
  • 시작 메뉴(프로그램 및 최근 파일 찾기)
  • 홈페이지 제어판(제어판 항목 및 작업을 찾으려면)
  • 도움말(관련 도움말 topics 찾기)

모양과 느낌

빠른 검색을 지원하여 Windows에서 검색의 느낌을 크게 향상시켰습니다. 즉각적인 결과가 있으면 Windows가 더 강력하고 직접적인 느낌을 줍니다.

Windows Explorer 및 애플리케이션 창에서 검색은 추가 진입점인 경우 오른쪽 위 모서리에 있습니다. 이 경우 사용자는 창에서 찾고 있는 항목을 찾을 수 없을 때 검색 메커니즘을 찾습니다. 그러나 검색이 기본 진입점인 경우 창 위쪽의 가운데에 배치됩니다.

검색 단추는 검색 상자에 시각적으로 연결됩니다. 공간을 최소화하기 위해 레이블 대신 검색 상자 내에서 선택적 프롬프트 를 사용합니다. 프롬프트는 명령(예: 검색할 형식)이거나 검색의 scope 나타낼 수 있습니다(예: 그림 검색).

인스턴트 검색 상자의 스크린샷

레이블과 별도의 단추가 없으면 Windows의 인스턴트 검색은 간단한 모양입니다.

성공적인 검색을 수행하면 검색 결과의 가상 페이지가 만들어지고 백 스택 및 주소 표시줄에 추가됩니다. 사용자는 원본 페이지를 복원하고 뒤로 클릭, 주소 표시줄에서 원본 페이지 클릭, Esc 누르기 또는 검색 상자 지우기 등 검색 상자의 지우기를 여러 가지 방법으로 수행할 수 있습니다.

사용자는 이전 결과 페이지를 복원하지 않고 검색 상자를 선택 취소할 수도 있습니다. 인스턴트 검색 모드에서는 사용자가 입력을 시작한 후 지우기 단추가 나타납니다. "x"는 돋보기 검색 기호를 대체합니다. 마우스로 가리키면 "x"가 단추 모양을 가져오고 클릭할 수 있습니다.

'x' 아이콘이 있는 검색 상자의 스크린샷

사용자는 컨트롤의 오른쪽 끝에 있는 "x"를 클릭하여 검색 상자를 지울 수 있습니다.

일반 검색 모드에서 지우기 단추는 선택 사항입니다. 예를 들어 검색을 완료하는 데 시간이 오래 걸리는 경우 사용자가 유용할 수 있습니다. 사용자는 "x"를 클릭하여 검색 진행을 중지할 수 있습니다. 검색이 이미 완료된 경우 사용자는 "x"를 클릭하여 검색 상자를 지울 수 있습니다.

지침

위치

  • 애플리케이션 창의 경우 오른쪽 위 모서리에서 검색을 찾습니다.
  • 팝업 창의 경우 가장 현명하고 편리한 곳마다 검색을 찾습니다.
  • 예외: 검색이 일반적으로 사용자가 창에서 수행하는 첫 번째 작업(기본 진입점)인 경우 창 맨 위에 가운데를 둡 수 있습니다.

응시

  • 표준 검색 단추 그래픽을 사용합니다. 세 가지 버전이 있습니다.
    • 돋보기 검색 기호만 표시합니다(가리키기 단추 없음). 빠른 검색에 사용합니다.
    • 단추가 있는 돋보기 검색 기호입니다. 검색을 시작하려면 단추를 클릭해야 하는 경우에 사용합니다.
    • 단추와 드롭다운 화살표가 있는 돋보기 검색 기호입니다. 사용자가 scope 변경할 수 있거나 다른 설정을 사용할 수 있는 경우 드롭다운 화살표를 추가합니다.
      • 즉시 검색의 경우 드롭다운 화살표만 사용하고 가리키기에서 단추를 표시합니다.
      • 일반 검색의 경우 단추에 드롭다운 화살표를 표시합니다.

다른 상태의 인스턴트 검색 상자 그림

빠른 검색에 대한 시각적 사양입니다.

다양한 상태의 일반 검색 상자 그림

일반 검색에 대한 시각적 사양입니다.

  • 레이블을 사용하지 마세요. 대신 선택적 프롬프트를 사용합니다. 사용자가 검색이 일반 파일 검색이라고 가정하는 경향이 있는 경우 프롬프트를 사용하여 scope 제공합니다. 그렇지 않은 경우 형식을 사용하여 검색하거나 유사하고 간결한 구를 검색합니다.

    '검색할 형식' 프롬프트의 스크린샷

    '모든 가젯 검색' 프롬프트 스크린샷

    이러한 예제에서는 간단한 텍스트 프롬프트를 통해 사용자가 검색 작업을 수행할 수 있습니다.

상호 작용

  • 입력 포커스에서 이전에 입력한 텍스트를 자동으로 선택합니다. 이렇게 하면 사용자가 입력하여 새 검색을 입력하거나 화살표 키를 사용하여 caret를 배치하여 이전 검색을 수정할 수 있습니다.

    강조 표시된 텍스트가 있는 검색 상자의 스크린샷

    이 예제에서는 입력 포커스에서 이전에 입력한 텍스트가 선택됩니다.

  • 검색 상자의 바로 가기 키를 Ctrl+E로 할당합니다.

기능

  • 가능하면 즉시 검색을 지원합니다. 일반 검색이 추가 대기 시간 가치가 있는 시나리오가 있는 경우 일반 검색과 인스턴트 검색을 모두 제공합니다.
  • 일반 검색은 5초 이내에 관련 결과를 반환해야 하며 인스턴트 검색은 2초 이내에 결과를 반환해야 합니다. 이 시점 이후에 프로그램이 응답하고 사용자가 다른 작업을 수행할 수 있는 한 검색은 시간이 지남에 따라 관련성이 낮은 결과를 계속 채울 수 있습니다. 이러한 응답성을 보장하기 위해 검색 데이터를 인덱싱해야 할 수 있습니다.
  • 일반 및 인스턴트 검색 모드를 모두 제공하는 경우 인스턴트 검색 결과는 일반 검색 결과의 하위 집합이어야 합니다.
  • 모든 검색은 접두사 기반입니다(부분 문자열 또는 접미사 검색 없음). 후행 와일드카드 문자의 사용은 선택 사항이며 결과에 영향을 주지 않습니다. 여러 단어를 입력한 경우 OR 검색을 사용합니다.
  • 검색에 성공하면 검색 결과가 포함된 가상 페이지가 뒤로 스택 및 주소 표시줄에 추가됩니다. 여러 검색으로 단일 가상 페이지가 생성되므로 뒤로를 클릭하면 항상 원래 페이지가 반환됩니다.
  • 크기 조정에 필요한 경우 관련성별로 검색 결과의 순위를 지정합니다.
  • 빈 검색은 원래 페이지를 반환합니다.

인스턴트 검색 상자 크기 조정 및 간격 그림

빠른 검색에 권장되는 크기 조정 및 간격입니다.

일반 검색 상자 크기 조정 및 간격 그림

일반 검색에 권장되는 크기 조정 및 간격입니다.

텍스트

  • 검색 상자에서 프롬프트의 문구에 대해 명령(예: 검색할 형식)으로 지정하거나 검색의 scope 표시합니다(예: 사진 검색).
  • 프롬프트 텍스트는 간단해야 합니다. 한 단어 또는 짧은 구로 충분해야 합니다.
  • 문장 스타일의 대문자를 사용합니다.
  • 끝 문장 부호 또는 줄임표를 사용하지 마세요.

설명서

  • 검색 상자로 이 컨트롤을 참조하세요. 첫 번째 단어의 초기 문자를 대문자로 표시합니다. 상자의 초기 문자를 대문자로 표시하지 마세요.
  • 빠른 검색 및 일반 검색으로 두 가지 유형의 검색을 참조하세요. 빠른 검색의 초기 문자를 대문자로 표시합니다. 일반 검색의 초기 문자를 대문자로 표시하지 마세요.

용어 설명