คู่มือปฏิบัติสำหรับไอคอนแอป Android: อธิบายไอคอนแบบปรับได้ (และวิธีสร้างไอคอนของคุณอย่างถูกต้อง)

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

เหตุใด PNG สี่เหลี่ยมจัตุรัสเดียวจึงไม่เพียงพออีกต่อไป

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

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

ไอคอน Adaptive คืออะไร?

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

ในทรัพยากรของแอป โดยปกติจะกำหนดสิ่งนี้ผ่านไฟล์ XML เช่น mipmap-anydpi-v26/ic_launcher.xml ซึ่งเพียงชี้ไปที่พื้นหลังและเบื้องหน้าที่วาดได้ แทนที่จะมีข้อมูลพิกเซลในตัวมันเอง ic_launcher.png แบบแบนแบบดั้งเดิมยังคงเป็นทางเลือกสำหรับอุปกรณ์ที่ใช้ Android 7.1 หรือเก่ากว่า ซึ่งเกิดขึ้นก่อนระบบไอคอนแบบปรับเปลี่ยนได้ทั้งหมด

เหตุใดเขตปลอดภัยจึงมีความสำคัญ

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

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

รูปร่างของตัวเรียกใช้งานที่คุณจะได้พบกับ

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

การสร้างสินทรัพย์: ขนาดและความหนาแน่นที่คุณต้องการ

หากคุณจัดส่งแอปบน iOS ด้วย ให้เพิ่มอีกชุดหนึ่งทั้งหมด เนื่องจากข้อกำหนดไอคอน App Store ของ Apple มีความละเอียดสูงสุดที่ 1024x1024 และใช้รูปแบบที่ไม่ใช่เลเยอร์ที่แตกต่างไปจากเดิมอย่างสิ้นเชิงโดยไม่มีความโปร่งใสเลย

วิธีการแบบแมนนวลเทียบกับการใช้เครื่องกำเนิดไฟฟ้า

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

แยกไอคอนออกจาก APK ที่มีอยู่

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

ตัวแยกไอคอน ของเราจะดึงไฟล์เหล่านี้ออกจาก APK ที่คุณอัปโหลดทุกประการ โดยให้เนื้อหาไอคอนดิบตามความละเอียดใดก็ตามที่นักพัฒนาดั้งเดิมจัดส่งให้ ซึ่งมักจะเป็นวิธีที่เร็วที่สุดในการกู้คืนไฟล์ต้นฉบับที่สูญหาย หรือศึกษาว่าแอปอื่นจัดการกับปัญหาการออกแบบเดียวกันได้อย่างไร

ข้อผิดพลาดทั่วไปของไอคอนที่ถูกตั้งค่าสถานะในการตรวจสอบ

• การอบโดยใช้ช่องว่างภายในเพิ่มเติมหรือ UI Chrome เอฟเฟกต์เงาตกกระทบ เส้นขอบ หรือมุมโค้งมนที่เพิ่มด้วยตนเองภายในรูปภาพขัดแย้งกับการมาสก์ของระบบ และมักจะดูซ้อนขึ้นหรืออยู่ไม่ตรงแนว
• ใช้พื้นหลังสีขาวบริสุทธิ์โดยไม่มีขอบที่ชัดเจน บน Launcher ธีมแสง ไอคอนอาจแทบจะมองไม่เห็นบนพื้นหลังของหน้าจอหลัก
• รายละเอียดดีเกินคาด. ข้อความและเส้นสายที่ซับซ้อนที่ดูคมชัดที่ 512px มักจะกลายเป็นรอยเปื้อนที่อ่านไม่ออกเมื่อลดขนาดลงเหลือ 48px ซึ่งเป็นวิธีที่ผู้ใช้ส่วนใหญ่มองเห็นในแต่ละวัน
• ผู้ตรวจสอบและผู้ใช้ ไม่ตรงกันระหว่างไอคอนรายการ Play Store และไอคอนที่ติดตั้ง ต่างสังเกตเห็นเมื่อทั้งสองไม่ตรงกัน และอ่านว่าเลอะเทอะหรือแย่กว่านั้นคือน่าสงสัย
• ลืมทางเลือกเดิมไปโดยสิ้นเชิง หากแอปของคุณยังรองรับ Android เวอร์ชันก่อน 8.0 การข้าม PNG ทางเลือกแบบแบนอาจทำให้ผู้ใช้เหล่านั้นมีไอคอนที่ใช้งานไม่ได้หรือดูทั่วไป

ทดสอบไอคอนของคุณในรูปทรงต่างๆ ก่อนจัดส่ง

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

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

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