เค้าโครงคือเทมเพลตเชิงโครงสร้างที่ให้กรอบงานสำหรับการบำรุงรักษา ความสอดคล้องกันทั้งหมดในแอปพลิเคชัน ด้วยการกำหนดตารางกริดภาพ ระยะห่าง และส่วนต่างๆ เลย์เอาต์จะสร้างโครงสร้างที่สอดคล้องและเป็นระเบียบสำหรับ การนำเสนอข้อมูลและองค์ประกอบ UI
![ภาพหน้าปกสำหรับเลย์เอาต์](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/cover-layouts.webp?hl=th)
ไฮไลต์
- ทีวีมีสัดส่วนภาพหน้าจอคงที่ที่ 16:9 ซึ่งต่างจากเว็บหรืออุปกรณ์เคลื่อนที่
- เพิ่มประสิทธิภาพเลย์เอาต์ตามแกนแนวนอนและแนวตั้งเพื่อให้ใช้งานได้ง่าย และการควบคุม
หลักการต่างๆ
หลักเกณฑ์ที่จะช่วยคุณตัดสินใจด้านการออกแบบเมื่อออกแบบเลย์เอาต์ทีวี
![ออกแบบสำหรับหน้าจอขนาดใหญ่](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/design-for-large-screens.webp?hl=th)
ออกแบบสำหรับหน้าจอขนาดใหญ่
นับตั้งแต่ที่ HDTV ได้รับความนิยม ทีวีสี่เหลี่ยมผืนผ้าที่มีสัดส่วนภาพ 16:9 ได้กลายมาเป็นรูปแบบมาตรฐาน ก่อนหน้านี้ โทรทัศน์จะผลิตขึ้นในรูปทรงสี่เหลี่ยมจัตุรัส หรือที่เรียกว่าสัดส่วนภาพ 4:3 หรือ 1.33 ต่อ 1
![ออกแบบสำหรับ Android](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/design-on-android-platform.webp?hl=th)
ออกแบบบนแพลตฟอร์ม Android
เมื่อออกแบบ ให้ใช้ dp เพื่อแสดงองค์ประกอบอย่างเท่าเทียมกันในหน้าจอที่มีความหนาแน่นต่างกัน เช่นเดียวกับอุปกรณ์อื่นๆ ที่ใช้ Android ออกแบบที่ความละเอียด MDPI ที่ 960px * 540px เสมอ
ที่ MDPI 1px = 1dp
เนื้อหาต้องมุ่งเป้าไปที่ 1080p วิธีนี้จะช่วยให้ระบบ Android ลดขนาดองค์ประกอบเลย์เอาต์เป็น 720p หากจำเป็น
![ตรวจสอบระดับการเข้าถึง](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/ensuring-visibility-and-overscan-safety.webp?hl=th)
ตรวจสอบความปลอดภัยในการมองเห็นและโอเวอร์สแกน
ตรวจสอบให้แน่ใจว่าองค์ประกอบสำคัญจะปรากฏต่อผู้ใช้เสมอ โดยให้จัดตำแหน่งองค์ประกอบโดยให้ด้านซ้ายและขวาเท่ากับ 48dp 5% และ 27dp ที่ด้านบนและด้านล่างของเลย์เอาต์ วิธีนี้ช่วยให้องค์ประกอบหน้าจอของเลย์เอาต์อยู่ภายในโอเวอร์สแกน
![แสดงแบบเต็มหน้าจอ](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/fill-the-full-screen.webp?hl=th)
แสดงแบบเต็มหน้าจอ
อย่าปรับหรือตัดองค์ประกอบหน้าจอพื้นหลังออกไปยังพื้นที่ปลอดภัยที่โอเวอร์สแกน แต่อนุญาตให้แสดงองค์ประกอบนอกหน้าจอได้บางส่วนแทน ซึ่งจะช่วยให้ทุกหน้าจอแสดงองค์ประกอบพื้นหลังและนอกหน้าจอได้อย่างถูกต้อง
![เพิ่มประสิทธิภาพด้วยแกน](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/optimize-with-axes.webp?hl=th)
เพิ่มประสิทธิภาพด้วยแกน
ลองพิจารณาว่าผู้คนใช้รีโมตคอนโทรลกับทีวีอย่างไร ตรวจสอบว่าอินเทอร์เฟซ TV ใช้งานด้วยรีโมตได้ง่าย ออกแบบแต่ละทิศทาง (ขึ้น ลง ซ้าย ขวา) ให้มีจุดประสงค์และรูปแบบการนำทางที่ชัดเจน เพื่อช่วยให้ผู้ใช้เข้าใจวิธีผ่านตัวเลือกกลุ่มใหญ่ๆ
เลย์เอาต์
หน้าจอทีวีมีขนาดแตกต่างกันไปในแต่ละอุปกรณ์ เนื่องจากทีวีสมัยใหม่มี สัดส่วนภาพ 16:9 ขอแนะนำให้ออกแบบแอปโดยใช้ หน้าจอขนาด 960 x 540 พิกเซล วิธีนี้ช่วยให้มั่นใจว่าองค์ประกอบทั้งหมดสามารถ ปรับขนาดตามสัดส่วนสำหรับหน้าจอ HD หรือ 4K
ขอบโอเวอร์สแกน
ระยะขอบของโอเวอร์สแกนคือช่องว่างระหว่างเนื้อหา และ ขอบซ้ายและขวาของหน้าจอ
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
ขอบขอบเหล่านี้จะปกป้ององค์ประกอบหลักจากปัญหาโอเวอร์สแกนที่อาจเกิดขึ้น ใช้รูปแบบส่วนต่าง 5% เพื่อรักษาความปลอดภัยของเนื้อหาและข้อมูล (58dp ที่ด้านข้างและ 28dp ที่ขอบด้านบนและด้านล่าง)
คอลัมน์และรางน้ำ
โดยวางเนื้อหาไว้ในพื้นที่ต่างๆ ของหน้าจอที่มีคอลัมน์และรางน้ำ ระบบตารางกริดมี 12 คอลัมน์ รางน้ำคือช่องว่างระหว่าง คอลัมน์ที่ช่วยแบ่งเนื้อหา
ใช้คอลัมน์ 12 คอลัมน์ที่กว้าง 52dp โดยมีพื้นที่ระหว่าง 20dp ต้องมีพื้นที่ 58dp ทั้งด้านและ 4dp ในแนวตั้ง ระยะห่างระหว่างบรรทัด
รูปแบบเลย์เอาต์
มีรูปแบบเลย์เอาต์ให้เลือกอยู่ 3 รูปแบบขึ้นอยู่กับเป้าหมาย วัตถุประสงค์และอุปกรณ์แสดงผล: เลย์เอาต์กองแนวนอน เลย์เอาต์แนวตั้ง และเลย์เอาต์ตารางกริด
เลย์เอาต์กองแนวนอน
เลย์เอาต์แนวนอน (แนวนอน) จะจัดเรียงคอมโพเนนต์ในแนวนอน ซึ่งอาจมีขนาด อัตราส่วน หรือรูปแบบที่แตกต่างกัน เลย์เอาต์นี้มัก เพื่อจัดกลุ่มเนื้อหาและคอมโพเนนต์
เลย์เอาต์สแต็กแนวตั้ง
เลย์เอาต์สแต็กแนวตั้งจะจัดเรียงองค์ประกอบในแนวตั้ง เพื่อให้ได้ขนาด อัตราส่วน และรูปแบบที่ยืดหยุ่น โดยทั่วไป ที่ใช้เพื่อจัดกลุ่มข้อความ องค์ประกอบแบบอินเทอร์แอกทีฟ และ รูปแบบการจัดวางไว้ด้วยกัน
เลย์เอาต์แบบตารางกริด
ตารางกริดคือกลุ่มคอลัมน์และแถวที่ตัดกัน และตารางกริด เลย์เอาต์จะแสดงเนื้อหาในตารางกริดนี้ จัดเรียงเนื้อหาอย่างเป็นตรรกะ ทำให้ผู้ใช้ไปยังส่วนต่างๆ และเรียกดูได้ง่ายขึ้น
เพื่อป้องกันการซ้อนทับกัน คุณควรพิจารณาถึงระยะห่างจากขอบระหว่าง รายการและขนาดที่เพิ่มขึ้นของสถานะที่โฟกัส ตัวอย่างเช่น เมื่อโฟกัส คอมโพเนนต์ (เช่น การ์ด) ถูกไฮไลต์ไว้ หากคุณกำลังใช้ เลย์เอาต์แบบตารางกริด (12 คอลัมน์แบบ 52dp, พร้อมรางน้ำขนาด 20 dp) โปรดดูการ์ดสำหรับ เลย์เอาต์คอมโพเนนต์และตัวอย่างที่แนะนำ
โครงสร้างเลย์เอาต์
ต่อไปนี้คือโครงสร้างเลย์เอาต์ที่จะช่วยให้คุณปรับปรุง ในการตัดสินใจเมื่อออกแบบเลย์เอาต์สำหรับทีวี เมื่อแบ่งหน้าจอทีวีในแนวนอน สามารถช่วยแยกส่วนประกอบประเภทต่างๆ สื่อสารข้อมูล ตรรกะลำดับชั้นและการนำทาง แผงหนึ่งอาจมีคอลัมน์หน่วยได้หลายคอลัมน์ แต่ละแผงจะโฮสต์รูปแบบเลย์เอาต์ที่แตกต่างกันได้ เช่น เลย์เอาต์ของกอง และเลย์เอาต์ตารางกริด
![ตัวอย่างเลย์เอาต์แบบแผงเดียว](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/single-pane-layout.webp?hl=th)
เลย์เอาต์แบบแผงเดียว
เลย์เอาต์แบบช่องเดียวช่วยดึงความสนใจไปยังคอนเทนต์หลักได้ ใช้กับประสบการณ์ที่มุ่งเน้นเนื้อหาเป็นหลักและหน้าข้อมูลที่สำคัญ
![ตัวอย่างเลย์เอาต์แบบ 2 แผง](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?hl=th)
เลย์เอาต์แบบ 2 แผง
เลย์เอาต์แบบ 2 ช่องจะทํางานได้ดีกว่าเมื่อหน้าเว็บแสดงเนื้อหาตามลําดับชั้น ซึ่งใช้กันอย่างแพร่หลายในประสบการณ์แบบส่งต่องาน
สติปัญญามากเกินไป
เนื้อหาที่ซับซ้อนและไม่ชัดเจนอาจทําให้เกิดความสับสน สร้างความรำคาญ และเสียงลดลง การมีส่วนร่วม ทำให้การออกแบบของคุณดูคร่าวๆ ได้ ไม่รกตา และนำเสนองานได้ ข้อมูลสำคัญเท่านั้น
หลีกเลี่ยงการใช้แผงมากเกินไปในการจัดกลุ่มเนื้อหา การดำเนินการนี้จะสร้าง การใช้งานกระบวนการการรับรู้และลำดับชั้นของผู้ใช้โดยไม่จำเป็น
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/layout-do.webp?hl=th)
ควรทำ
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/layout-dont.webp?hl=th)
ไม่ควรทำ
ลำดับชั้นและการนำทางใน Express
แผงต่างๆ จะแยกและจัดระเบียบเนื้อหาด้วยภาพ ซึ่งช่วยแนะนำผู้ใช้ และสร้างอินเทอร์เฟซที่ใช้งานง่ายขึ้น ซึ่งช่วยปรับปรุงประสบการณ์การใช้งาน
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?hl=th)
ควรทำ
![](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/hierarchy-dont.webp?hl=th)
ไม่ควรทำ
เทมเพลตของเลย์เอาต์
เทมเพลตของเลย์เอาต์ช่วยส่งเสริมลำดับ ความสม่ำเสมอ และความคุ้นเคย การออกแบบ สร้างประสบการณ์ UI ที่สะดวกสบายซึ่งสื่อสารอย่างชัดเจน ของผู้ใช้ และที่ที่พวกเขาจะไปถึง
เรียกดู
เทมเพลตเบราว์เซอร์จะแสดง "คลัสเตอร์" ของเนื้อหาสื่อ หรือแถวในแนวตั้ง โดยผู้ใช้ต้องเลื่อนขึ้นและลงเพื่อเรียกดูแถวแนวนอน และเลื่อนไปทางขวาและซ้ายเพื่อเรียกดูเนื้อหาของแถวที่ต้องการ
![เรียกดู](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/browse.webp?hl=th)
การวางซ้อนด้านซ้าย
เทมเพลตการนำทางด้านซ้ายจะแสดงแผงวางซ้อนทางด้านซ้ายของหน้าจอ โดยมักจะแสดงการนำทางหรือรายการที่คุณดำเนินการได้ที่เกี่ยวข้องกับเนื้อหาในเบื้องหลัง
![การวางซ้อนด้านซ้าย](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/left-overlay.webp?hl=th)
การวางซ้อนด้านขวา
เทมเพลตการวางซ้อนด้านขวาจะแสดงแผงการวางซ้อนที่ด้านขวาของหน้าจอ โดยมักจะแสดงรายการต่างๆ ที่คุณดำเนินการโดยไม่ขึ้นอยู่กับเนื้อหาในเบื้องหลัง
![การวางซ้อนด้านขวา](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/right-overlay.webp?hl=th)
วางกึ่งกลางภาพ
เทมเพลตการวางซ้อนตรงกลางจะแสดงองค์ประกอบโมดัลที่วางซ้อนอยู่ด้านบนมุมมองที่มีอยู่ ใช้เพื่อสื่อสารข้อมูลเร่งด่วนหรือกระตุ้นการตัดสินใจ
![วางกึ่งกลางภาพ](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/center-overlay.webp?hl=th)
การวางซ้อนด้านล่าง
เทมเพลตการวางซ้อนด้านล่างมักใช้กับ Bottom Sheet Bottom Sheet คือแพลตฟอร์มที่มีเนื้อหาเสริมซึ่งตรึงอยู่ที่ด้านล่างของหน้าจอ โฆษณาประเภทนี้จะช่วยให้คุณสร้างขั้นตอนสั้นๆ โดยไม่สูญเสียบริบทของหน้าปัจจุบันไป
![การวางซ้อนด้านล่าง](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/bottom-overlay.webp?hl=th)
การดำเนินการ
เทมเพลตการดำเนินการจะแสดงชื่อและคำบรรยายทางด้านซ้าย พร้อมตัวเลือกหรือการดำเนินการทางด้านขวา โดยปกติแล้วระบบจะขอให้ผู้ใช้เลือกตัวเลือกหรือดำเนินการด้วยเทมเพลตนี้
![การดำเนินการ](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/actions.webp?hl=th)
รายละเอียดเนื้อหา
เทมเพลตรายละเอียดเนื้อหาแสดงเนื้อหาในเลย์เอาต์แบบเรียงซ้อนแนวนอน เนื้อหามักประกอบด้วยชื่อ ข้อมูลเมตา คำอธิบายสั้นๆ การดำเนินการด่วน และกลุ่มข้อมูลที่เกี่ยวข้อง
![รายละเอียดเนื้อหา](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/content-detail.webp?hl=th)
การรวบรวม
เทมเพลตการรวบรวมจะแสดงรายละเอียดของรายการหนึ่งๆ ทางด้านซ้ายของหน้าจอ เช่น พอดแคสต์ พร้อมด้วยองค์ประกอบต่างๆ เช่น ตอน ในแผงด้านขวา
![การรวบรวม](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/compilation.webp?hl=th)
เส้นตาราง
เทมเพลตตารางกริดแสดงคอลเล็กชันเนื้อหาในตารางกริดที่จัดระเบียบ โดยแสดงเนื้อหาที่มีตรรกะการนำทางระยะไกลที่ชัดเจนและให้ประสบการณ์การท่องเว็บที่ดีที่สุด
![เส้นตาราง](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/grid-example.webp?hl=th)
การแจ้งเตือน
เทมเพลตการแจ้งเตือนจะแสดงข้อความแบบเต็มหน้าจอ โดยปกติแล้วจะต้องมีการดำเนินการเพื่อเลิกบล็อกการแจ้งเตือนและกลับไปยังหน้าจอก่อนหน้า
![การแจ้งเตือน](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/alert.webp?hl=th)
คอลัมน์การ์ด
เลย์เอาต์การ์ด 1 ใบ
ความกว้างของการ์ด — 844dp
![เลย์เอาต์การ์ด 1 ใบ](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/1-card.webp?hl=th)
เลย์เอาต์แบบการ์ด 2 ใบ
ความกว้างของการ์ด — 412dp
![เลย์เอาต์แบบการ์ด 2 ใบ](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/2-card.webp?hl=th)
การจัดวางการ์ด 3 ใบ
ความกว้างของการ์ด — 268dp
![การจัดวางการ์ด 3 ใบ](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/3-card.webp?hl=th)
การจัดวางการ์ด 4 ใบ
ความกว้างของการ์ด — 196dp
![การจัดวางการ์ด 4 ใบ](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/4-card.webp?hl=th)
เลย์เอาต์การ์ด 5
ความกว้างของการ์ด — 124dp
![เลย์เอาต์การ์ด 5](https://developer.android.com/static/design/ui/tv/guides/styles/images/layouts/5-card.webp?hl=th)