그래픽 요소

참고

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

그래픽 요소는 관계, 계층 구조 및 강조를 시각적으로 표시합니다. 배경, 배너, 유리, 집계, 구분 기호, 그림자 및 핸들이 포함됩니다.

여러 유형의 그래픽 요소가 있는 예제입니다.

그래픽 요소는 일반적으로 대화형이 아닙니다. 그러나 구분 기호는 크기 조정 가능한 콘텐츠에 대해 대화형이며 핸들은 대화형 작업을 표시하는 그래픽입니다.

참고:그룹 상자, 애니메이션, 아이콘 및 브랜딩 과 관련된 지침은 별도의 문서에 제공됩니다.

올바른 사용자 인터페이스인가요?

그래픽 요소는 관계를 나타내는 강력한 시각적 수단이지만, 그래픽 요소를 과도하게 사용하면 시각적 혼란이 가중되고 표면에서 사용할 수 있는 공간이 줄어듭니다. 그들은 드물게 사용되어야한다.

Microsoft Windows의 디자인 추세는 불필요한 그래픽과 선을 제거하여 더 간단하고 깔끔한 모양입니다.

그래픽 요소가 필요한지 여부를 결정하려면 다음 질문을 고려하세요.

• 디자인의 프레젠테이션과 커뮤니케이션이 요소 없이도 명확하고 효과적입니까? 그렇다면 제거합니다.
• 레이아웃만으로 관계를 효과적으로 전달할 수 있나요? 그렇다면 레이아웃 을 대신 사용합니다. 관련 컨트롤을 나란히 배치하고 관련 없는 컨트롤 사이에 추가 간격을 지정할 수 있습니다. 또한 indenting을 사용하여 계층적 관계를 표시할 수도 있습니다.

이 예제에서는 레이아웃만 사용하여 컨트롤 관계를 표시합니다.

• 텍스트 없이 통신이 효과적인가요? 그렇지 않은 경우 그룹 상자, 레이블이 지정된 구분 기호 또는 기타 레이블을 사용합니다.

사용 패턴

그래픽 요소에는 다음과 같은 몇 가지 사용 패턴이 있습니다.

요소	Description
그래픽 일러스트레이션 을 사용하여 아이디어를 시각적으로 전달합니다.	그래픽 일러스트레이션은 아이콘과 비슷하지만 크기가 있을 수 있으며 일반적으로 대화형이 아닙니다. 이 예제에서는 그래픽 일러스트레이션을 사용하여 기능의 특성을 제안합니다.
배경 를 사용하여 다양한 유형의 콘텐츠를 강조하거나 강조하지 않습니다.	배경은 중요한 콘텐츠를 강조하는 데 사용할 수 있습니다. 이 예제에서는 중요한 작업을 강조하기 위해 배경을 사용합니다. 배경은 보조 콘텐츠를 강조 해제하는 데 사용할 수도 있습니다. 이 예제에서 보조 작업은 작업 창에 배치하여 강조 해제됩니다.
배너 은 중요한 상태 나타내는 데 사용됩니다.	배경과 달리 배너는 주로 단일 텍스트 문자열을 강조합니다. 이 예제에서는 배너를 사용하여 페이지의 설정이 그룹 정책 제어됨을 나타냅니다.
유리 를 전략적으로 사용하여 창의 시각적 가중치를 줄입니다.	유리는 창 자체 대신 콘텐츠에 집중하여 표면의 무게를 줄일 수 있습니다. 이 예제에서 glass는 컨트롤 대신 콘텐츠에 대한 사용자의 주의를 집중합니다.
집계 를 사용하여 강력한 관련 컨트롤 간에 시각적 관계를 만듭니다.	이 예제에서는 집계 배경을 사용하여 탐색기에서 뒤로 단추와 앞으로 단추 간의 관계를 강조합니다. 이 예제에서는 경계 집계를 사용하여 컨트롤 간의 관계를 강조하고 컨트롤이 8개가 아닌 단일 컨트롤처럼 느껴지도록 합니다.
구분 기호 을 사용하여 약하게 관련되거나 관련이 없는 컨트롤을 구분합니다.	구분 기호는 대화형 또는 비대화형일 수 있습니다. 크기 조정 가능한 콘텐츠 간의 대화형 구분 기호를 분할자라고 합니다. 이 예제에서는 크기 조정 가능한 콘텐츠에 대화형 구분 기호가 사용됩니다. 이 예제에서는 구분 기호가 대화형이 아닙니다.
그림자 을 사용하여 콘텐츠를 배경에 대해 시각적으로 돋보이게 합니다.	이 예제에서 그림자는 아트워크를 배경과 돋보이게 합니다.
핸들 을 사용하여 개체를 이동하거나 크기를 조정할 수 있음을 나타냅니다.	핸들은 항상 대화형이며 마우스 포인터를 가리키면 동작이 제안됩니다. 이러한 예제에서 핸들은 개체의 크기를 조정할 수 있음을 나타냅니다.

지침

일반

• 그래픽 요소만으로 필수 정보를 전달하지 마세요. 이렇게 하면 시각 장애 또는 장애가 있는 사용자의 접근성 문제가 표시됩니다.

그래픽 디자인

• 그래픽은 단일 간단한 아이디어를 강화할 때 가장 효과적입니다. 해석해야 하는 복잡한 그래픽은 제대로 작동하지 않습니다. 상형 문자는 동굴 드로잉에 가장 적합합니다.

  잘못된 예:

  

  이 예제에서는 Windows XP의 복잡한 그래픽이 복잡한 신뢰 결정을 비효율적으로 설명하려고 시도합니다.

