Layout

아티클
06/13/2023

참고

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

레이아웃은 창 또는 페이지 내 콘텐츠의 크기 조정, 간격 및 배치입니다. 효과적인 레이아웃은 사용자가 원하는 항목을 빠르게 찾을 수 있도록 도와주고 시각적으로 매력적인 모양을 만드는 데 매우 중요합니다. 효과적인 레이아웃은 사용자가 즉시 이해하는 디자인과 사용자가 당황하고 압도감을 느끼게 하는 디자인 간의 차이를 만들 수 있습니다.

참고:창 관리 와 관련된 지침은 별도의 문서에 제공됩니다. 권장되는 특정 컨트롤 크기 조정 및 간격은 해당 지침 문서에 제공됩니다.

설계 개념

시각적 계층 구조

창 또는 페이지의 모양이 요소의 관계와 우선 순위를 나타내는 경우 명확한 시각적 계층 구조가 있습니다. 시각적 계층 구조가 없으면 사용자는 이러한 관계와 우선 순위 자체를 파악해야 합니다.

시각적 계층 구조는 다음 특성을 능숙하게 결합하여 수행됩니다.

초점. 레이아웃은 사용자가 먼저 확인해야 하는 위치를 나타냅니다.
흐름. 눈은 표면을 통해 명확한 경로에 의해 원활하고 자연스럽게 흐르며, 사용하기에 적합한 순서대로 UI(사용자 인터페이스) 요소를 찾습니다.
그룹화 방법. 논리적으로 관련된 UI 요소는 명확한 시각적 관계를 갖습니다. 관련 항목은 함께 그룹화됩니다. 관련 없는 항목은 별개입니다.
강조. UI 요소는 상대적 중요도에 따라 강조됩니다.
맞춤. UI 요소는 조정된 배치를 갖기 때문에 쉽게 스캔하고 순서대로 표시할 수 있습니다.

또한 효과적인 레이아웃에는 다음과 같은 특성이 있습니다.

디바이스 독립성. 레이아웃은 글꼴 서체 또는 크기, dpi(인치당 점), 디스플레이 또는 그래픽 어댑터에 관계없이 의도한 대로 표시됩니다.
스캔하기 쉽습니다. 사용자는 찾고 있는 콘텐츠를 한눈에 찾을 수 있습니다.
효율성 - 큰 UI 요소는 커야 하며, 작은 요소는 작게 작동합니다.
크기 조정. 도움이 된다면 창의 크기가 조정 가능하며, 화면의 크기가 크거나 작더라도 콘텐츠 레이아웃이 효과적입니다.
균형. 콘텐츠가 표면에 균등하게 분산된 것처럼 보입니다.
시각적 단순성. 레이아웃이 필요한 것보다 더 복잡하지 않다는 인식입니다. 사용자는 레이아웃의 모양에 압도되지 않습니다.
일관성. 유사한 창 또는 페이지는 비슷한 레이아웃을 사용하므로 사용자는 항상 지향적인 느낌을 줍니다.

크기 조정, 간격 및 배치는 간단한 개념이지만 레이아웃의 과제는 이러한 특성을 올바르게 혼합하는 것입니다.

Windows에서 레이아웃은 DTU(대화 상자 단위) 및 상대 픽셀과 같은 디바이스 독립적 메트릭을 사용하여 전달됩니다.

읽기용 디자인 모델

사용자는 콘텐츠의 모양 및 organization 읽은 내용을 선택합니다. 효과적인 레이아웃을 만들려면 사용자가 읽는 경향이 있는 항목과 이유를 이해해야 합니다.

다음을 읽기 위해 이 디자인 모델을 사용하여 레이아웃을 결정할 수 있습니다.

사람 (서양 문화권에서) 왼쪽에서 오른쪽, 위에서 아래로 순서로 읽습니다.
읽기에는 몰입형 읽기 및 스캔이라는 두 가지 모드가 있습니다. 몰입형 읽기의 목표는 이해입니다.

이 다이어그램은 몰입형 읽기를 모델링합니다.

반면, 스캔의 목표는 항목을 찾는 것입니다. 전체 검사 경로는 다음과 같습니다.

이 다이어그램은 검사를 모델링합니다.

페이지의 왼쪽 가장자리를 따라 실행되는 텍스트가 있는 경우 사용자는 먼저 왼쪽 가장자리를 스캔합니다.
소프트웨어를 사용하는 경우 사용자는 UI 자체에 몰두하지 않고 작업에 몰두합니다. 따라서 사용자는 일반적으로 스캔하는 UI 텍스트를 읽지 않습니다. 그런 다음 필요한 경우에만 텍스트 비트를 포괄적으로 읽습니다.
사용자는 페이지의 왼쪽 또는 오른쪽에 있는 탐색 창을 건너뛰는 경향이 있습니다. 사용자는 자신이 있다는 것을 인식하지만 탐색하려는 경우에만 탐색 창을 살펴봅니다.
사용자는 서식 없는 텍스트의 큰 블록을 전혀 읽지 않고 건너뛰는 경향이 있습니다.

사용자는 스캔할 때 텍스트 및 탐색 창의 큰 블록을 건너뛰는 경향이 있습니다.
모든 것이 동일하면 사용자는 먼저 창의 왼쪽 위 모서리를 보고, 페이지를 스캔하고, 오른쪽 아래 모서리에서 검사를 종료합니다. 그들은 왼쪽 아래 모서리를 무시하는 경향이있다.

모든 항목이 같으면 사용자는 1, 2, 4 및 3 순서로 이 숫자를 읽습니다.
그러나 대화형 UI에서 모든 항목이 동일하지는 않으므로 UI 요소가 서로 다른 수준의 주의를 받습니다. 사용자는 대화형 컨트롤, 특히 창의 왼쪽 위와 가운데에 있는 컨트롤과 눈에 띄는 텍스트를 먼저 보는 경향이 있습니다.

선명하고 흐린 텍스트가 있는 화면 그림

사용자는 기본 대화형 컨트롤과 눈에 띄는 기본 명령에 집중하고 필요한 경우에만 다른 항목을 살펴봅니다.

사용자는 대화형 컨트롤 레이블, 특히 현재 작업을 완료하는 것과 관련된 것으로 보이는 레이블을 읽는 경향이 있습니다. 반면 사용자는 필요한 경우에만 정적 텍스트를 읽는 경향이 있습니다.
다르게 보이는 항목이 관심을 끌고 있습니다. 굵은 텍스트와 큰 텍스트는 일반 텍스트에서 두드러집니다. 색이 있거나 배경색이 있는 UI 항목이 눈에 띄습니다. 아이콘이 있는 항목은 아이콘이 없는 항목에서 두드러지게 표시됩니다.
사용자는 이유가 없는 한 스크롤하지 않습니다. 접기 위의 콘텐츠가 스크롤 이유를 제공하지 않으면 스크롤하지 않습니다.
사용자가 무엇을 해야 할지 결정하면 즉시 검사를 중지하고 수행합니다.
사용자가 완료된 것으로 생각되면 검색을 중지하기 때문에 완료 지점으로 보이는 것 이상의 것을 무시하는 경향이 있습니다.

