Giải pháp thiết kế giao diện Fluent design

Khám phá các triết lý mới trong
ngôn ngữ thiết kế Fluent Design
của Microsoft
Các triết lý trong Fluent Design sẽ giúp giao diện Windows đoạn tuyệt với
những mặt phẳng hình chữ nhật buồn tẻ.
Bản cập nhật Fall Creators Update cho Windows 10 đã được Microsoft chính thức giới thiệu
và nó tràn ngập khả năng nghệ thuật và các tính năng hữu ích. Nó sẽ mang đến cho người
dùng tính năng Timeline để quản lý các phiên làm việc phức tạp, các API liên kết với tất cả
các dịch vụ của Microsoft với nhau, và quan trọng hơn là một mô hình thiết kế mới nhằm
mục đích thay đổi về cơ bản giao diện người dùng hình chữ nhật phẳng thường thấy với tên
gọi: Fluent Design.
Hệ thống thiết kế mới này tập trung vào năm triết lý cơ bản để giúp các nhà phát triển xây
dựng nên những giao diện người dùng sáng tạo hơn và hấp dẫn hơn, đó là: Chiều sâu, Chất
liệu, Ánh sáng, Khả năng mở rộng và Chuyển động. Những triết lý này nhằm mục đích đoạn
tuyệt hẳn với thiết kế cứng cáp, cũ kỹ của Microsoft và mở ra một tương lai mới cho trải
nghiệm người dùng tương tác.

“Giờ là thời điểm để vượt xa ra khỏi những hình chữ nhật giới hạn trên
một mặt phẳng.” Joe Belfiore đã tuyên bố như vậy khi ông giới thiệu ngôn ngữ thiết kế
mới này tại Build 2017. “Nó không chỉ là các hình ảnh thị giác, mà còn là các


mô hình và không gian tương tác, cũng như cách tất cả những điều này
kết hợp với nhau.”
Dưới đây là cái nhìn sâu hơn vào từng triết lý trên và làm thế nào nó thay đổi cách thiết kế
các ứng dụng của Windows.
Ánh sáng (Light)
Hãy hỏi bất kỳ nhà làm phim nào về điều gì quan trọng với họ, họ sẽ không ngần ngại nói
với bạn ánh sáng tác động đến mỗi cảnh phim ra sao. Với ngành thiết kế, điều này cũng
tương tự như vậy. Độ sáng tối của mỗi giao diện đều sẽ có thể thay đổi cách người dùng
cảm nhận về nó. Theo ông Belfiore, nó giúp tạo ra một không khí, một cảm giác về nơi chốn

cho ứng dụng đó.

Nhưng khi nó xuất hiện trong thiết kế của một menu hay một giao diện ứng dụng, nó còn là
công cụ quan trọng để thu hút sự chú ý của người dùng. Một nút bấm phát sáng có thể
hướng dẫn người dùng cách sử dụng một ứng dụng, hoặc nhấn mạnh một tính năng của
chương trình mà có thể họ chưa từng để ý đến nó.
Chiều sâu (Depth)
Ở vào kỷ nguyên của các menu màu ghi tăm tối và 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, Microsoft đang thử thách các nhà


phát triển khi loại bỏ mô hình này và thay thế nó bằng cách đưa thông tin và các đối tượng
thoát khỏi khung hình 2D truyền thống.

Ví dụ, thay vì trình diễn một ứng dụng xem lịch phẳng theo truyền thống, bài thuyết trình
của Microsoft tại Hội nghị Build hình dung ra một giao diện phóng to và làm nổi bật vào
các sự kiện quan trọng với người dùng một cách nhanh chóng – chương trình tạo ra ảo giác
về chiều sâu bằng cách phân lớp và sắp xếp để những sự kiện quan trọng hơn xuất hiện lớn
hơn. Hy vọng rằng với việc sử dụng chiều sâu để đưa ảo giác về môi trường vật lý vào các
giao diện, các ứng dụng Windows sẽ có thể duy trì tương tác với người dùng lâu hơn.
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, bằng cách cho họ thứ gì đó hoạt
động để nhìn vào và tương tác với nó. 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ể.


“Thiết kế Chuyển động có một quyền lực đặc biệt để đưa toàn bộ trải

