ข้อกำหนดเฉพาะในการออกแบบไอคอนของ Google Play

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

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

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

• ไอคอนแบบปรับอัตโนมัติของ Android
  ทำตามหลักเกณฑ์เกี่ยวกับไอคอน APK เหล่านี้เพื่อดูวิธีสร้างไอคอน Launcher แบบปรับอัตโนมัติ ซึ่งจะเปิดตัวใน Android 8.0 (ระดับ API 26)
• ไอคอนผลิตภัณฑ์
  สำรวจหลักการเรื่องดีไซน์ Material สำหรับไอคอนผลิตภัณฑ์ รวมถึงหลักเกณฑ์ การออกแบบไอคอน รูปทรง ข้อกำหนดเฉพาะ และการจัดการ

การสร้างเนื้อหา

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

แอตทริบิวต์

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

เวลาสร้างอาร์ตเวิร์ก โปรดตรวจสอบว่าได้ปฏิบัติตามหลักเกณฑ์ดังต่อไปนี้

• ขนาดสุดท้าย: 512 พิกเซล x 512 พิกเซล
• รูปแบบ: PNG 32 บิต
• พื้นที่สี: sRGB
• ขนาดไฟล์สูงสุด: 1024 KB
• รูปทรง: สี่เหลี่ยมจัตุรัสที่สมบูรณ์ Google Play จะจัดการการมาสก์แบบไดนามิก รัศมีจะมีขนาดเทียบเท่า 30% ของขนาดไอคอน
• เงา: ไม่ต้องใส่ Google Play จะจัดการการใส่เงาแบบไดนามิก ดูส่วน "เงา" ด้านล่างเกี่ยวกับการใส่เงาในอาร์ตเวิร์ก

หลังจากอัปโหลดเนื้อหาแล้ว Google Play จะใส่มาสก์โค้งมนและเงาแบบไดนามิกเพื่อให้ไอคอนของแอป/เกมทั้งหมดสอดคล้องกัน

การกำหนดขนาด

ใช้พื้นที่ทั้งหมดของเนื้อหาเป็นพื้นหลังเวลาทำอาร์ตเวิร์กแบบมินิมัล

ใช้แนวเส้นกรอบเป็นแนวทางสำหรับการจัดตำแหน่งองค์ประกอบของอาร์ตเวิร์ก (เช่น โลโก้)

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

อาร์ตเวิร์กที่เป็นภาพวาดมักจะใช้เป็นไอคอนแบบไม่มีขอบได้ดี

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

เงา

Google Play จะใส่เงาตกกระทบแบบไดนามิกรอบๆ ไอคอนสุดท้ายเมื่อมีการอัปโหลด

เวลาใส่เงาในอาร์ตเวิร์กของไอคอน ให้พิจารณาความสอดคล้องกันกับแพลตฟอร์ม Android โดยทำตามหลักเกณฑ์เกี่ยวกับเนื้อหาของ Google

รัศมีมุม

Google Play ใส่รัศมีมุมให้แบบไดนามิก วิธีนี้ช่วยดูแลให้ไอคอนสอดคล้องกันเวลาที่ต้องปรับขนาดตามการออกแบบ UI ต่างๆ รัศมีจะมีขนาดเทียบเท่า 30% ของขนาดไอคอน

การปรับแบรนด์

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

หากทำได้ ให้เลือกสีพื้นหลังของเนื้อหาที่เหมาะสมกับแบรนด์และไม่ใช้พื้นหลังแบบโปร่งใส เนื้อหาที่โปร่งใสจะแสดงเป็นสีพื้นหลังของ UI ใน Google Play

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

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

โหมดเดิม

สำหรับเนื้อหาไอคอนแบบเดิมที่ยังไม่ได้อัปเดตให้ตรงตามข้อกำหนดเฉพาะแบบใหม่ ระบบจะย้ายข้อมูลไปยังโหมดเดิมในที่สุดและปรับขนาดลง 75% ให้พอดีกับขนาดแนวเส้นกรอบ (512 * 0.75 = 384 พิกเซล)

ตั้งแต่เดือนพฤษภาคม 2019 เราจะไม่อนุญาตให้อัปโหลดไอคอนตามข้อกำหนดเฉพาะแบบเดิมอีกต่อไป ดูรายละเอียดเพิ่มเติมเกี่ยวกับลำดับเวลา

วิธีการสำหรับผู้ใช้ API

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

ก่อนวันที่ 17 มิถุนายน 2019 นักพัฒนาแอปต้องใช้ Play Console เพื่อใช้ข้อกำหนดเฉพาะแบบใหม่กับไอคอน การเรียกทั้งหมดไปยัง Edits.images: upload จะใช้ข้อกำหนดเฉพาะที่กำหนดค่าไว้ใน Play Console ไม่มีวิธีใช้ข้อกำหนดเฉพาะแบบใหม่ผ่าน API การเรียก Edits.images: upload อาจแสดงข้อผิดพลาดหากยังคงใช้ข้อกำหนดเฉพาะแบบเดิมอยู่ และข้อความแสดงข้อผิดพลาดสำหรับไอคอนนั้นๆ จะชี้ให้คุณดูข้อกำหนดเฉพาะนี้ หลังจากใช้ข้อกำหนดเฉพาะแบบใหม่โดยใช้ Play Console แล้ว คุณสามารถลองเรียก Edits.images: upload อีกครั้ง คุณอาจต้องลองเรียกหลายครั้งก่อนที่จะสำเร็จ

ตั้งแต่วันที่ 17 มิถุนายน 2019 เป็นต้นไป การเรียก API ทั้งหมดไปยัง Edits.images: upload จะใช้ข้อกำหนดเฉพาะแบบใหม่กับไอคอนโดยอัตโนมัติ หลังจากวันที่ 17 มิถุนายน 2019 คุณควรจะอัปโหลดเฉพาะไอคอนที่เข้ากันได้กับข้อกำหนดเฉพาะแบบใหม่เท่านั้น

ดาวน์โหลดเทมเพลตและทรัพยากร

โปรดดาวน์โหลดเทมเพลตเนื้อหาที่มีให้รายการใดรายการหนึ่งต่อไปนี้เพื่อเริ่มต้นใช้งาน

• เทมเพลต Sketch (.sketch)
• เทมเพลต Illustrator (.ai)
• เทมเพลต Photoshop (.psd)