키보드 옵션의 스크린샷

사용자가 완료된 것으로 생각되면 검사를 중지합니다.

물론 이 일반 모델에는 예외가 있습니다. 시선 추적 장치는 실제 사용자의 동작이 매우 불규칙하다는 것을 나타냅니다. 이 모델의 목표는 사용자 동작을 정확하게 모델링하는 것이 아니라 적절한 의사 결정과 장단을 만드는 데 도움이 되는 것입니다. 그러나 이 목록을 읽으면서 많은 읽기 패턴을 인식했으면 좋겠지만,

스캔을 위한 디자인

사용자는 읽지 않고 스캔하므로 스캔을 위해 UI 화면을 디자인해야 합니다. 사용자가 텍스트를 왼쪽에서 오른쪽, 위쪽에서 아래쪽 순서로 읽는 것이 아니라 관심을 끄는 UI 요소를 확인한다고 가정합니다.

검사를 위해 디자인하려면 다음을 수행합니다.

사용자가 전체 창을 빠르게 검사한 다음 대략 다음 순서로 UI 요소를 읽는 것으로 가정합니다.
- 중앙의 대화형 컨트롤
- 커밋 단추
- 다른 위치에서 찾을 수 있는 대화형 컨트롤
- 기본 명령
- 추가 설명
- 경고 아이콘이 표시된 텍스트
- 창 제목
- 기본 본문의 기타 정적 텍스트
- 각주
작업을 시작하는 UI 요소를 왼쪽 위 모서리 또는 가운데 위에 배치합니다.
작업을 완료하는 UI 요소를 오른쪽 아래 모서리에 배치합니다.
가능하면 정적 텍스트 대신 대화형 컨트롤에 중요한 텍스트를 배치합니다.
중요한 정보를 왼쪽 아래 모서리 또는 긴 스크롤 가능한 컨트롤 또는 페이지의 맨 아래에 두지 않도록 합니다.
큰 텍스트 블록을 표시하지 마세요. 불필요한 텍스트를 제거합니다. 반전된 피라미드 프레젠테이션 스타일을 사용합니다.
사용자의 관심을 끌기 위해 작업을 수행하는 경우 주의가 보장되는지 확인합니다.

가능하면 이 모델과 싸우지 않고 작업합니다. 하지만 특정 UI 요소를 강조하거나 강조 해제해야 하는 경우가 있습니다.

기본 UI 요소를 강조하려면 다음을 수행합니다.

검사 경로에 기본 UI 요소를 배치합니다.
왼쪽 위 모서리 또는 가운데 위에 작업을 시작할 UI를 배치합니다.
커밋 단추를 오른쪽 아래 모서리에 배치합니다.
나머지 기본 UI를 가운데에 배치합니다.
명령 단추, 명령 링크 및 아이콘과 같이 관심을 끄는 컨트롤을 사용합니다.
큰 텍스트와 굵은 텍스트를 포함하여 눈에 띄는 텍스트를 사용합니다.
사용자가 대화형 컨트롤이나 아이콘 또는 배너에서 읽어야 하는 텍스트를 입력 합니다.
밝은 배경에서 어두운 텍스트를 사용합니다.
요소를 넉넉한 공간으로 묶습니다.
강조하려는 요소를 보려면 가리키기 또는 가리키기와 같은 상호 작용이 필요하지 않습니다.

이 예제에서는 기본 UI 요소를 강조하는 여러 가지 방법을 보여줍니다.

보조 UI 요소를 강조 해제하려면 다음을 수행합니다.

보조 UI 요소를 검사 경로 외부에 배치합니다.
사용자가 일반적으로 볼 필요가 없는 항목을 창의 왼쪽 아래 모서리 또는 아래쪽에 배치합니다.
명령 단추 대신 작업 링크와 같이 관심을 끌지 않는 컨트롤을 사용합니다.
일반 또는 회색 텍스트를 사용합니다.
어두운 배경에서 밝은 텍스트를 사용합니다. 어두운 회색 또는 파란색 배경의 흰색 텍스트가 잘 작동합니다.
요소를 최소 공간으로 묶습니다.
점진적 공개를 사용하여 보조 UI 요소를 숨기는 것이 좋습니다.

이 예제에서는 보조 UI 요소를 강조 해제하는 여러 가지 방법을 보여줍니다.

화면 공간을 효과적으로 사용

화면 공간을 효과적으로 사용하려면 여러 가지 요인의 균형을 맞추어야 합니다. 너무 많은 공간을 사용하고 창이 무겁고 낭비적인 느낌을 줍니다. 심지어 Fitts의 법칙에 따라 사용하기도 어렵습니다.

잘못된 예:

너무 많은 공백을 보여 주는 스크린샷

이 예제에서는 창이 콘텐츠에 비해 너무 큽습니다.

반면에 공간을 너무 적게 사용하면 창이 비좁고 불편하며 위협적이며 스크롤 및 기타 조작이 필요한 경우 사용하기가 어렵습니다.

잘못된 예:

컨트롤이 너무 많은 스크린샷

이 예제에서는 창이 콘텐츠에 비해 너무 작습니다.

중요한 UI는 지원되는 최소 유효 해상도에 적합해야 하지만 화면 공간을 효과적으로 사용하면 창이 가능한 한 작아서는 안 된다는 것을 의미한다고 가정하지 마세요. 효과적인 레이아웃은 열린 공간을 존중하며 가능한 가장 작은 공간으로 모든 것을 벼락치기를 시도하지 않습니다. 최신 디스플레이에는 상당한 화면 공간이 있으며 가능한 경우 이 공간을 효과적으로 사용하는 것이 좋습니다. 따라서 화면 공간을 너무 적게 사용하는 것이 아니라 너무 많은 화면 공간을 사용하는 측면에서 잘못되었습니다. 이렇게 하면 창이 더 가볍고 더 쉽게 접근할 수 있습니다.

다음과 같은 경우 레이아웃이 화면 공간을 효과적으로 사용하고 있다는 것을 알고 있습니다.

Windows, 창 창 및 컨트롤의 크기를 조정할 필요가 없습니다. 사용자가 가장 먼저 수행하는 작업 크기가 창, 창 또는 컨트롤의 크기를 조정하는 경우 크기가 잘못되었습니다.
데이터가 잘리지 않습니다. 목록 보기 및 트리 뷰의 대부분의 데이터에는 줄임표가 없으며 데이터 길이가 비정상적으로 크지 않으면 다른 컨트롤의 데이터가 잘리지 않습니다. 작업을 수행하기 위해 읽어야 하는 데이터는 잘리지 않아야 합니다.
불필요한 스크롤을 제거하기 위해 창 및 컨트롤의 크기가 적절하게 조정됩니다. 가로 스크롤 막대가 거의 없고 불필요한 세로 스크롤 막대가 없습니다.
컨트롤은 대부분 표준 크기를 사용합니다. 예를 들어 표면에 하나 또는 두 개의 명령 단추 너비만 사용하여 컨트롤 크기 수를 줄이려고 노력합니다.
UI 표면의 균형이 조정됩니다. 사용하지 않는 큰 화면 영역이 없습니다.

