ภาพรวมวิดเจ็ตแอป

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

เอกสารนี้จะแนะนำวิดเจ็ตประเภทต่างๆ ที่คุณสามารถสร้าง เกี่ยวกับหลักการออกแบบที่ควรปฏิบัติตาม หากต้องการสร้างวิดเจ็ตแอปโดยใช้ Remote View API และเลย์เอาต์ XML โปรดดูสร้างวิดเจ็ตแบบง่าย ถึง สร้างวิดเจ็ตโดยใช้ Kotlin และ Compose style API โปรดดู Jetpack Glance

ประเภทวิดเจ็ต

เมื่อคุณวางแผนวิดเจ็ต ให้นึกถึงประเภทวิดเจ็ตที่คุณต้องการสร้าง วิดเจ็ตมักจะจัดอยู่ในหมวดหมู่ใดหมวดหมู่หนึ่งต่อไปนี้

วิดเจ็ตข้อมูล

โดยปกติวิดเจ็ตข้อมูลจะแสดงองค์ประกอบข้อมูลสำคัญและติดตามวิธีการ ข้อมูลนั้นจะเปลี่ยนแปลงไปตามเวลา ตัวอย่างวิดเจ็ตข้อมูล ได้แก่ วิดเจ็ตสภาพอากาศ วิดเจ็ตนาฬิกา หรือวิดเจ็ตการติดตามคะแนนการแข่งขันกีฬา การแตะข้อมูล วิดเจ็ตมักจะเปิดแอปที่เกี่ยวข้องและจะเปิดมุมมองโดยละเอียด ข้อมูลวิดเจ็ต

วิดเจ็ตคอลเล็กชัน

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

โดยปกติแล้ววิดเจ็ตคอลเล็กชันจะมุ่งเน้นกรณีการใช้งานต่อไปนี้

• เรียกดูคอลเล็กชัน
• การเปิดองค์ประกอบของคอลเล็กชันเพื่อดูมุมมองรายละเอียดในแอปที่เกี่ยวข้อง
• โต้ตอบกับองค์ประกอบต่างๆ เช่น ทำเครื่องหมายว่าเสร็จสิ้น โดยมีการสนับสนุนสำหรับ ปุ่มผสมใน Android 12 (API ระดับ 31)

ควบคุมวิดเจ็ต

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

การโต้ตอบกับวิดเจ็ตการควบคุมอาจเปิดมุมมองรายละเอียดที่เกี่ยวข้องใน แอป ซึ่งขึ้นอยู่กับว่าฟังก์ชันของวิดเจ็ตควบคุมจะแสดงผลข้อมูลใดๆ เช่น ในกรณีที่ใช้วิดเจ็ต Search

วิดเจ็ตแบบผสม

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

เมื่อวางแผนวิดเจ็ต ให้ออกแบบวิดเจ็ตตามหนึ่งในประเภทฐาน 1 ประเภทและเพิ่มองค์ประกอบ ประเภทอื่นๆ ตามต้องการ

ผสานรวมวิดเจ็ตกับ Google Assistant

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

ข้อจำกัดของวิดเจ็ต

แม้ว่าวิดเจ็ตอาจเรียกว่า "แอปขนาดเล็ก" มีข้อจำกัดบางอย่าง เป็นสิ่งสำคัญที่ต้องทำความเข้าใจก่อนที่จะออกแบบวิดเจ็ต

ท่าทางสัมผัส

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

ท่าทางสัมผัสที่ใช้ได้สำหรับวิดเจ็ตมีเพียงท่าทางสัมผัสการแตะและการปัดในแนวตั้งเท่านั้น

องค์ประกอบ

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

หลักเกณฑ์การออกแบบ

เนื้อหาของวิดเจ็ต

วิดเจ็ตเป็นวิธีที่ยอดเยี่ยมในการดึงดูดผู้ใช้มายังแอปของคุณด้วย "การโฆษณา" ใหม่และ เนื้อหาที่น่าสนใจที่มีอยู่ในแอปของคุณ

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

