รับดีไซน์ฟรีของคุณ
· Design · อ่าน 4 นาที

ชุดสีสำหรับภาพหน้าจอ App Store

ชุดสีสำหรับภาพหน้าจอ App Store
TL;DR. การเลือกสีสำหรับภาพหน้าจอ App Store ต้องผ่านการประเมินสามครั้งได้แก่ขนาดเต็มบนหน้าสินค้าขนาดภาพขนาดเล็กในการค้นหาและเทียบกับแอปอีกเจ็ดตัวที่อยู่ข้างๆชุดสีที่ผ่านได้ทั้งสามบริบทมักไม่ใช่ชุดที่ดูดีที่สุดในไฟล์ Figma เลือกชุดสีเล็กที่มีคอนทราสต์สูงและตรวจสอบที่ความกว้าง 200px ก่อนส่ง

ชุดสีของภาพหน้าจอ App Store ส่วนใหญ่ล้มเหลวในแบบเดียวกันคือดูสวยงามบนจอขนาด 27 นิ้วแต่กลายเป็นสีโคลนในขนาดที่ App Store แสดงจริงคารูเซลแสดงผลที่ความละเอียดเต็มบนหน้าสินค้าแต่ที่ความกว้างภาพขนาดเล็กในผลการค้นหาและใน rail "More like this" หากชุดสีของคุณใช้ได้แค่ขนาดเดียวคุณสูญเสีย Conversion ในขนาดอื่น

สามบริบทการรับชม

ให้ถือว่าทั้งสามบริบทเป็นข้อจำกัดดีไซน์ที่แยกกันชุดสีที่ชนะในบริบทหนึ่งอาจแพ้ในอีกบริบท

  • ขนาดเต็ม (1290 × 2796 บน iPhone) การแสดงผลบนหน้าสินค้าจุดที่ผู้ใช้ลงเอยหลังกดดูการเปลี่ยน gradient อย่างละเอียดข้อความขนาดเล็กและสีแบบซ้อนกันหลายชั้นอ่านออกได้ที่นี่นักออกแบบส่วนใหญ่ทดสอบแค่ขนาดนี้
  • ภาพขนาดเล็กในการค้นหา (~300 × 650) สามพาเนลแรกของคารูเซลที่แสดงควบคู่กับไอคอนแอปคู่แข่งในการค้นหา App Store รายละเอียดละเอียดหายไปบล็อคสีคอนทราสต์สูงอ่านออกได้ gradient อ่อนๆจะแบน
  • บริบทที่อยู่ข้างๆ ภาพหน้าจอของคุณไม่เคยปรากฏโดดเดี่ยวในการค้นหาแอปอีกเจ็ดตัวรอบข้างมีชุดสีของตัวเองหากทุกคนในหมวดหมู่เดียวกันใช้โทนอุ่นและคุณก็ใช้โทนอุ่นด้วยภาพหน้าจอของคุณจะกลืนหายไปในกำแพง

กฎห้าสี

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

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

คอนทราสต์: WCAG AA ไม่ใช่ตัวเลือก

ข้อความคำบรรยายเทียบกับพื้นหลังพาเนลควรผ่าน WCAG AA (4.5:1 สำหรับข้อความเนื้อหา 3:1 สำหรับข้อความขนาดใหญ่ 24pt+) ไม่ใช่เพราะ Apple ตรวจสอบแต่เพราะในขนาดภาพขนาดเล็กสิ่งใดที่ต่ำกว่า AA จะอ่านไม่ออกจริงๆใช้เครื่องมือตรวจสอบคอนทราสต์บนสีคำบรรยายสุดท้ายเทียบกับสีพื้นหลังสุดท้ายก่อนส่งออก

ความล้มเหลวที่พบบ่อยคือข้อความสีเทาเข้มบน gradient สีเทาเข้มที่อ่อนกว่าเล็กน้อยดูซับซ้อนใน Figma แต่หายไปเลยที่ความกว้างภาพขนาดเล็ก

แนวทางหมวดหมู่เป็นจุดเริ่มต้นไม่ใช่กฎ

ดูแอป 20 อันดับแรกในหมวดหมู่ App Store ของคุณสังเกตสีพื้นหลังหลักนั่นคือแนวทางของหมวดหมู่ชุดสีที่ผู้ใช้เชื่อมโยงกับ "แอปที่น่าเชื่อถือในหมวดหมู่นี้" คุณอาจเลือกให้ตรงกัน (ความเสี่ยงต่ำกว่าความแตกต่างน้อยกว่า) หรือตั้งใจทำให้แตกต่าง (ความเสี่ยงสูงกว่าความแตกต่างสูงกว่าหากได้ผล)

การทำให้แตกต่างจากแนวทางได้ผลเมื่อมีเหตุผลเฉพาะเจาะจงหมวดหมู่ของ Notion (productivity) โน้มไปทางพาสเทลสดใสในปี 2022 Notion ใช้โทนใกล้โมโนโครมพร้อมความอบอุ่นอ่อนๆและดูจริงจังกว่าหมวดหมู่ของ Headspace (mental wellness) เต็มไปด้วยพาสเทลอ่อน gradient ส้มเข้มของ Headspace โดดเด่นโดยไม่รุนแรงลำดับที่ปลอดภัยคือตรงกันก่อนแล้วค่อยแตกต่างหลังจากมีข้อมูลการติดตั้งเพื่อเปรียบเทียบ

การตรวจสอบ "ที่อยู่ข้างๆในการค้นหา"

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

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

มืดสว่างหรือไม่ฝ่ายใด

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

ดู dark mode vs light mode สำหรับเมื่อไหร่ที่แต่ละแบบชนะตามหมวดหมู่สรุปสั้นๆคือมืดชนะในเกมเพลงภาพ/วิดีโอ AI สว่างชนะใน productivity การศึกษาสุขภาพส่วนที่เหลือเป็นเรื่องของแบรนด์

สีและการแปลภาษา

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

สิ่งที่ควรทำสัปดาห์นี้

  1. ตรวจสอบภาพหน้าจอปัจจุบันที่ความกว้าง 200px สิ่งที่อ่านไม่ออกในขนาดนั้นต้องเปลี่ยน
  2. ตรวจสอบคอนทราสต์ WCAG AA ของคำบรรยายทุกคำเทียบกับพื้นหลังพาเนล
  3. ค้นหาด้วยสามคำค้นหาหลักและถ่ายภาพบริบทรอบข้างชุดสีของคุณโดดเด่นหรือไม่?
  4. หากกำลังส่งดีไซน์ใหม่ให้จำกัดไว้ที่ห้าสีสูงสุดการเพิ่มสีที่หกหมายถึงตัดสีหนึ่งออก

อ่านต่อ

เปิดเครื่องมือแก้ไข →