Cách các công ty lớn thiết kế phiên bản cải tiến UI: Tóm tắt thiết kế QQ Music 11.0

QQ Music giới thiệu phiên bản 11.0 mới mẻ và năng động, tiếp tục triết lý thiết kế trẻ trung. Phiên bản này tập trung khám phá những hướng mới về trải nghiệm âm nhạc, không chỉ qua âm thanh mà còn mở rộng sang các cảm nhận khác như nhìn, đồng hành, tương tác, và nhịp điệu. Mục tiêu là mang lại cho người dùng những trải nghiệm đa chiều và phong phú hơn về âm nhạc.

I. Màn hình khởi động – Bao quát và mở ra nhiều khả năng: “Nghe những gì tôi muốn nghe”

Khẩu hiệu mới “Nghe những gì tôi muốn nghe” thể hiện quan điểm và sự quyết tâm của người dùng. Mặt khác, nó cũng để lại sự tưởng tượng mở rộng về những gì người dùng muốn nghe. Màn hình khởi động gồm các yếu tố như vũ trụ bao la, đĩa than, nốt nhạc, phổ âm thanh (MUSIC) và sự tưởng tượng của người dùng (DIMENSION) tạo nên “hành tinh âm nhạc” của QQ Music.

II. Thiết kế giao diện người dùng – Nhẹ nhàng và trong suốt, tập trung vào trọng tâm

Với sự thịnh hành của xu hướng thiết kế phẳng, giao diện nhiều ứng dụng trở nên tương tự nhau. Nhóm thiết kế của QQ Music đã tìm kiếm phong cách cá tính riêng cho ứng dụng, dựa trên các từ khóa “trẻ trung, mới mẻ, năng động”. Họ thử nghiệm các ngôn ngữ và phong cách thiết kế nhẹ nhàng, trong suốt, với cảm giác chất liệu nhẹ. Để tăng cường cảm nhận về sự thay đổi, họ tập trung vào các giao diện trọng điểm như Trang cá nhân, Thư viện nhạc, Trang phát nhạc, thanh Tab ở dưới ứng dụng và màu xanh thương hiệu.

Trang cá nhân

Hai khu vực lớn nhất được cải tiến trên trang cá nhân là thẻ thông tin người dùng và khu vực tích lũy tài sản.
Thiết kế thẻ thông tin cá nhân nhằm tăng tính trong suốt và dễ sử dụng, sắp xếp lại các thông tin, giúp các yếu tố không còn dính chặt vào nhau, mỗi khối thông tin rõ ràng, có khoảng trống phù hợp giữa các vùng, tạo cảm giác không gian và phân tầng rõ ràng.
Đối với khu vực tích lũy tài sản của người dùng, thay vì sử dụng các biểu tượng truyền thống, lần này họ thử nghiệm với hiệu ứng gradient màu ảo ảnh + ảnh bìa album, tạo cảm giác như một lớp giấy bọc đĩa than trong suốt. Đồng thời, họ cũng thêm tính năng phát/tạm dừng nhanh, rút ngắn các thao tác cốt lõi của người dùng khi nghe nhạc.

Cập nhật biểu tượng

Biểu tượng là một ngôn ngữ hình ảnh khác ngoài văn bản. Trong bản cập nhật này, nhóm thiết kế đã xử lý theo các hướng sau:

• Về hình thức: Tối ưu hóa các biểu tượng không rõ ý nghĩa, tổng thể làm cho kiểu dáng biểu tượng trở nên nhẹ nhàng, bo tròn.
• Về màu sắc: Chuyển từ màu xanh lá cây tương phản cao của giao diện cũ sang màu xanh huỳnh quang trẻ trung, năng động hơn.
• Về chất liệu: Phá vỡ cảm giác phẳng đơn điệu của trước đây, thêm vào biểu tượng hiệu ứng gradient hai màu xanh huỳnh quang và xám, cảm giác trong suốt, nhiều chi tiết, nhiều điểm nhấn.

Đồng thời, họ cũng đồng nhất hóa biểu tượng trên trang phát nhạc và ActionSheet.

III. Trang phát nhạc – Trải nghiệm đa giác quan

Ở phiên bản 10.0 trước đó, trang phát nhạc đã giới thiệu nền video. Để tiếp tục mở rộng và làm phong phú thêm trải nghiệm “nhìn” + “nghe” đa giác quan, nâng cao cảm giác ngắm nhìn âm nhạc cho người dùng, phiên bản 11.0 đã thực hiện thêm nhiều hiệu ứng động trên nền trang phát nhạc.

Nhìn thấy màu sắc của âm nhạc – Gradient nhiều màu
Ảnh bìa album là cách biểu đạt âm nhạc ở khía cạnh thị giác của nghệ sĩ, tồn tại mối liên hệ vượt qua giác quan giữa ảnh bìa và bài hát. Nhóm thiết kế đã nâng cấp hiệu ứng “màu ảo” trên nền trang phát nhạc, trao cho âm nhạc thêm nhiều lớp ý nghĩa và chiều sâu.

Gradient màu phong phú, mượt mà có thể tạo không khí, truyền tải cảm xúc. Hiệu ứng gradient nhiều màu sử dụng cấu trúc hai lớp:

• Lớp trên – Tất cả thông tin điều khiển bằng “màu ảo” sáng
• Lớp dưới – Hiệu ứng gradient động

