UX
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

ระดับ 2 — เพิ่มประสิทธิภาพสำหรับหน้าจอขนาดใหญ่
อินเทอร์เฟซผู้ใช้คือแอปสำหรับผู้ใช้ UI เป็นตัวกำหนดประสบการณ์ของผู้ใช้ ซึ่งส่งผลต่อความพึงพอใจของผู้ใช้ การใช้งานแอป การซื้อในแอป การเก็บรักษาลูกค้า
หน้าจอขนาดใหญ่มีพื้นที่แสดงผลที่กว้างขวางสำหรับ UI ที่ล้ำสมัยและปรับเปลี่ยนได้ ซึ่งให้ UX ที่หน้าจอขนาดเล็กไม่สามารถเลียนแบบได้
เพิ่มประสิทธิภาพแอปสำหรับหน้าจอขนาดใหญ่โดยใส่องค์ประกอบ UI ต่อไปนี้
- แถบข้างสำหรับไปยังส่วนต่างๆ หรือลิ้นชักการนำทาง
- เป้าหมายการสัมผัสขนาดใหญ่
- เมนูและกล่องโต้ตอบอยู่ในตําแหน่งที่เหมาะสม
- เลย์เอาต์แบบหลายแผง
เลย์เอาต์ที่ปรับเปลี่ยนได้
สร้างเลย์เอาต์ที่ปรับเปลี่ยนได้ซึ่งเพิ่มประสิทธิภาพ UI ของแอปบนหน้าจอขนาดใหญ่และขนาดเล็ก
ออกแบบและสร้างสำหรับอุปกรณ์หลายรูปแบบพร้อมกัน ทําให้แอปรองรับการใช้งานในอนาคตสําหรับอุปกรณ์ประเภทใหม่ๆ
เลย์เอาต์ Canonical
ใช้ประโยชน์จากเลย์เอาต์หน้าจอขนาดใหญ่ที่ผ่านการพิสูจน์แล้วเพื่อทำให้ UX ของแอปโดดเด่น
สร้างรายละเอียดรายการ แผงสนับสนุน หรือเลย์เอาต์ฟีดเพื่อให้จัดการเนื้อหาได้มากขึ้นและสนุกยิ่งขึ้น
UI ที่ปรับเปลี่ยนตามพื้นที่โฆษณา
จัดรูปแบบองค์ประกอบ UI ตามขนาดหน้าจอ จำกัดความกว้างของปุ่ม การ์ด และช่องข้อความที่เต็มความกว้างบนหน้าจอขนาดเล็กให้มีขนาดที่เหมาะสมกับการใช้งานบนหน้าจอขนาดใหญ่ อย่าให้กล่องโต้ตอบและหน้าต่างโมดัลอื่นๆ แสดงเต็มหน้าจอ วางตำแหน่งเมนูตามบริบทและป๊อปอัปอื่นๆ ที่เกี่ยวข้องกับองค์ประกอบให้แสดงอยู่ติดกับองค์ประกอบที่ผู้ใช้เลือก ไม่ใช่อยู่ตรงกลางหน้าจอ
การฝังกิจกรรม
อัปเดตแอปเดิมที่อิงตามกิจกรรมด้วยเลย์เอาต์หลายแผงบนหน้าจอขนาดใหญ่ ไม่ต้องมีการปรับโค้ด กำหนดค่าเลย์เอาต์ใน XML หรือด้วยการเรียกใช้ Jetpack WindowManager API เพียงไม่กี่ครั้ง
ขั้นตอนถัดไป
ดูข้อมูลเกี่ยวกับการพัฒนา UI เพื่อเพิ่มประสิทธิภาพ UX ได้จากคู่มือนักพัฒนาซอฟต์แวร์ต่อไปนี้
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา 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,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]