Fluent Design System

Hệ thống Fluent Design (, tên mã là Dự án Neon), tên chính thức là Microsoft Fluent Design System là một ngôn ngữ thiết kế được phát triển vào năm 2017 bởi Microsoft. Fluent Design là một cải tiến của ngôn ngữ thiết kế Microsoft Design Language 2, bao gồm các hướng dẫn cho việc thiết kế và tương tác bên trong các phần mềm được thiết kế cho các thiết bị và nền tảng sử dụng Windows 10. Hệ thống này dựa trên năm thành phần chính: ánh sáng (Light), chiều sâu (Depth), chuyển động (Motion), chất liệu (Material), và tỷ lệ (Scale). Ngôn ngữ thiết kế mới này nổi bật với các chuyển động, độ sâu, và các hiệu ứng mờ.
Việc chuyển đổi sang ngôn ngữ thiết kế Fluent Design là một dự án dài hạn; các khía cạnh của ngôn ngữ thiết kế bắt đầu xuất hiện trong Windows 10, bắt đầu từ bản cập nhật "Fall Creators Update", phát hành vào tháng 10 năm 2017, cũng như một bản cập nhật cho phần mềm hệ thống của Xbox One phát hành song song với nó. Microsoft sau đó tiết lộ ngôn ngữ này sẽ được thiết kế tích hợp với Windows 10X, ngoài một bản cập nhật Windows 10 trong tương lai với thiết kế tương tự. Nhiều khía cạnh của Fluent sẽ được giới thiệu cho Windows qua các phiên bản kế tiếp.
So sánh với Metro và Aero.
Các nguyên tắc chính của Fluent hay các "blocks" (Light, Depth, Motion, Material, và Scale) đã quay lưng lại với các khái niệm Flat mà Metro đã định nghĩa, nhưng đồng thời vẫn giữ được vẻ ngoài gọn gàng của Metro, Fluent làm mới hình ảnh của Aero, một thiết kế đã được giới thiệu trong Windows Vista và Windows 7, bao gồm hiệu ứng trong mờ (translucency), các hình mẫu hoạt cảnh kiểu parallax, đổ bóng, các hiệu ứng nổi bật theo con trỏ chuột hoặc các cử chỉ đầu vào, và các thiết kế "giả vật liệu (faux materials)" của Metro từng một lần bị gạt bỏ.
Fluent Design của Microsoft mang lại các yếu tố vật lý cho mặt phẳng kỹ thuật số, và tập trung để vượt ra khỏi khuôn mẫu thiết kế chung, tiến tới mức độ "thực tế hỗn hợp".
Các ứng dụng hiện tại của Fluent.
Ánh sáng (Light).
Với WinUI 2.6, Microsoft đã ngừng tiết lộ tính năng nổi bật để phù hợp với các dịch vụ web và thiết bị di động của họ, vốn không cung cấp tính năng hiển thị nổi bật. Hơn nữa, với việc phát hành Windows 11, Microsoft đã dần dần loại bỏ việc sử dụng hiệu ứng ánh sáng nói chung, thay vào đó cung cấp tính hấp dẫn thông qua hình ảnh động.
Chiều sâu (Depth).
Chiều sâu cho phép tạo nên sự khác biệt giữa các nội dung bằng cách tạo ra nhiều lớp nội dung theo trục Z của màn hình hiển thị. Chiều sâu hiện diện ở việc đổ bóng cho nội dung và tạo độ sâu trục Z. Điều này được thể hiện đặc biệt rõ ràng trong ứng dụng Office được thiết kế lại vào năm 2019.
Chuyển động (Motion).
Chuyển động thiết lập một mối quan hệ giữa các yếu tố UI và cung cấp cho người dùng một sự liền mạch trong trải nghiệm.
Chất liệu (Material).
Chất liệu là các hiệu ứng hình ảnh được áp dụng cho các bề mặt UX. Trong Fluent Design, có hai loại chất liệu chính: occluding và transparent (trong suốt). Các chất liệu bao gồm, chẳng hạn như acrylic và mica, tạo thành các lớp cơ sở bên dưới các thành phần giao diện người dùng tương tác. Các chất liệu trong suốt như khói được sử dụng để nhấn mạnh các bề mặt chìm:
Cả hai loại Acrylic bị vô hiệu hóa trên cả hệ thống khi hiệu ứng transparency bị vô hiệu hóa, khi chế độ tiết kiệm pin được bật, hoặc trên các hệ thống phần cứng cấp thấp. Acrylic nền bị vô hiệu khi cửa sổ bị bỏ chọn hoặc trên Windows 10 Mobile, HoloLens, hoặc ở chế độ máy tính bảng.
Tỷ lệ (Scale).
Các ứng dụng chia tỉ lệ qua các yếu tố hình thức (form factors) khác nhau, kích thước hiển thị (display sizes) và 0D thành 3D. Các yếu tố thích ứng với kích thước màn hình của chúng và có sẵn trên nhiều kích thước. Các điều khiển nhận thấy cũng được phân loại trong Scale (ví dụ: thanh cuộn và đầu vào thích ứng với các phương thức gọi khác nhau)
Biểu tượng.
Biểu tượng ứng dụng.
Các biểu tượng mới bằng chất liệu acrylic đã được tạo cho các chương trình của Microsoft, bắt đầu với các ứng dụng Office và Microsoft Edge dựa trên Chromium lần lượt vào năm 2018 và 2019. Phiên bản sơ bộ của các biểu tượng cuối cùng đã được phát hiện trong video "Meet the New Icons for Office 365" video, trước khi nhiều phiên bản khác được phát hiện khi Windows 10X được công bố, trước khi chính thức được tiết lộ vào ngày 12 tháng 12 năm 2019. Các biểu tượng này bắt đầu xuất hiện thông qua các bản cập nhật Microsoft Store cho các ứng dụng đó, bắt đầu với Mail và Calendar.
Segoe Fluent Icons.
Segoe Fluent Icons là một bộ biểu tượng do Microsoft thiết kế để sử dụng trong các sản phẩm và dịch vụ của mình cùng với việc thiết kế lại phông chữ Segoe UI (Segoe UI Variable). Các biểu tượng được làm tròn khác với các biểu tượng Segoe MDL2 góc cạnh và thẳng vốn chiếm ưu thế trong thời đại "Metro".
Fluent Emojis.
Vào ngày 15 tháng 7 năm 2021, Microsoft đã công bố thiết kế lại hoàn toàn thư viện emoji của mình để phù hợp với Fluent Design. Với nỗ lực làm cho Windows nhất quán và dễ truy cập nhất có thể, vào ngày 10 tháng 8 năm 2022, Microsoft đã tạo ra hơn 1.500 biểu tượng cảm xúc mã nguồn mở. Những biểu tượng cảm xúc mới này khác với phong cách phẳng và có đường viền của thư viện biểu tượng cảm xúc trước đây được sử dụng trong Windows 10, thay vào đó mang lại cảm giác Play-Doh 3D. Hơn nữa, Microsoft đã tuyên bố kế hoạch của họ để làm động hầu hết chúng. Mặc dù có thể nhìn thấy hoạt ảnh 3d trong các ứng dụng như Microsoft Teams và Skype, Windows 11 sử dụng biến thể phẳng.
Thực hiện.
Nguyên tắc thiết kế thông thạo là đa nền tảng và có thể được triển khai với các khung khác nhau. Fluent UI React là một tập hợp các thành phần React triển khai Hệ thống thiết kế thông thạo của Microsoft. Nó cung cấp một tập hợp các thành phần dựng sẵn có thể được sử dụng để xây dựng các ứng dụng cho Windows, iOS, Android, macOS và web. Hơn nữa, WinUI là một khung giao diện đồ họa người dùng gốc để xây dựng các ứng dụng Windows. Nó được xây dựng dựa trên Hệ thống thiết kế thông thạo và cung cấp một bộ điều khiển dựng sẵn.