Những gradient nhiều màu này được sinh ra từ thu thập và tính toán màu sắc trên ảnh bìa album, áp dụng các quy tắc can thiệp màu để tạo ra hai “màu ảo” liên quan, rồi ghép chúng thành gradient cuối cùng.

Các “màu ảo” được ánh xạ vào các chất liệu động, giúp mỗi album có màu sắc chảy động, hòa quyện cùng âm nhạc.

Trong quá trình cải tiến thiết kế QQ Music phiên bản 11.0, nhóm thiết kế đã thực hiện những nỗ lực sau:

1. Nhìn thấy nhịp điệu của âm nhạc – Hiệu ứng ánh sáng động

Ngoài gradient màu sắc nhẹ nhàng giúp người dùng nhìn thấy sự đa dạng của bài hát, “nhịp điệu” cũng là một yếu tố quan trọng để cảm nhận âm nhạc. Để mở rộng khả năng cảm nhận nhịp điệu của người dùng, họ đã thiết kế các hiệu ứng ánh sáng động dựa trên nhịp điệu mạnh yếu của bài hát.

Hiệu ứng ánh sáng động có cấu trúc 4 lớp, giúp tăng cường sức mạnh trực quan của bài hát mà không ảnh hưởng đến truyền tải thông tin:
– Lớp trên – Tất cả thông tin đều điều khiển bằng “màu ảo” sáng
– Lớp thứ 2 – Lớp che phủ “màu ảo” tối
– Lớp thứ 3 – Video hiệu ứng ánh sáng động
– Lớp dưới – Nền “màu ảo” tối

Bằng cách chồng chéo nhiều lớp này, họ đạt được hiệu ứng ánh sáng động mạnh mẽ và phong phú.

2. Minibar

Họ cũng áp dụng gradient nhiều màu và hiệu ứng ánh sáng động lên Minibar, mang lại sự phấn khích và trẻ trung cho giao diện tổng thể, đây là một nỗ lực táo bạo về mặt trực quan.

3. Hiệu ứng lời bài hát – Trải nghiệm nghe nhìn đắm chìm

Âm nhạc truyền tải cảm xúc thông qua quy luật âm thanh, và lời bài hát đóng vai trò hỗ trợ trong quá trình diễn đạt âm nhạc. Lời bài hát là ngôn ngữ, giúp người dùng cảm nhận và hiểu vẻ đẹp của âm nhạc cũng như ý định sáng tác.

Lời bài hát có hiệu ứng được kết hợp video + lời bài hát, tạo trải nghiệm đọc lời bài hát sâu lắng hơn cho người dùng.

Trong phiên bản QQ Music 11.0 mới, người dùng có thể tự do lựa chọn giữa 5 hiệu ứng lời bài hát khác nhau: Sóng nước gấp, Công viên hip-hop, Mơ tím, Hầm thời gian, Ánh sáng đêm tối.

Ngoài ra, phiên bản này còn giới thiệu tính năng bản thảo hợp âm guitar thông minh do AI tạo ra, thể hiện khả năng trực quan hóa và tương tác với tính năng cốt lõi này.

Về cài đặt ưu tiên, người dùng có thể trực quan thấy được sở thích âm nhạc của mình, đồng thời điều chỉnh ưu tiên, tăng hoặc giảm các khía cạnh âm nhạc được đề xuất, thực sự đạt được “nghe những gì tôi muốn nghe”.

Cuối cùng, về tính năng tương tác vui nhộn:

Cùng nghe – Vượt qua khoảng cách, nuôi dưỡng cảm xúc trong tần số chung
Âm nhạc có thể thưởng thức một mình, nhưng cũng có thể dùng để giao tiếp và kết bạn. Ở đây, cốt lõi là duy trì cảm xúc. Egồm thể hiện cảm xúc tức thời và sử dụng đối tượng cảm xúc để chứng kiến và duy trì mối quan hệ. Để đáp ứng hai nhu cầu này, họ đã thiết kế tương tác biểu tượng cảm xúc và ký tự trái tim.

Nhóm thiết kế đã nỗ lực mang lại trải nghiệm âm nhạc phong phú và sâu lắng hơn cho người dùng QQ Music ở phiên bản 11.0 này.

Tóm lại, trong phần “Trái tim của âm nhạc” (Lech心) này, nhóm thiết kế đã cung cấp một tính năng cho phép người dùng chia sẻ cảm xúc, cảm hứng khi nghe nhạc. Đây là nơi người dùng có thể:

– Chia sẻ bài hát họ đang nghe cùng những cảm xúc, trải nghiệm tâm hồn mà âm nhạc mang lại cho họ. Có thể là khơi gợi những kỷ niệm yêu quý, phù hợp với tâm trạng hiện tại, hoặc thể hiện cảm nhận về ca sĩ/tác phẩm.

– “Trái tim của âm nhạc” thể hiện nghĩa rộng là nội dung của âm nhạc, cũng như sự thoải mái, an vui mà âm nhạc mang lại.

Tính năng này cho phép người dùng chia sẻ, tương tác, nhận được sự quan tâm, động viên và cộng hưởng từ cộng đồng.

Ngoài ra, nhóm thiết kế cũng giới thiệu tính năng M-PETS, là một sự thử nghiệm về gamehoá và xã hội hoá trên nền tảng QQ Music. Với hai chức năng chính là thú cưng đồng hành và đi xem liveshow, M-PETS mang đến trải nghiệm âm nhạc mới lạ và thú vị cho người dùng.