Fluent design

Fluent Design là một design system được xây dựng nhằm tạo ra trải nghiệm giao diện liền mạch, đa nền tảng và giàu tính tương tác.

Không giống các phong cách thiết kế trước đó chỉ tập trung vào hình thức, Fluent Design đặt trọng tâm vào:

• Cảm giác tương tác

• Chuyển động

• Chiều sâu

• Sự phản hồi theo hành vi người dùng

Nói cách khác, Fluent Design không chỉ là “cách giao diện trông như thế nào”, mà là cách giao diện phản ứng và “chuyển động” cùng người dùng. Fluent Design được xây dựng dựa trên một ý tưởng quan trọng:

Giao diện không phải là một bề mặt tĩnh, mà là một môi trường sống động, có thể phản hồi và thích nghi.

Fluent Design hướng đến việc tạo ra một trải nghiệm nhất quán trên mọi thiết bị và mọi hình thức tương tác.

(Nguồn: https://www.techmagic.co/blog/design-systems)

5 yếu tố nền tảng của Fluent Design

Fluent Design được cấu thành từ năm yếu tố chính, tạo nên “ngôn ngữ” của hệ thống này.

• Light (Ánh sáng)

Ánh sáng được sử dụng để hướng dẫn sự chú ý và phản hồi tương tác. Khi người dùng hover hoặc chạm vào một thành phần, hiệu ứng ánh sáng giúp họ nhận biết rằng giao diện đang phản hồi.

• Depth (Chiều sâu)

Fluent Design sử dụng layering, blur và transparency để tạo cảm giác không gian. Điều này giúp phân cấp thông tin rõ ràng và tăng khả năng định hướng.

• Motion (Chuyển động)

Chuyển động không chỉ mang tính thẩm mỹ mà còn giúp giải thích hành vi. Các animation được thiết kế để người dùng hiểu sự thay đổi trạng thái một cách tự nhiên.

• Material (Vật liệu số)

Các hiệu ứng như acrylic (mờ, trong suốt) và mica tạo cảm giác “vật liệu kỹ thuật số”. Đây không phải là mô phỏng vật lý như skeuomorphism, mà là một dạng “material” đặc trưng của môi trường số.

• Scale (Tỷ lệ và khả năng thích ứng)

Giao diện có thể thay đổi linh hoạt theo kích thước màn hình và thiết bị, từ desktop đến mobile, từ 2D đến không gian 3D.

(Nguồn: https://arstechnica.com/information-technology/2017/05/taking-a-closer-look-at-microsofts-fluent-design-system/)

 

Fluent Design trong tiến trình phát triển UI/UX

Fluent Design không xuất hiện một cách độc lập, mà là kết quả của một quá trình tiến hóa:

• Skeuomorphism: giúp người dùng làm quen bằng cách mô phỏng thế giới thật

• Flat design: tối giản và tăng hiệu năng

• Material Design: kết hợp trực quan và cấu trúc

• Fluent Design: hướng tới trải nghiệm động, đa chiều và thích nghi

Điều này phản ánh một xu hướng rõ ràng: Giao diện đang chuyển từ “hiển thị thông tin” sang “tạo trải nghiệm tương tác”.

Fluent Design được áp dụng rộng rãi trong hệ sinh thái của Microsoft, bao gồm:

• Windows 10 và Windows 11

• Microsoft Edge

• Office 365

• Các ứng dụng và nền tảng web

Ngoài ra, nó cũng ảnh hưởng đến nhiều thiết kế hiện đại trong các hệ thống đa nền tảng.

Tài liệu tham khảo và đọc thêm

• https://fptshop.com.vn/tin-tuc/danh-gia/fluent-design-la-gi-137517
• https://topdev.vn/blog/fluent-design-ngon-ngu-thiet-ke-moi-cua-microsoft/
• https://www.behance.net/gallery/210368867/Microsoft-Fluent-Illustration
• https://quantrimang.com/cong-nghe/fluent-design-la-gi-173139