Microsoft đưa hệ thống Fluent Design của mình lên web

Tại Build 2017, Microsoft đã giới thiệu một ngôn ngữ thiết kế hoàn toàn mới cho hệ sinh thái của mình: hệ thống thiết kế thông minh. Fluent Design được thiết lập để xuất hiện trong Windows 10 với Bản cập nhật dành cho người sáng tạo Windows 10 mùa thu sắp tới và Microsoft cũng đang đưa nó lên web. Công ty hôm nay đã tung ra một bản cập nhật lớn cho Web Framework của mình với tất cả các thành phần Fluent Design mới và nó có vẻ thực sự hứa hẹn.

Microsoft’s Fluent Design system consists of 5 different components: Depth, Motion, Scale, Material, and Light. The updated Web Framework includes 4 of these components, but the Scale component is arriving later. The company’s official website for the Web Framework includes some really beautiful demos of how the Fluent Design would look on Microsoft.com, the Microsoft Account dashboard, and the Microsoft Store. There are also a couple of interactive demos that web developers and designers can play around with it, including a demo for the Depth component and one for the Reveal effect from the Light component.

Dưới đây là một khái niệm cho thấy Microsoft.com sẽ trông như thế nào với Fluent Design:

https://youtu.be/oJnnznK_4-g

Và trên video sau, bạn có thể thấy hiệu ứng Tiêu đề có ý thức đang hoạt động. Hiệu ứng này có thể được tìm thấy trong ứng dụng Groove Music của Windows 10, nơi tiêu đề thu gọn với hoạt ảnh gọn gàng khi người dùng cuộn trên một trang.

https://www.youtube.com/watch?v=i0atXrZswwc&feature=youtu.be

Việc Microsoft đưa Thiết kế Thông thạo lên web chắc chắn là khá lớn. Công ty cần đảm bảo người dùng có được trải nghiệm nhất quán trên tất cả các thiết bị của họ và bằng cách đưa Fluent Design lên web, điều đó chắc chắn sẽ khả thi. Tất nhiên, có thể sẽ mất vài tháng hoặc thậm chí vài năm cho đến khi Microsoft bắt đầu triển khai Fluent Design trên các dịch vụ của riêng mình cho web, vì vậy đừng quá phấn khích.

Bạn có thể tìm hiểu thêm về Thiết kế thông minh trên Khung Web của Microsoft tại đây, và bạn có thể đọc tài liệu cho tất cả các thành phần ở đây. Rõ ràng là bạn không thể sử dụng điều này như cách bạn làm với Bootstrap, vì điều này bị hạn chế đối với nhân viên và đối tác của Microsoft.