Vượt xa Glassmorphism: Thiết kế Thủy tinh lỏng Mới của Apple

Khám phá sự chuyển dịch của Apple từ glassmorphism sang Thủy tinh lỏng (Liquid Glass). Tìm hiểu cách khúc xạ độ trung thực cao và ánh sáng động đang tái định hình thiết kế UI/UX hiện đại.

UI/UX


Apple vừa một lần nữa thay đổi cuộc chơi trong thiết kế giao diện, vượt qua những kết cấu mờ đục mà chúng ta đã quen thuộc trong vài năm qua. Trong khi toàn ngành dành thời gian dài để hoàn thiện các nền mờ của glassmorphism, gã khổng lồ công nghệ hiện đang giới thiệu một người kế nhiệm linh hoạt, hữu cơ hơn được gọi là Thủy tinh lỏng (Liquid Glass). Sự thay đổi thẩm mỹ này đại diện cho bước đi khỏi các lớp tĩnh để hướng tới một hệ thống mang lại cảm giác sống động, phản hồi nhanh và tích hợp sâu vào phần cứng mà nó trú ngụ.

Ngôn ngữ thiết kế mới này tập trung vào khúc xạ độ trung thực cao và sự tương tác ánh sáng động, tạo ra một môi trường kỹ thuật số phản ứng với đầu vào của người dùng bằng cảm giác về trọng lượng vật lý và sự sang trọng. Với tư cách là những nhà thiết kế, chúng ta đang thấy những hạn chế của glassmorphism truyền thống được thay thế bằng một trải nghiệm gắn kết và đắm chìm hơn. Apple đã cung cấp khung làm việc cho quá trình chuyển đổi này, gần đây đã thông báo rằng họ đã cập nhật các công cụ dành cho nhà phát triển để giúp những người sáng tạo xây dựng các ứng dụng tận dụng các hiệu ứng ánh sáng và chuyển động tinh vi này một cách tự nhiên.[1]

Sự tiến hóa của chiều sâu: Từ các lớp tĩnh đến Thủy tinh lỏng

Trong nhiều năm, cộng đồng thiết kế đã hoạt động trong ranh giới của glassmorphism, một phong cách được định nghĩa bởi hiệu ứng kính mờ, làm mờ hậu cảnh và các lớp bán trong suốt tạo cảm giác về thứ bậc. Mặc dù thẩm mỹ này đã phục vụ tốt trong quá trình chuyển đổi sang các giao diện hiện đại hơn, nhưng nó thường mang lại cảm giác như một tập hợp các bảng điều khiển tĩnh, rời rạc. Apple hiện đang vượt qua những hạn chế này với một ngôn ngữ thị giác mang tính biến đổi, ưu tiên tính linh hoạt hơn là hình khối.

Di sản của glassmorphism trong iOS và macOS

Kể từ khi giới thiệu iOS 7 và sau đó là Big Sur, Apple đã ủng hộ việc sử dụng các vật liệu mô phỏng đặc tính vật lý. Chúng ta đã thấy sự trỗi dậy của ‘Vibrancy’ và ‘Materials’ cho phép nội dung hiển thị xuyên qua nền, giúp người dùng duy trì ngữ cảnh khi điều hướng các ứng dụng phức tạp. Tuy nhiên, khi khả năng phần cứng phát triển, nhu cầu về một mô hình tương tác năng động và thống nhất hơn đã trở nên rõ ràng. Cách tiếp cận truyền thống đối với glassmorphism ngày càng mang lại cảm giác giống như một bộ lọc kỹ thuật số hơn là một phần sống động của hệ điều hành.

Định nghĩa yếu tố ‘Lỏng’ trong thiết kế mới của Apple

Sự chuyển dịch sang Thủy tinh lỏng giới thiệu một cấp độ khúc xạ độ trung thực cao và tương tác ánh sáng mang lại cảm giác xúc giác rõ rệt. Không giống như người tiền nhiệm, ngôn ngữ mới này coi giao diện như một chất phản ứng, chảy và phản ứng với sự hiện diện của người dùng. Theo thông báo mới nhất của Apple, thiết kế này nhằm mục đích mang lại cảm giác vừa trực quan vừa tinh tế, đánh dấu một kỷ nguyên mới của thẩm mỹ phần mềm.[2]

