Kĩ hơn về Fluent Design: cuối cùng Microsoft cũng đã làm cho Windows đẹp lên

Duy Luân
12/5/2017 6:48Phản hồi: 150
Kĩ hơn về Fluent Design: cuối cùng Microsoft cũng đã làm cho Windows đẹp lên
Fluent Design là câu trả lời của Microsoft dành cho Material Design của Google, và đây cũng là lần đầu tiên hãng giới thiệu ngôn ngữ thiết kế theo một cách rất nghiêm túc, rất trang trọng, thể hiện quyết tâm của công ty trong việc thay đổi sản phẩm chủ lực được hàng trăm triệu người sử dụng. Mà cũng đúng thôi, Fluent Design xuất hiện ở thời điểm mà người ta đã bắt đầu có dấu hiệu nhàm chán với Windows 10 và cần một thứ để giữ cho người tiêu dùng còn hứng thú. Windows cũng bắt đầu đánh sang các mảng mới như laptop giáo dục, Win 10 ARM, Hologram và Fluent Design sẽ là một trong những chìa khóa giúp công ty thành công hơn trong tương lai.

Nếu bạn để ý thì trước đây chưa bao giờ Microsoft dành hẳn một trang riêng để nói về bộ giao diện của Windows. Kể cả khi công ty ra mắt Windows 10 và Windows 10 Mobile cũng không hề có những tài liệu giới thiệu được chăm chút kĩ lưỡng như hiện nay, thậm chí có đủ cả video, hình ảnh và Microsoft không ngần ngại nói về cái đẹp của ngôn ngữ thiết kế mà đội ngũ hãng đã nghĩ ra. Đợt làm mới giao diện mạnh mẽ nhất gần đây chính là Windows Vista, nó thoát khỏi cách thiết kế giao diện truyền thống và mãi tới bây giờ chúng ta mới lại thấy một đợt nâng cấp mới mẻ như vậy.

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 hi vọng Fluent có thể làm được.

Có 5 trụ cột hình thành nên triết lý của Fluent Design

Đầu tiên là Light, ánh sáng. "Ánh sáng có một cách riêng để thu hút sự chú ý của chúng ta. Nó ấm và đầy khêu gợi, nó trôi chảy và có ý nghĩa. Ánh sáng tạo nên không gian và cảm nhận về một nơi nào đó. Ánh sáng cũng là công cụ thực tế để biển diễn thông tin".

Trong Windows 10 Fall Creators Update, anh em sẽ thấy được cách mà Microsoft dùng ánh sáng, đầu tiên là ở các menu của ứng dụng Groove Music. 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 đó. Và bước đầu Microsoft đã thành công trong việc thu hút được sự chú ý của mình bằng ánh sáng trong bản build Windows 10 Insider mới nhất.

Khi bạn đeo kính Hologram vào, ánh sáng còn là điểm tập trung sự chú ý của bạn khi di chuyển đầu. Trong môi trường ảo thật pha trộn với nhau, điểm sáng giúp bạn biết bạn đang focus vào điểm nào trong khi vẫn đảm bảo không che mất những nội dung quan trọng khác. Bạn có thể tưởng tượng chấm sáng khi đeo kính HoloLens sẽ giống như vai trò của con trỏ chuột trên máy tính vậy.


Yếu tố thứ hai là Depth, chiều sâu. Hãy nghĩ về một cái bức tranh được sơn nhiều lớp chồng lên nhau. Mỗi lớp màu đều có tác dụng riêng, đều dùng để chuyển tải một thông điệp nhất định, hoặc để tôn những lớp khác lên cho đẹp hơn. Depth trong Fluent cũng y hệt như vậy, thông tin, giao diện sẽ được sế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. Trước đây Windows 10 đi theo hướng ngược lại, tức là chỉ dùng 1 lớp thông tin duy nhất rồi dàn trải nó ra khắp UI của hệ điều hành và phần mềm.

