คู่มือ Splash Screen: ภาพ Launch สำหรับ iOS และ Android

คำตอบสั้น: splash screen คือหน้าจอแบรนด์สั้นๆ ที่แสดงขณะแอปโหลด บน iOS คุณสร้างเป็น launch screen ที่ระบบแสดงทันที บน Android 12+ ระบบจะสร้างจากไอคอนแอปและธีมของคุณ ออกแบบครั้งเดียวด้วยสีหลักและโลโก้ของแบรนด์ ให้สั้น และอย่าใช้เพื่อหลอกเวลาการโหลด

Splash Screen กับ Launch Screen

สองคำนี้ใช้แทนกันได้ แต่แพลตฟอร์มต่างกัน:

• iOS — Launch Screen: ตัวแทนที่ระบบเรนเดอร์แบบเบา (สตอรีบอร์ดที่มีโลโก้และพื้นหลังของคุณ) แสดงทันทีที่แอปเริ่ม แนวทางของ Apple คือทำให้คล้ายหน้าจอแรกของแอปเพื่อให้การเปิดรู้สึกราบรื่น และ ไม่ ใช้เป็น splash สำหรับแบรนด์หรือเพิ่มข้อความที่ดูเหมือน UI การโหลด
• Android — Splash Screen (API 31+): ตั้งแต่ Android 12 ระบบจะวาด splash โดยอัตโนมัติจากไอคอนแอปและสี windowSplashScreenBackground ของคุณ คุณปรับแต่งได้ในธีม รองรับแอนิเมชันและไอคอนแบรนด์ และ เอกสาร Splash Screen API อย่างเป็นทางการ เป็นแหล่งอ้างอิงสำหรับการวัด safe zone ของไอคอน

บน Android เวอร์ชันเก่า (และในเฟรมเวิร์กข้ามแพลตฟอร์ม) วิธีคลาสสิกคือ drawable เต็มหน้าจอหรือ view เฉพาะ ซึ่งเป็นจุดที่ทีมส่วนใหญ่ยังต้องมี asset ที่ออกแบบไว้

เครื่องมือสร้าง Splash Screen มีประโยชน์อย่างไร

เครื่องมือสร้าง splash screen หรือเทมเพลตช่วยเร่งส่วนที่ซ้ำซาก: สร้าง asset โลโก้บนพื้นหลังขนาดถูกต้องสำหรับทุกความหนาแน่นและแนวจากดีไซน์เดียว แทนที่จะ export PNG หลายสิบไฟล์ที่เกือบเหมือนกันด้วยมือ คุณ:

1. ออกแบบภาพต้นฉบับ (โลโก้ + สีพื้นหลัง ไม่มีข้อความที่ดูเหมือน UI การโหลด)
2. ให้เครื่องมือ export ชุดขนาดที่ต้องการ
3. เชื่อม asset เข้ากับ launch storyboard (iOS) หรือธีม splash (Android)

คุณทำขั้นตอนที่ 1 และ 2 ในโปรแกรมออกแบบบนแคนวาสได้ เครื่องมือแก้ไขภาพหน้าจอ ของเราจัดการ asset ฝั่งสโตร์ (ภาพหน้าจอ, กราฟิกฟีเจอร์ Google Play 1024×500, รูปภาพ App Store) จากชุดแบรนด์เดียวกัน — ให้พื้นหลังและโลโก้ของ splash screen เหมือนกับ asset เหล่านั้น เพื่อให้การเปิด รายการ และไอคอนรู้สึกเป็นระบบเดียวกัน

แนวปฏิบัติที่ดีที่ใช้ได้ทุกที่