“Ngôn ngữ thiết kế mới này là một bước nhảy vọt đáng kể, mang lại diện mạo mới thú vị và thanh lịch cho các phần mềm mà mọi người yêu thích, tập trung vào chiều sâu, ánh sáng và chuyển động mang lại cảm giác tự nhiên hơn bao giờ hết.”

Tại sao Apple hướng tới các bề mặt hữu cơ và phản hồi nhanh hơn

Việc chuyển hướng sang các bề mặt hữu cơ là phản ứng trực tiếp đối với mong muốn của chúng ta về những trải nghiệm kỹ thuật số đắm chìm hơn. Bằng cách loại bỏ các lớp hình chữ nhật cứng nhắc và hướng tới các bề mặt thể hiện trọng lượng vật lý và chuyển động đàn hồi, Apple đang thu hẹp khoảng cách giữa tấm kính trong tay chúng ta và các điểm ảnh trên màn hình. Sự tiến hóa này đảm bảo rằng mỗi lần vuốt và chạm đều mang lại cảm giác thực tế, làm cho giao diện bớt giống một công cụ và giống như một phần mở rộng của môi trường vật lý hơn.

Tóm tắt nhanh: Sự chuyển dịch sang Thủy tinh lỏng

  • Khúc xạ động: Ánh sáng uốn cong và thay đổi theo thời gian thực dựa trên chuyển động trên màn hình.
  • Chuyển động hữu cơ: Các chuyển đổi sử dụng vật lý lò xo và đường dẫn linh hoạt thay vì đường dẫn tuyến tính.
  • Tích hợp phần cứng: Phần mềm mô phỏng các đặc tính vật lý của kính và nhôm cao cấp.
  • Chiều sâu phản hồi: Chiều sâu trục Z thay đổi dựa trên tiêu điểm của người dùng và cường độ tương tác.
UI design layers showing the transition from static glassmorphism to dynamic Liquid Glass depth.
Sự tiến hóa của chiều sâu: Từ các lớp tĩnh đến Thủy tinh lỏng: glassmorphism

Các nguyên tắc cốt lõi của thẩm mỹ Thủy tinh lỏng: Vượt xa Glassmorphism

Trong khi glassmorphism tiêu chuẩn dựa trên việc làm mờ nền tĩnh và các lớp bán trong suốt để mô phỏng chiều sâu, Thủy tinh lỏng của Apple giới thiệu một môi trường sống động và phản ứng. Ngôn ngữ thị giác mới này thoát khỏi vẻ ngoài ‘nhựa mờ’ của những năm trước; thay vào đó, nó coi màn hình như một thấu kính vật lý nơi ánh sáng hành xử theo các định luật quang học. Bằng cách vượt qua những hạn chế của glassmorphism truyền thống, các nhà thiết kế giờ đây có thể tạo ra các giao diện mang lại cảm giác kết nối hữu hình với môi trường xung quanh người dùng.

Khúc xạ động và Ánh sáng thích ứng

Đặc điểm nổi bật của Thủy tinh lỏng là cách nó xử lý ánh sáng. Thay vì sử dụng bộ lọc độ mờ đơn giản, hệ thống tính toán cách ánh sáng sẽ uốn cong tự nhiên khi đi qua một bề mặt cong. Khúc xạ động này có nghĩa là khi bạn cuộn, màu sắc và hình dạng bên dưới một bảng điều khiển không chỉ bị mờ đi; chúng dịch chuyển và biến dạng một cách tinh tế, mang lại cảm giác chân thực mà các thiết kế tĩnh không thể sao chép. Ánh sáng thích ứng này đảm bảo giao diện luôn gắn kết bất kể người dùng đang ở trong phòng tối hay dưới ánh nắng rực rỡ.

Chuyển động linh hoạt: Cách bề mặt phản ứng với chạm và di chuột

