วิดเจ็ตเป็นส่วนสำคัญของการปรับแต่งหน้าจอหลัก คุณอาจมองว่าวิดเจ็ตเป็นมุมมอง "แบบคร่าวๆ" ของข้อมูลและฟังก์ชันการทำงานที่สำคัญที่สุดของแอป ซึ่งเข้าถึงได้จากหน้าจอหลักของผู้ใช้โดยตรง ผู้ใช้สามารถย้ายวิดเจ็ตไปมาในแผงหน้าจอหลัก และปรับขนาดวิดเจ็ต (หากรองรับ) เพื่อปรับแต่งปริมาณข้อมูลในวิดเจ็ตตามความต้องการได้
เอกสารนี้จะแนะนำวิดเจ็ตประเภทต่างๆ ที่คุณสร้างได้และหลักการออกแบบที่ควรปฏิบัติตาม หากต้องการสร้างวิดเจ็ตแอปโดยใช้ Remote View API และเลย์เอาต์ XML โปรดดูหัวข้อสร้างวิดเจ็ตพื้นฐาน หากต้องการสร้างวิดเจ็ตโดยใช้ Kotlin และ Compose Style API โปรดดู Jetpack Glance
ประเภทวิดเจ็ต
ขณะวางแผนวิดเจ็ต ให้พิจารณาประเภทวิดีโอที่คุณต้องการสร้าง โดยทั่วไปแล้ว วิดเจ็ตจะอยู่ในหมวดหมู่ใดหมวดหมู่หนึ่งต่อไปนี้
วิดเจ็ตข้อมูล
โดยทั่วไปวิดเจ็ตข้อมูลจะแสดงองค์ประกอบข้อมูลที่สำคัญและติดตามการเปลี่ยนแปลงของข้อมูลนั้นเมื่อเวลาผ่านไป ตัวอย่างวิดเจ็ตข้อมูล ได้แก่ วิดเจ็ตสภาพอากาศ วิดเจ็ตนาฬิกา หรือวิดเจ็ตติดตามคะแนนกีฬา การแตะวิดเจ็ตข้อมูลมักจะเปิดแอปที่เกี่ยวข้องและเปิดมุมมองโดยละเอียดของข้อมูลวิดเจ็ต
วิดเจ็ตคอลเล็กชัน
วิดเจ็ตคอลเล็กชันมีความเชี่ยวชาญในการแสดงองค์ประกอบหลายรายการที่เป็นประเภทเดียวกัน เช่น คอลเล็กชันรูปภาพจากแอปแกลเลอรี คอลเล็กชันบทความจากแอปข่าว หรือคอลเล็กชันอีเมลหรือข้อความจากแอปการสื่อสาร วิดเจ็ตคอลเล็กชันสามารถเลื่อนในแนวตั้งได้
โดยทั่วไปแล้ว วิดเจ็ตคอลเล็กชันจะมุ่งเน้นที่กรณีการใช้งานต่อไปนี้
- กำลังเรียกดูคอลเล็กชัน
- การเปิดองค์ประกอบของคอลเล็กชันไปยังมุมมองรายละเอียดในแอปที่เกี่ยวข้อง
- การโต้ตอบกับองค์ประกอบ เช่น การทำเครื่องหมายว่าเสร็จแล้ว โดยรองรับปุ่มผสมใน Android 12 (ระดับ API 31)
วิดเจ็ตควบคุม
วัตถุประสงค์หลักของวิดเจ็ตควบคุมคือการแสดงฟังก์ชันที่ใช้บ่อยเพื่อให้ผู้ใช้เรียกใช้ฟังก์ชันเหล่านั้นจากหน้าจอหลักได้โดยไม่ต้องเปิดแอป คุณอาจมองว่าวิดเจ็ตเหล่านี้เป็นรีโมตคอนโทรลสำหรับแอปก็ได้ ตัวอย่างของวิดเจ็ตควบคุมคือวิดเจ็ตควบคุมบ้านที่ช่วยให้ผู้ใช้เปิดหรือปิดไฟในบ้านได้
การโต้ตอบกับวิดเจ็ตควบคุมอาจเปิดมุมมองรายละเอียดที่เกี่ยวข้องในแอป ทั้งนี้ขึ้นอยู่กับว่าฟังก์ชันของวิดเจ็ตควบคุมแสดงผลข้อมูลหรือไม่ เช่น ในกรณีของวิดเจ็ต Search
วิดเจ็ตแบบผสม
แม้ว่าวิดเจ็ตบางรายการจะแสดงประเภทใดประเภทหนึ่งในส่วนก่อนหน้า (ข้อมูล คอลเล็กชัน หรือการควบคุม) แต่วิดเจ็ตจำนวนมากเป็นแบบผสมที่รวมองค์ประกอบของประเภทต่างๆ เข้าด้วยกัน ตัวอย่างเช่น วิดเจ็ตเครื่องเล่นเพลงเป็นวิดเจ็ตควบคุมเป็นหลัก แต่ยังแสดงให้ผู้ใช้เห็นแทร็กที่กำลังเล่นอยู่ด้วย เช่น วิดเจ็ตข้อมูล
เมื่อวางแผนวิดเจ็ต ให้ออกแบบตามประเภทพื้นฐานประเภทใดประเภทหนึ่งและเพิ่มองค์ประกอบของประเภทอื่นๆ ตามต้องการ
ผสานรวมวิดเจ็ตกับ Google Assistant
Google Assistant สามารถแสดงวิดเจ็ตประเภทใดก็ได้เพื่อตอบสนองต่อคำสั่งเสียงของผู้ใช้ คุณสามารถกำหนดค่าวิดเจ็ตเพื่อดำเนินการตามการทำงานของแอป ซึ่งช่วยให้ผู้ใช้ได้รับคำตอบที่รวดเร็วและประสบการณ์การใช้งานแอปแบบอินเทอร์แอกทีฟบนแพลตฟอร์ม Assistant เช่น Android และ Android Auto ดูรายละเอียดเพิ่มเติมเกี่ยวกับการดำเนินการตามคำสั่งซื้อวิดเจ็ตสำหรับ Assistant ได้ที่ผสานรวม App Actions กับวิดเจ็ต Android
ข้อจำกัดของวิดเจ็ต
แม้ว่าวิดเจ็ตจะเข้าใจได้ว่าเป็น "มินิแอป" แต่ก็มีข้อจำกัดบางอย่างที่สำคัญที่ควรทำความเข้าใจก่อนออกแบบวิดเจ็ต
ท่าทางสัมผัส
เนื่องจากวิดเจ็ตอยู่ในหน้าจอหลัก จึงต้องอยู่ร่วมกับการนําทางที่สร้างขึ้นในหน้าจอดังกล่าว ซึ่งจะจำกัดการรองรับท่าทางสัมผัสที่ใช้ได้ในวิดเจ็ตเมื่อเทียบกับแอปแบบเต็มหน้าจอ แม้ว่าแอปอาจอนุญาตให้ผู้ใช้ไปยังส่วนต่างๆ ระหว่างหน้าจอในแนวนอน แต่ท่าทางสัมผัสนั้นถูกใช้ไปแล้วในหน้าจอหลักเพื่อไปยังส่วนต่างๆ ระหว่างหน้าจอหลัก
ท่าทางสัมผัสที่ใช้ได้กับวิดเจ็ตมีเพียงการแตะและการปัดในแนวตั้งเท่านั้น
องค์ประกอบ
เนื่องจากข้อจำกัดเกี่ยวกับท่าทางสัมผัสที่ใช้ได้สำหรับวิดเจ็ต บล็อกที่ใช้สร้าง UI บางรายการที่อาศัยท่าทางสัมผัสที่ถูกจำกัดจึงไม่พร้อมใช้งานสำหรับวิดเจ็ต ดูรายการองค์ประกอบที่รองรับทั้งหมดและข้อมูลเพิ่มเติมเกี่ยวกับข้อจำกัดของเลย์เอาต์ได้ที่สร้างเลย์เอาต์วิดเจ็ตและจัดเตรียมเลย์เอาต์วิดเจ็ตที่ยืดหยุ่น
หลักเกณฑ์การออกแบบ
ทำตามหลักเกณฑ์การออกแบบเหล่านี้เพื่อสร้างประสบการณ์การใช้งานวิดเจ็ตที่น่าสนใจ ยืดหยุ่น และสอดคล้องกันบนหน้าจอหลัก
เนื้อหาวิดเจ็ต
วิดเจ็ตเป็นวิธีที่ยอดเยี่ยมในการดึงดูดผู้ใช้ให้มาที่แอปของคุณด้วยการ "โฆษณา" เนื้อหาใหม่และน่าสนใจที่มีอยู่ในแอป
วิดเจ็ตจะรวบรวมและเน้นข้อมูลของแอป รวมถึงให้การเชื่อมต่อกับรายละเอียดที่สมบูรณ์ยิ่งขึ้นภายในแอป เช่นเดียวกับทีเซอร์ในหน้าแรกของหนังสือพิมพ์ คุณอาจกล่าวได้ว่าวิดเจ็ตเป็น "ของว่าง" ข้อมูล ในขณะที่แอปเป็น "อาหารมื้อหลัก" ตรวจสอบว่าแอปแสดงรายละเอียดเกี่ยวกับรายการข้อมูลมากกว่าที่วิดเจ็ตแสดง
การไปยังส่วนต่างๆ ของวิดเจ็ต
นอกเหนือจากเนื้อหาข้อมูลล้วนๆ แล้ว ให้พิจารณาสร้างวิดเจ็ตที่ให้ลิงก์การนำทางไปยังส่วนที่ใช้บ่อยของแอป ซึ่งจะช่วยให้ผู้ใช้ทำงานเสร็จเร็วขึ้นและขยายขอบเขตการทำงานของแอปไปยังหน้าจอหลัก
ตัวเลือกที่ดีสำหรับลิงก์การนำทางในวิดเจ็ต ได้แก่
ฟังก์ชัน Generative: ฟังก์ชันเหล่านี้ช่วยให้ผู้ใช้สร้างเนื้อหาใหม่สำหรับแอปได้ เช่น การสร้างเอกสารใหม่หรือข้อความใหม่
เปิดแอปที่ระดับบนสุด: การแตะองค์ประกอบข้อมูลมักจะนำผู้ใช้ไปยังหน้าจอรายละเอียดระดับที่ต่ำกว่า การให้สิทธิ์เข้าถึงระดับบนสุดของแอปพลิเคชันจะช่วยให้ไปยังส่วนต่างๆ ได้อย่างยืดหยุ่นมากขึ้น และสามารถแทนที่ทางลัดของแอปโดยเฉพาะที่ผู้ใช้ใช้เพื่อไปยังแอปจากหน้าจอหลักได้ การใช้ไอคอนแอปพลิเคชันสำหรับฟังก์ชันนี้ยังช่วยให้วิดเจ็ตมีเอกลักษณ์ที่ชัดเจนได้ด้วย หากข้อมูลที่คุณแสดงมีความกำกวม
การปรับขนาดวิดเจ็ต
การแตะวิดเจ็ตที่ปรับขนาดได้ค้างไว้แล้วปล่อยจะทำให้วิดเจ็ตเข้าสู่โหมดปรับขนาด ผู้ใช้สามารถใช้แฮนเดิลการลากหรือมุมวิดเจ็ตเพื่อกำหนดขนาดที่ต้องการได้
การปรับขนาดช่วยให้ผู้ใช้ปรับความสูงและความกว้างของวิดเจ็ตได้ภายในข้อจำกัดของตารางกริดการวางบนหน้าจอหลัก คุณเลือกได้ว่าจะให้วิดเจ็ตปรับขนาดได้อย่างอิสระหรือจำกัดให้เปลี่ยนขนาดในแนวนอนหรือแนวตั้ง คุณไม่จำเป็นต้องรองรับการปรับขนาดหากวิดเจ็ตมีขนาดคงที่อยู่แล้ว
การอนุญาตให้ผู้ใช้ปรับขนาดวิดเจ็ตมีประโยชน์ที่สำคัญดังนี้
- ผู้ใช้สามารถปรับแต่งปริมาณข้อมูลที่ต้องการดูในวิดเจ็ตแต่ละรายการได้
- ผู้ใช้จะควบคุมเลย์เอาต์ของวิดเจ็ตและทางลัดในแผงควบคุมสมาร์ทโฮมได้ดียิ่งขึ้น
วางแผนกลยุทธ์การปรับขนาดวิดเจ็ตตามประเภทวิดเจ็ตที่คุณกำลังสร้าง วิดเจ็ตคอลเล็กชันแบบรายการหรือตารางกริดมักจะตรงไปตรงมา เนื่องจากเมื่อปรับขนาดวิดเจ็ตจะเป็นการขยายหรือหดพื้นที่การเลื่อนแนวตั้ง ไม่ว่าวิดเจ็ตจะมีขนาดเท่าใด ผู้ใช้ก็ยังคงเลื่อนดูองค์ประกอบข้อมูลทั้งหมดได้
วิดเจ็ตข้อมูลต้องมีการวางแผนที่แม่นยำยิ่งขึ้น เนื่องจากเลื่อนไม่ได้และเนื้อหาทั้งหมดต้องพอดีกับขนาดที่กำหนด คุณต้องปรับเนื้อหาและเลย์เอาต์ของวิดเจ็ตแบบไดนามิกให้เป็นขนาดที่ผู้ใช้กำหนดผ่านการดำเนินการปรับขนาด
ในตัวอย่างต่อไปนี้ ผู้ใช้สามารถปรับขนาดวิดเจ็ตสภาพอากาศได้ใน 3 ขั้นตอน โดยจะแสดงข้อมูลสภาพอากาศที่ละเอียดยิ่งขึ้น ณ ตำแหน่งปัจจุบันเมื่อวิดเจ็ตมีขนาดใหญ่ขึ้น
กำหนดปริมาณข้อมูลของแอปที่จะแสดงสำหรับวิดเจ็ตแต่ละขนาด สำหรับขนาดที่เล็กลง ให้เน้นที่ข้อมูลสำคัญ แล้วเพิ่มข้อมูลตามบริบทเมื่อวิดเจ็ตขยายในแนวนอนและแนวตั้ง
ข้อควรพิจารณาเกี่ยวกับเลย์เอาต์
คุณอาจอยากจัดวางวิดเจ็ตตามขนาดของตารางกริดการวางของอุปกรณ์ที่คุณใช้พัฒนา วิธีนี้อาจเป็นค่าประมาณเบื้องต้นที่มีประโยชน์ แต่โปรดคำนึงถึงประเด็นต่อไปนี้
- การวางแผนกลยุทธ์การปรับขนาดวิดเจ็ตใน "ที่เก็บขนาด" แทนที่จะเป็นมิติข้อมูลตารางกริดแบบแปรผันจะให้ผลลัพธ์ที่น่าเชื่อถือที่สุด
- จำนวน ขนาด และระยะห่างของเซลล์อาจแตกต่างกันอย่างมากในแต่ละอุปกรณ์ ดังนั้นจึงเป็นเรื่องสำคัญมากที่วิดเจ็ตของคุณต้องมีความยืดหยุ่นและสามารถรองรับพื้นที่ได้มากกว่าหรือน้อยกว่าที่คาดไว้
- เมื่อผู้ใช้ปรับขนาดวิดเจ็ต ระบบจะตอบสนองด้วยช่วงขนาด dp ที่วิดเจ็ตสามารถวาดตัวเองใหม่ได้
- ตั้งแต่ Android 12 เป็นต้นไป คุณสามารถระบุแอตทริบิวต์ขนาดที่ละเอียดยิ่งขึ้นและเลย์เอาต์ที่ยืดหยุ่นมากขึ้นได้ ซึ่งรวมถึงสิ่งต่างๆ ต่อไปนี้
- การระบุข้อจำกัดด้านขนาดวิดเจ็ต เช่น คุณสามารถระบุขนาดเป้าหมายสำหรับวิดเจ็ตในเซลล์ตารางกริด รวมถึงขนาดสูงสุดที่เป็นไปได้
- การจัดเตรียมเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งจะเปลี่ยนไปตามขนาดของวิดเจ็ต
- การจัดเตรียมเลย์เอาต์ขนาดที่แน่นอน ซึ่งช่วยให้ Launcher ตอบสนองด้วยตัวเลือกขนาดสำหรับโหมดแนวตั้งและแนวนอนสำหรับโทรศัพท์ หรือ 4 ขนาดสำหรับอุปกรณ์แบบพับได้
- ใช้คำแนะนำที่อัปเดตและ API ใหม่เพื่อกำหนดขนาดที่เหมาะสมสำหรับวิดเจ็ต
การกำหนดค่าวิดเจ็ตโดยผู้ใช้
บางครั้งผู้ใช้จำเป็นต้องตั้งค่าวิดเจ็ตก่อนจึงจะใช้งานได้ ลองนึกถึงวิดเจ็ตอีเมลที่ผู้ใช้ต้องเลือกโฟลเดอร์อีเมลก่อนจึงจะแสดงกล่องจดหมายได้ หรือวิดเจ็ตรูปภาพแบบคงที่ที่ผู้ใช้ต้องกำหนดรูปภาพจากแกลเลอรีที่จะแสดง วิดเจ็ต Android จะแสดงตัวเลือกการกำหนดค่าทันทีหลังจากที่ผู้ใช้วางวิดเจ็ตลงในหน้าจอหลัก
เช็กลิสต์การออกแบบวิดเจ็ต
- เน้นข้อมูลที่เข้าใจง่ายในส่วนเล็กๆ ของวิดเจ็ต ขยายข้อมูลในแอป
- เลือกประเภทวิดเจ็ตที่เหมาะกับวัตถุประสงค์ของคุณ
- วางแผนวิธีที่เนื้อหาสำหรับวิดเจ็ตจะปรับให้เข้ากับขนาดต่างๆ
- ทำให้เลย์เอาต์วิดเจ็ตไม่ขึ้นอยู่กับการวางแนวและอุปกรณ์โดยตรวจสอบว่าเลย์เอาต์สามารถยืดและหดได้
- พิจารณาว่าวิดเจ็ตของคุณต้องมีการกำหนดค่าเพิ่มเติมหรือไม่