ระดับคุณภาพของวิดเจ็ต

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

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

  • ระดับ 3: คุณภาพต่ำ - ไม่เป็นไปตามเกณฑ์คุณภาพขั้นต่ำและไม่มอบประสบการณ์การใช้งานที่ยอดเยี่ยม
  • ระดับ 2: มาตรฐานคุณภาพ - มีประโยชน์ ใช้งานได้ และมอบประสบการณ์การใช้งานที่มีคุณภาพ
  • ระดับที่ 1: มีความแตกต่าง - วิดเจ็ตที่พิเศษเพื่อมอบประสบการณ์ฮีโร่ ที่ปรับเปลี่ยนตามผู้ใช้ และช่วยให้ผู้ใช้สร้างหน้าจอหลักที่มีประสิทธิภาพและไม่ซ้ำใคร

ระดับ 3: คุณภาพต่ำ

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

ระดับ 2 - มาตรฐานคุณภาพ

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

เลย์เอาต์

  • วิดเจ็ตต้องเติมเต็มขอบเขตที่กําหนดโดยตารางกริดของ Launcher เมื่อวางในหน้าจอหลัก วิดเจ็ตปรับขนาดได้อย่างน้อย 1 ขนาดต่อไปนี้ 2x2, 4x2 (เซลล์ตารางกริดของ Launcher) ดูข้อมูลเพิ่มเติมได้ที่หลักเกณฑ์เกี่ยวกับขนาด
    • วิดเจ็ตต้องจัดวางอย่างเหมาะสมกับองค์ประกอบอื่นๆ ของหน้าจอหลักในแนวตั้งหรือแนวนอน และไม่กินพื้นที่โดยไม่จำเป็น
    • วิดเจ็ตต้องแตะขอบของตารางกริดอย่างน้อย 2 ขอบที่ตรงข้ามกัน กล่าวคือวิดเจ็ตไม่จำเป็นต้องเป็นรูปสี่เหลี่ยมผืนผ้า ไอคอนเหล่านี้อาจมีรูปร่างที่กำหนดเองได้ ตราบใดที่ขอบของรูปร่างสัมผัสกับขอบของตารางกริดอย่างน้อย 2 ขอบ
  • หากปรับขนาดได้ วิดเจ็ตต้องมีขนาดขั้นต่ำหรือสูงสุดที่เหมาะสม ซึ่งตั้งค่าด้วย minWidth, minHeight, maxResizeWidth และ maxResizeHeight ได้ใน AppWidgetProviderInfo XML
    • คุณควรตั้งค่าขนาดสูงสุดหากการปรับขนาดวิดเจ็ตจะเพิ่มเฉพาะพื้นที่ว่าง
    • ขนาดขั้นต่ำควรกำหนดตามขนาดขั้นต่ำที่วิดเจ็ตยังคงมีมูลค่าและเป็นไปตามข้อกำหนดเป้าหมายการสัมผัส (48x48)
ระบุเป้าหมายการสัมผัสขนาด 48x48 dp
ทําให้เป้าหมายการสัมผัสเล็กเกินไป

สี

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

Discovery

  • วิดเจ็ตต้องมีการแสดงตัวอย่างที่ถูกต้องในเครื่องมือเลือกวิดเจ็ต ซึ่งสามารถตั้งค่าได้ด้วย previewImage และ previewLayout ใน AppWidgetProviderInfo XML หรือใช้ตัวอย่างที่สร้างขึ้นก็ได้

    • การแสดงตัวอย่างวิดเจ็ตดูสอดคล้องกับฟังก์ชันที่มีให้เมื่อเพิ่มลงในหน้าจอหลัก
    วิดีโอ 1: วิดเจ็ตที่มีตัวอย่างไม่ถูกต้อง

เนื้อหา

  • เนื้อหาวิดเจ็ตต้องไม่ล้าสมัยหรือไม่ทันสมัยอยู่เสมอ
    • วิดเจ็ตต้องอัปเดตหลังจากที่ผู้ใช้ดำเนินการจากวิดเจ็ตเสร็จสมบูรณ์
    • วิดเจ็ตต้องอัปเดตหลังจากที่ผู้ใช้ดำเนินการที่เกี่ยวข้องจากภายในแอปเสร็จสมบูรณ์
  • วิดเจ็ตต้องอนุญาตให้ผู้ใช้รีเฟรชเนื้อหาด้วยตนเอง หากมีการคาดหวังว่าข้อมูลจะรีเฟรชบ่อยกว่า UI
  • UI ของวิดเจ็ตต้องใช้งานได้ มิเช่นนั้นระบบจะครอบตัดเนื้อหา
  • สถานะของวิดเจ็ตเป็นศูนย์และว่างเปล่าต้องเป็นแบบตั้งใจและต้องแสดงค่าของวิดเจ็ตหรือใส่คำกระตุ้นให้ดำเนินการ (Call-To-Action) เมื่อติดตั้งวิดเจ็ตแล้ว แต่ผู้ใช้ยังไม่ได้เข้าสู่ระบบ
