Microsoft 의 새로운 디자인 언어인 ——Fluent 디자인 시스템의 완전한 해석
Microsoft 는 Build 20 17 의 개발자 컨퍼런스에서 새로운 디자인 언어인 ——Fluent Design System 을 발표하여 수년 동안 사용되어 온 평평한 직사각형 사용자 인터페이스를 완전히 바꾸었습니다. 새로운 디자인 언어는 시각뿐만 아니라 상호 작용 방식, 공간 및 새로운 요소가 통합되는 방식도 포함합니다. Microsoft 는 FDS 가 달성해야 할 세 가지 변화를 개략적으로 설명합니다.
1. 그래픽 디자인 언어에서 몰입형 다차원 디자인 언어로의 전환
작은 화면, 크로스 플랫폼, 입력 변환에 터치;
소비와 교류에서 창조와 자기 치료로.
조 벨피오리 (Joe Belfiore) 마이크로소프트 운영 체제 부문 부사장은 빌드 2017 개발자 컨퍼런스에서 FDS 를 소개하면서 "평면에 국한된 직사각형에 작별을 고해야 할 때다" 고 말했다. 새로운 디자인 언어는 시각과 관련이 있을 뿐만 아니라 상호 작용 모드, 공간, 새로운 요소의 융합도 강조한다. "
FDS 홍보 자료에서 Microsoft 팀은 13 형용사로 디자인 이념을 소개했고, 이를 적응 디자인, 이미지 레벨 디자인, 크리에이티브 디자인, 간단한 디자인, 시뮬레이션 디자인, 매력적인 디자인, 유니버설 등 10 유형으로 해석했습니다. 동시에 Microsoft 는 FDS 를 "복잡한 세계의 웅변 설계 시스템" 이라고 고도로 요약했습니다. 저는 "복잡한 세계에는 다른 세계가 없습니다." 라고 설명했습니다.
전체 설명 | 빌딩 블록 (구성 요소)
구성 요소 FDS 디자인 언어의 핵심 요소는 사용자가 다양한 크기와 입력 장치에서 플랫폼 간 경험을 통해 다음 Windows 시대를 구축할 수 있도록 보장합니다.
한 구성요소를 구성하는 다섯 가지 요소는 라이트, 깊이, 모션, 재질 및 배율입니다.
포괄적 인 해석 | 빛 (빛 효과)
실제로 Windows 10 RS2 및 이전 시스템에서는 밝기 변화에 대한 피드백이 있고 FDS 에서는 가벼운 인간-컴퓨터 상호 작용 피드백이 강조됩니다. 일부 2D 장치의 프로그램에서는 마우스가 이동하는 방향에 따라 요소 자체와 주변 요소에 광 피드백 효과가 발생합니다. 이는 사용자가 상호 작용하고 있는 컨트롤의 상태를 강조 표시합니다.
MR 장치를 사용할 때 사용자가 화면 위에 포인터를 올려 놓으면 라이트가 작은 머리 조리개로 사용자에게 피드백을 제공하므로 사용자가 가상 환경에서 UI 요소를 분리할 수 있습니다.
완전한 해석 | 소재 (Material)
Microsoft 팀은 Fluent 디자인 시스템의 물리적 텍스처와 공간 깊이의 개념을 활용하여 다양한 UI 구성 요소 요소를 구분하고 시각적 계층에 배치합니다. 핵심은 이 재질의 구성 요소를 조정하여 고유한 모양과 성능을 얻고 사용자에게 개인화된 기본 환경을 제공하는 것입니다. 이것은 UWP 응용 프로그램 스타일 경험의 중대한 개선이다.
배경 투명도, 가우스 블러 및 레이어 텍스처는 사용자 인터페이스의 시각적 깊이와 차원을 증가시켜 시각적 수준을 설정합니다. 혼합 스타일 제외는 아크릴 배경에 배치된 요소가 대비가 높고 가독성이 있는지 확인하는 데 사용됩니다. 컬러 오버레이는 사용자에게 색상 개인화의 기회를 제공하여 친근한 경험을 만들어 줍니다.
이 다섯 가지 원소의 겹침은 신선하고 투명하며 효율적인 소재를 구성하는데, 마이크로소프트는 이를 아크릴 소재라고 부른다.
완전한 해석 | 아크릴 재료 사용 사양
1. 응용 프로그램에서 다른 시각 효과를 만들려면 응용 프로그램 전체에서 아크릴 재질을 사용할 수 있습니다.
2. 수직 탐색 응용 프로그램의 경우 아크릴 재질이 탐색 요소가 포함된 보조 창에 적용되어야 합니다.
Microsoft 는 60% 밝음/어두움, 70% 밝음/어두움, 80% 밝음/어두움 등 세 가지 아크릴 소재의 디자인 사양을 공식적으로 규정하고 있습니다. 여기에 60% 라이트 아크릴 소재의 구체적인 알고리즘이 나와 있습니다.
4. 세 개의 서로 다른 수직 창이 있는 응용 프로그램의 경우 주요 내용이 아닌 내용에 아크릴 재료를 사용해야 합니다.
주요 내용에 가장 가까운 보조 창의 경우 80% 밝은 (어두운) 아크릴 재질을 사용해야 합니다.
주요 콘텐츠에서 멀리 떨어진 두 번째 보조 창의 경우 60% 밝은 (어두운) 아크릴 재질을 사용해야 합니다.
4. 세 개의 서로 다른 수직 창이 있는 응용 프로그램의 경우 주요 내용이 아닌 내용에 아크릴 재료를 사용해야 합니다. 주요 내용에 가장 가까운 보조 창의 경우 80% 밝은 (어두운) 아크릴 재질을 사용해야 합니다. 주요 콘텐츠에서 멀리 떨어진 두 번째 보조 창의 경우 60% 밝은 (어두운) 아크릴 재질을 사용해야 합니다.
디자인 시 다층아크릴 소재를 신중하게 사용해야 합니다. 경험상 사용자가 응용 프로그램을 사용할 때 3 차원 시나리오의 z 축 투시를 머릿속에서 시뮬레이션하도록 해서는 안 되며, 이로 인해 예기치 않은 착시가 시각적으로 나타날 수도 있습니다.
포괄적 인 설명 | 깊이 (시차 효과)
시차는 사용자 인터페이스에서 계층을 생성하는 시각적 효과입니다. 관찰자 근처의 물체는 배경 속의 물체보다 빠르게 움직인다. 시차는 깊이감, 투시감, 운동감을 생성합니다.
위에서 설명한 대로 목록과 배경 이미지의 시차가 변경되고 리스트가 배경 이미지의 맨 위에 배치됩니다. 시차 효과를 얻기 위해 사용자에게 가장 가까운 물체가 사용자로부터 멀리 떨어진 물체보다 더 빨리 이동하기를 바랍니다. 따라서 사용자가 인터페이스를 스크롤할 때 목록이 배경 그림보다 빠르게 이동하여 깊이 변화의 착각을 일으켜 사용자의 호감도와 사용자 점도를 크게 높인다.
통합 해석 | 운동 (애니메이션)
1. 연결 애니메이션 (연결 애니메이션)
내합 애니메이션은 두 개 이상의 서로 다른 뷰 사이의 요소 변화를 전환하는 데 사용되며, 사용자가 관련 컨텐츠를 탐색할 때 뷰 간의 연속성을 유지하고, 동적이고, 자연스럽고, 빠르고, 멋지고, 매력적인 사용자 경험을 가능하게 하며, 사용자의 주의를 빠르게 끌고, 사용자의 참여도를 크게 높일 수 있습니다.
위의 애니메이션을 확인합니다. 원형에서 내부 애니메이션은 프로젝트 이미지를 동적으로 확장하는 데 사용됩니다. 사용자가 이미지 요소와 상호 작용할 때 다음 수준의 수평 제목 내용이 되어 사용자가 관련 컨텐츠를 탐색할 때 뷰 간 연속성을 유지합니다.
2. 애니메이션 조정 (애니메이션 조정)
맞춤 애니메이션은 특수한 유형의 입구 애니메이션이며 핵심 형식은 "이동" 입니다. 사용자가 선택한 요소는 조정된 애니메이션을 통해 한 방향으로 이동하고 다음 단계에서 한 방향으로 표시됩니다.
예를 들어 위 애니메이션에서 UI 컨트롤은 좌표 애니메이션을 사용합니다. 조정된 애니메이션은 요소 간의 전환에 더 많은 시각적 흥미를 더해 주며 소스 뷰와 대상 뷰 간의 변화에 대한 사용자의 주의를 더욱 끌 수 있습니다.
Belfiore 는 액션 요소가 있는 앱을 배우가 동작으로 관객을 하나의 이야기로 인도하는 것에 비유한다. "운동 원소는 우리의 경험을 활기차게 하는 특별한 마력을 가지고 있다." 라고 그가 말했다. 동시에, 그것은 사용자를 한 임무에서 다음 임무로 쉽게 안내할 수 있다. "운동 요소는 또한 창의성, 리얼리즘, 릴랙스, 유인, 표현, 일관성, 일관적인 디자인 이념을 반영한다.
전체 해석 | 배율 (배율 조정)
Scale 의 핵심 역할은 다양한 장치에서 응용 프로그램을 재구성하고 렌더링하는 것입니다. 컴퓨터 모니터에서 잘 보이는 대상이 AR 또는 VR 헤드폰에서 볼 때 너무 크거나 너무 작을 수 있습니다. 따라서 더미 오브젝트 크기의 배율 조정은 첫 번째 시야각 UI 경험의 핵심 요소 중 하나입니다.
규모의 경우 이번 개발자 컨퍼런스에서 마이크로소프트도 기존 제품과 결합해 향후 발전의 큰 방향을 제시했다. 몰입 형 디지털 개체의 확장도 3D 상호 작용 인터페이스와 VR/AR 시대에 없어서는 안될 기능입니다. 가상 현실이 발전함에 따라 규모 기술은 제품에 더 많이 적용될 것이다.
통합 해석 | Windows Story Remix 비디오 제작 도구
Story Remix 의 가장 큰 특징은 사용이 쉽다는 것이다. 이 중 Remix 3D 기능은 사용자가 표현하고자 하는 논리와 내용에 따라 사용자 정의할 수 있는 스토리를 자동으로 제공하여 모든 계층의 창작자를 끌어들일 수 있습니다. View 3D 기능은 3D 개체를 직접 호출하여 VR 작품을 만들 수 있습니다.
Story Builder 기능을 통해 사용자는 사진, 비디오, 음악을 사용하여 프로페셔널에 가까운 멋진 이야기를 빠르게 만들 수 있습니다. Windows Story Remix 를 통해 사용자는 사진, 비디오를 업로드할 수 있습니다
[3D 오브젝트 추가] 를 선택하여 재미있는 혼합 현실 장면을 만듭니다. Story Remix 는 사진과 비디오를 편집하고 만드는 것 외에도 Paint 3D 와 마찬가지로 직접 혼합 음악을 지원합니다.
또한 Remix 3D 커뮤니티에 대한 지원도 통합되어 있습니다.
Microsoft 의 심도 있는 학습 기술을 통해 Story Remix 는 사진 속의 사람과 사물을 인식하고, 사람, 사물, 시간 등 거의 모든 속성에 따라 사진과 동영상에 직접 주석이나 낙서를 추가할 수 있으며, 콘덴서 펜과 잉크 조작도 지원합니다.
Microsoft 는 Build 20 17 개발자 컨퍼런스에서 Windows 10 을 포함한 기존 기능 데모를 포함하여 FDS 에 1 시간도 안 되는 강연을 했습니다.
미래에 대한 추상적인 개념. "유창함" 은 Windows 10 의 특권이 아니라 구글의 재질 디자인과 마찬가지로 전체 UMP 시스템에 침투할 수 있습니다. 미래에는 Microsoft 의 브랜드가 완전히 평평한 디자인에서 더 많은 종류와 행동으로 변하는 것을 볼 수 있습니다. 주목할 만하게도, Microsoft Fluent 디자인 시스템은 Windows 이름을 붙인 것이 아니며, 이는 Microsoft 가 3D 사용자 인터페이스의 선구자가 되려는 야망을 반영하고 있습니다.