nghiệm của chúng ta tới cuộc sống thực.” Ông cho biết. “Và dẫn dắt mọi
người từ nhiệm vụ này sang nhiệm vụ khác với một góc nhìn điện ảnh.”
Microsoft minh họa cho ý tưởng này với menu nổi sống động của Xbox One, hình ảnh hóa
âm nhạc trong chương trình phát media và việc chuyển đổi đồ họa từ một biểu đồ đơn giản
sang một mảng các hình khối đại diện, sáng sủa hơn, năng động hơn. Tất cả các ví dụ trên
nhanh chóng thu hút sự chú ý của người dùng khi nó đều là các tác vụ mọi người thường
làm, như điều khiển âm nhạc, quản lý thiết lập trong game, hay chỉ đơn giản giữ chú ý của
người xem tới bảng dữ liệu.
Chất liệu (Material)
Giống như các ý tưởng cốt lõi của Fluent Design, Chất liệu dường như là một sự thay đổi
đột phá cho phong cách đồ họa của Windows trong quá khứ. Các hình vuông chức năng
trong giao diện truyền thống của Microsoft có thể vẫn hoạt động được, nhưng nó thiếu tính
kết nối với thế giới thực. Belfiore gợi ý rằng điều quan trọng làm người dùng yêu thích thiết
kế ứng dụng của Windows là nó có thể mô phỏng cảm giác “nhạy cảm và đầy sinh
lực” của những chất liệu làm nên thế giới thực.


“Chúng tôi muốn mang đến cho những thiết kế của mình nhiều đặc điểm
đó hơn theo cách đúng đắn, với một chất lượng thực tế.” Ông cho biết. “Để
chào mời mọi người chạm vào và tương tác với nó.” Dù có thể yếu tố này
không mang lại các cấu trúc thú vị hơn cho ứng dụng, nhưng với Windows 10, ý tưởng về
một giao diện chạm này cho PC đem lại một số ưu điểm.
Kết hợp với bản cập nhật Fall Creators Update mới ra mắt, nó cho phép kiểm soát giọng nói
tốt hơn, tương tác cảm ứng tốt hơn và cảm giác nhập liệu bằng bút tự nhiên hơn, và nó có
thể giúp người dùng quên đi bàn phím và chuột truyền thống.
Khả năng mở rộng (Scale)
Phần lớn ngôn ngữ thiết kế mới của Microsoft dường như ưu tiên cho việc cải thiện môi
trường điện toán truyền thống – các đối tượng trên màn hình được điều khiển bằng thiết bị
ngoại vi và phụ kiện. Trong khi đó, Khả năng mở rộng lại có chút khác biệt. Với yếu tố này,
Microsoft muốn hướng đến tương lai của chính nó. Cụ thể hơn, đó là khả năng mở rộng cho

các đối tượng kỹ thuật số trong giao diện 3D và thực tế ảo/ thực tế tăng cường.


Kích thước tương đối của các vật thể kỹ thuật số là điều mà các nhà phát triển VR đã nỗ lực
làm việc trong vài năm nay – 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 thứ nhất
tốt.
Bằng cách thử thách các nhà phát triển để nghĩ về kích thước giao diện của họ trong môi
trường 3D, Microsoft đang yêu cầu họ tưởng tượng xem sản phẩm của mình sẽ trông như
thế nào qua chiếc kính Hololens của công ty.


Về lý thuyết, cả 5 triết lý thiết kế cốt lõi này có khả năng giúp các nhà phát triển Windows
tạo ra những trải nghiệm người dùng mạnh mẽ và tương tác hơn – nhưng thực sự Fluent
Design sẽ làm Windows trông như thế nào? Microsoft không tiết lộ nhiều về điều đó trong
buổi Keynote của Hội nghị Build, nhưng các hình ảnh thoáng qua về mô hình giả lập của
ứng dụng lịch và màn hình Windows mới cũng có thể phần nào cho chúng ta thấy điều đó.
Những hình ảnh này rõ ràng chỉ mới là concept tại thời điểm này, nhưng cũng thể hiện rõ
ràng các nguyên lý cốt lõi của Fluent Design. Ví dụ như màn hình desktop mới, với hiệu
ứng ánh sáng và bóng đổ, sẽ giúp xác định rõ ràng vị trí mỗi cửa sổ trong không gian vật lý.
Mỗi đối tượng trong khung cảnh lại có một cảm giác khác về khoảng cách, chất liệu, để làm
chúng hữu hình hơn so với các cửa sổ vuông truyền thống.
Vẫn còn quá sớm để chắc chắn về cách Fluent Design hoạt động, nhưng Microsoft rõ ràng
đã nghĩ về giao diện người dùng của họ theo một cách hoàn toàn khác biệt. Nó có thể trông
vẫn kỳ cục nhưng nó giúp ta kỳ vọng rằng phiên bản Windows tiếp theo sẽ có vẻ ngoài hoàn
toàn mới.
Tham khảo Engadget