Trong thực tế, bạn sẽ thấy được Depth thông qua giao diện Store mới. Lúc đầu bạn xem thì hình thu nhỏ của app hay sách hay video chiếm diện tích to, nhưng khi bạn cuộn xuống thì tấm ảnh này được thu nhỏ lại và nằm đè lên một góc của ứng dụng Windows Store, kèm theo đó là menu cũng được phủ lên. Như vậy chúng ta có ít nhất 3 lớp ở đây: hình preview > menu > nội dung chính giới thiệu về app.

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


Hay như ở màn hình lock, mặc định khi bạn mới bật lên thì nó hiện Cortana và thông tin sự kiện lịch cũng như những thông tin quan trọng. Khi cần sử dụng, lớp thông tin này sẽ ẩn lại vào trong màn hình lock. Hay như trong giao diện lịch, bạn có thể bung từng tuần, từng ngày ra để xem các sự kiện đang chồng giờ lên nhau.

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. Mình đánh giá cao vụ này vì nó sẽ tạo được sự quen thuộc khi bạn xài Windows kèm chung với một cái điện thoại Android.

Quảng cáo


Yếu tố thứ ba là Motion, chuyển động. Microsoft đưa ra giải thích rất hay: 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.

Lại một lần nữa, Fluent Design chia sẻ điểm tương đồng với Material Design. Về cách triển khai thực tế hơi khác một chút nhưng ở tầm cơ bản, Material Design cũng nhấn mạnh tới việc sử dụng chuyển động để chuyển tải thông tin, để gợi ý cho người dùng, và để tạo cảm hứng cho app. Cả Fluent Design và Material Design đều cố gắng mô phỏng lại những chuyển động như ngoài đời, tức là chuyển động ban đầu nhanh dần và rồi chậm dần khi đạt gần tới đích đến chứ không phải thoắt ẩn thoắt hiện hay di chuyển quá chấm (vụ này là người dùng bực mình hơn nữa).


Yếu tố thứ tư là Material, vật liệu. Microsoft nghĩ rằng thế giới của chúng ta phong phú và thú vị vì nó được cấu thành từ nhiều loạt vật liệu khác nhau. Ví dụ, cái máy tính của bạn được làm từ kính, từ nhựa, từ nhôm. Cái quần jeans của bạn được làm từ những sợi vải, từ các mối may bằng chỉ, và từ một số nút kim loại. Khi áp dụng vào giao diện của Windows 10, Fluent Design tạo ra một cảm giác phong phú và thú vị cho người dùng.

Nói nghe có vẻ trừu tượng chứ còn trong thực tế, 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.

Nói về vụ trong mờ này, chúng ta dễ liên tưởng tới iOS và macOS hơn là Android. Ngôn ngữ thiết kế Apple đang áp dụng cho những hệ điều hành mới nhất của họ cũng sẽ dụng các mảng trong màu với tác dụng tạo điểm nhấn cả về thẩm mỹ lần tính dễ dùng. Những khu vực trong mờ thường là nơi chứa menu, toolbar, nói chung là những thứ bạn sẽ dùng rất thường xuyên, nhưng sau khi bạn click xong thì sự chú ý của bạn sẽ quay ngược trở về nội dung mà app mới mở ra. Apple cũng chẳng khác, chỉ là hãng dùng ít mảng trong mờ hơn Fluent mà thôi.

Quảng cáo


Cuối cùng là Scale, khả năng mở rộng. 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. Microsoft tự tin rằng Fluent Design có thể dùng cho hệ thống của họ từ 0D cho đến 3D.

Sự xuất hiện của Fluent Design rất quan trọng cho bản cập nhật Fall Creators vì nó là thứ mà người dùng dễ thấy nhất. Nó có thể giúp người dùng biết được rằng Microsoft cũng đang làm gì đó mới mẻ cho nền tảng của công ty chứ không phải bỏ bê nó. Những bản update trước Microsoft cũng bổ sung nhiều đấy, nhưng nếu không có thứ gì tận tay sờ, tận tay trải nghiệm hay thấy được dễ dàng thì việc thuyết phục người ta xài sẽ rất khó khăn.