목적에 맞게 충분히 큰 창 크기를 선택합니다. (창 크기를 조정할 수 있는 경우 이 목표는 기본 크기에 적용됩니다.) 잘린 데이터 또는 스크롤 막대와 사용 가능한 많은 화면 공간의 조합은 비효율적인 레이아웃의 명확한 표시입니다.

컨트롤 크기 조정

일반적으로 화면 공간을 효과적으로 사용하는 첫 번째 단계는 다양한 UI 요소에 적합한 크기를 결정하는 것입니다. 컨트롤 크기 조정 테이블과 특정 컨트롤 지침 문서의 권장 크기 조정을 참조하세요.

Fitts의 법칙에 따르면 대상이 작을수록 마우스로 획득하는 데 더 오래 걸립니다. 또한 Windows Tablet 및 Touch Technology 사용하는 컴퓨터의 경우 "마우스"는 실제로 펜 또는 사용자의 손가락일 수 있으므로 작은 컨트롤의 크기를 결정할 때 대체 입력 디바이스를 고려해야 합니다. 16x16 상대 픽셀의 컨트롤 크기는 모든 입력 디바이스에 적합한 최소 크기입니다. 반면, 표준 15x9 상대 픽셀 스핀 제어 단추가 너무 작아서 펜에서 효과적으로 사용할 수 없습니다.

간격

관대하지만 과도하지 않은 공간을 제공하면 레이아웃이 더 편안하고 쉽게 구문 분석할 수 있습니다. 유효 공간은 사용되지 않는 공간이 아니라 사용자가 스캔할 수 있는 기능을 개선하는 데 중요한 역할을 하며 디자인의 시각적 매력을 더합니다. 지침은 간격 테이블을 참조하세요.

Windows Tablet 및 Touch Technology 사용하는 컴퓨터의 경우 다시 "마우스"는 실제로 펜 또는 사용자의 손가락일 수 있습니다. 펜이나 손가락을 포인팅 디바이스로 사용할 때 대상 지정이 더 어려서 사용자가 의도한 대상 외부를 탭합니다. 대화형 컨트롤이 매우 가까이 배치되지만 실제로는 터치하지 않는 경우 사용자는 컨트롤 간의 비활성 공간을 클릭할 수 있습니다. 비활성 공간을 클릭하면 결과나 시각적 피드백이 없으므로 사용자는 무엇이 잘못되었는지 잘 모르는 경우가 많습니다. 작은 컨트롤의 간격이 너무 밀접하면 사용자는 잘못된 개체를 탭하지 않도록 정밀도로 탭해야 합니다. 이러한 문제를 해결하려면 대화형 컨트롤의 대상 영역에 3개 이상의 D RU(5개의 상대 픽셀)가 있어야 합니다.

다음과 같은 경우 레이아웃에 적절한 간격이 있다는 것을 알고 있습니다.

전반적으로 UI 표면은 편안하며 비좁은 느낌이 들지 않습니다.
공간은 균일하고 균형 잡힌 것처럼 보입니다.
관련 요소는 서로 가깝고 관련 없는 요소는 상대적으로 멀리 떨어져 있습니다.
도구 모음 단추와 같이 함께 사용할 컨트롤 사이에는 배달 못한 공간이 없습니다.

크기 조정 가능한 창

크기 조정 가능한 창은 화면 공간을 효과적으로 사용하는 요인이기도 합니다. 일부 창은 고정 콘텐츠로 구성되며 크기 조정이 가능하지는 않지만 크기가 조정 가능한 콘텐츠가 있는 창의 크기는 조정 가능해야 합니다. 물론 사용자가 창 크기를 조정하는 이유는 추가 화면 공간을 고급으로 조정하기 위한 것이므로 필요한 UI 요소에 더 많은 공간을 제공하여 콘텐츠가 그에 따라 확장되어야 합니다. 동적 콘텐츠, 문서, 이미지, 목록 및 트리가 있는 Windows는 크기 조정 가능한 창을 최대한 활용할 수 있습니다.

스크롤 막대를 가져오는 크기 조정 컨트롤의 스크린샷

이 예제에서 창 크기를 조정하면 목록 보기 컨트롤의 크기가 조정됩니다.

즉, 창이 너무 넓게 뻗어 있을 수 있습니다. 예를 들어 콘텐츠가 600개 상대 픽셀보다 넓으면 많은 제어판 페이지가 다루기 어려워집니다. 이 경우 창 크기가 커지면 콘텐츠 영역의 크기를 최대 너비 이상으로 조정하거나 콘텐츠의 원본을 변경하지 않는 것이 좋습니다. 대신 최대 너비와 고정된 왼쪽 위 원점 을 유지합니다.

줄 길이가 늘어나면 텍스트를 읽기가 어려워집니다. 텍스트 문서의 경우 텍스트를 쉽게 읽을 수 있도록 최대 줄 길이 80자를 고려합니다. 문자에는 문자, 문장 부호 및 공백이 포함됩니다.

잘못된 예:

긴 텍스트가 있는 와이드 메시지 상자의 스크린샷

이 예제에서는 텍스트 길이가 길면 읽기가 어렵습니다.

마지막으로 크기 조정 가능한 창은 크기 조정 가능한 콘텐츠를 더 작게 만들고, 크기가 조정되지 않고 효과적으로 작동할 수 있는 UI 요소에서 공간을 제거하여 화면 공간을 효과적으로 사용해야 합니다. 어느 시점에서 창이나 해당 UI 요소가 너무 작아서 사용할 수 없게 되므로 최소 크기를 할당받거나 일부 요소를 완전히 제거해야 합니다.

키가 크고 방해가 많은 리본이 있는 창 스크린샷

리본 메뉴가 없는 창 스크린샷

이 예제에서 창의 크기는 최소입니다.

일부 프로그램은 완전히 다른 프레젠테이션을 사용하여 콘텐츠를 더 작은 크기로 사용할 수 있도록 하는 이점을 누릴 수 있습니다.

가운데 미디어 플레이어 단추 스크린샷

이 예제에서는 창이 표준 형식에 비해 너무 작아지면 Windows 미디어 플레이어 형식을 변경합니다.

포커스

레이아웃은 먼저 볼 수 있는 명확한 위치가 하나 있을 때 포커스가 있습니다. 사용자에게 창 또는 페이지 검사를 시작할 위치를 표시하는 데 중점을 두는 것이 중요합니다. 명확한 초점없이, 사용자의 눈은 정처없이 방황합니다. 초점은 사용자가 빠르게 찾고 이해해야 하며 시각적으로 가장 중점을 두어야 하는 중요한 요소여야 합니다. 왼쪽 위 모서리는 대부분의 창에 대한 자연 초점입니다.

하나의 초점만 있어야 합니다. 실제 생활에서와 마찬가지로 눈은 한 번에 한 가지에만 집중할 수 있으며 사용자는 동시에 여러 장소에 집중할 수 없습니다.

UI 요소를 초점으로 만들려면 다음을 통해 시각적으로 강조할 수 있습니다.

