Điều khiển nội dung nghe nhìn
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Màn hình điều khiển nội dung nghe nhìn là một màn hình cần thiết để giúp người dùng điều khiển nội dung nghe nhìn mà họ đang nghe. Tạo các chế độ điều khiển nội dung nghe nhìn bằng bố cục gồm 5 nút để xác minh rằng bạn đã đáp ứng các mục tiêu về số lần nhấn tối thiểu. Trên những màn hình lớn có kích thước từ 225 dp trở lên, bạn có thể tăng giá trị bằng cách thêm một nút lối tắt cho một thao tác quan trọng, chẳng hạn như hàng đợi phát.
Các phần bố cục
Màn hình điều khiển nội dung nghe nhìn là màn hình có chiều cao cố định. Thanh này bao gồm 3 phần dọc có bố cục và hành vi thích ứng khác nhau.
- Phần trên cùng: Chứa thông tin chi tiết về nội dung nghe nhìn
- Phần giữa: Các nút điều khiển nội dung nghe nhìn
- Phần dưới cùng: Các nút phụ có thể định cấu hình
Những điều cần cân nhắc đối với màn hình lớn
Các chế độ điều chỉnh cho màn hình lớn đối với nội dung nghe nhìn chỉ tập trung vào màn hình điều khiển nội dung nghe nhìn. Tất cả các phần tử khác đều được ghi lại trong các mục chip, nút và hộp thoại hoặc trong danh sách phân tích hành vi trên màn hình lớn.
Bạn có thể thêm giá trị bằng cách đưa vào một nút lối tắt cho một thao tác quan trọng, chẳng hạn như hàng đợi phát. Việc sử dụng trình đơn tràn sẽ xác minh rằng chức năng bổ sung vẫn nhất quán và có thể truy cập được bất kể kích thước màn hình là bao nhiêu. Phần dưới cùng có thêm một vị trí cho nút sau điểm ngắt 225 dp, giúp số lượng nút tối đa là 2 trên màn hình nhỏ và 3 trên màn hình lớn.
Điều khiển chính
Nút điều khiển chính thường là nút phát và tạm dừng. Sau điểm ngắt 225 dp, thành phần điều khiển sẽ mở rộng từ 64 dp lên 80 dp, giúp tăng kích thước mục tiêu nhấn cho tất cả các thành phần điều khiển trong đó.
Màn hình nhỏ hơn (nhỏ hơn 225 dp)
- Vòng tròn tiến trình = 64 x 64 dp / nét 3 dp
- Nút = 54 x 54 dp / biểu tượng có kích thước 26
Màn hình lớn hơn (225 dp trở lên)
- Vòng tròn tiến trình = 80 x 80 dp / nét 4 dp
- Nút = 70 x 70 dp / kích thước biểu tượng 32
Để tuân theo các nguyên tắc về kích thước đích nhấn, chỉ hiện bố cục 2 nút trước điểm ngắt 225 dp và bố cục 3 nút sau điểm ngắt này.
Các ví dụ sau đây cho thấy nhiều cấu hình nút:
<img 1.2%="" 14 dp="" 18 dp="" 24 dp="" 32 dp="" 44 dp="" 60 dp="" 6 dp="" aligned.""="" alt="" and="" area="" be="" beneath="" bottom="" button="" center="" dots="" entire="" equal="" have="" height.="" high="" icon="" icon,="" main="" margin="" of="" optional="" right="" screen's="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-small.png" the="" to="" top="" wide.="" with="" />
Bố cục 1 nút có nội dung tràn, màn hình nhỏ hơn (192 dp)
<img 14 dp="" 18 dp="" 24 dp="" 44 dp="" 48 dp="" 72,5 dp="" aligned.""="" alt="" and="" area="" be="" bottom="" button="" center="" entire="" high="" icon="" icon,="" main="" of="" optional="" right="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-large.png" the="" to="" top="" wide.="" with="" />
Bố cục 1 nút có nội dung tràn, màn hình lớn hơn (225 dp)
Bố cục 2 nút có nội dung tràn, màn hình nhỏ hơn (192 dp)
Bố cục 2 nút có nội dung tràn, màn hình lớn hơn (225 dp)
Bố cục 2 nút (tối đa) có nội dung tràn, màn hình nhỏ hơn (192 dp)
Bố cục 3 nút có phần nội dung tràn, màn hình lớn (225 dp)
Hành vi của bảng chữ chạy
Phần đầu trang có một số điểm mới để cải thiện khả năng đọc và trải nghiệm chung:
- Lề trên là 12% trên màn hình nhỏ và 13,2% trên màn hình lớn.
- Lề bên cho tiêu đề bài hát là 17,6%
- Lề tiêu đề của nghệ sĩ là 12,5% trên màn hình nhỏ và 14,5% trên màn hình lớn.
- Tiêu đề nghệ sĩ bị cắt bớt, trong khi các dải chuyển màu 8 dp được dùng cho tiêu đề bài hát có thể cuộn. Nếu có biểu tượng, khoảng trống 8 dp bổ sung sẽ phân tách tên bài hát với biểu tượng. (Biểu tượng này không cuộn theo tên bài hát.)
Có biểu tượng
Tên bài hát không cuộn (ngắn) trên màn hình nhỏ hơn (192 dp)
Tên bài hát không cuộn (ngắn) trên màn hình lớn hơn (225 dp)
Tên bài hát (dài) có thể cuộn (căn trái) trên màn hình nhỏ (192 dp)
Tên bài hát (dài) có thể cuộn (căn trái) trên màn hình lớn (225 dp)
Tên bài hát (dài) có thể cuộn (căn giữa) trên màn hình nhỏ hơn (192 dp)
Tên bài hát (dài) có thể cuộn (căn giữa) trên màn hình lớn (225 dp)
Không có biểu tượng
Tên bài hát không cuộn (ngắn) trên màn hình nhỏ hơn (192 dp)
Tên bài hát không cuộn (ngắn) trên màn hình lớn hơn (225 dp)
Tên bài hát được căn trái / không cuộn (dài) trên màn hình nhỏ hơn (192 dp)
Tên bài hát được căn trái / không cuộn (dài) trên màn hình lớn (225 dp)
Tên bài hát (dài) có thể cuộn (căn giữa) trên màn hình nhỏ hơn (192 dp)
Tên bài hát (dài) có thể cuộn (căn giữa) trên màn hình lớn (225 dp)
Đích chạm
Các nút điều khiển chính và nút dưới cùng sử dụng không gian có sẵn để tối đa hoá mục tiêu nhấn. Kích thước đích chạm tối thiểu là 48 x 48 dp trên thiết bị Wear OS, với các biểu tượng và nút được căn chỉnh vào giữa đích chạm.
Các chế độ điều khiển chính
Màn hình nhỏ (192 dp):
- Nút điều khiển chính = 64 x 64 dp
- Nút điều khiển bên = 64 x 64 dp
Màn hình lớn (225 dp):
- Nút điều khiển chính = 80 x 80 dp
- Nút điều khiển bên = 72,5 x 80 dp
Các nút điều khiển ở dưới cùng
Màn hình nhỏ hơn (192 dp) với tối đa 2 nút:
Cả hai nút = 68 x 60 dp
Màn hình lớn hơn (225 dp) với tối đa 3 nút:
Tất cả các nút = 58 x 72,5 dp
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-07-27 UTC.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-27 UTC."],[],[],null,["# Media controls\n\nThe media controls screen is essential to help users control the media that\nthey're listening to. Create media controls using a 5-button layout to verify\nthat minimum tap targets are met. On larger screens that are 225 dp or larger,\nyou can add value by including a shortcut button for an important action such as\nplayback queue.\n\nLayout sections\n---------------\n\nThe media controls screen is a fixed height screen. It's made up of three\nvertical sections that have different responsive layouts and behavior.\n\n1. **Top section:** Contains media details\n2. **Middle section:** Media controls\n3. **Bottom section:** Configurable secondary buttons\n\nConsiderations for larger screen\n--------------------------------\n\nThe large screen adaptations for media are solely focused on the media controls\nscreen. All other elements are captured in chip, button, and dialog items or in\nthe lists breakdown of large screen behavior.\n\n### Buttons\n\nYou can add value by including a shortcut button for an important action, such\nas playback queue. Using the overflow menu verifies that the additional\nfunctionality is still consistent and accessible no matter what's the screen\nsize. The bottom section gains an additional slot for a button after the 225 dp\nbreakpoint making the maximum number of buttons 2 on smaller screens and 3 on\nlarger screens.\n\n### Main control\n\nThe main control is usually a play and pause button. After the 225 dp\nbreakpoint, the control scales from 64dp to 80dp, which increases tap targets\nfor all controls within it.\n\nSmaller screen (smaller than 225 dp)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 64 x 64 dp / 3 dp stroke\n- **Button** = 54 x 54 dp / 26 icon size \nLarger screen (225 dp and larger)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 80 x 80 dp / 4 dp stroke\n- **Button** = 70 x 70 dp / 32 icon size\n\n\u003cbr /\u003e\n\nButton configuration\n--------------------\n\nTo follow touch target size principles, show only the 2-button layout before the\n225 dp breakpoint and 3-button layouts past it.\n\nThe following examples show different button configurations: \n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button (max) Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n3 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\nMarquee behavior\n----------------\n\nThe header has a number of updates to improve readability and general\nexperience:\n\n- A top margin of 12% on smaller screens and 13.2% on larger screens.\n- Side margins for the song title of 17.6%\n- Artist title margin of 12.5% on smaller screens and 14.5% on larger screens.\n- Artist title truncates, while 8-dp gradients are used for scrolling song titles. If an icon is present, an additional 8 dp gap separates the song title from the icon. (The icon doesn't scroll with the song title.)\n\n### With an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n### Without an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\nTap targets\n-----------\n\nMain controls and bottom buttons use the available space to maximize the tap\ntarget. The minimum tap target size is 48 x 48 dp on Wear OS devices, with\nicons and buttons aligned to the center of the tap target.\n\n### Main controls\n\n\u003cbr /\u003e\n\nSmall screen (192dp):\n\n- **Main control** = 64 x 64 dp\n- **Side controls** = 64 x 64 dp \n\nLarge screen (225dp):\n\n- **Main control** = 80 x 80 dp\n- **Side controls** = 72.5 x 80 dp\n\n### Bottom controls\n\n\u003cbr /\u003e\n\nSmaller screens (192 dp) with a maximum of 2 buttons:\n\n**Both buttons** = 68 x 60 dp\n\n\u003cbr /\u003e\n\nLarger screens (225 dp) with a maximum of 3 buttons:\n\n**All buttons** = 58 x 72.5 dp\n\n\u003cbr /\u003e"]]