Fluent Design cũng sẽ là một cách để Microsoft khẳng định với cộng đồng lập trình viên rằng hãng có chú ý tới việc thiết kế sản phẩm, và hãng sẵn sàng truyền cảm hứng cho developer cũng làm được tương tự. Qua đây chúng ta cũng thấy một Microsoft mới hơn, cởi mở hơn, hiện đại hơn và chú trọng nhiều hơn tới trải nghiệm và cảm giác của người dùng.

Ngay bây giờ anh em đã có trải nghiệm Fluent Design trong bản Windows 10 Insider mới nhất. Anh em xem thêm ở đây nhé. Trải nghiệm Project NEON trên Windows 10: Windows Vista phiên bản 2017
150 bình luận
Chia sẻ

Xu hướng

v1111
ĐẠI BÀNG
7 năm
Mới bị ép cài Win 10 cho cái máy mới mua vì Win 7 nhất quyết ko hỗ trợ các cụ ạ 😕

Untitled.png
v1111
ĐẠI BÀNG
7 năm
@chijuri Dùng được mấy ngày rồi đây bác. Đúng là ngon hơn thật 😁
Mà có cái phần mềm cần dùng nó thỉnh thoảng bị stop phát
@v1111 Tổ bà nó, lâu lâu lôi cái máy cũ ra cài lại Win7 có bản quyền kèm theo, lấy cái Key dán ở đít Active ko dk mới đau.
dtt_arc
TÍCH CỰC
4 năm
@YPMVSTAFF windows 1o thÌ cÓ liÊn quan gÌ tỚI laptop vỚI tablet ta?
Tuongnm1986
ĐẠI BÀNG
4 năm
@v1111 LoL có gì đâu nó bảo không hỗ trợ vài tính năng bảo mật thôi mà . Đã dùng win 7 thì xác định là không lăn tăn với bảo mật nữa vì hết support rồi thích thì nhích thôi .
L.D.
ĐẠI BÀNG
7 năm
Cái giao diện đơn giản như vậy thôi mà giờ mới nghĩ ra
@L.D. đơn giản thật bạn nhỉ? bạn không biết ngành thiết kế cụ thể như nào đâu, mình cũng vậy nhưng ít ra cũng biết để thiết kế ra 1 thứ gì đó họ phải thực hiện theo rất nhiều quy tắc khác nhau, đâu phải thích là làm
meodichoi
ĐẠI BÀNG
7 năm
@L.D. vaidan .ông biết mấy cái logo thương hiệu đơn giản mà bọn họa sĩ tốn bn thời gian nghĩ ra rồi mới thiết kế đc ko ? đây là cả bộ
@L.D. Câu tiền nó cứ phải từ từ và ra từng tí một, đừng nóng
18K
CAO CẤP
4 năm
@L.D. Bạn có cần tôi gửi địa chỉ nộp CV làm thiết kế cho Apple hay Microsoft hoặc Adobe luôn không.
Hiện tại vẫn thấy material design đẹp hơn: phẳng, sạch, rõ ràng.
Cài build insider mới nhất, chả thấy fluent design chỗ nào cả 😔
@dasklney vcl đang test dần dần mà bác, cứ từ từ
hade2002
ĐẠI BÀNG
7 năm
@dasklney mình cũng không thấy đâu build 16193 luôn
ldhieu8th
TÍCH CỰC
7 năm
Mic đã chịu thay đổi, ôn Ceo Ấn này cũng đã chịu cởi mở Mic. Một tín hiệu tốt. Hy vọng ổng sẽ làm cho cái windows 10 mobile tốt hơn, thu hút LVT làm ra app một cách nhanh chóng và chất lượng cái SDK hỗ trợ nhiều hơn. Mic chỉ là chưa nghiêm túc với mảng mobile hồi trước nên mới để nó đi đến nông nỗi ngày hôm nay. Bản thân WP xài ổn định mượt chỉ là Mic bỏ qua nó lâu quá. Hy vọng có công cụ chuyển App android qua W10mobile nhanh, ổn định và Universal luôn 😆
dtt_arc
TÍCH CỰC
4 năm
@ldhieu8th cÓ vẺ nhƯ bẠN Đang nhẦm qua chỦ ĐỀ windows 10 mobile.
Xấu quá
6445022
TÍCH CỰC
7 năm
Hóa ra Fluent design = Material design + trong mờ + 3D để hỗ trợ hololens =))
TonyWu
CAO CẤP
7 năm
Đẹp long lanh, nhưng các bác nhìn cái ổ C:/Windows/ hay C:/Users/ đi, như ổ rác vậy, thấy mà mà nản.
fancy90
CAO CẤP
7 năm
@TonyWu Bạn muốn nó phải như nào
@TonyWu Bác nhìn thế còn đỡ đó. Nhìn cấu trúc thư mục họ *UNIX (các Linux distro, macOS,..) đi
VD như Ubuntu
Chỉ có thư mục /home là giống với C:\Users. Còn hệ thống và phần mềm thì... bác nào rành chỉ bác đó với 😁
image352.png
Hoặc các máy Android (bản thân Android sử dụng nhân Linux nên cấu trúc thư mục gần giống với các distro linux trên PC
@TonyWu gửi cái screenshort lên đi !
zcmgyu
TÍCH CỰC
7 năm
@TonyWu Bác vào thư mục /usr trên Mac bao giờ chưa? =]]
😃😃😃 Đẹp!
egoz
ĐẠI BÀNG
7 năm
có aero ngon lành đi bỏ, déign như thằng dở từ hồi win8
@egoz 😁
@egoz Vẫn ở win 7 vì cái aero. Win 8.9.10 nhìn như xp đau mắt vợi
konkot
TÍCH CỰC
7 năm
hồi nó nghĩ ra cái thiết kế metro cũng nổ tưng bừng như thế này
@konkot Ơ, chẳng lẽ ra giao diện mới thì phải lặng lẽ, im lìm, không tung guideline cho người khác làm theo?
zcmgyu
TÍCH CỰC
7 năm
@konkot Không phải Sau đó Android, iOS và macOS cũng đú theo giao diện phẳng à =]]
lavenbut
TÍCH CỰC
7 năm
Sau khi đọc xong, kết luận : iOS xxx Android đẻ ra cái này
sirnvad
TÍCH CỰC
7 năm
@lavenbut Nhận xét chuẩn nhất.
@lavenbut Ms khởi xướng kiểu giao diện này, chỉ có điều iOS và Android sau đó làm đẹp hơn thôi.
Hiệu ứng blur khởi sướng từ win vista 2007 khi đó iphone mới ra chơi giao diện 3D, còn giao diện phẳng từ win 8 2011 lúc đó android cũng chưa có định nghĩa phẳng và cũng chạy giao diện đa nhiệm kiểu vista
Nero P
ĐẠI BÀNG
7 năm
@lavenbut Flat design do M$ khởi xướng nhưng Apple và Google học tập và làm tốt hơn thôi
Blur thì có từ thời win vista rồi.
Mà công nhận blur có noise xấu thật đấy
Giống mác phết ngon rồi
Rất mong bản cập nhật này của Microsoft
Macole
ĐẠI BÀNG
7 năm
Hi vọng một cuộc cách mạng về thiết kế, giao diện ko thể phẳng mãi được, vì phẳng ko phải là cách mắt người quan sát. Thậm chí người ta còn tra tấn bằng cách giam trong căn phòng trắng tuyệt đối, vì sao chúng ta luôn mệt mỏi khi phải làm việc trên những màn hình phẳng đơn sắc.
@Macole Cho nên thằng Google với Apple đâu có đi theo flat 😁 nó có depth hết luôn đó bác. Có mỗi Win 10 là phẳng thôi
@Duy Luân 2 ông kia còn mỗi icon là nổi thôi chứ cũng phẳng hết rồi chẳng qua nhiều flat layer chồng lên nhau thôi. IOS từ 6 qua 7 là rỏ nhất. So tinhte bây giờ với mấy năm về cũng phẳng hơn nhiều.
Nero P
ĐẠI BÀNG
7 năm
Flat design sẽ đi về đâu 😔
@Macole 3D trên VR, AR thôi chứ PC hay Phone mà 3D khó làm việc lắm. Có thời Mấy cái Android Launcher 3D phổ biến mà giờ có ai xài đâu.
Macole
ĐẠI BÀNG
7 năm
@HoangNguyen9004 Mấy laucher 3d toàn là giả, 3d hoàn chỉnh phải có cả 3 yếu tố ánh sáng, phản chiếu, đổ bóng vân bề mặt. 3d mà ko có mấy cái trên cũng bằng ko, ví dụ 2 cửa sổ nằm đè lên nhau, làm sao ta nhận ra nhanh nhất cửa sổ phía dưới nếu độ sáng phản chiếu và chiều sâu chúng y như nhau. Thứ 2 là mắt người ko sinh ra để nhìn vật thể 2d, ai cứ thử chỉnh màu nền desktop 1 màu rồi nhìn chằm chằm 1 tiếng coi sao, rồi đổi lại hình nền phong cảnh để so sánh.
@Macole Theo tui 3D hoàn chỉnh trên PC hay Phone là không cần thiết vì Màn hình nó vốn dĩ là "phẳng" - 2D thì không thể nào có cảm giác 3D thực được. Mặc khác Workspace là giới hạn nên nhồi vào quá nhiều thứ không gian làm việc càng giảm, hiệu suất cũng giảm theo.
Ngược lại AR,VR Workspace gần như vô hạn nên thoải mái chừng nào thiết bị còn dựng hình nổi.
Còn 2 cửa sổ thì màu sắc là đủ rồi thằng nào ở trên cho cái bóng nhỏ, Màu tiêu đề nổi hơn là xong. Cái này có lâu rồi mà, có điều chưa được đẹp thôi.
@Macole Mắt người được sinh ra để nhìn mọi thứ, và với mỗi một sự vật khác nhau mắt sẽ có cách xử lí phù hợp để tiếp nhận thông tin 1 cách tốt nhất

