스타일과 일관성의 균형 잡기

참고: 이 문서는 Windows 10 RS2에 대한 초기 초안입니다. 기능 이름, 용어 및 기능은 최종 항목이 아닙니다.

제품을 디자인할 때는 고객을 위한 옹호자입니다. 우리 모두는 우리의 의도에 적절하고 진실한 최고의 디자인을 만들기 위해 노력하고 있습니다. 이 문서에서는 일관된 사용자 환경을 만들기 위한 다음 규칙과 앱을 차별화하는 고유한 기능 및 환경을 만드는 규칙 간의 균형을 살펴봅니다.

일관성의 중요성

일관성이 중요한 이유는 무엇인가요? 일관성을 사용하면 앱을 더 쉽게 사용할 수 있습니다. 좋은 디자인의 핵심 부분은 학습성입니다. 앱 간에 일관된 디자인을 사용하면 최종 사용자가 앱 사용 방법을 "다시 학습"해야 하는 횟수가 줄어듭니다. 실제 예를 살펴보십시오: 가스 페달은 항상 오른쪽에, 문 노브는 항상 시계 반대 방향으로 회전하여 열고, 정지 기호는 항상 빨간색입니다.

그러나 앱을 일관되게 만드는 것은 모든 앱이 서로 동일하게 보이고 동작하도록 하는 것을 의미하지는 않습니다. 실제 사례로 돌아가면 거의 무한수의 의자 디자인이 있지만, 그 중 극소수의 의자 디자인은 앉는 방법을 다시 학습해야 합니다. 중요한 요소(앉는 표면)가 사용자가 이해할 수 있을 만큼 일관적이기 때문입니다.

좋은 앱 디자인을 만들 때의 과제 중 하나는 일관성을 유지하는 것이 중요한 위치와 고유해야 하는 위치를 이해하는 것입니다.

일관성 스펙트럼

일관성을 두 개의 반대쪽 끝이 있는 스펙트럼으로 생각하는 것이 좋습니다.

친숙한 환경 요소는 다음과 같습니다.

• 설정된 UI 패러다임(마우스 클릭 시 동작, 요소를 누르고 있기, 유사한 아이콘)
• 제품에 적용하려는 브랜드의 요소(타이포그래피, 색상)

차별화 요인은 다음과 같습니다.

• 제품의 고유한 "영혼"을 형성하는 요소
• 원하는 폼 팩터에 맞게 환경을 조정하는 데 도움이 되는 요소

이 스펙트럼을 가져와서 앱의 주요 요소에 적용하여 디자인 모델을 만들어 보겠습니다.

이 모델에서 기본 계층은 검증되고 테스트된 일관성 기반을 제공하는 반면 상층 계층은 유연성과 사용자 지정에 집중합니다.

1. 앱 기본 사항은 레이아웃 그리드, 색상표, 타이포그래피 규칙 , 그리고 아이콘 스타일 로 구성된 우리 모델의 첫 번째 계층을 구성합니다. 이러한 기본 기능은 일관되게 적용되어야 합니다.

2. 두 번째 계층의 경우 UWP는 효율성과 유연성의 균형을 맞추는 공통 컨트롤 의 핵심 집합을 제공합니다. 또한 동일한 단어를 사용하여 앱 환경을 통해 사람들을 설명하고 안내하는 일관된 음성 및 톤을 설정하는 데 도움이 되는 지침을 만들었습니다. 앱이 디자인에 사용할 수 있는 패턴 집합을 만들어 디자인이 다양한 크기의 디바이스 및 입력에 걸쳐 확장할 수 있도록 했습니다.

3. 계층 3은 다양한 디바이스 및 컨텍스트에 맞게 탐색을 조정하는 곳입니다. 예를 들어, 휴대폰에서 터치로 탐색하는 방법은 키보드와 마우스가 있는 32인치 모니터나 제스처가 있는 홀로렌스, 100포인트 터치가 가능한 84인치 화면에서의 탐색과 다를 가능성이 높습니다.

4. 4계층은 브랜드 개성을 정의하는 곳입니다. 브랜드를 강화하고 경쟁에서 차별화하는 시그니처 디자인 요소는 무엇인가요? 또한 다른 최종 사용자를 위해 앱을 조정하는 위치이기도 합니다. 게이머, 정보 근로자 또는 K-12 학생 또는 교육자를 위한 앱입니다. 이러한 다양한 고객에 대한 고유한 요구 사항은 무엇이며 디자인이 고객에게 더 잘 작동할 수 있도록 할 수 있습니까? 동일하게 만들지 말고 다른 고객에게 더 많은 가치를 창출하는 방법을 계속 살펴보세요.

디자인 원칙

이 모델을 효과적으로 사용하려면 올바른 절충을 만드는 데 도움이 되는 일련의 디자인 원칙이 필요합니다. 작동 중인 디자인 일관성 원칙은 다음과 같습니다.

모양이 같으면 동일하게 행동하게 하라

• 사용자가 텍스트 상자 또는 햄버거 컨트롤을 볼 때 여러 디바이스에서 동일한 방식으로 동작할 것으로 예상할 가능성이 높습니다. 설정된 동작에서 벗어나야 할 충분한 이유가 있는 경우 사용자 기대치도 다르게 보이게 하여 설정합니다.

요소가 기존 요소 또는 관례와 매우 유사한 경우, 동일하게 만드십시오.

• "새 문서" 아이콘이 필요합니다. 사용자가 이미 인식하고 있는 것을 사용할 수 있을 때, 약간 다르게 디자인된 새로운 항목을 만드는 이유가 무엇입니까?

유용성이 일관성을 능가합니다.

• 일관성을 유지하는 것보다 사용할 수 있는 것이 좋습니다. 경우에 따라 유용성을 지원하기 위해 새 컨트롤 또는 동작을 개발해야 할 수 있습니다. 한 손으로 전화를 사용하는 것은 독특한 문제가 있습니다. 80인치 화면으로 작업하는 것도 마찬가지입니다. 좋은 디자인은 사용자가 전문가라고 느끼게 합니다.

참여가 중요합니다.

• 지루하게 하지 마십시오. 모든 것이 평평하고 사각형이 있는 동일한 색인 경우 고객이 이를 선택하고 사용하려고 할까요? 기쁨을 만드시기. 학습 가능성을 깨뜨리지 않고 놀라게 하는 새로운 요소를 소개합니다.

행동은 진화한다

• 이것은 까다로운 하나입니다 : 산업이 진화함에 따라 새로운 규칙이 확립됩니다. 현재의 행동 양식이 사라질 수 있으며, 일관된 행동은 새로운 기준을 채택해야 할 수도 있습니다. 핀치 및 확대/축소 동작을 보세요. 예전에는 +/- UI를 사용하여 확대/축소하는 것이 일반적이었지만, 최신 UI에서는 손가락을 모아 축소하거나 벌려서 확대하는 것이 기대됩니다. 새로운 경험 패러다임을 살펴보고 진화합니다.