표면의 왼쪽 위 또는 가운데 위에 배치합니다.
중요하고 쉽게 이해할 수 있는 대화형 컨트롤을 사용합니다.
기본 명령과 같은 눈에 띄는 텍스트를 사용합니다.
컨트롤에 기본 선택 및 초기 입력 포커스를 제공합니다.
컨트롤을 다른 색의 배경에 배치합니다.

Windows Search를 고려합니다. Windows Search의 초점은 작업의 시작점이므로 검색 상자여야 합니다. 그러나 표준 검색 상자 배치와 일치하도록 오른쪽 위 모서리에 있습니다. 검색 상자에는 입력 포커스가 있지만 검색 경로의 위치를 고려할 때 단서만으로는 충분하지 않습니다.

이 문제를 해결하기 위해 창의 가운데 위 부분에 사용자를 올바른 위치로 안내하는 중요한 명령이 있습니다.

용인되는:

유용한 텍스트가 있는 검색 대화 상자의 스크린샷

이 예제에서는 창의 가운데 위 부분에 있는 눈에 띄는 명령이 사용자를 검색 상자로 안내합니다.

지침이 없으면 창에 명백한 초점이 없을 것입니다.

잘못된 예:

텍스트가 없는 검색 대화 상자의 스크린샷

이 예제에는 명확한 초점이 없습니다. 사용자는 어디를 봐야 할지 모릅니다.

UI 요소 시각적 강조를 제공하는 경우 주의가 보장되는지 확인합니다. 이전의 잘못된 Windows Search 예제에서 강조 표시된 모든 단추는 왼쪽 위 모서리에 있으며 시각적 강조가 가장 많지만 의도한 초점은 아닙니다. 사용자는 이 단추를 보고 무엇을 해야 할지 알아내려고 할 수 있습니다.

잘못된 예:

강조 표시된 모든 단추의 스크린샷

주요 명령이 초점으로 표시되지 않으면 강조 표시된 모두 단추는 의도하지 않은 초점입니다.

흐름

레이아웃은 사용자가 표면을 통해 명확한 경로를 통해 원활하고 자연스럽게 안내되어 사용하기에 적합한 순서대로 UI 요소를 찾는 흐름이 있습니다. 사용자가 초점을 식별하면 작업을 완료하는 방법을 결정해야 합니다. UI 요소의 배치는 관계를 전달하며 작업을 수행하는 단계를 미러 합니다. 일반적으로 이는 작업의 단계가 서양 문화권에서 왼쪽에서 오른쪽, 위쪽에서 아래쪽 순서로 자연스럽게 흐른다는 것을 의미합니다.

다음과 같은 경우 레이아웃에 좋은 흐름이 있다는 것을 알고 있습니다.

UI 요소의 배치는 사용자가 작업을 수행하는 데 필요한 단계를 반영합니다.
작업을 시작하는 UI 요소는 왼쪽 위 모서리 또는 가운데 위에 있습니다.
작업을 완료하는 UI 요소는 오른쪽 아래 모서리에 있습니다.
관련 UI 요소는 함께 있습니다. 관련 없는 요소는 별개입니다.
필요한 단계는 기본 흐름에 있습니다.
선택적 단계는 적절한 배경 또는 점진적 공개를 사용하여 강조되지 않는 기본 흐름 외부에 있습니다.
자주 사용되는 요소는 검사 경로에서 자주 사용되지 않는 요소 앞에 나타납니다.
사용자는 항상 다음에 무엇을 해야 할지 알고 있습니다. 작업 흐름에 예기치 않은 점프 또는 중단이 없습니다.

잘못된 예:

혼란스러운 대화 상자 레이아웃의 스크린샷

이 예제에서는 사용자가 다음에 무엇을 해야 할지 모릅니다. 작업 흐름에 예기치 않은 점프 및 중단이 있습니다.

올바름:

잘 계획된 대화 상자의 스크린샷

이 예제에서 UI 요소의 프레젠테이션은 작업을 수행하는 단계를 미러링합니다.

그룹화

레이아웃은 논리적으로 관련된 UI 요소에 명확한 시각적 관계가 있는 경우 그룹화됩니다. 그룹은 사용자가 항목보다 관련 항목 그룹을 더 쉽게 이해하고 집중할 수 있기 때문에 중요합니다. 그룹은 레이아웃을 더 간단하고 쉽게 구문 분석할 수 있도록 합니다.

다음 방법으로 그룹화(무거움 증가)를 표시할 수 있습니다.

레이아웃. 관련 컨트롤을 나란히 그룹화하고 관련 없는 컨트롤 간에 추가 간격을 지정할 수 있습니다.

이 예제에서는 레이아웃만 사용하여 컨트롤 관계를 표시합니다.
구분 기호. 구분 기호는 컨트롤 그룹을 통합하는 가로 또는 세로 선입니다. 구분 기호는 더 간단하고 깔끔한 모양을 제공합니다. 그러나 그룹 상자와 달리 전체 표면에 걸쳐 있을 때 가장 잘 작동합니다.

이 예제에서는 레이블이 지정된 구분 기호를 사용하여 컨트롤 관계를 표시합니다.
수집. 집계는 강력한 관련 컨트롤 간에 시각적 관계를 만드는 그래픽입니다.

이 예제에서는 경계 집계를 사용하여 컨트롤 간의 관계를 강조하고 컨트롤이 8개가 아닌 단일 컨트롤처럼 느껴지도록 합니다.
그룹 상자. 그룹 상자는 관련 컨트롤 집합을 둘러싸는 레이블이 지정된 사각형 프레임입니다.

이 예제에서 그룹 상자는 관련 컨트롤 집합을 둘러싸고 레이블을 지정합니다.
배경. 배경을 사용하여 다양한 유형의 콘텐츠를 강조하거나 강조 해제할 수 있습니다.

이 예제에서는 제어판 작업창을 사용하여 관련 작업 및 제어판 항목을 그룹화합니다.

시각적 혼란을 방지하기 위해 작업을 잘 수행하는 가장 가벼운 가중치 그룹화가 가장 좋은 선택입니다. 자세한 내용은 그룹 상자, 탭, 구분 기호 및 배경을 참조하세요.

그룹화 스타일에 관계없이 indenting을 사용하여 그룹 내 컨트롤의 관계를 표시할 수 있습니다. 서로 피어인 컨트롤은 왼쪽 맞춤이어야 하며 종속 컨트롤은 12개의 D RU 또는 18개의 상대 픽셀을 들여쓰기합니다.

들여쓰기 컨트롤의 세 가지 수준의 스크린샷

종속 컨트롤은 12개의 DLUS 또는 18개의 상대 픽셀을 들여쓰기합니다. 이는 의도적으로 레이블에서 검사 상자와 라디오 단추 사이의 거리입니다.

다음과 같은 경우 레이아웃에 적절한 그룹화가 있다는 것을 알고 있습니다.

창 또는 페이지에는 최대 7개의 그룹이 있습니다.
각 그룹의 목적은 분명합니다.
각 그룹 내의 컨트롤 관계, 특히 컨트롤 종속성이 분명합니다.
그룹화는 콘텐츠를 더 복잡하게 만드는 대신 간소화합니다.

