명령 패턴

앱 캔버스, 팝업, 대화 상자, 바 등을 포함하여 스토어 앱의 여러 화면에 명령과 컨트롤을 배치할 수 있습니다. 올바른 시간에 올바른 화면을 선택하는지에 따라 사용하기 쉬운 앱이 되거나 까다로운 앱이 될 수 있습니다.

스토어 앱에서 명령은 사용자가 작업을 수행하는 데 사용할 수 있는 대화형 UI 요소입니다. 탐색 요소는 사용자를 다른 페이지로 이동하는 반면 명령은 사용자가 현재 페이지에서 작업을 수행할 수 있게 한다는 점에서 명령은 탐색 요소와 다릅니다. 탐색 요소는 앱을 사용할 수 있게 합니다. 명령은 앱을 유용하게 합니다.

앱의 다양한 명령 화면에 대한 자세한 내용은 UI 레이아웃을 참조하세요.

명령 유형

필터

필터 명령은 일부 기준에 따라 데이터 집합 내에서 콘텐츠를 제거하거나 숨깁니다. 예를 들어 사용자가 "어드벤처"로 분류된 Windows 스토어의 게임만 표시하도록 선택할 수 있습니다.

 

 

피벗

피벗 명령은 데이터 집합 내에서 콘텐츠를 재구성하고 피벗에 따라 다양한 데이터 뷰를 제공합니다. 예를 들어 앨범, 아티스트, 음악을 기준으로 음악을 구성하도록 선택할 수 있습니다.

 

 

정렬

정렬 명령은 데이터 집합 내에서 콘텐츠가 표시되는 순서를 변경합니다. 예를 들어 여행 앱에서 인기도순으로 목적지를 정렬하도록 선택할 수 있습니다.

 

 

보기

보기 명령은 콘텐츠가 표시되는 스타일 또는 방법을 변경합니다. 예를 들어 호텔을 찾는 앱에서 목록 대신 지도에 호텔을 표시하도록 선택할 수 있습니다.

 

 

힌트

사용자에게 도움이 되는 경우 캔버스에 힌트 명령을 배치할 수 있습니다. 예를 들어 Windows 8.1의 메일 앱에는 추가 옵션에 대한 힌트를 제공하는 "ellipses" 명령이 있습니다. 명령을 클릭하면 앱 바를 표시하는 기존의 Windows 메서드 외에도 앱의 앱 바가 표시됩니다.

 

 

앱 스타일에 맞게 이러한 힌트를 디자인할 수 있습니다. 이 뉴스 앱은 동일한 앱 바 힌트와 메뉴 선택 페이지를 표시하는 메뉴 아이콘이 포함된 플래그를 사용합니다.

 

 

기타

사용자가 현재 보기 내에서 작업을 수행할 수 있게 하는 모든 대화형 UI 요소는 명령입니다. 예를 들면 다음과 같습니다.

 

 

명령 배치

캔버스

명령(또는 명령 메뉴)이 중요하고 사용자가 핵심 시나리오를 완료하는 데 지속적으로 필요한 경우 캔버스에 배치합니다. 예를 들어 Windows 8.1의 메일 앱에서 응답, 새로 만들기, 삭제 등의 핵심 명령은 메일 선택 시 캔버스에 나타납니다.

 

 

아래쪽 앱 바

명령이 캔버스를 복잡하게 만들고 사용자의 앱 콘텐츠 사용에 영향을 주지 않도록 하려는 경우도 있습니다. 아래쪽 앱 바를 사용하여 필요 시 사용자에게 명령을 표시할 수 있습니다. 아래쪽 앱 바에는 사용자 컨텍스트(일반적으로 현재 페이지 또는 현재 선택)와 관련된 명령이 표시됩니다.

아래쪽 앱 바는 단일 선택 및 다중 선택 명령에 모두 효과적입니다. 사용자가 개체를 선택할 때 앱 바가 표시되도록 앱을 프로그래밍할 수 있습니다.

 

 

명령 배치 지침