Có 2 điều mà giao diện phẳng/materia hơn giao diện 3D:

- thứ nhất: Màn hình máy tính là phẳng, thông tin được trình bày dưới dạng chữ và biểu tượng, cũng dàn theo mặt phẳng, đó là lí do dùng giao diện phẳng cho cảm giác "thật" hơn so với 3D, đó là sự thống nhất về không gian, ví dụ bạn đọc một cuốn sách, các chữ nổi lên thì bạn có cảm giác khó chịu không?

- thứ hai: Màn hình máy tính là không gian làm việc, hay kể cả là giải trí, giao diện càng đơn giản thì càng dễ tập trung vào nội dung chính, so với giao diện phẳng, giao diện 3D khiến não người phải xử lí nhiều hơn, làm giảm hiệu quả công việc, thêm nữa, 3D sẽ khiến cho hệ thống tốn nhiều tài nguyên cho việc render hơn

Còn việc bạn đưa ra ví dụ về 2 cửa sổ chồng lên nhau, thì dĩ nhiên các nhà thiết kế đã tính đến, và material design làm rất tốt trong việc phân lớp này, trước kia metro ui đã mắc phải khuyết điểm là tất cả đều bố trí trên mặt phẳng hoàn toàn thì nay fluent design đã khắc phục đc nó, có thể nói cho đến thời điểm hiện tại, khi mà mọi thứ vẫn được trình bày trên một màn hình phẳng thì giao diện phẳng vẫn là tối ưu nhất, còn sau này VR, AR, holographic phát triển thì sẽ là 1 chuyện khác
cuthune
TÍCH CỰC
7 năm
Blur của iOS + Material của Android -> Fluent Design
@Nguyễn Lê Anh Thư Blur của windows Vista + Metro UI của windows 8 thì đúng hơn.
@youremydawn Blur này của macOS 😁 blur của Windows Vista khác mà hihi

Xu hướng

Bài mới









  • Chịu trách nhiệm nội dung: Trần Mạnh Hiệp
  • © 2024 Công ty Cổ phần MXH Tinh Tế
  • Địa chỉ: Số 70 Bà Huyện Thanh Quan, P. Võ Thị Sáu, Quận 3, TPHCM
  • Số điện thoại: 02822460095
  • MST: 0313255119
  • Giấy phép thiết lập MXH số 11/GP-BTTTT, Ký ngày: 08/01/2019