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

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

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

รูปแบบอิสระ – รูปแบบเดิม
รูปแบบเดียวกัน – รูปแบบใหม่

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

สำคัญ: หากคุณสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างไอคอน APK Launcher ซึ่งมีวิธีสร้างแยกกันกับไอคอน Google Play ที่พูดถึงในหน้านี้ โปรดดูแหล่งข้อมูลด้านล่าง

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

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

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

แอตทริบิวต์

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

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

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

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

ทางด้านซ้ายมือคือเนื้อหาไอคอนใหม่ของคุณ ส่วน 3 ภาพต่อมาทางด้านขวาคือขั้นตอนแบบไดนามิกที่ Google Play ดำเนินการกับไอคอน

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

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

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

อาร์ตเวิร์กแบบไม่มีขอบ (เนื้อหาสุดท้าย)
ผลลัพธ์สุดท้ายแบบมีเงาและขอบโค้งมนที่ Google Play ใส่ให้แบบไดนามิก

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

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

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

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

เงา

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

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

สิ่งที่ไม่ควรทำ
อย่าใส่เงาตกกระทบลงในเนื้อหาสุดท้าย
สิ่งที่ควรทำ
คุณใส่แสงและเงาภายในอาร์ตเวิร์กได้

รัศมีมุม

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

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

ป้าย

ป้ายแบบฝังจะกินพื้นที่อาร์ตเวิร์กและไม่เหมาะกับการปรับลดขนาดของไอคอน

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

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

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

จากซ้ายไปขวา: เนื้อหาไอคอนแบบเดิม เนื้อหาไอคอนแบบใหม่ (แนะนำให้ปรับเป็นแบบนี้) ไอคอนแบบใหม่ที่แสดงใน Google Play

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

จากซ้ายไปขวา: เนื้อหาไอคอนแบบเดิม เนื้อหาไอคอนแบบใหม่ (แนะนำให้ปรับเป็นแบบนี้) ไอคอนแบบใหม่ที่แสดงใน Google Play

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

จากซ้ายไปขวา: เนื้อหาไอคอนแบบเดิม เนื้อหาไอคอนแบบใหม่ (แนะนำให้ปรับเป็นแบบนี้) ไอคอนแบบใหม่ที่แสดงใน Google Play

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

จากซ้ายไปขวา: เนื้อหาไอคอนแบบเดิม เนื้อหาไอคอนแบบใหม่ (แนะนำให้ปรับเป็นแบบนี้) ไอคอนแบบใหม่ที่แสดงใน Google Play

โหมดเดิม

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

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

ระบบจะเปลี่ยนเนื้อหาไอคอนแบบเดิมเป็นเนื้อหาในโหมดเดิมโดยอัตโนมัติและลดขนาดลง 75% ให้พอดีกับแนวเส้นกรอบแบบใหม่

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

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