Google Messages có giao diện mới tối giản hơn theo phong cách Material Design. Có những ý tưởng hay, nhưng chúng ta cũng mất đi màu sắc.
@media(max-device-width: 767px) { .ccmPlayerTextTitle { display: none; } } #ccmPlayer-1016914 .ccmPlayerPlaceHolder { vị trí: tuyệt đối; chiều rộng: 100%; chiều cao: 100%; flex-direction: cột; căn chỉnh nội dung: ở giữa; hiển thị: flex; căn chỉnh văn bản: ở giữa; ; màu sắc: #474a4f; } .ccmPLayerLoaderBox { kích thước hộp: hộp viền; chiều cao: 59px; chiều rộng: 59px; lề: 5px tự động; } .ccmPlayerTextDefault { đầu trang: -10px; vị trí: tương đối; } .ccmPlayerTextDefault:before { content: "Đang tải video của bạn"; } #ccmPlayer-1016914 .ccmPLayerLoader { màu: #fff; vị trí: tương đối; box-sizing: border-box; bên trái: -9999px; trên cùng: -9999px; chiều rộng: 0; chiều cao: 0; tràn: ẩn; } #ccmPlayer-1016914 .ccmPLayerLoader:sau, #ccmPlayer-1016914 .ccmPLayerLoader:trước { kích thước hộp: hộp viền; hiển thị: không có } #ccmPlayer-1016914 .ccmPLayerLoader.is-active { chiều rộng: 100%; chiều cao: 100%; trái: 0; trên cùng: 0; vị trí: tương đối; } #ccmPlayer-1016914 .ccmPLayerLoader.is-active:after, #ccmPlayer-1016914 .ccmPLayerLoader.is-active:before { display: block } @keyframes rotation { 0% { transform: rotate(0) } to { transform: rotate(359deg) } } @keyframes blink { 0% { opacity: .5 } to { opacity: 1 } } #ccmPlayer-1016914 .ccmPLayerLoader[data-text]:before { position: relative; trái: 0; trên cùng: 50%; màu sắc: currentColor; font-family: Helvetica, Arial, sans-serif; căn chỉnh văn bản: ở giữa; chiều rộng: 100%; font-size: 14px } #ccmPlayer-1016914 .ccmPLayerLoader[data-text=""]:before { content: "Đang tải" } #ccmPlayer-1016914 .ccmPLayerLoader[data-text]:not([data-text=""]):before { content: attr(data-text) } #ccmPlayer-1016914 .ccmPLayerLoader[data-text][data-blink]:before { animation: nhấp nháy 1 giây tuyến tính vô hạn xen kẽ } #ccmPlayer-1016914 .ccmPLayerLoader-default[data-text]:before { top: calc(50% - 63px) } #ccmPlayer-1016914 .ccmPLayerLoader-default:after { content: ""; vị trí: tương đối; chiều rộng: 48px; chiều cao: 48px; đường viền: 8px solid #474a4f; border-left-color: trong suốt; bán kính đường viền: 50%; trên cùng: calc(50% - 24px); bên trái: calc(50% - 24px); hoạt ảnh: quay 1 giây tuyến tính vô hạn } #ccmPlayer-1016914 .ccmPLayerLoader-default[data-half]:after { border-right-color: transparent } #ccmPlayer-1016914 .ccmPLayerLoader-default[data-inverse]:after { animation-direction: reverse } .ccmPlayer#ccmPlayer-1016914 { position: absolute; chiều rộng: 100%; chiều cao: 100%; màu nền: #dcdcdc; kích thước nền: bìa; flex-direction: cột; căn chỉnh nội dung: ở giữa; hiển thị: flex; căn chỉnh văn bản: ở giữa; Họ phông chữ: Roboto, sans-serif; cỡ chữ: 20px; font-weight: đậm; chiều cao dòng: 26px; màu sắc: #474a4f; } id="attachment_2636662" aria-describedby="caption-attachment-2636662" style="width: 1200px" class="wp-caption aligncenter">
Tín dụng: Adobe Stock
Đừng quá quen với giao diện Google Messages hiện tại, nó có thể sớm thay đổi hoàn toàn. Mã cho phiên bản beta 20250408 của ứng dụng thực sự ẩn nhiều thay đổi về giao diện người dùng. Android Authority đã kích hoạt chúng để cho chúng ta thấy trước những gì sẽ diễn ra trong bản cập nhật sắp tới.
Thay đổi nổi bật nhất là phong cách màu nền ít bão hòa hơn trên Giao diện người dùng mới. Ví dụ, màu xanh lá cây tươi sáng sẽ trở nên nhạt hơn nhiều, bị phai, mất độ sáng và chuyển sang màu xám khi tiếp tục mài. Ngược lại, các bong bóng tin nhắn vẫn giữ nguyên màu sắc dễ nhìn, do đó tương phản với nền, giúp làm nổi bật chúng tốt hơn và dễ đọc hơn.
Các nút chuyển đổi từ biểu tượng cảm xúc sang GIF hoặc nhãn dán đã được thiết kế lại và có giao diện hiện đại hơn. Bạn cũng có thể dễ dàng biết mình đang ở tab nào hơn nhờ màu nền phía sau văn bản của các danh mục khác nhau. Về mặt thẩm mỹ, phiên bản mới này phù hợp hơn với Material Design.
Thứ tự nội dung cũng đã thay đổi, với Photomoji di chuyển từ vị trí đầu tiên xuống vị trí cuối cùng. Google cũng đã đảo ngược thứ tự của ảnh GIF và nhãn dán, có thể là để thích ứng với thói quen của người dùng. Thanh tìm kiếm dành riêng cho biểu tượng cảm xúc đã được di chuyển xuống một bậc, đặt bên dưới các tab cho phép bạn di chuyển từ nội dung này sang nội dung khác. Điều này tạo ra sự tách biệt khỏi trường soạn tin nhắn và tránh nhầm lẫn giữa hai yếu tố.
Giao diện người dùng Google Messages được thiết kế lại có thể sớm được triển khai cho tất cả người dùng trong bản cập nhật trong tương lai.
Nguồn: Android Authority
@media(max-device-width: 767px) { .ccmPlayerTextTitle { display: none; } } #ccmPlayer-1016914 .ccmPlayerPlaceHolder { vị trí: tuyệt đối; chiều rộng: 100%; chiều cao: 100%; flex-direction: cột; căn chỉnh nội dung: ở giữa; hiển thị: flex; căn chỉnh văn bản: ở giữa; ; màu sắc: #474a4f; } .ccmPLayerLoaderBox { kích thước hộp: hộp viền; chiều cao: 59px; chiều rộng: 59px; lề: 5px tự động; } .ccmPlayerTextDefault { đầu trang: -10px; vị trí: tương đối; } .ccmPlayerTextDefault:before { content: "Đang tải video của bạn"; } #ccmPlayer-1016914 .ccmPLayerLoader { màu: #fff; vị trí: tương đối; box-sizing: border-box; bên trái: -9999px; trên cùng: -9999px; chiều rộng: 0; chiều cao: 0; tràn: ẩn; } #ccmPlayer-1016914 .ccmPLayerLoader:sau, #ccmPlayer-1016914 .ccmPLayerLoader:trước { kích thước hộp: hộp viền; hiển thị: không có } #ccmPlayer-1016914 .ccmPLayerLoader.is-active { chiều rộng: 100%; chiều cao: 100%; trái: 0; trên cùng: 0; vị trí: tương đối; } #ccmPlayer-1016914 .ccmPLayerLoader.is-active:after, #ccmPlayer-1016914 .ccmPLayerLoader.is-active:before { display: block } @keyframes rotation { 0% { transform: rotate(0) } to { transform: rotate(359deg) } } @keyframes blink { 0% { opacity: .5 } to { opacity: 1 } } #ccmPlayer-1016914 .ccmPLayerLoader[data-text]:before { position: relative; trái: 0; trên cùng: 50%; màu sắc: currentColor; font-family: Helvetica, Arial, sans-serif; căn chỉnh văn bản: ở giữa; chiều rộng: 100%; font-size: 14px } #ccmPlayer-1016914 .ccmPLayerLoader[data-text=""]:before { content: "Đang tải" } #ccmPlayer-1016914 .ccmPLayerLoader[data-text]:not([data-text=""]):before { content: attr(data-text) } #ccmPlayer-1016914 .ccmPLayerLoader[data-text][data-blink]:before { animation: nhấp nháy 1 giây tuyến tính vô hạn xen kẽ } #ccmPlayer-1016914 .ccmPLayerLoader-default[data-text]:before { top: calc(50% - 63px) } #ccmPlayer-1016914 .ccmPLayerLoader-default:after { content: ""; vị trí: tương đối; chiều rộng: 48px; chiều cao: 48px; đường viền: 8px solid #474a4f; border-left-color: trong suốt; bán kính đường viền: 50%; trên cùng: calc(50% - 24px); bên trái: calc(50% - 24px); hoạt ảnh: quay 1 giây tuyến tính vô hạn } #ccmPlayer-1016914 .ccmPLayerLoader-default[data-half]:after { border-right-color: transparent } #ccmPlayer-1016914 .ccmPLayerLoader-default[data-inverse]:after { animation-direction: reverse } .ccmPlayer#ccmPlayer-1016914 { position: absolute; chiều rộng: 100%; chiều cao: 100%; màu nền: #dcdcdc; kích thước nền: bìa; flex-direction: cột; căn chỉnh nội dung: ở giữa; hiển thị: flex; căn chỉnh văn bản: ở giữa; Họ phông chữ: Roboto, sans-serif; cỡ chữ: 20px; font-weight: đậm; chiều cao dòng: 26px; màu sắc: #474a4f; } id="attachment_2636662" aria-describedby="caption-attachment-2636662" style="width: 1200px" class="wp-caption aligncenter">
Tín dụng: Adobe Stock
Đừng quá quen với giao diện Google Messages hiện tại, nó có thể sớm thay đổi hoàn toàn. Mã cho phiên bản beta 20250408 của ứng dụng thực sự ẩn nhiều thay đổi về giao diện người dùng. Android Authority đã kích hoạt chúng để cho chúng ta thấy trước những gì sẽ diễn ra trong bản cập nhật sắp tới.
Thay đổi nổi bật nhất là phong cách màu nền ít bão hòa hơn trên Giao diện người dùng mới. Ví dụ, màu xanh lá cây tươi sáng sẽ trở nên nhạt hơn nhiều, bị phai, mất độ sáng và chuyển sang màu xám khi tiếp tục mài. Ngược lại, các bong bóng tin nhắn vẫn giữ nguyên màu sắc dễ nhìn, do đó tương phản với nền, giúp làm nổi bật chúng tốt hơn và dễ đọc hơn.
Google Messages có giao diện mới
Chúng tôi cũng lưu ý đến sự xuất hiện của các góc trên được bo tròn cho không gian trò chuyện, ngay bên dưới biểu ngữ có tên liên hệ và các biểu tượng cuộc gọi và menu. Menu ngữ cảnh để nhúng tệp đính kèm có cùng thiết kế tối giản như hình nền cuộc trò chuyện.
Các nút chuyển đổi từ biểu tượng cảm xúc sang GIF hoặc nhãn dán đã được thiết kế lại và có giao diện hiện đại hơn. Bạn cũng có thể dễ dàng biết mình đang ở tab nào hơn nhờ màu nền phía sau văn bản của các danh mục khác nhau. Về mặt thẩm mỹ, phiên bản mới này phù hợp hơn với Material Design.
Thứ tự nội dung cũng đã thay đổi, với Photomoji di chuyển từ vị trí đầu tiên xuống vị trí cuối cùng. Google cũng đã đảo ngược thứ tự của ảnh GIF và nhãn dán, có thể là để thích ứng với thói quen của người dùng. Thanh tìm kiếm dành riêng cho biểu tượng cảm xúc đã được di chuyển xuống một bậc, đặt bên dưới các tab cho phép bạn di chuyển từ nội dung này sang nội dung khác. Điều này tạo ra sự tách biệt khỏi trường soạn tin nhắn và tránh nhầm lẫn giữa hai yếu tố.
Giao diện người dùng Google Messages được thiết kế lại có thể sớm được triển khai cho tất cả người dùng trong bản cập nhật trong tương lai.
Nguồn: Android Authority