Hình ảnh giao diện Windows 10

thay đổi hoàn toàn với ngôn ngữ
thiết kế mới Fluent Design
Tuy vậy nó sẽ là một hành trình thay đổi dần dần thay vì một cuộc đại tu
toàn diện và ngay lập tức.
Đúng như mọi người kỳ vọng, tại Hội nghị nhà phát triển Build 2017 ở Seattle, Microsoft đã
chính thức tiết lộ về Project Neon – dự án được đồn đại từ lâu nhằm làm mới tổng thể giao
diện UI cho Windows 10. Tuy nhiên, nó được chính thức ra mắt với một cái tên mới:
Microsoft Fluent Design System (hệ thống thiết kế trôi chảy).
Dưới đây là những hình ảnh chi tiết:
QUẢN LÝ EMAIL:


QUẢN LÝ FILE:


THỜI TIẾT/THỜI GIAN:


TRÌNH DUYỆT EDGE VỚI BÚT

TIMELINE


HOLOGRAPHIC DESKTOP


ẢNH


CÁC THỨ KHÁC

Nếu bạn đang kỳ vọng sẽ được chứng kiến một cuộc đại tu toàn diện và ngay lập tức về vẻ
ngoài của Windows 10, có lẽ bạn sẽ phải thất vọng một chút. Thay vì vậy, Fluent Design
System giống như một bước chuyển dần dần trong ngôn ngữ thiết kế của Microsoft. Nhưng
điều này không có nghĩa nó không có gì thú vị.
Fluent Design System - Ngôn ngữ thiết kế mới của Microsoft.

Trên sân khấu của hội nghị Build đang diễn ra, ông Joe Belfiore của Microsoft đã trình diễn
một số thay đổi trong ngôn ngữ thiết kế mới này. Theo đó, Fluent Design System sẽ bổ sung
thêm hàng loạt các đặc tính vào bộ UI cho các ứng dụng Windows:


- Light (ánh sáng): kiểm soát việc UI sẽ tương tác như thế nào với ánh sáng chiếu vào – điều
này đặc biệt hữu dụng trong môi trường thực tế hỗn hợp (Mixed Reality).
- Depth (chiều sâu): bổ sung thêm thông tin về độ sâu vào bộ UI cho những thứ như hiệu
ứng thị sai và một số trạng thái chuyển động phụ trong thực tế hỗn hợp.
- Motion (chuyển động): về cơ bản nó sửa chữa lại hiệu ứng hình ảnh động trong Windows.
- Material (chất liệu): Kiểm soát các kết cấu của những yếu tố UI (ví dụ như, những hiệu
ứng làm mờ trong một số ứng dụng), cũng như các yếu tố có thể “bẻ cong, co dãn
hoặc nảy lên” khi bạn tương tác với chúng.
- Scale (khả năng mở rộng): khả năng thay đổi của các ứng dụng trên các thiết bị khác nhau.
Những thay đổi trong Fluent Design System so với Metro.

Theo hướng đi này, trong khi Fluent là một sự kế thừa cho ngôn ngữ thiết kế Metro, nó sẽ
tập trung nhiều hơn vào tính trong suốt và thực tế hỗn hợp – có nghĩa là cuối cùng những
ứng dụng này sẽ làm việc được trên Hololens. Fluent Design System cũng mang đến hàng
loạt cách thức mới cho việc tương tác với máy tính, cho dù đó sẽ là bằng cảm ứng, bút, âm
thanh, ánh mắt hay cử chỉ.