• 대화형 컨트롤과 연결된 화살표, 펼침 단추, 단추 프레임 또는 기타 어도던스를 사용하지 마세요. 이렇게 하면 사용자가 그래픽과 상호 작용할 수 있습니다.

• 디자인에서 순수한 빨간색, 노란색 및 녹색의 스와스를 피하십시오. 혼동을 방지하려면 이러한 색을 예약하여 상태 전달합니다. 상태 이외의 다른 색에 이러한 색을 사용해야 하는 경우 순수 색 대신 음소거된 톤을 사용합니다.

• 문화적으로 중립적인 디자인을 사용합니다. 한 국가, 지역 또는 문화권에서 어떤 의미가 있을 수 있는 것은 다른 나라에서도 같은 의미를 갖지 못할 수 있습니다.

• 종교, 정치 및 국가 기호뿐만 아니라 사람, 얼굴, 성별 또는 신체 부위를 사용하지 마십시오. 이러한 이미지는 쉽게 번역되지 않거나 공격적일 수 있습니다.

• 사용자 또는 사용자를 대표해야 하는 경우 일반적으로 표시 합니다. 사실적인 묘사를 피하십시오.

배경 및 배너

• 콘텐츠를 강조하려면 밝은 배경에서 어두운 텍스트를 사용합니다. 밝은 회색 또는 노란색 배경의 검은색 텍스트가 잘 작동합니다.

  

  이 예제에서 링크는 노란색 배경에 있기 때문에 사용자의 주의를 받습니다.

• 콘텐츠를 강조하지 않으면 어두운 배경에서 밝은 텍스트를 사용합니다. 어두운 회색 또는 파란색 배경의 흰색 텍스트가 잘 작동합니다.

  

  이 예제에서 어두운 배경은 콘텐츠를 강조하지 않습니다.

• 그라데이션을 사용하는 경우 전체 그라데이션에서 텍스트 색의 대비가 좋은지 확인합니다.

• 항상 16x16 픽셀 아이콘을 사용하여 배너에 주의를 기울입니다. 배너는 너무 쉽게 간과할 수 없습니다. 자세한 지침 및 예제는 표준 아이콘을 참조하세요.

• 배경 및 배너를 주의해서 사용합니다. 배경 또는 배너의 의도는 콘텐츠를 강조하는 것일 수 있지만, 결과는 "배너 실명"이라는 현상과 반대되는 경우가 많습니다.

유리

• 텍스트 없이 창 프레임을 터치하는 작은 지역에서 유리를 전략적으로 사용하는 것이 좋습니다. 이렇게 하면 지역이 프레임의 일부로 보이도록 하여 프로그램을 더 간단하고 가벼우며 응집력 있는 모양으로 만들 수 있습니다.
• 일반 창 배경이 더 매력적이거나 사용하기 쉬운 상황에서는 유리를 사용하지 마세요.

구분 기호

• 구분 기호에 세로 및 가로줄을 사용합니다. 구분 기호와 구분되는 콘텐츠 사이에 충분한 공간이 있어야 합니다.
• 크기 조정 가능한 콘텐츠(분할자) 사이의 구분 기호의 경우 마우스로 가리키면 크기 조정 포인터를 표시합니다.

이 예제에서는 마우스로 가리키면 포인터 크기 조정이 표시됩니다.

그림자

• 만 사용하여 프로그램의 가장 중요한 콘텐츠 또는 끌어당기는 개체가 배경에 대해 시각적으로 눈에 띄게 만듭니다. 다른 상황에서는 그림자가 시각적으로 복잡하다고 간주합니다.

높은 dpi 지원

• dpi(인치당 96개 및 120개 점) 비디오 모드를 지원합니다. 시작 시 dpi 모드를 감지하고 dpi 변경 이벤트를 처리합니다. Windows는 96 및 120 dpi에 최적화되어 있으며 기본적으로 96dpi를 사용합니다.
• 그래픽 크기 조정보다 96 및 120dpi에 대해 특별히 렌더링된 별도의 비트맵을 제공하는 것이 좋습니다. 적어도 가장 중요하고 눈에 보이는 비트맵에 대해 96 및 120 dpi 버전을 제공하고 다른 비트맵을 가운데에 배치하거나 크기를 조정합니다. 이러한 애플리케이션은 "높은 dpi 인식"으로 간주되며 Windows에서 자동으로 크기가 조정되는 프로그램보다 전반적인 시각적 환경을 더 잘 제공합니다.
  • 개발자: 프로그램 매니페스트에서 dpi 인식 플래그를 설정하거나 프로그램 초기화 중에 SetProcessDPIAware() API를 호출하여 프로그램 높은 dpi 인식(및 자동 크기 조정 방지)을 선언할 수 있습니다. 매크로를 사용하여 올바른 그래픽 선택을 간소화할 수 있습니다. Win32 비트맵의 경우 SS_CENTERIMAGE 사용하여 크기를 조정하거나 SS_REALSIZECONTROL 수 있습니다.
• 96 및 120 dpi 모두에서 프로그램을 확인합니다.
  • 너무 작거나 너무 큰 그래픽.
  • 그래픽이 잘리거나 겹치거나 제대로 맞지 않습니다.
  • 제대로 확장되지 않은 그래픽("pixilated").
  • 그래픽 배경에서 잘리거나 맞지 않는 텍스트입니다.

텍스트

• 접근성 및 지역화를 위해 그래픽에 텍스트를 사용하지 마세요. 브랜딩 및 텍스트를 추상 개념으로 나타내기 위해 예외만 만듭니다.