Fluent Design System

Bách khoa toàn thư mở Wikipedia
Buớc tưới chuyển hướng Bước tới tìm kiếm

Hệ thống Thiết kế Trôi chảy (tiếng Anh: Fluent Design System) có tên mã là dự Án Neon[1], tên chính thức là Microsoft Fluent Design System[2] là một ngôn ngữ thiết kế được phát triển năm 2017 bởi Microsoft. Fluent Design là một cải tiến của ngôn ngữ thiết kế Metro, 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, Chiều sâu, Chuyển động, Chất liệu, và Quy mô.[3] 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ờ.[4]

Sự chuyển đổi để thông Thạo là một dự án dài hạn; sơ bộ khía cạnh của những thiết kế (đặc biệt là "Tủ" mờ hiệu ứng, và "tiết lộ" hiệu ứng trên nút) đã được đưa vào cửa Sổ 10, đặc biệt trong những "mùa Thu người sáng Tạo bản Cập nhật", phát hành vào tháng 2017, cũng như một bản cập nhật cho Xbox Một phần mềm hệ thống phát hành cùng với nó. Nhiều khía cạnh của thông Thạo sẽ được giới thiệu với Windows qua thời gian.[5][6][7][8]

Các ứng dụng hiện tại của Fluent[sửa | sửa mã nguồn]

Ánh sáng (Light)[sửa | sửa mã nguồn]

Mục đích của ánh sáng là để thu hút sự chú ý và nhấn mạnh thông tin. Khi người dùng di chuột vào các thành phần UI, các dải sáng sẽ hiện lên ở viền của các đối tượng như menu hamburger và các nút bấm. Khi người dùng lựa chọn, chẳng hạn như nhấp chuột hoặc chạm, một hiệu ứng vòng tròn màu trắng xuất hiện.[9] Ngoài ra, khi chuyển qua môi trường Windows Holographic, con trỏ sẽ chuyển thành dạng một vòng tròn trắng.

Ngày 6 tháng 11 năm 2017, David Haz (nhân viên Microsoft) nói rằng nhóm đang có kế hoạch áp dụng các highlight để làm nổi bật các taskbar—nhưng Tính đến tháng 12 năm 2017 họ vẫn chưa thực hiện xong.[10]

Chiều sâu (Depth)[sửa | sửa mã nguồn]

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.[11][12]

Chuyển động (Motion)[sửa | sửa mã nguồn]

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 lạc trong trải nghiệm.[13]

Các chuyển động được kết nối[sửa | sửa mã nguồn]

Các chuyển động được kết nối là sự chuyển tiếp của các thành phần UI. Khi một nội dung thay đổi, các thành phần của nó không mất đi ngay mà sẽ dần dần trượt ra khỏi ứng dụng.[14]

Parallax[sửa | sửa mã nguồn]

Parallax di chuyển các đối tượng với ở các tốc độ khác nhau. Các thành phần "ở xa" so với người dùng sẽ di chuyển chậm hơn các thành phần "ở gần" so với người dùng. Ví dụ, ảnh nền của một danh sách sẽ di chuyển chậm hơn so với các đối tượng trên danh sách đó, tạo cho người dùng một cảm giác đồng thời về cả chiều sâu lẫn chuyển động.[15]

Phản hồi của thao tác nhấn[sửa | sửa mã nguồn]

Khi một mục được nhấn, nó chìm xuống nền trong giây lát và  sau đó quay về vị trí cũ. Hiệu ứng này hiện có ở các lát gạch sống (live tiles) ở Start menu, các nút bấm hành động nhanh ở Action Center, và các nút ở thanh địa chỉ của Microsoft Edge.[16]

Chất liệu (Material)[sửa | sửa mã nguồn]

Acrylic[sửa | sửa mã nguồn]

Chất liệu Acrylic tạo ra hiệu ứng trong mờ với một chút hiệu ứng làm nhiễu (noise effect). Một hệ thống trực quan có thể được tạo ra bằng cách sử dụng các mức trong mờ khác nhau. Ví dụ, trong một ứng dụng, bề mặt nội dung chính thường là mờ hẳn nhằm giúp người dùng dễ đọc thông tin (ngoại trừ các widget hay ứng dụng nhẹ, chẳng hạn như Máy tính), một cửa sổ phụ có thể có 80% nền Acrylic và các khung phụ có thể có tới 60% nền Acrylic. Acrylic nền (Background Acrylic) làm mờ tất cả các mục đằng sau chất liệu Acrylic. Kiểu Acrylic nội ứng dụng (In-app Acrylic) làm mờ nội dung bên trong ứng dụng.