Công ty cho biết, họ đã trao đổi với hàng loạt các nhà phát triển khác nhau về việc làm thế
nào để tạo ra các ứng dụng có thể chuyển đổi giữa các hình thức thiết bị như, điện thoại,
tablet, máy tính desktop và thực tế hỗn hợp.
Microsoft dự kiến sẽ triển khai các thay đổi về thiết kế này một cách từ từ. Một số thay đổi
sẽ được xuất hiện ngay trong các bản cập nhật mới cho các ứng dụng hiện tại của Windows
10, và phần nhiều sẽ bắt đầu xuất hiện trong Windows khi Microsoft phát hành bản cập nhật
Fall Creators Update và các bản cập nhật trong tương lai.
Aaron Woodman, giám đốc của Microsoft, nhấn mạnh rằng các thay đổi về thiết kế này sẽ
xuất hiện theo thời gian trong Windows và các sản phẩm khác. “Đó sẽ là một hành
trình dài.”
Tham khảo TheVerge, TheNextWeb


Windows 10 s ẽ thông minh h ơn v ới Fluent
DesWindows 10 s ẽ thông minh h ơn v ới Fluent
Design và trình duy ệt Edge c ải ti ến ign và trình duy ệt
Edge c ải ti ến

1. Bản thử nghiệm Windows 10 build 17711 cho thấy Microsoft sẽ bổ sung hiệu ứng ánh sáng
nhấp nháy, một số chỉnh sửa ở giao diện hệ điều hành trong thiết kế Fluent Design và trình
duyệt Edge.
Như chúng ta đã biết, Fluent Design từng được Microsoft chia sẻ tại sự kiện BUILD 2018.
Đây c ũng là ngôn ng ữ thi ết k ế m ới giúp h ệ đi ều hành tr ở nên s ống động, b ắt m ắt h ơn.
Microsoft cũng cho biết Windows 10 sẽ đượ c gia tăng hiệu ứng đổ bóng, mang l ại cảm
nhận về độ sâu cửa sổ ứng dụng, trình đơn thật hơn.


Cụ thể trong bản build 17711, hiệu ứng đổ bóng đã đượ c áp dụng cho m ột số trình đơn
ng ữ c ảnh, ch ẳng h ạn trình đơn khi chúng ta nh ấn ph ải chu ột. Tuy nhiên hi ệu ứng này đang
được thử nghiệm giới hạn và chúng ta có thể mong đợi sẽ thấy nhi ều hơn ở các bản build

sau.
Hi ện t ại, v ẫn còn quá s ớm để nh ận xét v ề s ự đổi m ới giao di ện ng ười dùng và Microsoft
cảnh báo người dùng có thể gặp một vài trục trặc v ới hiệu ứng đổ bóng.
Còn sự thay đổi của trình duyệt Edge ? Trong bản build 17711, người dùng có thể tùy chọn
mã màu nào đó cho Learning Tools. Tính năng mới bổ sung Line Focus giúp bài vi ết d ễ
đọc h ơn b ằng cách kh ả n ăng làm n ổi b ật 1, 3, ho ặc th ậm chí c ả 5 dòng cùng lúc.

Bên cạnh đó, Microsoft đã chỉnh s ửa n ội dung m ẫu thông tin ch ấp thu ận (consent box), yêu
c ầu ng ười dùng cho phép l ưu gi ữ các d ữ li ệu đi ền t ự động trong các bi ểu m ẫu tr ực tuy ến.
Một thay đổi lớn khác trong bản Windows 10 build 17711 là Windows HD Color trong


Display Settings. M ục này cho phép ng ười dùng thi ết đặt kh ả n ăng hi ển thị màu s ắc c ủa
màn hình, bao gồm HDR cho game, ứng dụng hoặc phát video trực tuyến trong trường
h ợp màn hình hỗ tr ợ HDR.
Ngoài ra, Registry Editor s ẽ có thêm thông tin g ợi ý khi b ạn nh ập đườ ng d ẫn trong tr ường
địa chỉ (regedit address) để tránh sai sót hoặc bạn nhớ không chính xác.

Microsoft cũng lưu ý tính năng Windows Sets đã bị gỡ khỏi bản build do cần được định
hình lại sau khi nhận được phản hồi từ người dùng. Điều này cũng có nghĩa bản cập nhật
lớn vào cuối năm nay sẽ không có tính năng này. Có lẽ Microsoft cần thêm th ời gian để
hoàn thiện tính năng này để tránh làm người dùng thất vọng.
Đừng quên Tinhte có khu vực tinhte.vn/windows, nơi bạn có thể thoải mái trao đổi, hỏi đáp
hoặc chia sẻ kinh nghiệm của mình về máy tính Windows.