Fluent 디자인 시스템

Fluent Design System
Fluent 디자인 시스템
Fluent UI Apps.png
Windows 10의 달력 응용 프로그램으로, 아크릴과 같은 Fluent Design의 측면과 얇은 창 테두리를 보여줍니다.
기타 이름
  • 유창한 UI
  • Microsoft Fluent 설계 시스템
원저작자마이크로소프트
개발자마이크로소프트
초기 릴리즈2017년, 5년 전(2017년)
안정된 릴리스 [±]
웹8.8.0 / 2021년 4월 1일, 16개월 전(2021-04-01)
창문들2.5.0 / 2020년 12월 4일, 20개월 전(2020-12-04)
프리뷰 릴리즈 [±]
안드로이드2021년 2월 12일 / 0.0.11, 17개월 전(2021-02-12)
iOS, MacOS2021년 3월 9일 / 0.2.3, 17개월 전(2021-03-09)[4]
창문들2.6.0 프리 릴리즈210315002 / 2021년 3월 17일, 16개월 전(2021-03-17)
크로스 플랫폼2021년 3월 15일 / 0.23.3, 16개월 전(2021-03-15)
저장소
기입처Objective-C, C++, C#, TypeScript, Kotlin, Swift, JavaScript
운영 체제Microsoft Windows NT
플랫폼ARM x64-x86
전임자
유형설계 언어 소프트웨어
면허증.MIT 라이선스
웹 사이트developer.microsoft.com/fluentui
Windows 버전의 Office 365 및 Office 2019에서 볼 수 있는 Fluent 및 Office Online에서 영감을 얻은 "홈" 화면.
에 관한 일련의 기사의 일부
윈도 10
Windows 10 Logo.svg
기타 에디션
관련된

마이크로소프트 플루언트 디자인 시스템으로 [12]공식 공개된 플루언트 디자인 시스템(프로젝트 네온)[11]은 마이크로소프트가 2017년에 개발한 디자인 언어입니다.Fluent Design은 Microsoft Design Language(일반적으로 "Metro"라고 함)의 리뉴얼로, Windows 10 및 Windows 11 디바이스 및 플랫폼용으로 설계된 소프트웨어 내에서 사용되는 설계 및 상호작용에 대한 가이드라인을 포함하고 있습니다.이 시스템은 빛, 깊이, 모션, 재료 및 [13]스케일의 5가지 주요 컴포넌트를 기반으로 합니다.새로운 디자인 언어에는 움직임, 깊이 및 투명 [14]효과의 보다 두드러진 사용이 포함됩니다.

Fluent로의 전환은 장기 프로젝트이며, 디자인의 측면은 2017년 10월에 출시된 "Fall Creators Update"와 [15][16][17][18]함께 출시된 Xbox One 시스템 소프트웨어의 업데이트를 시작으로 Windows 10에 나타나기 시작했다.이 [20]제품은 나중에 [19]비슷한 디자인의 Windows 11과 더불어 Windows 10X와 함께 설계된 것으로 밝혀졌다.

메트로 및 Aero와 비교

Fluent의 주요 원칙, 즉 "블록"(Light, Depth, Motion, Material, Scale)은 Metro가 정의한 평면 컨셉에서 벗어나 Metro가 도입한 깔끔한 외관을 유지하면서 Fluent는 Windows Vista 및 Windows 7에서 도입된 디자인 접근법인 Aero의 비주얼을 새로 고치고 있습니다(투명성, 시차 포함).패턴, 드롭 섀도우, 마우스 포인터 또는 입력 제스처 이동에 따른 강조 효과, 메트로에서 [citation needed]폐기된 "가짜 재료" 등이 있습니다.

Fluent의 현재 응용 프로그램

빛

하이라이트 표시

빛의 목적은 관심을 끌고 정보를 밝히는 것이다.마우스를 이동할 때 노출 하이라이트는 햄버거 탐색 메뉴 목록 및 버튼과 같은 개체의 숨겨진 테두리 근처를 비춥니다.클릭이나 탭 등 선택 시 흰색 원형 조명 효과가 빠르게 나타납니다.[21]또한 Windows Holographic 환경에서는 둥근 흰색 포인터가 존재합니다.

2017년 11월 6일, 마이크로소프트 직원 David Haz는 공개 하이라이트를 태스크바에 적용할 계획이 존재한다고 밝혔지만, 2019년 7월 현재,[22] 이러한 계획은 발생하지 않았다.

WinUI 2.6에서는 마이크로소프트는 공개 [23]하이라이트를 제공하지 않는 웹 및 모바일 제품에 맞춰 공개 하이라이트를 중단했습니다.

초점을 밝히다

포커스 [24]비주얼을 통해 테두리가 있는 포커스 가능한 아이템이 빛납니다.

깊이

깊이가 추가되어 Z축을 활용하며 레이어링을 통한 콘텐츠 차별화가 가능합니다.깊이는 드롭 섀도우 및 Z 깊이 [25][26]레이어링을 통해 표시됩니다.이는 2019년에 새롭게 디자인된 Office 앱에서 특히 두드러진다.

