명령 모음에 대한 지침

명령 모음을 사용하면 작업에 쉽게 액세스할 수 있으며 사진 선택이나 그리기 모드와 같이 사용자의 상황에 맞는 명령이나 옵션을 표시할 수도 있습니다. 앱 페이지 또는 앱 섹션 간 탐색에도 사용할 수 있습니다. 명령 모음은 모든 탐색 패턴에서 사용할 수 있습니다.

아이콘이 있는 명령 모음의 예

명령 모음은 두 구성 요소 즉, 표시 상태를 유지하려는 명령 또는 탐색 항목을 배치하기 위한 작업 공간과 명령 모음에서 줄임표[•••]로 표시되는 "자세히" 영역으로 구성됩니다. "자세히" 영역을 선택하면 그다지 자주 액세스하지 않는 명령 및 탐색 항목에 대한 드롭다운 목록 보기 메뉴가 열립니다. [•••] 단추를 선택하면 메뉴가 열리고 작업 공간에 각 항목에 대한 텍스트 레이블이 표시됩니다. "자세히" 내에 항목이 없으면 항목에 대한 텍스트 레이블이 작업 공간에 계속 표시되더라도 드롭다운이 열리지 않습니다.

두 기본 영역이 호출된 상태의 명령 모음 예

명령 모음의 배치

명령 모음은 화면의 위쪽, 화면의 아래쪽, 화면의 위쪽과 아래쪽 둘 다에 배치하거나 인라인으로 배치할 수 있습니다.

앱 바를 화면의 위쪽, 아래쪽 또는 위쪽과 아래쪽에 배치하는 예

  • 모바일 장치의 경우 앱에 하나의 명령 모음만 배치할 경우 접근이 쉽도록 화면 맨 아래에 배치하세요. 앱의 맨 아래에 탭이 있는 경우 아래쪽에 UI 밀도가 너무 높아지지 않도록 명령 모음을 맨 위에 배치하는 것이 좋습니다.
  • 큰 화면에 대해 하나의 명령 모음만 배치할 경우 화면 맨 위에 배치하는 것이 좋습니다.
  • 상황별 작업에 사용할 수 있도록 명령 모음을 인라인으로 배치할 수도 있습니다.

단일 보기 화면(왼쪽 예) 및 여러 보기 화면(오른쪽 예)에서는 다음 화면 영역에 명령 모음을 배치할 수 있습니다. 인라인 명령 모음은 작업 공간 내 어디에나 배치할 수 있습니다.

앱 바를 배치할 수 있는 화면 영역의 예

작업의 배치

해당 표시 유형에 따라 명령 모음에 위치할 작업의 우선 순위를 지정합니다.

  • 작업 공간의 앞 슬롯에 가장 중요한 명령 즉, 명령 모음에 계속 표시하려는 명령을 배치합니다. 가장 작은 화면(320epx 너비)에서는 다른 화면의 UI에 따라 2 - 4 항목이 명령 모음 작업 공간에 적합합니다.
  • 덜 중요한 명령은 명령 모음 작업 공간의 뒤쪽 또는 "자세히" 영역의 처음 몇 슬롯 내에 배치합니다. 이러한 명령은 명령 모음이 화면상 충분한 실제 공간을 확보한 경우에는 표시되지만, 충분한 공간이 없는 경우에는 "자세히" 영역의 드롭다운 메뉴에 표시됩니다.
  • "자세히" 영역에는 가장 덜 중요한 명령을 배치합니다. 이러한 명령은 항상 드롭다운 메뉴에 표시됩니다.

작업 공간의 항목은 아이콘이나 단추로 시각화할 수 있습니다. 아이콘을 사용하는 경우에만 텍스트 레이블을 포함합니다. 텍스트 레이블은 [•••]를 선택하는 경우 아이콘 아래에 나타납니다.

여러 페이지에서 일관되게 표시되는 명령이 있는 경우 해당 명령을 일관된 위치에 유지하는 것이 가장 좋습니다. 수락, 예 및 확인 명령은 거부, 아니요, 취소 명령 왼쪽에 배치하는 것이 좋습니다. 일관성은 사용자에게 신뢰감을 주어 시스템을 둘러보도록 유도하며, 앱 탐색과 관련된 지식을 앱 간에 적용하는 데 도움이 됩니다.

명령 모음에 [•••]만 표시되도록 "자세히" 드롭다운 메뉴 내에 모든 작업을 배치할 수 있지만 모든 작업을 숨기면 사용자에게 혼동을 줄 수 있으므로 주의하세요.

명령 모음 플라이아웃 및 도구 설명

회신, 전체 회신 및 전달을 응답 메뉴에 배치하는 등 논리적 그룹을 명령에 사용합니다.

플라이아웃 및 메뉴 이미지

[•••]를 선택하지 않는 한 명령 모음 작업에 대한 텍스트 레이블이 숨겨져 있으므로 작업 아이콘에 대해 도구 설명을 사용하는 것을 고려하세요.

"자세히" 영역

설명이 있는 앱 바 구조 예제

  • "자세히" 기능[•••]은 메뉴의 보이는 진입점이며 도구 모음의 맨 오른쪽, 기본 작업 바로 옆에 표시됩니다.
  • 기본 작업 공간에서 각 작업은 아이콘으로 표시됩니다. 오버플로 메뉴를 선택하면 기본 작업 공간에서 각 작업에 대한 텍스트 레이블이 표시됩니다.
  • 오버플로 메뉴 공간은 덜 자주 사용되는 작업에 할당됩니다.
  • 작업은 중단점에서 기본 작업 공간과 오버플로 메뉴 간을 전환할 수 있습니다. 화면 또는 앱 창 크기와 관계없이 기본 작업 공간에 항상 유지할 작업을 지정할 수도 있습니다.
  • 더 큰 화면에서 앱 바가 확장되더라도 덜 자주 사용하는 작업은 오버플로 메뉴에 그대로 둘 수 있습니다.

반응형 지침

  • 앱 바에서 동일한 수의 작업이 세로 및 가로 방향으로 표시되어야 인지적 부하가 줄어듭니다. 사용 가능한 작업 수는 세로 방향의 장치 너비에 따라 결정되어 합니다.
  • 중단점을 대상으로 하여 화면 크기 또는 앱 창 크기의 변경에 따라 메뉴 안팎으로 작업을 이동할 수 있습니다.

관련 항목

명령 디자인 기본 사항

 

 

표시:
© 2015 Microsoft