Tương tác không còn là trạng thái nhị phân ‘bật’ hoặc ‘tắt’. Trong khung làm việc Thủy tinh lỏng, các bề mặt thể hiện cảm giác về sức căng bề mặt và độ đàn hồi. Khi người dùng di chuột qua một yếu tố, lớp kính dường như bị kéo về phía con trỏ, mô phỏng cách chất lỏng phản ứng với sự hiện diện vật lý. Phản hồi xúc giác này rất cần thiết để tạo ra một trải nghiệm trực quan, nơi phần mềm dự đoán ý định của người dùng thông qua các chuyển đổi hữu cơ, phi tuyến tính.

Vai trò của chiều sâu không gian độ trung thực cao

Chiều sâu không gian trong Thủy tinh lỏng không chỉ là về bóng đổ thẩm mỹ; nó là một công cụ chức năng cho phân cấp. Bằng cách tận dụng trục Z, hệ thống truyền đạt tầm quan trọng thông qua các mức độ cao và độ dày khác nhau. Cách tiếp cận này gần đây đã được nhấn mạnh trong Giải thưởng Thiết kế Apple 2025[3], nơi sự tập trung vào tay nghề không gian cho thấy chiều sâu có thể cải thiện khả năng tiếp cận và sự tập trung như thế nào. Chiều sâu độ trung thực cao cho phép mắt ưu tiên thông tin một cách tự nhiên, làm cho các quy trình làm việc phức tạp trở nên rộng rãi và dễ quản lý hơn.

Thủy tinh lỏng không chỉ là một phong cách; nó là một mô phỏng dựa trên vật lý biến giao diện thành một môi trường phản hồi và xúc giác.

Tóm tắt nhanh: Ba trụ cột của Thiết kế lỏng

  • Độ chính xác quang học: Ánh sáng uốn cong và khúc xạ theo thời gian thực dựa trên nội dung bên dưới.
  • Phản hồi xúc giác: Các bề mặt sử dụng vật lý lò xo để phản ứng với chạm, di chuột và đà chuyển động.
  • Phân cấp không gian: Chiều sâu trục Z được sử dụng để xác định tầm quan trọng và giảm tải nhận thức.
Detailed UI components illustrating the technical principles of Liquid Glass and glassmorphism.
Các nguyên tắc cốt lõi của thẩm mỹ Thủy tinh lỏng: glassmorphism

Tại sao sự thay đổi thiết kế này quan trọng đối với các nhà thiết kế UX/UI

Sự chuyển dịch từ glassmorphism tĩnh sang Thủy tinh lỏng đại diện cho một sự thay đổi cơ bản trong cách chúng ta tiếp cận các bề mặt kỹ thuật số. Trong khi glassmorphism truyền thống dựa nhiều vào làm mờ nền cố định và các lớp độ mờ đơn giản, ngôn ngữ mới này giới thiệu một lớp trí tuệ môi trường. Đối với các nhà thiết kế, điều này có nghĩa là chuyển từ thẩm mỹ thuần túy trang trí sang một hệ thống chức năng nơi UI chủ động truyền đạt mối quan hệ của nó với không gian kỹ thuật số xung quanh.[4]

Tính năngGlassmorphism truyền thốngThủy tinh lỏng của Apple
Hành vi ánh sángTĩnh, độ mờ đồng nhấtKhúc xạ động và ánh sáng tụ quang (caustic)
Tính tương tácLàm mờ nền thụ độngBề mặt phản ứng dựa trên vật lý
Tính không gianCác lớp phẳng với bóng đổChiều sâu trục Z thực và nhận biết ánh sáng

Cải thiện khả năng tiếp cận thông qua độ tương phản và tính dễ đọc

Một trong những lời chỉ trích lớn nhất đối với xu hướng glassmorphism là xu hướng hy sinh khả năng đọc để lấy phong cách. Thủy tinh lỏng giải quyết vấn đề này bằng cách sử dụng điều chỉnh độ tương phản theo thời gian thực và chiếu sáng cạnh. Khi các yếu tố di chuyển hoặc màu nền thay đổi, hệ thống sẽ sửa đổi cường độ khúc xạ một cách thông minh để đảm bảo văn bản vẫn sắc nét. Điều này đảm bảo rằng sức hấp dẫn thẩm mỹ không bao giờ phải trả giá bằng tính bao trùm, làm cho giao diện dễ sử dụng hơn cho những người có độ nhạy thị giác.

