Mixed Reality 디자인 언어 — MRTK3

Button Main

지난 몇 년 동안 다양한 디스플레이 유형, 해상도 및 사용자 환경을 갖춘 다양한 디바이스 및 폼 팩터를 제공했습니다. 혼합 현실에서 멋진 환경을 설계하기 위한 모범 사례 집합을 개발했지만, 다양한 제품 및 장치에서 디자인을 테스트하고 평가하면서 이러한 모범 사례는 계속 진화하고 있습니다.

MRTK의 구성 요소를 통해 HoloLens 위한 Mesh 앱에 처음 소개된 최신 Mixed Reality 디자인 언어를 대중에게 소개하게 되어 기쁩니다. 새로운 디자인 변경은 개발자가 더 아름답고 사용 가능하며 이식 가능한 프로덕션 지원 애플리케이션을 빌드할 수 있도록 하는 것을 목표로 합니다.

향상 된 기능

  • 다중 모달 입력에 대한 향상된 시각적 피드백
  • 전통적인 HoloLens 무지개 빛깔의 모양과 느낌을 현대적인 Fluent 디자인과 결합한 아름다운 둥근 디자인 요소
  • 명확하고 사용 가능한 복합 레이아웃을 빌드하기 위한 모듈식 백플레이트 시스템
  • 시각적 노이즈를 줄이고 유동 응시 기반 상호 작용을 사용하도록 새롭게 디자인된 경계 상자 시각적 개체
  • RectTransform 및 Canvas를 사용한 동적 레이아웃

핵심 요소

기하 도형

Geometry

Geometry는 UI 요소의 모양, 크기 및 위치를 설명합니다. 이런 기본적인 디자인 요소를 통해 전체 디자인 시스템에서 환경의 느낌을 일관적으로 유지할 수 있습니다. 새로운 디자인 언어는 더 접근 가능하고 매력적이며 현대적인 환경을 만드는 둥근 모서리가 있는 기하 도형을 도입합니다. 기하 도형은 또한 완전히 3차원이며, 실질 두께로 설계를 실제로 접지하는 데 도움이 됩니다. 또한 이러한 요소는 3D 공간 내에 존재하는 실제 물리적 개체이며 개체에 연결하여 잡거나, 이동하거나, 조작할 수 있음을 사용자에게 상기시킵니다.

Color

Backplate color

색상은 사용자 인터페이스 요소 간의 시각적 계층 구조와 구조체를 나타내어 사용자가 작업에 집중하는 데 유용합니다. 새로운 디자인 언어는 더 어두운 색 구성표를 사용하여 눈 피로를 최소화하는 동시에 가산 디스플레이에 충분히 밝고 불투명하게 유지되어 직접적인 손 조작을 할 때 사용자 신뢰를 강화합니다.

조명 및 재질

Light

빛과 재료는 공간 상호 작용에서 시각적 피드백을 제공하는 데 필수적인 역할을 합니다. 상황에 맞는 3D 조명을 사용하면 특히 디바이스의 추가 디스플레이가 깊이 혼동을 일으킬 수 있는 경우 사용자가 깊이 및 상호 작용 상태를 인식할 수 있습니다. 예를 들어, 사용자의 손끝은 단추의 가압 가능한 표면에 미묘한 빛을 투사하여 홀로그램에서 손가락의 거리에 대한 사용자의 인식을 향상합니다.

레이어

Layering and Elevation

계층화는 한 표면을 다른 표면과 겹치는 개념입니다. Mixed Reality 디자인 언어는 계층화 및 상승 기능을 사용하여 공간 상호 작용에서 상호 작용 품질 및 유용성을 향상시키고 입력에 대한 아름답고 직관적인 응답으로 사용자를 만족시키는 볼륨 UI를 만듭니다.

아이콘 체계

Iconography

아이콘 체계는 사용자가 앱을 이해하고 탐색하는 데 도움이 되는 일련의 시각적 이미지와 기호입니다. Mixed Reality 디자인 언어는 Windows 11 아이콘을 사용합니다. 시스템 아이콘 글꼴의 모든 문자 모양이 보다 부드러운 기하 도형과 현대적인 비유를 수용하여 재설계되었습니다.

입력 체계

Typography

언어의 시각적 표현인 입력 체계의 주요 목적은 정보 전달입니다. 디자인 언어의 형식 램프를 사용하면 콘텐츠에서 구조 및 계층 구조를 만들어 UI에서 가독성과 가독성을 최대화할 수 있습니다.

MRTK3의 Mixed Reality 디자인 언어

MRTKv3 Tearsheet

Mixed Reality 디자인 언어 사용 예제

Mixed Reality 디자인 언어 예제를 살펴보고 알아봅니다.

HoloLens 2 대한 Microsoft Mesh 앱

Mesh app for HoloLens 2