앱 바에 명령을 배치하는 방법을 다양하게 변경할 수 있지만 다음을 고려해야 합니다.

• 예측성 최대한 앱의 모든 보기에서 일관된 조작 및 명령 배치를 사용합니다.
• 인간 공학 특정 명령의 배치로 속도를 향상시킬 수 있는 정도 또는 명령을 얼마나 쉽게 작동할 수 있는지를 고려합니다.
• 미학 명령 수를 제한하여 앱 바가 복잡해 보이지 않도록 합니다. 쉽게 파악하거나 예측할 수 있는 아이콘을 선택합니다. 텍스트 레이블을 짧게 유지합니다.

다음과 같은 명령 배치 지침을 따르는 것이 좋습니다.

앱 바의 오른쪽에 영구적 또는 기본 명령을 배치합니다. 명령이 몇 개만 있는 경우 앱 바의 오른쪽에만 명령이 배치될 수 있습니다. 이 예의 찾아보기 명령에서는 보기 명령 집합과 필터/정렬 집합이 영구적입니다.

 

가장자리를 사용합니다. 명령이 많을 경우 왼쪽이나 오른쪽에 있는 고유한 명령 집합을 구분하여 앱 바의 균형을 맞추고 보다 인간 공학적으로 명령에 액세스할 수 있도록 합니다. 이 예제에서는 보기 명령 집합을 왼쪽으로 이동하고 필터/정렬 집합을 오른쪽에 유지하기로 결정했습니다. 맵 보기가 활성화되어 있는 경우 맵 보기 명령이 보기 명령 집합의 오른쪽에 나타납니다.

 

사용할 수 없는 명령을 표시하거나 숨깁니다. 특정 상황과 관련이 없는 명령이 있습니다. 이러한 명령이 표시되는 경우 영구적 명령의 순서 지정에 방해가 되면 안 됩니다. 이 예제에서는 맵 보기가 활성화되어 있으므로 맵 보기 명령이 보기 명령 집합의 오른쪽에 나타납니다.

 

선택 명령을 삽입합니다. 사용자가 선택하여 나타나는 명령은 맨 왼쪽으로 이동하여 왼쪽에 있던 명령을 밀어냅니다. 이렇게 하면 선택 명령이 더 눈에 띄고 더 쉽게 액세스하도록 할 수 있습니다. 이 예제에서는 보기 명령 집합을 오른쪽으로 밀어 선택 명령 집합을 위한 공간을 만듭니다.

 

일반적인 명령 배치

일부 명령은 일반적이어서 많은 앱에 나타납니다. 일관성을 만들어 서서히 신뢰할 수 있도록 하려면 앱 바에서 명령을 배치할 위치를 결정할 때 다음 지침을 따르는 것이 좋습니다.

선택 명령은 선택 시 나타나는 상황별 명령인지, 선택에 영향을 주는 명령인지에 관계없이 맨 왼쪽에 배치합니다. 이 예에서는 사용자가 선택하기 전에 "모두 선택" 명령이 왼쪽에 나타납니다. 사용자가 선택을 한 후에는 다른 선택 명령이 왼쪽에 나타납니다.

 

새 항목 명령을 앱 바의 오른쪽 가장자리에 배치합니다. 새 항목 명령은 추가, 만들기, 작성 또는 새 엔터티를 만드는 모든 명령일 수 있습니다. 엄지 손가락으로 새 항목 명령에 쉽게 액세스할 수 있어야 합니다. 이 예에서는 "새 검토" 명령을 사용하여 사용자가 새 음식점 검토를 만듭니다. "새 검토"와 관련된 다른 명령은 해당 명령의 왼쪽에 배치됩니다. + 문자 모양은 "새로 만들기" 명령을 나타낼 때만 사용해야 하며 앱 바의 다른 위치에는 나타나서는 안 됩니다.

 

새 항목 명령의 왼쪽에 삭제 명령을 배치합니다. 삭제/새로 만들기는 앱에서 메일 또는 카메라 앱 같은 특정 응용 프로그램 외부에서 유지될 수 있는 개별 엔터티를 관리하려는 경우에 사용합니다. 삭제/새로 만들기는 항상 이 순서로 나타나야 합니다.

 