Tạo kết nối cảm xúc thông qua các tương tác vi mô (micro-interactions)

Thiết kế ngày càng thiên về cảm giác của giao diện, không chỉ là vẻ ngoài của nó. Bằng cách tận dụng vật lý lò xo và đà chuyển động, Thủy tinh lỏng làm cho mỗi lần vuốt và chạm đều mang lại cảm giác xúc giác. Những tương tác vi mô này cung cấp phản hồi thị giác và xúc giác tinh tế mô phỏng các vật liệu vật lý, giảm ma sát giữa người dùng và thiết bị. Điều này tạo ra một cảm giác thích thú biến một tiện ích thành một trải nghiệm.

Thủy tinh lỏng thu hẹp khoảng cách giữa thế giới kỹ thuật số và vật lý bằng cách coi ánh sáng như một công cụ chức năng thay vì một bộ lọc tĩnh.

Tác động đến tính nhất quán trên các thiết bị

Cho dù người dùng đang tương tác với một thiết bị cầm tay hay điều hướng một không gian vô hạn, logic thị giác vẫn giữ nguyên. Theo các bản cập nhật mới nhất về hệ sinh thái, ngôn ngữ thiết kế này cho phép chuyển đổi liền mạch giữa các tương tác di động và môi trường điện toán không gian. Bằng cách thiết lập một công cụ vật lý thống nhất cho UI, các nhà thiết kế có thể xây dựng các ứng dụng mang lại cảm giác bản địa và trực quan trên mọi kích thước màn hình và phương thức nhập liệu.

CTA nội bộ: Sẵn sàng nâng tầm giao diện của bạn?

  • Khám phá các dịch vụ thiết kế UX/UI của chúng tôi tại Align.vn.
  • Biến đổi thương hiệu của bạn với thiết kế web hiện đại, hiệu suất cao.
  • Hợp tác với các chuyên gia hiểu rõ tương lai của tay nghề kỹ thuật số.
A sophisticated UI kit layout demonstrating how to implement Liquid Glass and glassmorphism in digital products.
Tại sao sự thay đổi thiết kế này quan trọng đối với các nhà thiết kế UX/UI

Triển khai Thủy tinh lỏng: Một tiêu chuẩn mới cho các sản phẩm kỹ thuật số

Chuyển đổi từ glassmorphism tĩnh sang thế giới năng động của Thủy tinh lỏng đòi hỏi nhiều hơn là chỉ một bộ lọc làm mờ. Nó đòi hỏi một sự thay đổi cơ bản trong cách chúng ta nhận thức về chiều sâu kỹ thuật số và khả năng phản hồi. Đối với các chủ sở hữu sản phẩm, điều này có nghĩa là đầu tư vào các nền tảng kỹ thuật cho phép các tương tác dựa trên vật lý, linh hoạt mang lại cảm giác tự nhiên như các vật liệu vật lý.

Tận dụng SwiftUI và Metal để kết xuất thời gian thực

Phép màu của Thủy tinh lỏng nằm ở khả năng phản ứng tức thì với những thay đổi của môi trường. Bằng cách sử dụng khung đồ họa Metal, các nhà thiết kế có thể đạt được các hiệu ứng khúc xạ phức tạp mà không làm giảm tốc độ khung hình. Cấp độ trung thực này đặc biệt rõ ràng trong các bản cập nhật phần mềm gần đây, chẳng hạn như những cải tiến trong iPadOS 26, đẩy lùi ranh giới về cách các lớp phần mềm tương tác với khả năng phần cứng. Những công cụ này cho phép độ chính xác cao khi kết xuất ánh sáng khi nó đi qua các bề mặt ảo, tạo ra cảm giác về trọng lượng và sự hiện diện.[5]

Cân bằng hiệu suất với các hiệu ứng thị giác cao cấp

