หน้านี้ได้รับการแปลโดย Cloud Translation API

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

เค้าโครงคือเทมเพลตเชิงโครงสร้างที่ให้กรอบงานสำหรับการบำรุงรักษา ความสอดคล้องกันทั้งหมดในแอปพลิเคชัน ด้วยการกำหนดตารางกริดภาพ ระยะห่าง และส่วนต่างๆ เลย์เอาต์จะสร้างโครงสร้างที่สอดคล้องและเป็นระเบียบสำหรับ การนำเสนอข้อมูลและองค์ประกอบ UI

ไฮไลต์

ทีวีมีสัดส่วนภาพหน้าจอคงที่ที่ 16:9 ซึ่งต่างจากเว็บหรืออุปกรณ์เคลื่อนที่
เพิ่มประสิทธิภาพเลย์เอาต์ตามแกนแนวนอนและแนวตั้งเพื่อให้ใช้งานได้ง่าย และการควบคุม

หลักการต่างๆ

หลักเกณฑ์ที่จะช่วยคุณตัดสินใจด้านการออกแบบเมื่อออกแบบเลย์เอาต์ทีวี

ออกแบบสำหรับหน้าจอขนาดใหญ่

นับตั้งแต่ที่ HDTV ได้รับความนิยม ทีวีสี่เหลี่ยมผืนผ้าที่มีสัดส่วนภาพ 16:9 ได้กลายมาเป็นรูปแบบมาตรฐาน ก่อนหน้านี้ โทรทัศน์จะผลิตขึ้นในรูปทรงสี่เหลี่ยมจัตุรัส หรือที่เรียกว่าสัดส่วนภาพ 4:3 หรือ 1.33 ต่อ 1

ออกแบบบนแพลตฟอร์ม Android

เมื่อออกแบบ ให้ใช้ dp เพื่อแสดงองค์ประกอบอย่างเท่าเทียมกันในหน้าจอที่มีความหนาแน่นต่างกัน เช่นเดียวกับอุปกรณ์อื่นๆ ที่ใช้ Android ออกแบบที่ความละเอียด MDPI ที่ 960px * 540px เสมอ

ที่ MDPI 1px = 1dp

เนื้อหาต้องมุ่งเป้าไปที่ 1080p วิธีนี้จะช่วยให้ระบบ Android ลดขนาดองค์ประกอบเลย์เอาต์เป็น 720p หากจำเป็น

ตรวจสอบความปลอดภัยในการมองเห็นและโอเวอร์สแกน

ตรวจสอบให้แน่ใจว่าองค์ประกอบสำคัญจะปรากฏต่อผู้ใช้เสมอ โดยให้จัดตำแหน่งองค์ประกอบโดยให้ด้านซ้ายและขวาเท่ากับ 48dp 5% และ 27dp ที่ด้านบนและด้านล่างของเลย์เอาต์ วิธีนี้ช่วยให้องค์ประกอบหน้าจอของเลย์เอาต์อยู่ภายในโอเวอร์สแกน

แสดงแบบเต็มหน้าจอ

อย่าปรับหรือตัดองค์ประกอบหน้าจอพื้นหลังออกไปยังพื้นที่ปลอดภัยที่โอเวอร์สแกน แต่อนุญาตให้แสดงองค์ประกอบนอกหน้าจอได้บางส่วนแทน ซึ่งจะช่วยให้ทุกหน้าจอแสดงองค์ประกอบพื้นหลังและนอกหน้าจอได้อย่างถูกต้อง

เพิ่มประสิทธิภาพด้วยแกน

ลองพิจารณาว่าผู้คนใช้รีโมตคอนโทรลกับทีวีอย่างไร ตรวจสอบว่าอินเทอร์เฟซ 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) โปรดดูการ์ดสำหรับ เลย์เอาต์คอมโพเนนต์และตัวอย่างที่แนะนำ

โครงสร้างเลย์เอาต์

ต่อไปนี้คือโครงสร้างเลย์เอาต์ที่จะช่วยให้คุณปรับปรุง ในการตัดสินใจเมื่อออกแบบเลย์เอาต์สำหรับทีวี เมื่อแบ่งหน้าจอทีวีในแนวนอน สามารถช่วยแยกส่วนประกอบประเภทต่างๆ สื่อสารข้อมูล ตรรกะลำดับชั้นและการนำทาง แผงหนึ่งอาจมีคอลัมน์หน่วยได้หลายคอลัมน์ แต่ละแผงจะโฮสต์รูปแบบเลย์เอาต์ที่แตกต่างกันได้ เช่น เลย์เอาต์ของกอง และเลย์เอาต์ตารางกริด

เลย์เอาต์แบบแผงเดียว

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

เลย์เอาต์แบบ 2 แผง

เลย์เอาต์แบบ 2 ช่องจะทํางานได้ดีกว่าเมื่อหน้าเว็บแสดงเนื้อหาตามลําดับชั้น ซึ่งใช้กันอย่างแพร่หลายในประสบการณ์แบบส่งต่องาน

สติปัญญามากเกินไป