운동

Motion은 UI 요소 간의 관계를 설정하고 [27]경험의 연속성을 제공합니다.

애니메이션 추가/삭제

컬렉션에서 [28]항목을 삽입 및 제거하기 위한 애니메이션을 나열합니다.

연결된 애니메이션

연결된 애니메이션은 항목 전환입니다.콘텐츠 변경 중 요소가 [29]앱을 가로질러 이동함으로써 계속 진행되는 것처럼 보입니다.

콘텐츠의 이행

페이지의 일부 내용만 [30]변경될 때 사용합니다.

드릴

드릴은 앱을 더 깊이 탐색할 때 사용합니다.예를 들어 항목을 선택한 [31]후 추가 정보를 표시하는 것입니다.

페이드

페이드인 및 페이드아웃:[32] 항목을 뷰로 가져오거나 뷰에서 해제합니다.

시차

시차는 객체를 다른 속도로 이동합니다.배경이 위의 내용보다 느리게 이동합니다.예를 들어,[33] 리스트는 배경 이미지보다 빠르게 스크롤되어 움직임뿐만 아니라 깊이 효과도 생성합니다.

프레스 피드백

항목을 누르면 일시적으로 뒤로 물러난 다음 원래 위치로 돌아갑니다.언론 피드백의 예로는 시작 메뉴 라이브 타일, 관리 센터 빠른 작업 및 Microsoft Edge 주소 표시줄 [34]단추가 있습니다.

재료.

아크릴

2018년과 2019년에 각각 [35][36]Office 앱과 Chromium 기반의 Microsoft Edge를 시작으로 마이크로소프트 프로그램용으로 아크릴 소재의 새로운 아이콘이 생성되었다.최종 아이콘의 예비 버전은 "Meet the New icons for Office 365"[37] 비디오에서 발견되었으며,[39] 2019년 12월 12일에 공식적으로 공개되기 전에 윈도우 10X가 [38]공개되었을 때 더 많은 아이콘들이 발견되었다.이러한 아이콘은 Microsoft Store 업데이트를 통해 메일 및 [40][41]캘린더부터 나타나기 시작했습니다.

아크릴 소재는 약간의 노이즈 효과와 함께 반투명하고 흐릿한 효과를 냅니다.다른 불투명도를 사용하여 시각적 계층을 생성할 수 있습니다.예를 들어, 앱에서 기본 콘텐츠 표면이 불투명할 수 있습니다(Calculator와 같은 위젯이나 경량 앱 제외). 보조 창은 배경 아크릴을 80%, 세 번째 창은 배경 아크릴을 60% 사용할 수 있습니다.백그라운드 아크릴 소재는 활성 아크릴 소재의 모든 아이템을 흐리게 합니다.인앱 아크릴은 앱 내에서 콘텐츠를 흐리게 합니다.

앱을 더 이상 선택하지 않으면 특정 창에서 아크릴이 비활성화됩니다.투명성이 비활성화되거나 배터리 절약 모드가 활성화되거나 보급형 하드웨어에서 두 가지 유형의 아크릴 모두 시스템 전체에서 비활성화됩니다.창이 선택 해제되어 있거나 Windows 10 Mobile, HoloLens 또는 태블릿 [42]모드에서 백그라운드 아크릴이 비활성화됩니다.

마이카

마이카는 Windows 11에서 도입된 새로운 불투명 소재로 사용자의 [43]벽지를 색칠합니다.일시적인 표면(예: 컨텍스트 메뉴)용으로 설계된 아크릴과는 달리, Mica는 수명이 긴 기본 표면에서 사용하도록 설계되었습니다.

규모.

애플리케이션은 다양한 폼 팩터, 디스플레이 크기, 0D에서 3D로 확장됩니다.요소는 화면 크기에 따라 조정되며 여러 [44][45]차원에 걸쳐 사용할 수 있습니다.의식 컨트롤은 스케일(예: 다양한 [46][47]호출 방법에 따라 조정되는 스크롤 바 및 입력) 내에서 분류됩니다.

미정

「 」를 참조해 주세요.