Mặc dù thẩm mỹ rất hấp dẫn, nhưng tối ưu hóa hiệu suất vẫn là ưu tiên hàng đầu. Độ trong suốt dày đặc và làm mờ thời gian thực có thể làm tiêu hao pin nếu không được quản lý đúng cách. Các nhà thiết kế nên ưu tiên độ mờ cho các yếu tố tĩnh và dành các hiệu ứng Thủy tinh lỏng phức tạp nhất cho các thành phần tương tác vốn được hưởng lợi từ cảm giác về chiều sâu. Việc áp dụng có chọn lọc này đảm bảo giao diện vẫn nhanh nhạy và dễ tiếp cận trên tất cả các thiết bị.

Khi nào nên dùng (và khi nào nên tránh) độ trong suốt dày đặc

Ngữ cảnh là tất cả trong kỷ nguyên Thủy tinh lỏng. Lạm dụng độ trong suốt có thể dẫn đến mỏi mắt và khả năng đọc văn bản kém. Để duy trì giao diện chuyên nghiệp và sạch sẽ, hãy xem xét danh sách kiểm tra này cho lần đánh giá thiết kế tiếp theo của bạn:

Danh sách kiểm tra triển khai Thủy tinh lỏng:

  • Ưu tiên độ tương phản bằng cách đảm bảo văn bản nằm trên các lớp nền đủ tối hoặc đủ sáng.
  • Giới hạn độ trong suốt ở các thanh điều hướng chính và các nút hành động nổi để tránh gây rối nền.
  • Kiểm tra giao diện của bạn với nhiều loại hình nền khác nhau để đảm bảo khả năng đọc luôn nhất quán.
  • Sử dụng chuyển động để báo hiệu chiều sâu, cho phép các lớp dịch chuyển tinh tế khi người dùng tương tác với chúng.

Thủy tinh lỏng không chỉ là một phong cách; nó là một logic chức năng sử dụng ánh sáng và chiều sâu để dẫn dắt mắt người dùng mà không có sự cản trở của các đường viền truyền thống.

Tương lai của thiết kế giao diện: Sau kính sẽ là gì?

Việc giới thiệu Thủy tinh lỏng đánh dấu một sự rời bỏ dứt khoát khỏi thẩm mỹ tĩnh, mờ đục của glassmorphism ban đầu. Khi Apple thúc đẩy hướng tới một môi trường kỹ thuật số xúc giác và phản hồi nhanh hơn, chúng ta đang thấy ngành công nghiệp xoay trục sang các giao diện mang lại cảm giác hiện diện vật lý nhưng vẫn nhẹ nhàng về mặt thị giác. Sự thay đổi này không chỉ đơn thuần là về phong cách; đó là một sự chuẩn bị chiến lược cho một thế giới nơi màn hình không còn là phương tiện tương tác chính.

Điện toán không gian là động lực chính

Sự tiến hóa của ngôn ngữ thị giác này gắn liền chặt chẽ với sự trỗi dậy của điện toán không gian. Trong môi trường 3D, thiết kế phẳng truyền thống thất bại vì nó thiếu các gợi ý về chiều sâu cần thiết cho trực giác của con người. Thủy tinh lỏng giải quyết vấn đề này bằng cách sử dụng ánh sáng và khúc xạ để định nghĩa không gian, một kỹ thuật mà Apple đã và đang mở rộng trên toàn hệ sinh thái của mình. Ví dụ, bản thiết kế lại gần đây của giao diện Apple TV cho thấy các nguyên tắc dựa trên chiều sâu này tạo ra trải nghiệm giải trí tại gia đắm chìm và mang tính điện ảnh hơn như thế nào.[6]

Sự chuyển dịch thiết kế hậu-kính:

  • Chuyển đổi từ các lớp 2D sang các khối không gian 3D.
  • Thay thế các hiệu ứng làm mờ tĩnh bằng khúc xạ ánh sáng động.
  • Ưu tiên điều hướng dựa trên cử chỉ và theo dõi mắt thay vì chạm.
  • Sử dụng ánh sáng môi trường để quyết định diện mạo của các yếu tố UI.

Hướng tới các giao diện vô hình

