เลย์เอาต์ของแอป
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เมื่อออกแบบแอปสำหรับ Wear OS คุณควรแสดงเค้าโครงที่เลือกไว้อย่างตั้งใจ
ในแต่ละประสบการณ์ เนื่องจาก Wear OS ทำงานบนจอแสดงผลที่เป็นวงกลมและการตัดเนื้อหาจะทำมากกว่า
รูปแบบพื้นฐานมีด้วยกัน 2 หมวดหมู่ซึ่งต่างจากอุปกรณ์เคลื่อนที่
ที่คุณควรพิจารณาเมื่อออกแบบแอป
เลย์เอาต์แบบไม่เลื่อนเพื่อเน้นข้อมูลที่อ่านง่ายและมอบคุณค่าให้กับผู้ใช้
การโต้ตอบเพียงเล็กน้อยหรือไม่มีเลย ด้วยเหตุนี้ การสร้างบล็อกจึงไม่ใช่เรื่องง่าย
ลักษณะการปรับเปลี่ยนตามอุปกรณ์ในเลย์เอาต์เหล่านี้
- ทดสอบชุดค่าผสมของภาษา การปรับขนาดแบบอักษร อุปกรณ์ และตัวแปรต่างๆ
เนื้อหา
- ใช้เลย์เอาต์แบบเลื่อนไม่ได้ก็ต่อเมื่อระบบรู้จักหรือควบคุมเนื้อหาแล้วเท่านั้น
ล่วงหน้า หรือหากคุณต้องใช้การออกแบบที่เจาะจง
- ใช้ขอบด้านบน ด้านล่าง และด้านข้างที่แนะนำกับเลย์เอาต์
- กำหนดระยะขอบเป็นค่าเปอร์เซ็นต์ในตำแหน่งที่เนื้อหาอาจมี
จะถูกตัดทอน
- จัดเรียงองค์ประกอบเพื่อให้ใช้พื้นที่ภายในองค์ประกอบได้เกิดประโยชน์สูงสุด
และรักษาสมดุลระหว่างอุปกรณ์ขนาดต่างๆ
สำหรับหน้าที่มีข้อมูลมากเกินกว่าที่จะแสดงในหน้าจอเดียว หรือ
ซึ่งจำเป็นต่อการรองรับเส้นทางที่ยาวและสมจริงมากขึ้น ให้ใช้การเลื่อน
- ใช้ขอบด้านบน ด้านล่าง และด้านข้างที่แนะนำ
- ระบุระยะขอบด้านนอกเป็นค่าเปอร์เซ็นต์เพื่อป้องกันการตัดที่
จุดเริ่มต้นและจุดสิ้นสุดของคอนเทนเนอร์ที่เลื่อนได้
- ใช้ระยะขอบในค่า DP คงที่ระหว่างองค์ประกอบ UI
มุมมองการเลื่อนที่ใช้การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มักจะปรับให้เข้ากับ
ขนาดหน้าจอ อย่างไรก็ตาม ในบางกรณีพิเศษ คุณสามารถใช้เบรกพอยท์เพื่อ
ลบล้างมิติข้อมูลและเลย์เอาต์เสริมที่แสดงตัวเลือกเพิ่มเติม
มองเห็นได้ง่ายขึ้น หรือทำให้เนื้อหาพอดีกับหน้าจอมากขึ้น ตัวอย่างต่อไปนี้
แสดงวิธีการขยายปุ่ม 2 ปุ่มด้านล่างบนหน้าจอขนาดใหญ่ขึ้น ดังนี้
ชุดออกแบบ Figma
ไปที่หน้าดาวน์โหลดชุดออกแบบเพื่อสำรวจเลย์เอาต์การออกแบบที่มีในตัว
คอมโพเนนต์ ตัวเลือก และคำแนะนำในการสร้างแอปและการ์ดต่างๆ
การออกแบบที่เป็นไปตาม
แนวทางปฏิบัติแนะนำ
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา 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,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts:\n\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