추가 명령의 왼쪽에 제거 명령을 배치합니다. 제거/추가는 앱에서 할일 모음, 날씨 앱의 도시 목록 또는 책갈피로 지정된 음식점 목록과 같은 목록을 관리하려는 경우에 사용합니다. 제거/추가는 항상 이 순서로 나타나야 합니다.

 

새 항목 명령의 왼쪽에 지우기 명령을 배치합니다. 지우기는 가능한 모든 항목에 대해 제거 작업을 수행하려는 경우에 사용합니다. "선택 영역 지우기"와 같이 명령이 수행할 작업에 대해 명시적으로 나타내려면 명령 레이블을 사용합니다.

 

아래쪽 앱 바의 명령 배치 예를 보려면 Windows 스토어 앱 갤러리를 참조하세요.

명령을 메뉴로 그룹화

여러 명령을 명령 메뉴로 그룹화하는 것이 효율적인 경우도 있습니다. 메뉴를 사용하면 더 적은 공간으로 더 많은 옵션을 제공할 수 있습니다. 메뉴에는 대화형 컨트롤이 포함될 수 있습니다.

이 예제에서 정렬 명령은 사용자가 정렬 옵션을 쉽게 선택할 수 있는 간단한 메뉴를 표시합니다. 필터 명령은 사용자가 더 복잡한 조건으로 항목을 필터링할 수 있는 메뉴에 컨트롤 집합을 표시합니다.

 

상황에 맞는 메뉴

상황에 맞는 메뉴에는 잘라내기, 복사 및 붙여넣기 같은 클립보드 작업이 포함되는 경우가 많습니다. 상황에 맞는 메뉴에 웹 페이지의 이미지 같이 선택할 수 없는 콘텐츠에 적용되는 명령이 포함될 수도 있습니다. 텍스트 및 하이퍼링크의 기본 상황에 맞는 메뉴가 앱에 제공됩니다. 텍스트의 기본 상황에 맞는 메뉴는 클립보드 명령을 표시합니다. 하이퍼링크의 경우 기본 메뉴에 링크를 복사하고 여는 명령이 표시됩니다.

사용자는 터치 장치에서 콘텐츠를 길게 누르거나 콘텐츠를 마우스 오른쪽 단추로 클릭하여 상황에 맞는 메뉴를 호출합니다.

 

 

참고  

참 메뉴 활용

Windows 스토어 앱을 디자인할 때 참 메뉴에는 4개의 유용한 명령(검색, 공유, 장치 및 설정)이 표시됩니다. 사용자는 화면의 오른쪽 가장자리에서 살짝 밀거나 화면 오른쪽 위 또는 아래를 마우스 커서로 가리켜서 참 메뉴를 호출합니다.

 

 

검색: 사용자가 다른 앱을 비롯하여 시스템의 어디에서든지 빠르게 앱 콘텐츠를 검색할 수 있도록 합니다.
공유: 사용자가 앱 콘텐츠를 다른 사용자 또는 앱과 공유하고 공유 콘텐츠를 받을 수 있도록 합니다.
시작: 이 참 메뉴를 선택하면 시작 화면으로 이동합니다. 앱은 이 참 메뉴와 상호 작용하지 않습니다. 동작이 자동으로 수행되며 항상 같습니다.
장치: 사용자가 앱에서 홈 네트워크의 다른 장치로 스트리밍되는 오디오, 동영상 또는 이미지를 즐길 수 있도록 합니다.
설정: 모든 설정을 단일 루프 아래에 통합하고 사용자가 이미 익숙한 일반 메커니즘을 통해 앱을 구성할 수 있도록 합니다.

 

앱 캔버스 또는 앱 바에서 중복 앱 계약 기능을 방지합니다.

관련 항목

앱 바에 대한 지침

상황에 맞는 메뉴에 대한 지침

클립보드 명령에 대한 지침

참 메뉴 및 계약