Microsoft Fluent Design

Fluent Design – Ngôn ngữ thiết kế đa nền tảng của Microsoft

Last updated on Tháng Ba 10th, 2020 at 01:29 chiều

Fluent Design có tên chính thức là Microsoft Fluent Design Systemmột ngôn ngữ thiết kế được phát triển vào năm 2017 bởi Microsoft. Fluent Design là cải tiến của Metro Design. 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 (Dept), 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ờ.

Microsoft Fluent Design

Tham vọng của Microsoft về Fluent Design System

Mở đầu cho Fluent Design, Microsoft nói về nó như sau: “Một hệ thống thiết kế trôi chảy dành cho một thế giới phức tạp“. Ý của công ty đó là Fluent có thể dùng cho rất nhiều thứ chứ không chỉ riêng Windows 10 trên máy tính, và hãng tin rằng đây chính là ngôn ngữ thiết kế chung mà mọi người có thể sử dụng. Táo bạo, có khả năng biến hóa, và dễ dùng chung chính là những đặc tính mà Microsoft hy vọng Fluent có thể làm được.

Từ khi Windows 8 ra đời và sau đó là Windows 10 thì Metro Design với phong cách tối giản, phẳng hóa mọi thứ là ngôn ngữ thiết kế chính của các sản phẩm hệ sinh thái Microsoft.

Nhưng hiện nay, sự phát triển của các thiết bị ngoại vi như kính thực tế ảo, cũng như sự nhàm chán dần dần của người dùng với thiết kế phẳng đặt ra yêu cầu về một ngôn ngữ thiết kế đổi mới.

Câu trả lời của Microsoft chính là Fluent Design.

Fluent Design là cải tiến của Metro Design
Fluent Design là cải tiến của Metro Design

Những yếu tố chính tạo nên Fluent Design

Ánh sáng (Light)

Ánh sáng (Light) là công cụ quan trọng để thu hút sự chú ý của người dùng.

Nếu như trước đây bạn rê chuột lên một menu nào đó thì nó chỉ đổi màu sáng hơn so với xung quanh thì ngôn ngữ Fluent nâng nó lên tầm mới: bạn sẽ có những vệt sáng chạy theo con trỏ chuột của bạn, rê chuột tới đâu thì vùng sáng sẽ chạy lên tới đó.

Chiều sâu (Dept)

Hai thứ LightDepth giúp ứng dụng đẹp hơn, mượt mà hơn, cảm giác thân thiệt hơn. Cũng như cách mà Metro Design đem tới cho người dùng.

Ngôn ngữ thiết kế Metro phẳng, ngắn ngủi, Microsoft hầu như chỉ dựa vào các khung hình vuông vức buồn tẻ, để cung cấp cho người dùng thông tin và công cụ.

Còn với Fluent Design thi toàn bộ thông tin, giao diện sẽ được xếp thành nhiều lớp chồng lên nhau. Microsoft tin rằng bằng cách này họ có thể cung cấp được nhiều thông tin hơn trong một không gian hẹp hơn trước.

Ứng dụng windows được làm mới

Yếu tố này của Fluent Design rất giống Material Design của Google ở chỗ Googel cũng muốn dùng nhiều lớp thông tin chồng lên nhau. Mỗi lớp thông tin như vậy được Google mường tượng như một tờ giấy, bạn có thể chồng nhiều tờ giấy lên nhau cho tới khi bạn ra được thông tin cần thiết.

Chuyển động (Motion)

Chuyển động (Motion) – Một giao diện hình ảnh động đẹp có thể là một yếu tố hấp dẫn, nhưng các hiệu ứng chuyển động mới là thứ giúp thu hút sự chú ý của người dùng, hãy nghĩ về một bộ phim, nó thu hút sự chú ý của bạn và giữ bạn trên ghế nhờ vào những chuyển động mượt mà giữa các khung hình.

Microsoft tin rằng trải nghiệm này giúp hãng tiếp cận gần hơn với người dùng và đưa thêm yếu tố gần gũi với cuộc sống vào một thứ vốn khô cứng nhưng vẫn phải xài hằng ngày.

Parallax

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.

The response of pressing action

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 Chromium.

Joe Belfiore so sánh việc sử dụng chuyển động trong Fluent Design giống như việc một đạo diễn sử dụng các cử động để dẫn dắt người dùng vào câu chuyện mà họ muốn kể.

Ứng dụng windows được làm mới

Chất liệu (Material)

App Windows 10 làm theo phong cách Fluent sẽ có những mảng trong mờ. Chính cái trong mờ này là một loại vật liệu mà Microsoft nghĩ rằng sẽ trở thành điểm đặc trưng cho Windows 10, khi kết hợp với các “vật liệu” giao diện như trước giờ sẽ tạo nên sự hứng khởi và mới mẻ cho cả những người mới hay đã xài Windows 10 từ lâu.

Acrylic

Material 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.

  • 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.

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, 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.

Material trong Fluent Design System
Material trong Fluent Design System

Đọc tới đây, chúng ta có đã có cảm giác rất giống những gì Material Design đang làm. Nhưng khi nhìn vào concept Fluent Design bên trên, chúng ta có thể thấy sự khác biệt, Material Design tập trung vào nội dung, làm nổi khối nội dung chính trên nền phẳng, thu hút người dùng. Fluent Design không chỉ làm nổi khối nội dung mà toàn bộ giao diện đều được làm dạng vật thể, và làm hiệu ứng ánh sáng cho cả nền giao diện.

Tỷ lệ / Khả năng mở rộng (Scale)

Chúng ta đang xài máy tính, điện thoại, vốn là những giao diện chỉ 2D mà thôi.

Khi đem vào một thế giới 3D như HoloLens thì đòi hỏi một giao diện phải trực quan hơn, đẹp hơn, dễ xài hơn chứ bạn không thể chỉ đơn giản là trải một app rộng ra.

Một vật thể có kích thước đúng trên màn hình nhưng có thể cực lớn hoặc cực nhỏ khi nhìn qua kính VR hoặc AR. Vì vậy, tạo ra một kích thước đúng cho các đối tượng ảo là điều tối quan trọng để có được một giao diện người dùng tốt nhất.

Microsoft tự tin rằng Fluent Design có thể dùng cho hệ thống của họ từ 0D cho đến 3D.

Office 365 Fluent Design
Office 365 Fluent Design

Hiện tại Fluent Design đã được triển khai trên một số ứng dụng Windows như bộ icon Office 365, ứng dụng Notepads mới. Mời các bạn vào Windows Store và tải về trải nghiệm cùng Blog kiến thức công nghệ nhé !

Xem thêm: 5+ Ứng Dụng Quản Lý Mật Khẩu Dành Cho Android 2020

(Visited 219 times, 1 visits today)

Leave a Reply

avatar
  Subscribe  
Notify of