เนื้อหาที่ซับซ้อนและไม่ชัดเจนอาจทําให้เกิดความสับสน สร้างความรำคาญ และเสียงลดลง การมีส่วนร่วม ทำให้การออกแบบของคุณดูคร่าวๆ ได้ ไม่รกตา และนำเสนองานได้ ข้อมูลสำคัญเท่านั้น

หลีกเลี่ยงการใช้แผงมากเกินไปในการจัดกลุ่มเนื้อหา การดำเนินการนี้จะสร้าง การใช้งานกระบวนการการรับรู้และลำดับชั้นของผู้ใช้โดยไม่จำเป็น

ควรทำ

วางเนื้อหาที่เกี่ยวข้องไว้ด้วยกันในแผงเดียว ซึ่งจะช่วยให้ผู้ใช้เข้าใจการจัดกลุ่มเนื้อหา

ไม่ควรทำ

หลีกเลี่ยงการใช้แผงมากเกินไปในการจัดกลุ่มเนื้อหา ซึ่งก่อให้เกิดภาระงานและลำดับชั้นของผู้ใช้โดยไม่จำเป็น

แผงต่างๆ จะแยกและจัดระเบียบเนื้อหาด้วยภาพ ซึ่งช่วยแนะนำผู้ใช้ และสร้างอินเทอร์เฟซที่ใช้งานง่ายขึ้น ซึ่งช่วยปรับปรุงประสบการณ์การใช้งาน

ควรทำ

จัดกลุ่มเนื้อหาตามเส้นทางการอ่านของผู้ใช้ ตรวจสอบว่าเส้นทางโฟกัสสอดคล้องกับลําดับชั้นหรือตรรกะการตัดสินใจ

ไม่ควรทำ

อย่าชี้นำความสนใจของผู้ใช้ไปมาระหว่างแผงต่างๆ การดำเนินการนี้จะสร้างเส้นทางโฟกัสที่ผิดปกติและไม่สอดคล้องกับพฤติกรรมการอ่านของผู้ใช้

เทมเพลตของเลย์เอาต์

เทมเพลตของเลย์เอาต์ช่วยส่งเสริมลำดับ ความสม่ำเสมอ และความคุ้นเคย การออกแบบ สร้างประสบการณ์ UI ที่สะดวกสบายซึ่งสื่อสารอย่างชัดเจน ของผู้ใช้ และที่ที่พวกเขาจะไปถึง

เรียกดู

เทมเพลตเบราว์เซอร์จะแสดง "คลัสเตอร์" ของเนื้อหาสื่อ หรือแถวในแนวตั้ง โดยผู้ใช้ต้องเลื่อนขึ้นและลงเพื่อเรียกดูแถวแนวนอน และเลื่อนไปทางขวาและซ้ายเพื่อเรียกดูเนื้อหาของแถวที่ต้องการ

การวางซ้อนด้านซ้าย

เทมเพลตการนำทางด้านซ้ายจะแสดงแผงวางซ้อนทางด้านซ้ายของหน้าจอ โดยมักจะแสดงการนำทางหรือรายการที่คุณดำเนินการได้ที่เกี่ยวข้องกับเนื้อหาในเบื้องหลัง

การวางซ้อนด้านขวา

เทมเพลตการวางซ้อนด้านขวาจะแสดงแผงการวางซ้อนที่ด้านขวาของหน้าจอ โดยมักจะแสดงรายการต่างๆ ที่คุณดำเนินการโดยไม่ขึ้นอยู่กับเนื้อหาในเบื้องหลัง

วางกึ่งกลางภาพ

เทมเพลตการวางซ้อนตรงกลางจะแสดงองค์ประกอบโมดัลที่วางซ้อนอยู่ด้านบนมุมมองที่มีอยู่ ใช้เพื่อสื่อสารข้อมูลเร่งด่วนหรือกระตุ้นการตัดสินใจ

การวางซ้อนด้านล่าง

เทมเพลตการวางซ้อนด้านล่างมักใช้กับ Bottom Sheet Bottom Sheet คือแพลตฟอร์มที่มีเนื้อหาเสริมซึ่งตรึงอยู่ที่ด้านล่างของหน้าจอ โฆษณาประเภทนี้จะช่วยให้คุณสร้างขั้นตอนสั้นๆ โดยไม่สูญเสียบริบทของหน้าปัจจุบันไป

การดำเนินการ

เทมเพลตการดำเนินการจะแสดงชื่อและคำบรรยายทางด้านซ้าย พร้อมตัวเลือกหรือการดำเนินการทางด้านขวา โดยปกติแล้วระบบจะขอให้ผู้ใช้เลือกตัวเลือกหรือดำเนินการด้วยเทมเพลตนี้

รายละเอียดเนื้อหา

เทมเพลตรายละเอียดเนื้อหาแสดงเนื้อหาในเลย์เอาต์แบบเรียงซ้อนแนวนอน เนื้อหามักประกอบด้วยชื่อ ข้อมูลเมตา คำอธิบายสั้นๆ การดำเนินการด่วน และกลุ่มข้อมูลที่เกี่ยวข้อง