• ให้มินิมอล: โลโก้ พื้นหลัง ไม่มีอย่างอื่น ไม่มีแท็กไลน์ ไม่มีเลขเวอร์ชัน ไม่มีสปินเนอร์แกล้งโหลด
• ให้เข้ากับหน้าจอแรก: ยิ่ง splash คล้าย UI เริ่มต้นของแอปมากเท่าไร การเปิดก็ยิ่งรู้สึกสั้นลง
• เคารพ safe area: อย่าดันโลโก้เข้าไปในรอยบากหรือพื้นที่ท่าทาง
• จำกัดเวลา: ถ้าแอปพร้อมแล้ว ให้ปิดทันที splash ที่หน่วงแอปที่พร้อมแล้วเป็น anti-pattern บนทั้งสองแพลตฟอร์ม
• โหมดมืด: จัดหาตัวแปรโหมดมืดเมื่อแพลตฟอร์มรองรับ (แอตทริบิวต์ธีม Android; iOS ผ่าน asset เฉพาะ trait ในสตอรีบอร์ด)
• ทดสอบบนอุปกรณ์จริง: เวลาการเปิดแตกต่างกันมากระหว่างเรือธงกับมือถือราคาประหยัดอายุสี่ปี

ข้อผิดพลาดที่พบบ่อย

1. ใช้ splash เป็นโฆษณา ข้อความการตลาดควรอยู่ในภาพหน้าจอบนสโตร์ ไม่ใช่ในเส้นทางการเปิด
2. ฮาร์ดโค้ดภาพเต็มหน้าจอ บน Android สมัยใหม่ — คุณจะต่อสู้กับ splash ของระบบและได้พฤติกรรมไม่สม่ำเสมอข้าม OEM
3. ลืมแท็บเล็ตและแนวนอน: asset แนวตั้งเท่านั้นจะยืดหรือมีแถบดำบน iPad และแท็บเล็ต Android
4. สร้าง asset ใหม่ด้วยมือ สำหรับทุกความหนาแน่นแทนที่จะสร้างทั้งชุดจากต้นฉบับเดียว

เช็กลิสต์ก่อนเผยแพร่

• ภาพต้นฉบับ: โลโก้ + พื้นหลังแบรนด์เท่านั้น
• ตัวแปรสว่างและมืดเมื่อรองรับ
• ชุด launch storyboard iOS (ระบบเรนเดอร์ ไม่มีความล่าช้าจากโค้ด)
• ธีม Android 12+ กำหนดค่าแล้ว (ไอคอน + สีพื้นหลัง)
• สร้าง asset Android แบบเดิมสำหรับทุกความหนาแน่น
• ตรวจสอบบนมือถือเล็กอย่างน้อยหนึ่งเครื่อง แท็บเล็ตหนึ่งเครื่อง และอุปกรณ์โหมดมืดหนึ่งเครื่อง

ให้ภาพ launch สอดคล้องกับหน้าจอแรกของแอป และทดสอบพฤติกรรมบนแพลตฟอร์มที่คุณรองรับ ภาพหน้าจอบนสโตร์เป็นงานแยกต่างหาก: ใช้ ขั้นตอนการทำงานภาพหน้าจอ และ คู่มือข้อกำหนด สำหรับ asset ในรายการ

คำถามที่พบบ่อย

ภาพ splash screen ภาพเดียวพอดีกับทุกอุปกรณ์หรือไม่

ไม่เสมอไป ปฏิบัติตามการกำหนดค่า launch ของแพลตฟอร์มหรือเฟรมเวิร์กของคุณ และทดสอบแนว อุปกรณ์ขนาดต่างๆ และโหมดรูปลักษณ์ที่แตกต่างกัน

เครื่องมือแก้ไขภาพหน้าจอตั้งค่า launch screen ของแอปได้หรือไม่

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

ควรตรวจสอบการใช้งานเนทีฟที่ไหน

ใช้ แนวทาง launch screen ของ Apple และเอกสาร Splash Screen ของ Android ที่ลิงก์ไว้ ตรวจสอบ API ที่รองรับโดยเวอร์ชัน OS ขั้นต่ำของแอปคุณ