그래픽 요소

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

그림자가 있는 windows 탐색기의 스크린샷

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

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

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

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

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

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

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

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

4 아이콘 레이아웃

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

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

사용 패턴

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

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

지침

일반

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

그래픽 디자인

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

  틀렸습니다.

  복잡한 그래픽

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

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

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

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

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

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

배경 및 배너

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

  노란색 배경스크린샷

  이 예제에서 링크는 노란색 배경에 있으므로 사용자의 주의를 끕다.

• 콘텐츠를 강조 해제하려면 어두운 배경에 밝은 텍스트를 사용합니다. 진한 회색 또는 파란색 배경의 흰색 텍스트는 잘 작동합니다.

  녹색 배경스크린샷

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

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

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

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

잔

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

구분 기호

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

크기 조정 포인터가 있는 분할자를 보여 주는

크기 조정 포인터스크린샷

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

그림자

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

높은 dpi 지원

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

문자 메시지

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