맞춤

맞춤은 UI 요소의 조정된 배치입니다. 맞춤은 콘텐츠를 더 쉽게 검색하고 시각적 복잡성에 대한 사용자의 인식에 영향을 주므로 중요합니다.

맞춤을 결정할 때 고려해야 할 몇 가지 목표가 있습니다.

수평 스캔의 용이성. 사용자는 어색한 간격 없이 수평으로 읽고 관련 항목을 나란히 찾을 수 있습니다.
수직 스캔의 용이성. 사용자는 관련 항목의 열을 스캔하고 최소한의 수평 눈 움직임으로 원하는 항목을 즉시 찾을 수 있습니다.
시각적 복잡성을 최소화합니다. 사용자는 불필요한 세로 맞춤 눈금선이 있는 경우 레이아웃이 시각적으로 복잡하다고 인식합니다.

가로 맞춤

왼쪽 맞춤

왼쪽에서 오른쪽 읽기 순서로 인해 왼쪽 맞춤은 대부분의 콘텐츠에서 잘 작동합니다. 왼쪽 맞춤을 사용하면 열 형식 데이터를 세로로 쉽게 검색할 수 있습니다.

오른쪽 맞춤

오른쪽 맞춤은 숫자 데이터, 특히 숫자 데이터의 열에 가장 적합합니다. 오른쪽 맞춤은 커밋 단추 뿐만 아니라 오른쪽 창 가장자리에 맞춰진 컨트롤에도 적합합니다.

고급 검색 아래쪽 화살표 단추의 스크린샷

이 예제에서는 고급 검색 점진적 공개 컨트롤이 오른쪽 창 가장자리에 배치되므로 올바르게 정렬됩니다.

가운데 맞춤

가운데 맞춤은 왼쪽 또는 오른쪽 맞춤이 부적절하거나 불균형으로 표시되는 경우에 가장 적합합니다.

가운데 맞춤 미디어 플레이어 컨트롤의 스크린샷

이 예제에서는 미디어 플레이어 컨트롤이 가운데에 배치되어 균형 잡힌 모양을 제공합니다.

창 콘텐츠를 가운데에 배치하여 공간을 채우지 마세요.

잘못된 예:

공백이 너무 많은 창의 스크린샷

이 예제에서 콘텐츠가 크기를 조정할 수 있는 창의 가운데에 잘못 배치되어 공간을 채웁니다.

세로 맞춤

요소 위쪽

위쪽에서 아래쪽 읽기 순서로 인해 대부분의 콘텐츠에서 위쪽 맞춤이 잘 작동합니다. 위쪽 맞춤을 사용하면 UI 요소를 가로로 쉽게 검색할 수 있습니다.

텍스트 기준선

컨트롤을 텍스트와 세로로 맞추는 경우 텍스트 기준선을 정렬하여 부드러운 가로 읽기 흐름을 제공합니다.

올바름:

단추 및 레이블 텍스트가 정렬된 스크린샷

잘못된 예:

단추 및 레이블 텍스트가 정렬되지 않은 스크린샷

올바른 예제에서 컨트롤과 해당 레이블은 텍스트 기준선에 따라 세로로 정렬됩니다.

다음과 같은 경우 레이아웃에 적절한 맞춤이 있다는 것을 알고 있습니다.

가로 및 세로로 스캔하기 쉽습니다.
그것은 간단한 시각적 모양을 가지고있다.

레이블 맞춤

일반 맞춤 규칙은 컨트롤 레이블에 적용되지만 특정 주의를 기울여야 하는 일반적인 문제입니다. 레이블 맞춤에는 다음과 같은 목표가 있습니다.

세로 검사를 쉽게 수행하여 올바른 컨트롤을 찾습니다.
레이블을 컨트롤과 연결하기 위해 수평 검사를 쉽게 수행합니다.
지역화의 용이성, 언어마다 길이가 다른 레이블 처리.
다양한 레이블 길이를 혼합하여 잘 작동합니다.
잘린 텍스트를 피하면서 사용 가능한 공간을 효율적으로 사용합니다.

전반적인 목표는 사용자가 원하는 것을 찾는 데 필요한 눈 이동의 양을 줄이는 것이지만 컨트롤의 특성과 사용자가 찾고 있는 것은 컨텍스트에 따라 달라집니다.

네 가지 일반적인 레이블 배치 및 맞춤 스타일이 있으며 각각 이점은 다음과 같습니다.

컨트롤 위의 왼쪽 맞춤 레이블
컨트롤 왼쪽에 있는 왼쪽 맞춤 레이블
컨트롤 왼쪽에 왼쪽 맞춤 레이블, 왼쪽에 비정형 컨트롤
컨트롤 왼쪽의 오른쪽 맞춤 레이블

컨트롤 위의 왼쪽 맞춤 레이블

레이아웃은 레이블의 길이에 따라 달라지지 않지만 세로 공간이 가장 많이 사용되므로 이 스타일을 지역화하는 것이 가장 쉽습니다.

컨트롤 위에 두 개의 레이블 열이 있는 목록

이 스타일은 세로 공간을 가장 많이 사용하지만 지역화하는 것이 가장 쉽습니다. 주로 대화형 컨트롤에 레이블을 지정하는 것이 좋습니다.

다음 경우에 가장 잘 사용됩니다.

레이블이 지정된 컨트롤은 텍스트뿐만 아니라 대화형입니다.
UI가 지역화됩니다. 이 스타일은 종종 레이블의 길이를 두 배 또는 세 배로 늘릴 수 있는 공간을 제공합니다.
UI는 고정 레이아웃 기술(예: Win32)을 사용하고 있습니다.
10개 이하의 컨트롤이 있습니다. 컨트롤이 많을수록 레이블을 검사하기가 어렵습니다.
레이블을 수용할 수 있는 충분한 세로 공간이 있습니다.
레이아웃은 열뿐만 아니라 자유형이어야 합니다.

컨트롤 왼쪽에 있는 왼쪽 맞춤 레이블

이 스타일은 세로로 스캔하는 것이 가장 쉽고 레이블 길이가 크게 다르지만 레이블을 컨트롤과 연결하기가 더 어려운 경우에도 잘 작동합니다. 이 스타일은 필요한 경우 여러 줄 레이블을 사용할 수 있습니다.

컨트롤이 남아 있는 레이블 열이 4개 있는 목록

이 스타일은 잘 작동합니다. 그러나 두 개의 열이 있지만 시각적으로 4개의 열이 있어 데이터가 더 복잡해 보입니다.

다음 경우에 가장 잘 사용됩니다.

사용자는 세로로 스캔하여 특정 레이블을 찾을 수 있습니다.
사용자는 왼쪽에서 오른쪽, 위에서 아래로 레이블 및 컨트롤을 읽을 가능성이 없습니다.
레이블을 수용할 수 있는 충분한 수평 공간이 있습니다.
레이블의 길이는 크게 다릅니다.
양식과 같은 많은 컨트롤이 있습니다.
열이 거의 없습니다. 시각적으로 레이블과 컨트롤은 두 개의 개별 열로 표시됩니다.

