다음을 통해 공유


Windows 앱용 디자인

여기서는 Windows 앱 환경을 만들기 위한 디자인 지침 및 예제를 찾을 수 있습니다. Windows 11은 Fluent의 디자인 언어와 원칙을 통합하여 Microsoft 고유의 응집력 있는 모양과 느낌을 제공합니다.

Windows 환경을 만들기 위한 구성 요소를 얻으려면 WinUI를 사용합니다. 이러한 구성 요소는 Fluent의 디자인 언어를 통합하므로 Fluent 에코시스템 내에서 훌륭한 환경을 구축하고 있다고 확신할 수 있습니다.

Windows 11 디자인 원칙

다양한 Windows 11 디자인 요소

Windows 11은 운영 체제의 시각적 진화를 이루었습니다. Fluent와 함께 디자인 언어를 발전하여 인간적이고 보편적이며 진정한 Windows 같은 느낌을 주는 디자인을 만들었습니다.

다음의 디자인 원칙에 따라 Windows를 최고의 Fluent 구현으로 만들었습니다.

간편함

Windows 11은 더 빠르고 직관적입니다. 집중적으로 정밀하게 원하는 작업을 쉽게 수행할 수 있습니다.

차분함

Windows 11은 더 부드럽고, 깔끔합니다. 차분하고 집중할 수 있도록 배경이 흐려집니다. 이 경험은 따뜻하고 미묘하며 접근 할 수 있다고 느낍니다.

개인화

Windows 11은 디바이스를 사용하는 방식에 원활하게 적응합니다. 자신을 잘 표현할 수 있도록 개인의 요구와 선호에 따라 적용할 수 있습니다.

친숙함

Windows 11은 새로운 모양 및 느낌과 이미 알고 있는 Windows의 친숙함 사이에서 균형을 유지합니다. 별도의 학습 과정 없이, 설치 후 바로 사용할 수 있습니다.

완전성 + 일관성

Windows 11은 플랫폼 간에 시각적으로 원활한 환경을 제공합니다. 여러 플랫폼에서 작업하면서도 일관된 Windows 환경을 유지할 수 있습니다.

Windows 11 시그니처 환경

시그니처 환경은 Windows 11이 모든 Fluent 환경에서 일관된 모양과 느낌을 유지하면서 시각적 언어를 표현하는 데 사용하는 디자인 요소입니다.

왼쪽은 밝은 모드, 오른쪽은 어두운 모드인 창 및 모달 대화 상자



색상은 사용자 인터페이스 요소 간의 시각적 계층 구조와 구조체를 나타내어 사용자가 작업에 집중하는 데 유용합니다. Windows 11은 색상을 사용하여 차분한 기반을 제공하고 사용자 상호 작용을 섬세하게 개선하며, 필요할 때만 중요한 항목을 강조합니다.

단일 콘텐츠 영역이 있는 애플리케이션 창

권한 상승 및 계층화

상승 및 계층화 는 한 표면을 다른 표면과 겹치게 하여 동일한 표면 내에서 둘 이상의 시각적으로 구분된 영역을 만드는 개념입니다. Windows 11은 앱 계층 구조의 기초로 권한 상승 및 계층을 사용합니다.

쇼핑 카트 아이콘

아이콘 체계

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

아크릴로 만든 UI 표면

재질

재질은 UI 표면을 실제 아티팩트와 유사하게 만드는 시각 효과입니다. Windows 11은 재질을 사용하여 UI가 환경에 연결된 상태를 유지합니다. 재질을 통해 표면에 생동감을 불어넣으며, 포커스가 있거나 없는 애플리케이션을 구별할 수 있습니다.

Windows 11의 새로운 기하 도형을 보여주는 여러 UI 요소

도형 및 기하 도형

기하 도형은 화면에서 UI 요소의 모양, 크기 및 위치를 설명합니다. 이런 기본적인 디자인 요소를 통해 전체 디자인 시스템에서 환경의 느낌을 일관적으로 유지할 수 있습니다. Windows 11은 보다 접근 가능하고 매력적인 최신 환경을 만드는 업데이트된 기하 도형을 제공합니다.

Segoe UI Variable로 렌더링된 여러 단어

입력 체계

언어의 시각적 표현으로서 입력 체계주요 작업은 정보를 전달하는 것입니다. Windows 11 유형 시스템은 UI에서 가독성을 극대화하고자 콘텐츠의 구조체와 계층 구조를 만드는 데 유용합니다.

Windows UI의 동작에 대한 몇 가지 예를 보여주는 애니메이션 이미지

동작

동작은 인터페이스가 애니메이션처럼 움직이고 사용자 상호 작용에 응답하는 방식을 설명합니다. Windows 동작은 직접적으로 반응하며 상황에 맞게 구현됩니다. 사용자 입력에 대한 피드백을 제공하고 길 찾기를 지원하는 공간 패러다임을 강화합니다.