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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

องค์ประกอบ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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