discovery_tier2
รูปที่ 2 วิดเจ็ตที่มีสถานะว่างที่มีคุณค่า
ระดับการค้นพบ 2
รูปที่ 3 วิดเจ็ตที่มีปุ่มรีเฟรช

ระดับ 1 - แตกต่าง

วิดเจ็ตที่ดีที่สุดต้องเป็นไปตามเกณฑ์ระดับ 2 ทั้งหมดและเกณฑ์ต่อไปนี้ทั้งหมด เลย์เอาต์ สี การค้นพบ และความสอดคล้องของระบบ

เลย์เอาต์

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

    • วิดเจ็ตปรับขนาดเป็นขนาดต่อไปนี้อย่างน้อย 1 ขนาดได้ 2x2, 4x2
  • ใช้ส่วนหัวของวิดเจ็ตอย่างสม่ำเสมอ

    • แนะนำให้ใช้ส่วนหัวในกรณีต่อไปนี้
      • คุณต้องการระบุ Deep Link ไปยังฟังก์ชันบางอย่างของแอป เช่น การค้นหา
      • คุณต้องการใช้ไอคอนการสร้างแบรนด์แอปที่ทำหน้าที่เป็นลิงก์ที่สม่ำเสมอซึ่งนำกลับไปยังแอปเมื่อแตะ
      • วิดเจ็ตมีเนื้อหาที่เลื่อนได้ (รายการ ตารางกริด ฯลฯ)
      • เนื้อหาส่วนหัวให้บริบทที่เป็นประโยชน์ (ชื่อรายการสิ่งที่ต้องทํา)
    • คุณระบุส่วนหัวหรือไม่ก็ได้ในกรณีต่อไปนี้
      • วิดเจ็ตเป็นรูปภาพแบบเต็มหน้า (รูปภาพ)
      • พื้นที่มีจํากัด (< 2 แถว)
      • เมื่อเนื้อหาส่วนหัวซ้ำซ้อน
    • หากใช้ส่วนหัว โปรดปฏิบัติตามข้อกำหนดของเรา
      • ไอคอน ชื่อ การดำเนินการ
        • มีไอคอนเสมอ
        • ชื่อจะปรากฏขึ้นเมื่อมีพื้นที่เพียงพอ
        • การดำเนินการตามบริบทวิดเจ็ต
      • สูง 48dp, ระยะห่างจากขอบ, 14 dp
มีส่วนหัวที่ตรงตามข้อกำหนดของวิดเจ็ต
ใช้ข้อกำหนดที่กำหนดเองสำหรับขนาดและชื่อ

สี

วิดเจ็ตที่แสดงธีมแบบไดนามิก
รูปที่ 4 วิดเจ็ตที่มีสีแบบไดนามิกของวอลเปเปอร์และสีธีมของแบรนด์

Discovery

  • ตัวอย่างมีเนื้อหาของผู้ใช้หรือใช้ธีมของระบบ (Generated Previews API หรือ previewLayout ใน AppWidgetProviderInfo XML)
วิดเจ็ตที่มีตัวอย่างเนื้อหาทั่วไปและเนื้อหาของผู้ใช้
รูปที่ 5 วิดเจ็ตที่มีเนื้อหาตัวอย่างทั่วไปและเนื้อหาตัวอย่างเนื้อหาของผู้ใช้
  • วิดเจ็ตมีชื่อหรือคำอธิบายที่ช่วยให้ผู้ใช้เข้าใจคุณค่าของวิดเจ็ต
    • ชื่อมีความยาวไม่เกิน 50 อักขระ
    • ชื่อและคำอธิบายต้องไม่ซ้ำกันภายในแอป เช่น แอปต้องมีวิดเจ็ตที่มีชื่อเหมือนกันได้เพียงรายการเดียว
ใส่คำอธิบายสั้นๆ ที่ไม่ซ้ำกัน
ระบุคำอธิบายทั่วไป

ความสอดคล้องของระบบ

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

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