Khi Google và Microsoft quan sát xu hướng này, chúng ta có thể mong đợi một phản hồi chuyển hướng khỏi các cấu trúc cứng nhắc của Material Design hoặc Fluent Design để hướng tới một thứ gì đó linh hoạt hơn. Mục tiêu cuối cùng là “giao diện vô hình”, nơi UI chỉ xuất hiện khi cần thiết và hòa quyện hoàn hảo vào môi trường vật lý của người dùng. Bằng cách làm chủ vật lý ánh sáng thông qua Thủy tinh lỏng, Apple đang dọn đường cho một tương lai nơi ranh giới giữa kỹ thuật số và vật lý trở nên hoàn toàn trong suốt.

Tương lai của UI không nằm ở việc có nhiều điểm ảnh hơn, mà ở cách thông minh mà những điểm ảnh đó tương tác với ánh sáng trong thế giới vật lý của chúng ta.

Sự tiến hóa của bề mặt kỹ thuật số

Thủy tinh lỏng đại diện cho một sự rời bỏ đáng kể khỏi thẩm mỹ tĩnh của quá khứ; đó là một sự tiến hóa tinh vi vượt xa những hạn chế của glassmorphism truyền thống. Bằng cách ưu tiên nhận thức môi trường và vật lý ánh sáng thực tế, Apple đã tạo ra một ngôn ngữ thiết kế mang lại cảm giác sống động thay vì chỉ mang tính trang trí. Khi chúng ta tiến gần hơn đến một thế giới nơi điện toán không gian và giao diện di động cùng tồn tại, khả năng phần mềm mang lại cảm giác thực tế trở nên thiết yếu. Thiết kế không còn chỉ là về những gì người dùng thấy trên màn hình, mà là cách các yếu tố đó tương tác với thế giới xung quanh họ, tạo ra một cầu nối liền mạch giữa môi trường vật lý và các công cụ kỹ thuật số của chúng ta.

Sẵn sàng hiện đại hóa sự hiện diện kỹ thuật số của bạn?

Luôn dẫn đầu đòi hỏi nhiều hơn là chỉ chạy theo xu hướng; nó đòi hỏi sự hiểu biết về các nguyên tắc cơ bản của trải nghiệm người dùng và sự hài hòa về thị giác. Tại Align, đội ngũ của chúng tôi chuyên về thiết kế UX/UI tiên tiến và phát triển hiệu suất cao, đảm bảo thương hiệu của bạn luôn ở vị trí hàng đầu trong đổi mới kỹ thuật số. Cho dù bạn đang tìm cách triển khai thẩm mỹ linh hoạt của Thủy tinh lỏng hay cần một cuộc đại tu chiến lược toàn diện, chúng tôi sở hữu chuyên môn để biến tầm nhìn của bạn thành hiện thực. Chúng tôi mời bạn truy cập align.vn để khám phá danh mục đầu tư của chúng tôi và tìm hiểu cách chúng tôi có thể nâng tầm dự án tiếp theo của bạn với các tiêu chuẩn thiết kế đẳng cấp thế giới.

Tài liệu tham khảo

Tìm hiểu thêm với Case Study đầy đủ

Blog Form(VN)

Cập Nhập Xu Hướng Thiết Kế, AI và Chiến Lược Số Mới Nhất

Hơn 2.000 người đang theo dõi các chia sẻ thực tế về UX, AI, branding, SEO và cách xây dựng những website hiệu suất cao cùng Align Insights.

Blog Form(VN)

Cập Nhập Xu Hướng Thiết Kế, AI và Chiến Lược Số Mới Nhất

Hơn 2.000 người đang theo dõi các chia sẻ thực tế về UX, AI, branding, SEO và cách xây dựng những website hiệu suất cao cùng Align Insights.

Bắt Đầu Dự Án


More

  • Blog Image

    Hiểu Về Prototyping Thông Qua Thử Thách Kẹo Dẻo Marshmallow Challenge

    Articles, Bài viết, Tất cả
  • Blog Image

    Tầm quan trọng của website trong kinh doanh

    Articles, Insights, Tất cả
  • Blog Image

    Tại sao các công ty khởi nghiệp và SME nên đầu tư vào website

    Articles, Bài viết, Insights, Phân tích, Tất cả