컨트롤 왼쪽에 왼쪽 맞춤 레이블, 왼쪽에 비정형 컨트롤

이 스타일을 사용하면 레이블을 세로로 쉽게 스캔하고 레이블과 컨트롤을 가로로 스캔할 수 있으며 공간 효율이 매우 높습니다. 그러나 컨트롤을 세로로 스캔하기가 더 어렵습니다. 컨트롤은 사용 가능한 공간을 최대한 활용하기 위해 오른쪽 맞춤됩니다.

비정형 컨트롤이 있는 레이블의 두 열 목록

이 스타일은 간결하고 읽기 쉽지만 컨트롤을 세로로 스캔하기는 어렵습니다.

다음 경우에 가장 잘 사용됩니다.

UI는 변수 레이아웃 기술(예: Windows Presentation Foundation)을 사용하고 있습니다.
사용자는 세로로 스캔하여 특정 레이블을 찾을 수 있습니다.
사용자는 왼쪽에서 오른쪽으로, 위에서 아래로 레이블 및 컨트롤을 읽을 수 있습니다.
사용자는 컨트롤을 세로로 스캔할 가능성이 없습니다.
컨트롤 텍스트는 길이가 다르며 다른 스타일을 사용하는 경우 잘릴 수 있습니다.
컨트롤은 읽기 전용(예: 읽기 전용 텍스트 상자)입니다. 다른 컨트롤의 경우 이 맞춤이 엉성하게 표시됩니다. 그러나 클릭할 때 컨트롤을 편집할 수 있습니다.
많은 열이 있지만 열에는 컨트롤이 거의 없습니다.

컨트롤 왼쪽의 오른쪽 맞춤 레이블

이 스타일은 레이블을 컨트롤과 연결하기 위해 가로로 읽는 것이 가장 쉽지만 레이블을 세로로 스캔하기가 어렵고 들여쓰기된 레이블 및 컨트롤이 있는 labelsList의 길이가 크게 다를 때 제대로 작동하지 않습니다.

들여쓰기된 레이블 및 컨트롤이 있는 목록

이 스타일을 사용하면 컨트롤을 쉽게 세로로 스캔할 수 있지만 레이블을 세로로 스캔하기가 어렵습니다.

다음 경우에 가장 잘 사용됩니다.

사용자는 왼쪽에서 오른쪽으로, 위에서 아래로 레이블 및 컨트롤을 읽을 수 있습니다.
사용자는 다음과 같은 이유로 특정 레이블을 찾기 위해 세로로 스캔할 가능성이 없습니다.
- 컨트롤이 거의 없습니다.
- 레이블은 잘 알려져 있습니다.
- 컨트롤은 대부분 자체 설명이며 거의 비어있지 않습니다(빈 컨트롤을 방지하기 위한 기본값이 있는 것일 수 있음).
레이블을 수용할 수 있는 충분한 수평 공간이 있습니다.
레이블의 길이는 크게 달라지지 않습니다.
많은 열이 있는 경우 시각적으로 레이블 및 컨트롤이 단일 열로 표시됩니다.

그러나 이러한 스타일을 채택하기 전에 다음 두 가지 요소를 더 고려합니다.

프로그램에서 일관되게 사용할 수 있는 스타일을 선호합니다.
컨트롤 왼쪽의 컨트롤 위에 있는 왼쪽 맞춤 레이블이 가장 일반적인 스타일이므로 기본 설정을 지정해야 합니다.

Balance

창 또는 페이지는 콘텐츠가 표면에 균등하게 분산된 것처럼 보일 때 균형을 유지합니다. 표면이 시각적으로 동일한 가중치를 갖는 경우 균형 잡힌 레이아웃은 한쪽으로 넘어가지 않습니다.

가장 일반적인 균형 문제는 창 또는 페이지의 왼쪽에 콘텐츠가 너무 많다는 것입니다. 다음과 같은 방법으로 균형을 만들 수 있습니다.

오른쪽보다 왼쪽에 더 큰 여백을 사용합니다.
오른쪽에 작업을 완료하는 데 사용되는 UI 요소를 배치합니다.
작업 전체에서 사용되는 UI 요소를 가운데에 배치합니다.
크기 조정 가능 또는 여러 줄 컨트롤의 길이를 조정합니다.
중앙 맞춤을 전략적으로 사용합니다.

왼쪽의 프린터 스크린샷과 오른쪽의 텍스트

균형이 잘 조정된 이 마법사 페이지 레이아웃은 균형을 개선하기 위해 오른쪽보다 왼쪽 여백이 더 큽니다.

이러한 기술이 균형을 이루지 못하는 경우 콘텐츠와 더 잘 일치하도록 창 또는 페이지의 너비를 줄이는 것이 좋습니다.

크기 조정 가능한 표면의 경우 균형을 맞추기 위해 콘텐츠를 가운데에 두지 마세요. 대신 고정된 왼쪽 위 원원을 유지하고, 최대 노출 영역을 정의하고, 사용된 공간 내에서 콘텐츠의 균형을 조정합니다.

표

그리드는 보이지 않는 기본 맞춤 시스템입니다. 그리드는 대칭적일 수 있지만 비대칭 그리드도 작동합니다. 단일 창 또는 페이지에서 사용하는 경우 그리드는 표면 내에서 콘텐츠를 구성하는 데 도움이 됩니다. 다시 사용하면 그리드가 표면 전체에서 일관된 레이아웃을 만듭니다.

눈금선의 수는 시각적 복잡성 인식에 영향을 줍니다. 눈금선이 적은 레이아웃은 눈금선이 더 많은 레이아웃보다 단순하게 표시됩니다.

시각적으로 복잡한:

복잡한 대화 상자의 스크린샷

시각적으로 간단한 작업:

구성된 대화 상자의 스크린샷

불필요한 눈금선은 시각적 복잡성을 만듭니다.

다음과 같은 경우 레이아웃이 그리드를 효과적으로 사용하고 있다는 것을 알고 있습니다.

콘텐츠나 함수가 비슷한 Windows 또는 페이지에는 비슷한 레이아웃이 있습니다.
반복되는 디자인 요소는 창과 페이지에서 비슷한 위치에 표시됩니다.
불필요한 세로 및 가로 맞춤 눈금선이 없습니다.

시각적 단순성

시각적 단순성은 레이아웃이 필요 이상으로 복잡하지 않다는 인식입니다.

다음과 같은 경우 레이아웃이 시각적으로 단순함을 알 수 있습니다.

불필요한 창 크롬 계층을 제거합니다.
쉽게 식별할 수 있는 최대 7개의 그룹을 사용하여 콘텐츠를 표시합니다.
그룹 상자 대신 레이아웃 및 구분 기호와 같은 간단한 그룹화 를 사용합니다.
보조 명령에 대한 명령 단추 대신 링크와 같은 간단한 컨트롤과 선택 항목에 대한 목록 대신 드롭다운 목록을 사용합니다.
세로 및 가로 맞춤 눈금선 수를 줄입니다.
예를 들어 표면에 하나 또는 두 개의 명령 단추 너비만 사용하여 컨트롤 크기 수를 줄입니다.
점진적 공개를 사용하여 필요할 때까지 UI 요소를 숨깁니다.
창이나 페이지가 비좁은 느낌이 들지 않도록 충분한 공간을 사용합니다.
불필요한 스크롤을 제거하기 위해 창과 컨트롤의 크기를 적절하게 조정합니다.
크기 및 텍스트 색이 적은 단일 글꼴을 사용합니다.