การนำทางของวิดเจ็ต

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

ตัวเลือกที่ดีสำหรับลิงก์การนำทางในวิดเจ็ตมีดังนี้

• ฟังก์ชัน Generative คือฟังก์ชันที่ให้ผู้ใช้สร้าง เนื้อหาใหม่สำหรับแอป เช่น การสร้างเอกสารใหม่หรือข้อความใหม่

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

การปรับขนาดวิดเจ็ต

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

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

ข้อดีที่สำคัญของการอนุญาตให้ผู้ใช้ปรับขนาดวิดเจ็ตมีดังนี้

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

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

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

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

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

ข้อควรพิจารณาเกี่ยวกับเลย์เอาต์

คุณอาจอยากออกแบบวิดเจ็ตตามขนาด ตารางกริดสำหรับอุปกรณ์ที่ร่วมพัฒนา วิธีนี้อาจเป็นชื่อย่อที่มีประโยชน์ ค่าประมาณ แต่โปรดคำนึงถึงประเด็นต่อไปนี้

• การวางแผนกลยุทธ์การปรับขนาดวิดเจ็ตใน "ที่เก็บข้อมูลขนาด" แทนที่จะเป็น มิติข้อมูลตารางตัวแปรจะให้ผลลัพธ์ที่เชื่อถือได้มากที่สุด
• จำนวน ขนาด และระยะห่างของเซลล์อาจแตกต่างกันไปอย่างมากในแต่ละอุปกรณ์ ดังนั้น การที่วิดเจ็ตมีความยืดหยุ่นและรองรับพื้นที่โฆษณามากหรือน้อยกว่าที่คาดไว้จึงเป็นเรื่องสำคัญมาก
• เมื่อผู้ใช้ปรับขนาดวิดเจ็ต ระบบจะตอบสนองด้วยช่วงขนาด dp ที่วิดเจ็ตสามารถวาดตัวเองใหม่ได้
• ตั้งแต่ Android 12 คุณจะระบุขนาดที่ปรับแต่งได้มากขึ้นได้ และเค้าโครงที่ยืดหยุ่นมากขึ้น ซึ่งรวมถึงกรณีต่อไปนี้
  • การระบุข้อจำกัดด้านขนาดวิดเจ็ต ตัวอย่างเช่น คุณสามารถระบุขนาดเป้าหมายสำหรับวิดเจ็ตได้ในตารางกริด และขนาดสูงสุดที่เป็นไปได้
  • ใช้รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งจะเปลี่ยนแปลงตามขนาดของวิดเจ็ต
  • ให้เลย์เอาต์ที่มีขนาดตามที่ระบุ ซึ่ง ให้ Launcher ตอบสนองด้วยตัวเลือกขนาดสำหรับแนวตั้งและแนวนอน สำหรับโทรศัพท์ หรือใช้กับอุปกรณ์แบบพับได้ 4 ขนาด
  • ใช้คำแนะนำที่อัปเดตและ API เพื่อกำหนดขนาดที่เหมาะสม สำหรับวิดเจ็ตของคุณ

การกำหนดค่าวิดเจ็ตโดยผู้ใช้

บางครั้งผู้ใช้ต้องตั้งค่าวิดเจ็ตก่อนจึงจะมีประโยชน์ ลองนึกถึงวิดเจ็ตอีเมลที่ผู้ใช้ต้องเลือกโฟลเดอร์อีเมลก่อน กล่องจดหมายสามารถแสดง หรือวิดเจ็ตภาพนิ่งที่ผู้ใช้ต้องมอบหมาย ภาพจากแกลเลอรีที่จะแสดง วิดเจ็ต Android จะแสดง ตัวเลือกการกำหนดค่าหลังจากที่ผู้ใช้วางวิดเจ็ตลงบนหน้าจอหลัก

รายการตรวจสอบการออกแบบวิดเจ็ต

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