다음을 통해 공유


Mixed Reality 디자인 언어 — MRTK3

단추 주

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

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

향상 된 기능

업데이트된 기하 도형 더 친근하고 친숙한 환경을 위해 둥근 모서리로 기하 도형을 업데이트했습니다.

향상된 시각적 피드백 손가락 모으기 제스처와 결합된 시선 응시와 같은 향상된 다중 모달 입력에 대한 향상된 시각적 피드백

향상된 모듈식 단위 순열을 사용하여 다양한 UI 시나리오를 지원하는 향상된 모듈식 단위

모듈식 백플레이트 시스템 명확하고 사용 가능한 복잡한 레이아웃을 빌드하기 위한 모듈식 백플레이트 시스템

경계 상자 업데이트 시각적 노이즈를 줄이고 유동적인 응시 기반 상호 작용을 가능하게 하기 위해 경계 상자 시각적 개체를 다시 디자인했습니다.

캔버스 기반 UI 동적 및 유연한 레이아웃을 지원하는 RectTransform 및 Unity Canvas와의 통합

핵심 요소

형상
기하 도형
새로운 디자인 언어는 더 접근 가능하고 매력적이며 현대적인 환경을 만드는 둥근 모서리가 있는 기하 도형을 도입합니다. 또한 기하 도형은 완전히 3차원이며 실제로 디자인을 접지하는 데 도움이 되는 실체 두께입니다. 또한 이러한 요소는 3D 공간 내에 존재하는 실제 물리적 개체이며 개체에 연결하고 잡거나, 이동하거나, 조작할 수 있음을 사용자에게 상기시킵니다.

Color
색상
색상은 사용자 인터페이스 요소 간의 시각적 계층 구조와 구조체를 나타내어 사용자가 작업에 집중하는 데 유용합니다. 새로운 디자인 언어의 색 구성표는 눈 피로를 최소화하면서 직접 손 상호 작용을 할 때 사용자 신뢰를 강화하기 위해 추가 디스플레이에 충분히 밝고 불투명하게 유지됩니다. 무지개 빛깔 효과와 같은 자세한 요소는 HoloLens의 추가 디스플레이 및 기타 Mixed Reality 장치에서 최상의 환경을 제공하기 위한 디자인 및 사용자 연구 반복의 결과입니다.

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

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

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

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

MRTK3의 Mixed Reality 디자인 언어

Mixed Reality 디자인 언어를 사용하여 다양한 UI 요소에 대한 이러한 예제 장면을 검사 수 있습니다.

  • CanvasUITearSheet.unity: MRTK에서 사용 가능한 모든 캔버스 기반 단추 프리팹 변형을 표시합니다.
  • CanvasExample.unity: 캔버스 기반 구성 요소를 사용하여 더 큰 레이아웃을 빌드하는 예제입니다.
  • UITearSheet.unity: MRTK에서 사용 가능한 모든 비 캔버스 기반 단추 프리팹 변형을 표시합니다.

캔버스 눈물표

Mixed Reality 디자인 언어 사용 예제

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

MRTK3 GitHub 샘플