대부분의 Visual Studio 대화 상자는 표준 Windows 데스크톱 대화 상자 레이아웃 원칙을 따르는 설명 없는 대화 상자인 유틸리티 대화 상자 레이아웃입니다. Visual Studio가 UI를 새로 고치는 과정에서 보다 눈에 띄는 일부 대화 상자에는 제품을 정의하는 환경의 새로운 디자인이 적용되었습니다. 이러한 테마가 지정된 대화 상자 레이아웃에는 테마 모양이 있습니다.
유틸리티 대화 상자 레이아웃
유틸리티 대화 상자 내의 모든 컨트롤은 위쪽/왼쪽에서 시작하여 아래쪽으로 흐릅니다.
대화 상자에서 컨트롤을 가운데에 배치하여 넓은 영역을 채우지 않습니다.
모든 대화 상자 텍스트에 환경 글꼴을 사용합니다. 시각적 사양을 작성할 때 특정 글꼴 및 크기를 선택하는 대신 환경 글꼴을 지정합니다. 환경 글꼴을 참조하세요.
일관된 컨트롤 간격 및 배치를 사용하여 까다로운 품질 목표를 지원합니다.
대화 상자는 컨트롤 수 증가, 컨트롤 병치 또는 둘 다로 인해 더 복잡해질 수 있습니다. 이러한 복잡한 상황에서 컨트롤 그룹화 간에 적절한 공간을 허용하여 사용자에게 구문 분석할 논리적 흐름을 제공합니다.
유틸리티 대화 상자 레이아웃 예제
모든 차원은 픽셀로 표현됩니다.
그림 08.01-a: 컨트롤 위에 레이블이 있는 유틸리티 대화 상자에 대한 간격 지침
그림 08.01-b: 컨트롤 왼쪽에 레이블이 있는 유틸리티 대화 상자에 대한 간격 지침
레이아웃 세부 정보
여백
모든 대화 상자에는 모든 가장자리 주위에 12픽셀 테두리가 있어야 합니다.
그룹 프레임 내의 여백은 프레임 가장자리에서 9픽셀이어야 합니다.
탭 컨트롤 내의 여백은 탭 컨트롤 가장자리에서 6픽셀이어야 합니다.
명령 단추
명령 단추는 콘텐츠가 아닌 대화 상자 프레임에서 작동합니다. 이 단추는 오른쪽 아래에 배치해야 하며 단추가 구분되도록 위에 충분한 가변 공간이 있어야 합니다.
대화 상자 내에서 작동하는 가로 단추가 있는 경우 대체 명령 단추 구성은 오른쪽 위에 있는 세로 스택입니다. 아래의 내부 명령 단추를 참조하세요.
명령 단추 왼쪽의 공간(대화 상자의 왼쪽 아래/가운데)은 대화 상자 작업 컨트롤의 "밴드"의 일부로 간주됩니다. 이 공간은 전체 작업 또는 대화 상자와 관련된 도움말 링크만 침입할 수 있습니다.
명령 단추는 75x23픽셀이어야 합니다.
명령 단추는 6픽셀 떨어져 있어야 합니다.
그림 08.01-c: 기본 단추 맞춤
레이블
모든 레이블을 왼쪽에 맞춥니다.
컨트롤 위에 있는 레이블의 경우 컨트롤 아래에 있는 컨트롤과 정확하게 왼쪽 맞춤해야 하며 레이블의 아래쪽은 다른 컨트롤(예: 콤보 상자)의 위쪽에서 5픽셀 위에 있어야 합니다.
컨트롤 왼쪽에 있는 레이블의 경우 레이블과 입력 컨트롤 사이의 최소 너비는 10픽셀입니다. 텍스트 상자, 콤보 상자 또는 기타 컨트롤을 정렬하기 위해 암시된 두 번째 열을 설정해야 합니다.
레이블은 문장 대/소문자를 사용하며 뒤에 콜론이 옵니다. 텍스트 스타일을 참조하세요.
컨트롤 사이 거리
컨트롤을 합리적으로 배치합니다. 배치된 컨트롤 사이의 간격에 대한 엄격한 지침은 없습니다. 컨트롤 간의 근접도는 대화 상자마다 약간 다를 수 있습니다. 권장되는 간격은 세로 컨트롤/레이블 쌍의 경우 20픽셀, 가로 컨트롤/레이블 쌍의 경우 9픽셀입니다. 가로 쌍의 최소 컨트롤 간격은 6픽셀입니다.
그림 08.01-d: 컨트롤 사이 거리에 대한 권장 사항
컨트롤 들여쓰기
컨트롤이 중첩된 경우 내부 컨트롤을 위 컨트롤의 왼쪽 가장자리(일반적으로 레이블)와 가로로 맞춥니다.
그림 08.01-e: 중첩된 컨트롤 맞춤
컨트롤 너비
텍스트 상자 또는 기타 유사한 컨트롤의 너비는 필드의 평균 입력보다 길지 않아야 합니다. 영어 단어는 평균 5자입니다. 예를 들어 긴 경로 이름이 필요한 텍스트 상자는 가로 레이아웃에서 허용하는 길이여야 하며 플랫폼 이름 드롭다운은 가장 긴 항목을 허용하는 길이만 사용해야 합니다.
도우미 텍스트
대화 상자는 그 목적에 대한 자세한 정보를 제공하는 도우미 텍스트를 표시할 수 있습니다. 이 텍스트는 일반적으로 맨 위에 있으며 1~2개의 문장이 될 수 있습니다.
줄 길이는 사용자가 읽고 이해할 수 있는 편안한 너비여야 합니다. 중간 대화 상자는 너비가 550픽셀을 넘지 않아야 합니다.
내부 명령 단추
더 복잡한 대화 상자에서 내부 컨트롤에는 대화 상자의 커밋 단추가 있는 위치에 영향을 줄 수 있는 관련 단추가 있을 수 있습니다.
확인/취소가 오른쪽 아래 모서리에서 가로 방향으로 배치된 경우 내부 단추의 세로 맞춤(열)을 사용합니다.
확인/취소가 오른쪽 위 모서리에서 세로 방향으로 배치된 경우 내부 단추의 가로 맞춤(행)을 사용합니다. 이 상황은 덜 일반적입니다.
내부 단추 크기는 75x23픽셀의 표준 단추 크기를 목표로 하되 가능한 경우 확인/취소 단추의 크기와 일치해야 합니다. 단추 레이블로 인해 단추가 표준 단추 크기를 초과하는 경우 해당 집합의 다른 단추는 더 넓은 크기에 맞춰야 합니다.
Figure 08.01-f: 가로 확인/취소가 있는 세로 내부 단추
Figure 08.01-g: 세로 확인/취소가 있는 가로 내부 단추
[찾아보기...] 단추
텍스트 상자 뒤에 있는 [찾아보기...] 단추에는 "찾아보기..."가 줄임표를 포함하여 전체 철자가 표시되어야 합니다. 공간이 좁거나 화면에 [찾아보기...] 단추가 여러 개 있는 경우 단추를 줄임표로만 줄일 수 있습니다.
테마 대화 상자 레이아웃
Visual Studio의 테마가 지정된 대화 상자는 더 밝게 표시되며 더 많은 공백을 제공합니다. 입력 체계는 더 많은 오픈 라인 간격과 다양한 글꼴 크기 및 가중치를 제공하여 강조와 관심을 강화합니다. 가능한 경우 크롬과 제목 표시줄을 줄이거나 제거했습니다. 이러한 대화 상자의 레이아웃은 다음 기본 패턴을 따라야 합니다.
대화 상자의 배경은 흰색입니다.
중간 회색의 1픽셀 규칙 테두리가 있습니다.
대화 상자 제목은 더 이상 제목 표시줄에 있지 않지만 더 큰 포인트 크기로 시각적 관심과 강조를 제공합니다. (텍스트 스타일 글꼴 크기 섹션을 참조하세요.)
설명과 같은 추가 텍스트와 결합된 레이블은 환경 글꼴 + 굵게여야 합니다.
내부 열은 연한 회색의 1픽셀 규칙으로 구분됩니다.
기본 링크에는 밑줄이 없습니다. 마우스로 가리키고 누른 상태에는 색 변경 및 밑줄이 있습니다.
커밋 단추(예: 확인/취소)는 오른쪽 아래 모서리에 있습니다.
테마가 적용된 대화 상자 레이아웃 예제
그림 08.01-h: 테마가 적용된 대화 상자
그림 08.01-i: 테마가 적용된 대화 상자 - 크기
그림 08.01-j: 테마가 적용된 대화 상자 - 글꼴
그림 08.01-k: 테마가 적용된 대화 상자 - 색