일반적으로 레이아웃 요소를 UI의 효과에 해를 끼치지 않고 제거할 수 있는 경우는 다음과 같습니다.

지침

화면 해상도 및 dpi

800x600 픽셀의 최소 Windows 유효 해상도를 지원합니다. 안전 모드에서 작동해야 하는 중요한 UI의 경우 640x480 픽셀의 효과적인 해상도를 지원합니다. 작업 표시줄에 표시된 창에 대해 48개의 세로 상대 픽셀 을 예약하여 작업 표시줄에서 사용하는 공간을 고려해야 합니다.
1024x768 픽셀의 효과적인 해상도를 위해 크기 조정 가능한 창 레이아웃을 최적화합니다. 여전히 작동하는 방식으로 낮은 화면 해상도를 위해 이러한 창의 크기를 자동으로 조정합니다.
96dpi(800x600 픽셀), 120dpi(1024x768픽셀), 144dpi(1200x900픽셀) 모드에서 창을 테스트해야 합니다. 컨트롤, 텍스트 및 창의 클리핑, 아이콘 및 비트맵 확장과 같은 레이아웃 문제를 확인합니다.
터치 및 모바일 사용 시나리오가 있는 프로그램의 경우 120dpi에 최적화합니다. 높은 dpi 화면은 현재 터치 및 모바일 PC에서 널리 사용됩니다.

창 크기

콘텐츠에 적합한 기본 창 크기를 선택합니다. 공간을 효과적으로 사용할 수 있는 경우 더 큰 초기 창 크기를 사용하는 것을 두려워하지 마세요.
균형 잡힌 높이와 너비 가로 세로 비율을 사용합니다. 메시지 대화 상자(예: 오류 및 경고)에 가로 세로 비율 1:3을 사용할 수 있지만 3:5에서 5:3 사이의 가로 세로 비율이 선호됩니다.
스크롤 막대 및 잘린 데이터를 방지하려면 실용적일 때마다 크기 조정 가능한 창을 사용합니다. 동적 콘텐츠, 문서, 이미지, 목록 및 트리가 있는 Windows는 크기 조정 가능한 창에서 가장 큰 이점을 누릴 수 있습니다.
텍스트 문서의 경우 텍스트를 쉽게 읽을 수 있도록 최대 줄 길이 80자를 고려 합니다. 문자에는 문자, 문장 부호 및 공백이 포함됩니다.
고정 크기 창:
- 고정 크기 창은 작업 영역에 맞게 완전히 표시되고 크기가 조정되어야 합니다.
크기 조정 가능한 창:
- 크기 조정 가능한 창은 더 높은 해상도에 최적화될 수 있지만 디스플레이 시간에 필요에 따라 실제 화면 해상도까지 크기가 축소됩니다.
- 점진적으로 더 큰 창 크기는 점진적으로 더 많은 정보를 표시해야 합니다. 하나 이상의 창 부분 또는 컨트롤에 크기 조정 가능한 콘텐츠가 있는지 확인합니다.
- 창 크기가 조정될 때 콘텐츠의 왼쪽 위 원본을 고정된 상태로 유지합니다. 창 크기가 변경됨에 따라 콘텐츠의 균형을 맞추기 위해 원본을 이동하지 마세요.
- 콘텐츠가 너무 넓어질 수 있는 경우 최대 콘텐츠 크기를 설정합니다. 콘텐츠가 다루기 어려워지면 최대 너비를 초과하여 콘텐츠 영역의 크기를 조정하거나 창의 크기가 커지면 콘텐츠의 원본을 변경하지 마세요. 대신 최대 너비와 고정된 왼쪽 위 원점 을 유지합니다.
- 콘텐츠가 더 이상 사용할 수 없는 아래 크기가 있는 경우 최소 창 크기를 설정합니다. 크기 조정 가능한 컨트롤의 경우 크기 조정 가능한 최소 요소 크기를 목록 보기의 최소 기능 열 너비와 같은 가장 작은 기능 크기로 설정합니다. 선택적 UI 요소는 완전히 제거해야 합니다.
- 콘텐츠를 더 작은 크기로 사용할 수 있도록 프레젠테이션을 변경하는 것이 좋습니다.
  
  이 예제에서는 창이 표준 형식에 비해 너무 작아지면 Windows 미디어 플레이어 형식을 변경합니다.

컨트롤 크기

모든 대화형 컨트롤을 상대 16x16 픽셀 이상으로 만듭니다. 이렇게 하면 Windows Tablet 및 Touch Technology 포함한 모든 입력 디바이스에서 잘 작동합니다.
데이터가 잘리지 않도록 컨트롤 크기를 조정합니다. 작업을 수행하기 위해 읽어야 하는 데이터를 자르지 마세요. 데이터가 잘리지 않도록 목록 보기 열의 크기를 지정합니다.
불필요한 스크롤을 제거하도록 컨트롤 크기를 조정합니다. 이렇게 하면 스크롤 막대가 제거되는 경우 컨트롤을 약간 크게 만듭니다. 세로 스크롤 막대가 거의 없고 불필요한 가로 스크롤 막대가 없어야 합니다.

이 예제에서는 드롭다운 목록의 크기를 조정하여 스크롤 막대를 제거합니다.
표면의 컨트롤 크기 수를 줄입니다. 표준 권장 컨트롤 크기를 사용하는 것을 선호하며 필요한 경우 일관되게 크기가 더 크거나 작은 몇 가지 컨트롤을 사용합니다. 목록 상자 및 트리 뷰에 단일 너비를 사용하고 명령 단추 및 드롭다운 목록에는 너비가 3개 이하입니다. 그러나 텍스트 상자 및 콤보 상자 너비는 가장 길거나 예상되는 입력의 길이를 제안해야 합니다.

이 예제에서는 하나의 목록 상자와 명령 단추 크기가 일관되게 사용됩니다.
텍스트에 따라 크기가 조정되는 컨트롤의 경우 지역화될 텍스트에 대해 30%(짧은 텍스트의 경우 최대 200%)를 추가로 포함합니다. 이 지침에서는 레이아웃이 영어 텍스트를 사용하여 디자인된 것으로 가정합니다. 또한 이 지침은 숫자가 아닌 지역화된 텍스트를 나타냅니다.
정적 텍스트 컨트롤, 검사 상자 및 라디오 단추를 레이아웃에 맞는 최대 너비로 확장합니다. 이렇게 하면 가변 길이 텍스트 및 지역화에서 잘림을 방지할 수 있습니다.

잘못된 예:

이 예제에서는 컨트롤 텍스트가 불필요하게 잘립니다.

컨트롤 간격

