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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

องค์ประกอบ

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

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

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

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

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

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

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

ลิงก์การนำทางในวิดเจ็ตที่ควรใช้ ได้แก่

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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