레퍼런스

  1. ^ "@fluentui/react - npm". npm. 2021-04-01. Retrieved 2021-04-04.
  2. ^ "Release Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml". GitHub. 2020-04-12. Retrieved 2021-03-16.
  3. ^ "Release 0.0.11: Merge pull request #44 from microsoft/develop · microsoft/fluentui-android". GitHub. 2021-02-12. Retrieved 2021-03-16.
  4. ^ "Release Bumping versions for version update (0.2.3) · microsoft/fluentui-apple". GitHub. 2021-03-09. Retrieved 2021-03-16.
  5. ^ "Release Microsoft.UI.Xaml v2.6.0-prerelease.210315002 · microsoft/microsoft-ui-xaml". GitHub. 2021-03-17. Retrieved 2021-03-18.
  6. ^ "@fluentui/react-native - npm". npm. 2021-03-15.
  7. ^ Microsoft 365 Team (2020-03-12). "UI Fabric is evolving into Fluent UI - Microsoft 365 Developer Blog". Microsoft 365 Developer Blog. Retrieved 2021-03-16.
  8. ^ Lewkowicz, Jakub (2020-03-16). "Microsoft transforms UI Fabric to Fluent UI - SD Times". ST Times. Retrieved 2021-03-16.
  9. ^ Office Dev (2015-08-15). "Introducing Office UI Fabric—your key to designing add-ins for Office - Microsoft 365 Blog". Microsoft 365 Blog. Retrieved 2021-03-16.
  10. ^ Tung, Liam (2020-03-16). "Microsoft's big Fluent design push: Web developers get a new Office UI Fabric ZDNet". ZDNet. Retrieved 2021-03-16.
  11. ^ "Fluent Design is Microsoft's new modern UI for Windows and more". The Verge. 2017-05-11. Retrieved 2017-05-11.
  12. ^ "Windows Developer on Twitter". Twitter. Retrieved 2017-05-11.
  13. ^ "Fluent Design Language". Microsoft. Retrieved 2017-05-12.
  14. ^ "New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System"". Ars Technica. 11 May 2017. Retrieved 11 May 2017.
  15. ^ "Microsoft shows off its Fluent Design changes to Windows 10". The Verge. Retrieved 2017-10-29.
  16. ^ "Microsoft's Fluent Design System threatens to make Windows look good". Ars Technica. Retrieved 2017-10-29.
  17. ^ "A major new Xbox One update overhauls the dashboard with Fluent Design". The Verge. Retrieved 2017-10-29.
  18. ^ "The Xbox One is getting a major update today, including a faster dashboard". The Verge. Retrieved 2017-10-29.
  19. ^ "A first look at Microsoft's new Windows 10X operating system for dual screens". The Verge. February 11, 2020. Retrieved April 19, 2020.
  20. ^ "Panos Panay on Instagram: "The team made this video to celebrate making it to 1 billion MAD on Windows 10 and I wanted to share it with all of you. Now at a time when…"". Instagram. March 19, 2020. Archived from the original on 2021-12-25. Retrieved April 19, 2020.
  21. ^ mijacobs. "Reveal highlight - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  22. ^ "No Fluent Design Reveal Highlight in Start Menu - Fall Creator's Update". answers.microsoft.com. Retrieved 2017-12-26.
  23. ^ "Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml". GitHub. Retrieved 2021-07-15.
  24. ^ cphilippona (2020-09-24). "Reveal focus - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  25. ^ Bowden, Zac (2017-05-19). "Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System". Windows Central. Retrieved 2017-12-22.
  26. ^ Joyce, Kevin (2017-05-20). "Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices". VRFocus. Retrieved 2017-12-22.
  27. ^ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  28. ^ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  29. ^ mijacobs (2020-09-24). "Connected animation - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-31.
  30. ^ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  31. ^ davidvkimball (2020-09-24). "Page transitions in WUP apps - UWP apps". docs.microsoft.com. Retrieved 2019-11-27.
  32. ^ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  33. ^ mijacobs (2020-09-24). "How to use the ParallaxView control to add depth and movement to your app. - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  34. ^ mijacobs (2020-09-24). "Pointer click animations in UWP apps - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-31.
  35. ^ "Redesigning the Office App Icons to Embrace a New World of Work". Medium. November 29, 2018. Retrieved April 19, 2020.
  36. ^ "Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer". The Verge. November 2, 2019. Retrieved April 19, 2020.
  37. ^ "Meet the new icons for Office 365". November 29, 2018. Retrieved April 19, 2020.
  38. ^ "#MicrosoftEvent Live". October 2, 2019. Retrieved April 19, 2020.
  39. ^ "The Icon Kaleidoscope". Medium. December 12, 2019. Retrieved April 19, 2020.
  40. ^ "Iconic Icons: Designing the World of Windows". Medium. February 20, 2020. Retrieved April 19, 2020.
  41. ^ "Microsoft rolls out colorful new Windows 10 icons". The Verge. February 20, 2020. Retrieved April 19, 2020.
  42. ^ mijacobs. "Acrylic material - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  43. ^ "Materials used in Windows 11 apps - Windows apps". docs.microsoft.com. Retrieved 2021-07-05.{{cite web}}: CS1 maint :url-status (링크)
  44. ^ "Fluent Design System". fluent.microsoft.com. Archived from the original on 2018-03-01. Retrieved 2018-02-18.
  45. ^ Verma, Adarsh (2017-05-12). "What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?". Fossbytes. Retrieved 2018-02-18.
  46. ^ muhsinking. "Scroll viewer controls - UWP applications Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  47. ^ "What's new with Microsoft Fluent Design System 'wave one' for Windows 10". Windows Central. 2017-06-29. Retrieved 2017-12-22.
  48. ^ "Spatial sound design". developer.microsoft.com. Retrieved 2017-12-22.

외부 링크