Acrylic bị vô hiệu hóa trong một số cửa sổ cụ thể khi người dùng đang làm việc với ứng dụng khác. 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.[17]

Những sự tinh tế khác[sửa | sửa mã nguồn]

  • Các phím điều khiển có ý thức[18][19]
  • Âm thanh không gian[20]

Liên quan đến vòng lặp trước[sửa | sửa mã nguồn]

Các nguyên tắc chính của Fluent hay "khối" (Light, Depth, Motion, Material, and Scale) biến mất khỏi khái niệm phẳng mà Metro đã định nghĩa, đồ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 VistaWindows 7, bao gồm hiệu ứng trong mờ, 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.

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".[21]

Đọc thêm[sửa | sửa mã nguồn]

Tham khảo[sửa | sửa mã nguồn]

  1. ^ “Fluent Design is Microsoft's new modern UI for Windows and more”. The Verge. Ngày 11 tháng 5 năm 2017. Truy cập ngày 11 tháng 5 năm 2017. 
  2. ^ “Windows Developer on Twitter”. Twitter (bằng tiếng Anh). Truy cập ngày 11 tháng 5 năm 2017. 
  3. ^ "Fluent Design Language". Microsoft. Truy cập ngày 12 tháng 5 năm 2017. 
  4. ^ “New Windows look and feel, Neon, is officially the “Microsoft Fluent Design System””. Ars Technica. Truy cập ngày 11 tháng 5 năm 2017. 
  5. ^ “Microsoft shows off its Fluent Design changes to Windows 10”. 
  6. ^ “Microsoft’s Fluent Design System threatens to make Windows look good”. 
  7. ^ “A major new Xbox One update overhauls the dashboard with Fluent Design”. 
  8. ^ “The Xbox One is getting a major update today, including a faster dashboard”. 
  9. ^ mijacobs. “Reveal highlight - UWP app developer”. docs.microsoft.com (bằng tiếng en-us). Truy cập ngày 22 tháng 12 năm 2017.  Bảo trì CS1: Ngôn ngữ không rõ (link)
  10. ^ “No Fluent Design Reveal Highlight in Start Menu - Fall Creator's Update”. answers.microsoft.com (bằng tiếng en-US). Truy cập ngày 26 tháng 12 năm 2017.  Bảo trì CS1: Ngôn ngữ không rõ (link)
  11. ^ “Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System”. 
  12. ^ “Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices”. 
  13. ^ mijacobs. “Motion and animation in UWP apps - UWP app developer”. docs.microsoft.com (bằng tiếng en-us). Truy cập ngày 22 tháng 12 năm 2017.  Bảo trì CS1: Ngôn ngữ không rõ (link)
  14. ^ mijacobs. “Connected animation - UWP app developer”. docs.microsoft.com (bằng tiếng en-us). Truy cập ngày 31 tháng 12 năm 2017.  Bảo trì CS1: Ngôn ngữ không rõ (link)
  15. ^ mijacobs. “How to use the ParallaxView control to add depth and movement to your app. - UWP app developer”. docs.microsoft.com (bằng tiếng en-us). Truy cập ngày 22 tháng 12 năm 2017.  Bảo trì CS1: Ngôn ngữ không rõ (link)
  16. ^ mijacobs. “Pointer click animations in UWP apps - UWP app developer”. docs.microsoft.com (bằng tiếng en-us). Truy cập ngày 31 tháng 12 năm 2017.  Bảo trì CS1: Ngôn ngữ không rõ (link)
  17. ^ mijacobs. “Acrylic material - UWP app developer”. docs.microsoft.com (bằng tiếng en-us). Truy cập ngày 22 tháng 12 năm 2017.  Bảo trì CS1: Ngôn ngữ không rõ (link)
  18. ^ muhsinking. “Scroll viewer controls - UWP app developer”. docs.microsoft.com (bằng tiếng en-us). Truy cập ngày 22 tháng 12 năm 2017.  Bảo trì CS1: Ngôn ngữ không rõ (link)
  19. ^ “What's new with Microsoft Fluent Design System 'wave one' for Windows 10”. 
  20. ^ “Spatial sound design”. developer.microsoft.com (bằng tiếng en-us). Truy cập ngày 22 tháng 12 năm 2017.  Bảo trì CS1: Ngôn ngữ không rõ (link)
  21. ^ “Fluent Design System As Microsoft's Strategy To Go Beyond Common Design”. Eyerys. Truy cập ngày 20 tháng 10 năm 2017. 

Liên kết ngoài[sửa | sửa mã nguồn]