컨트롤이 닿지 않는 경우 사이에 최소 3개의 D RU(5개의 상대 픽셀)가 있습니다. 그렇지 않으면 사용자가 컨트롤 간의 비활성 공간을 클릭할 수 있습니다. 비활성 공간을 클릭하면 결과나 시각적 피드백이 없으므로 사용자는 무엇이 잘못되었는지 잘 모르는 경우가 많습니다.

배치

표면 내의 UI 요소를 왼쪽에서 오른쪽, 위쪽에서 아래쪽 순서(서양 문화권)로 자연스럽게 흐를 수 있도록 정렬합니다. UI 요소의 배치는 관계를 전달하며 작업을 수행하는 단계를 미러 합니다.
작업을 시작하는 UI 요소를 왼쪽 위 모서리 또는 가운데 위에 배치합니다. 사용자가 먼저 가장 큰 시각적 강조를 확인해야 하는 UI 요소를 제공합니다.
작업을 완료하는 UI 요소를 오른쪽 아래 모서리에 배치합니다.
관련 UI 요소를 함께 배치하고 관련 없는 요소를 구분합니다.
필요한 단계를 기본 흐름에 배치합니다.
적절한 배경 또는 점진적 공개를 사용하여 강조하지 않을 수 있는 선택적 단계를 기본 흐름 외부에 배치합니다.
자주 사용되는 요소를 자주 사용하지 않는 요소 앞에 검색 경로에 배치합니다.

포커스

사용자가 먼저 포커스가 되기 위해 확인해야 하는 단일 UI 요소를 선택합니다. 초점은 사용자가 신속하게 찾고 이해해야 하는 중요한 요소여야 합니다.
포커스를 왼쪽 위 모서리 또는 가운데 위에 놓습니다.
눈에 띄는 텍스트, 기본 선택 영역 또는 초기 입력 포커스와 같은 가장 큰 시각적 강조를 초점에 지정합니다.

맞춤

일반적으로 왼쪽 맞춤을 사용합니다.
숫자 데이터, 특히 숫자 데이터의 열에 오른쪽 맞춤을 사용합니다.
커밋 단추에 오른쪽 맞춤을 사용하고 오른쪽 창 가장자리에 정렬된 컨트롤을 사용합니다.
왼쪽 또는 오른쪽 맞춤이 부적절하거나 불균형으로 표시되는 경우 가운데 맞춤을 사용합니다.
컨트롤을 텍스트와 세로로 정렬할 때 텍스트 기준을 정렬하여 부드러운 가로 읽기 흐름을 제공합니다.
레이블 맞춤의 경우 디자인 개념의 레이블 맞춤 섹션을 참조하세요.

액세스 가능성

UI에 대한 중요한 정보를 전달하는 유일한 수단으로 레이아웃을 사용하지 마세요. 시각 장애가 있는 사용자는 이 프레젠테이션을 해석하지 못할 수 있습니다. 예를 들어 컨트롤 레이블이 해당 관계를 다른 항목과 통신하는지 확인합니다.
컨트롤 레이블 내에 하위 컨트롤을 포함하여 문장이나 구를 만들지 마세요. 이러한 연결은 레이아웃을 기반으로 하며 키보드 탐색 또는 접근성 보조 기술에서 잘 처리되지 않습니다. 또한 문장 구조는 언어에 따라 다르기 때문에 이 기술을 지역화할 수 없습니다.

잘못된 예:

이 예제에서는 텍스트 상자가 검사 상자 레이블 내에 잘못 배치됩니다.

올바름:

여기서 텍스트 상자는 검사 상자 레이블 다음에 배치됩니다.
그룹화에 액세스할 수 있도록 합니다. 창 창, 그룹 상자, 구분 기호, 텍스트 레이블 및 집계로 정의된 그룹은 접근성 보조를 통해 자동으로 처리됩니다. 그러나 배치 및 배경에 의해서만 정의된 그룹은 그렇지 않으며 접근성을 위해 프로그래밍 방식으로 정의되어야 합니다.

자세한 지침은 접근성을 참조 하세요.

권장 크기 조정 및 간격

컨트롤 크기 조정

다음 표에서는 일반적인 UI 요소(9pt의 경우 96dpi의 Segoe UI)에 권장되는 크기(너비 x 높이 또는 단일 숫자인 경우 높이)를 나열합니다. 영어에서 가장 긴 항목을 기반으로 하는 너비는 지역화할 텍스트(숫자가 아님)에 대해 지역화에 30%(짧은 텍스트의 경우 최대 200%)를 추가합니다.

컨트롤	대화 상자 단위	상대 픽셀
확인란	10	17
콤보 상자	가장 긴 항목의 너비 + 30% x 14	가장 긴 항목의 너비 + 30% x 23
명령 단추	50 x 14	75 x 23
명령 링크	25(한 줄) 또는 35개(2줄)	41(한 줄) 또는 58(2줄)
드롭다운 목록	유효한 가장 긴 데이터의 너비 + 30% x 14	가장 긴 항목의 너비 + 30% x 23
목록 상자	가장 긴 항목의 너비 + 30% x 정수 항목 수(최소 3개 항목)
목록 보기	잘린 데이터를 방지하는 열 너비 x 정수 항목 수
진행률 표시줄	107 또는 237 x 8	160 또는 355 x 15
라디오 단추	10	17
슬라이더	15	24
텍스트(정적)	8	13
입력란	최장 또는 예상 입력 너비 + 30% x 14(한 줄) + 각 추가 줄에 대해 10	유효한 가장 긴 데이터의 너비 + 30% x 23개의 상대 픽셀(한 줄) + 각 추가 줄에 대해 16
트리 보기	가장 긴 항목의 너비 + 30% x 정수 항목 수(최소 5개 항목)

간격

다음 표에서는 일반적인 UI 요소 간의 권장 간격을 나열합니다(9pt의 경우 96dpi의 Segoe UI).

요소	대화 상자 단위	상대 픽셀
대화 상자 여백	모든 면에 7	모든 면에 11
텍스트 레이블과 관련 컨트롤 사이(예: 텍스트 상자 및 목록 상자)	3	5
관련 컨트롤 간	4	7
관련 없는 컨트롤 간	7	11
그룹 상자의 첫 번째 컨트롤	11 그룹 상자의 위쪽에서 아래로; 그룹 상자 제목에 세로로 맞춤	16 그룹 상자의 위쪽에서 아래로; 그룹 상자 제목에 세로로 맞춤
그룹 상자의 컨트롤 간	4	7
가로 또는 세로로 정렬된 단추 사이	4	7
그룹 상자의 마지막 컨트롤	그룹 상자의 아래쪽 위에 있는 7	그룹 상자의 아래쪽 위에 있는 11
그룹 상자의 왼쪽 가장자리에서	6	9
컨트롤 옆의 텍스트 레이블	컨트롤 맨 위에서 아래로 3	컨트롤 맨 위에서 아래로 5
텍스트 단락 사이	7	11
대화형 컨트롤 간의 최소 공간	공백 3개 또는 없음	공백 5개 또는 없음
비대화형 컨트롤과 다른 컨트롤 사이의 가장 작은 공간	2	3