การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เราได้รวมลักษณะการทํางานที่ปรับเปลี่ยนตามพื้นที่โฆษณาไว้ในเทมเพลตเลย์เอาต์ Material ของ ProtoLayout และเลย์เอาต์การออกแบบของ Figma เพื่อให้ช่องปรับเปลี่ยนโดยอัตโนมัติเพื่อรองรับขนาดหน้าจอที่เพิ่มขึ้น สล็อตได้รับการออกแบบมาเพื่อเติมเต็มความกว้างที่มี เรากำหนดระยะขอบเป็นเปอร์เซ็นต์ โดยเพิ่มระยะขอบด้านในลงในช่องที่ด้านล่างและด้านบนของหน้าจอ เพื่อพิจารณาความผันผวนของเส้นโค้งของหน้าจอเมื่อขยายขนาด
หากต้องการใช้พื้นที่หน้าจอขนาดใหญ่และพื้นที่เพิ่มเติมให้ได้ประโยชน์สูงสุด ให้พิจารณาใช้ประโยชน์จากพื้นที่หน้าจอส่วนเกินเพื่อเพิ่มคุณค่าด้วยการอนุญาตให้ผู้ใช้เข้าถึงข้อมูลเพิ่มเติมหรือตัวเลือกเพิ่มเติม การสร้างเลย์เอาต์เหล่านี้ต้องมีการปรับแต่งเพิ่มเติมนอกเหนือจากลักษณะการทํางานแบบตอบสนองที่มีอยู่แล้ว ซึ่งทำได้โดยการเพิ่มเนื้อหาที่เป็นประโยชน์ลงในเลย์เอาต์หลังจุดพัก โปรดทราบว่าจุดพักที่แนะนําจะตั้งค่าไว้ที่ขนาดหน้าจอ 225dp
ข้อกำหนดที่จำเป็น
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์: แนวทางการออกแบบที่เลย์เอาต์จะจัดรูปแบบและวางองค์ประกอบต่างๆ เช่น ปุ่ม ช่องข้อความ และกล่องโต้ตอบแบบไดนามิกเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีที่สุด มอบคุณค่าเพิ่มเติมให้ผู้ใช้โดยอัตโนมัติบนหน้าจอขนาดใหญ่โดยใช้แนวทางการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ไม่ว่าจะเป็นข้อความที่มองเห็นได้มากขึ้นในทันที การดำเนินการบนหน้าจอที่มากขึ้น หรือเป้าหมายการแตะขนาดใหญ่ขึ้นและเข้าถึงได้ง่ายขึ้น แนวทางการตอบสนองจะมอบประสบการณ์การใช้งานที่ดีขึ้นให้แก่ผู้ใช้หน้าจอขนาดใหญ่
การออกแบบที่ปรับเปลี่ยนได้: แนวทางการออกแบบที่อินเทอร์เฟซจะเปลี่ยนแปลงตามเงื่อนไขของผู้ใช้ อุปกรณ์ หรือสภาพแวดล้อมที่ทราบ การออกแบบที่ปรับเปลี่ยนได้ใน Material ประกอบด้วยการปรับเลย์เอาต์และคอมโพเนนต์
การสร้างการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์และเพิ่มประสิทธิภาพ
เราได้อัปเดตลักษณะการทำงานของเลย์เอาต์และคอมโพเนนต์เพื่อให้มีการทำงานแบบปรับเปลี่ยนตามพื้นที่โฆษณาในตัว ซึ่งรวมถึงระยะขอบและระยะห่างจากขอบตามเปอร์เซ็นต์
หากใช้เทมเพลต ProtoLayout คุณจะรับการอัปเดตเหล่านี้โดยอัตโนมัติผ่าน ProtoLayout API และบันทึกประจำรุ่นเบต้า และจะต้องระบุเฉพาะเลย์เอาต์ที่คุณเพิ่มเนื้อหาหรือคอมโพเนนต์เพิ่มเติมหลังจากจุดพักหน้าจอเท่านั้น ดูคำแนะนำและคำแนะนำทั้งหมดเกี่ยวกับวิธีใช้ประโยชน์จากหน้าจอขนาดใหญ่ได้ที่คำแนะนำเกี่ยวกับการ์ด ไทล์มีความสูงของหน้าจอคงที่ เราจึงปรับระยะห่างจากขอบเพื่อใช้พื้นที่หน้าจอที่มีอยู่อย่างจำกัดให้ได้มากที่สุดโดยไม่ทำให้เกิดการตัดที่ไม่ต้องการ
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# Responsive and adaptive design\n\nTo accommodate the increasing screen size, we've incorporated responsive behavior into the [ProtoLayout Material layout templates](https://developer.android.com/reference/kotlin/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).primaryLayout(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.wear.protolayout.ModifiersBuilders.Clickable,androidx.wear.protolayout.material3.PrimaryLayoutMargins)) and Figma design layouts, allowing the slots to automatically adapt. In essence, slots are designed to fill the available width. Our margins are set as percentages, with additional inner margins added to slots at the bottom and top of the screen, accounting for fluctuations in the curve of the screen as it enlarges.\n\nTo maximize the larger screen size and additional space, consider utilizing the extra screen space to provide more value by allowing users to access additional information or options. Achieving these layouts requires additional customization beyond the built-in responsive behavior. This can be accomplished by adding more helpful content to the layout after the breakpoint. It's important to note that the recommended breakpoint is set at the 225dp screen size.\n\nEssential terms\n---------------\n\n**Responsive design:** A design approach in which layouts dynamically format and position elements such as buttons, text fields, and dialogs for an optimal user experience. Automatically offer users additional value on larger screens by utilizing responsive design practices. Whether it's more text visible at a glance, more actions on screen, or larger, more accessible tap targets, responsive practices provide an enhanced experience for users of large screens.\n\n**Adaptive design:** A design approach in which the interface changes based on known user, device, or environmental conditions. Adaptive design in Material includes layout and component adaptations.\n\nBuilding responsive and optimized designs\n-----------------------------------------\n\nTo ensure your design layouts adapt to larger screen sizes, we have updated the behavior of our layouts and components to have built-in responsive behavior, including percentage-based margins and padding.\nIf you are using our ProtoLayout templates, you can inherit these updates automatically through the [ProtoLayout API](/design/ui/wear/guides/surfaces/tiles/reference/kotlin/androidx/wear/protolayout/material3/package-summary) and the [beta release notes](https://developer.android.com/jetpack/androidx/releases/wear-protolayout#1.3.0-beta02), and only need to supply layouts where you have added additional content or components after a screen size breakpoint. For full guidance and recommendations on how to take advantage of a larger screen size, view our [Tiles guidance](/design/ui/wear/guides/surfaces/tiles/wear/guides/surfaces/tiles). Tiles have a fixed screen height, so we've adjusted the padding to maximize the limited screen real estate without creating unwanted clipping."]]
