วิธีวิเคราะห์ภาพหน้าจอ App Store ติดอันดับ top 100
การวิจารณ์ภาพหน้าจอ App Store ส่วนใหญ่ติดอยู่กับสุนทรียศาสตร์พื้นผิว — "อันนี้มี gradient สวย" "อันนี้ดูสะอาด" "อันนี้ดูพรีเมียม" คำกล่าวเหล่านั้นไม่ช่วยให้คุณเปลี่ยนแปลงอะไรในคารูเซลของตัวเองการวิจารณ์ที่มีประโยชน์คือเชิงโครงสร้าง: การตัดสินใจอะไรกำลังทำงาน conversion แยกจากการตัดสินใจที่เป็นแค่รสนิยม
Headspace เป็นข้อมูลอ้างอิงที่มีประโยชน์เพราะแบรนด์มีความเป็นผู้ใหญ่คารูเซลถูกพัฒนามาหลายปีและหน้า App Store เปิดให้ดูสาธารณะถ้าพวกเขาออกแบบใหม่ระหว่างที่โพสต์นี้ถูกเผยแพร่และเมื่อคุณอ่านรูปแบบโครงสร้างจะยังคล้ายกันแม้สีจะเปลี่ยน — นั่นแหละคือประเด็น
การตัดสินใจโครงสร้างสี่อย่าง
1. ตำแหน่งคำบรรยาย
Headspace ยึดคำบรรยายคารูเซลไว้ที่ส่วนบนของแต่ละ panel — โดยปกติวางไว้เหนือหรือข้างอุปกรณ์ไม่ใช่ใต้อุปกรณ์ข้อความใช้ serif อ่อนๆ (เครื่องหมายความอบอุ่นของแบรนด์) โดยหัวเรื่องนำเสนอข้อกล่าวอ้างและหัวเรื่องรองให้บริบท
ทำไมต้องยึดไว้ที่ด้านบน: นั่นคือที่ที่สายตาตกลงก่อนในการแสดง thumbnail คารูเซลการศึกษา eye-tracking จากบริษัทวิจัย ASO (Phiture และ AppTweak เผยแพร่การศึกษาบุคคลเกี่ยวกับเรื่องนี้) วางความสนใจสูงสุดที่ส่วนสามซ้ายบนของ panel ที่ขนาด thumbnail อย่างสม่ำเสมอคำบรรยายที่ยึดไว้ที่นั่นจะถูกอ่านคำบรรยายที่วางกึ่งกลาง panel ใต้อุปกรณ์มักถูกข้ามไป
2. มุมเอียงอุปกรณ์
ภาพหน้าจอของ Headspace โดยทั่วไปแสดงกรอบ iPhone แบบตรง — เอียงน้อยหรือเป็นศูนย์นี่คือการเลือกโดยเจตนา: การเอียงสื่อถึง "ทันสมัยมีพลัง" ตรงสื่อถึง "สงบโฟกัส" สำหรับแอปนั่งสมาธิความสงบอ่านได้ถูกต้องความมีพลังจะอ่านผิด
สำหรับหมวดหมู่แอปที่การเคลื่อนไหวเป็นส่วนหนึ่งของ value prop (เกมฟิตเนส video editor) การเอียงอุปกรณ์ 10-15° บนแกน Y เป็นรูปแบบที่โดดเด่นในคารูเซล top-100 สำหรับหมวดหมู่ที่สงบ/ยูทิลิตี (นั่งสมาธิการธนาคารโน้ต) แบบตรงพบบ่อยกว่าการตัดสินใจนี้ขึ้นอยู่กับหมวดหมู่ไม่ใช่กฎสากล
3. สีพื้นหลัง
Headspace ใช้สีพาสเทลอบอุ่น — สีส้มอ่อนครีมต้อยเทาบางครั้ง — ที่สื่อถึงความสงบและความเป็นมิตรสิ่งนี้สอดคล้องกันตลอดคารูเซล: แต่ละ panel มีสีพื้นหลังของตัวเองแต่ทั้งหมดอยู่ในตระกูลพาสเทลอบอุ่นเดียวกัน
อุณหภูมิสีไม่ได้ทำงาน conversion ด้วยตัวเองแต่ทำงานด้านการรับรู้หมวดหมู่ผู้ใช้ที่เลื่อนดู thumbnail App Store จะจำได้ว่า "นี่คือแอปสุขภาพ/ความสงบ" จากสีก่อนที่จะอ่านคำบรรยายใดๆการจดจำนั้นเร่งการตัดสินใจ "นี่เหมาะกับฉันไหม?"
ข้อผิดพลาดที่ควรหลีกเลี่ยง: การเลือกสีที่ไม่ตรงหมวดหมู่เพื่อโดดเด่นคุณโดดเด่นแต่ผู้ใช้อ่านหมวดหมู่ผิดที่ขนาด thumbnail และออกไป
4. ความต่อเนื่องระหว่าง panel
panel ของ Headspace มีโครงสร้างภาพร่วมกัน: ตำแหน่งคำบรรยายสม่ำเสมอสไตล์การแสดงผลอุปกรณ์ที่คล้ายกันโทนพื้นหลังที่สัมพันธ์กันแม้ว่าแต่ละ panel จะแสดงฟีเจอร์แอปที่แตกต่างกันโครงสร้างภาพไม่ได้รีเซ็ตระหว่างกันคารูเซลอ่านเป็นเรื่องราวเดียว
ความต่อเนื่องนี้คือสิ่งที่แยกคารูเซลที่ "ออกแบบเป็นหน่วยเดียว" ออกจาก "ภาพหน้าจอห้าภาพที่เป็นอิสระ" ผู้ใช้รับรู้คารูเซลเป็นข้อความที่สอดคล้องกันคู่แข่งที่ดูแต่ละ panel อย่างเป็นอิสระรู้สึกวุ่นวายกว่าที่ขนาด thumbnail
วิธีทำการวิเคราะห์เดียวกันกับแอปใดก็ได้
- เลือกแอป top-100 จำนวน 3 ตัวในหมวดหมู่เดียวกับคุณ. เปิดหน้า App Store ของพวกเขาถ่ายภาพหน้าจอคารูเซล
- จดการตัดสินใจโครงสร้างสี่อย่างของแต่ละตัว: ตำแหน่งคำบรรยายทิศทาง + มุมการเอียงอุณหภูมิสีความต่อเนื่องของ panel
- ดูว่าพวกเขามีอะไรเหมือนกัน. นั่นคือรูปแบบของหมวดหมู่ที่คุณน่าจะทำตามเว้นแต่คุณมีทุนแบรนด์ที่จะใช้จ่าย
- สร้างคารูเซลของคุณเองโดยเลียนแบบโครงสร้างร่วม — ตำแหน่งคำบรรยายเดียวกันการเอียงที่คล้ายกันสีที่เหมาะกับหมวดหมู่โครงสร้างพื้นหลังที่ต่อเนื่อง
- ปรับแต่งการตัดสินใจด้านรสนิยมให้เป็นแบรนด์ของคุณ — ฟอนต์ของคุณสีเน้นของคุณ copy เฉพาะของคุณ
การตัดสินใจด้านรสนิยม (ไม่ต้องกังวล)
สิ่งที่แตกต่างกันมากในคารูเซล top-100 ที่มีประสิทธิภาพสูง:
- การเลือกฟอนต์เฉพาะ — Inter, SF Pro, Söhne, Geist, GT America ล้วนปรากฏน้ำหนัก (700-900) สำคัญกว่าตระกูลฟอนต์
- สีเน้นที่แน่นอน — ภายในสีหมวดหมู่การเลือกเฉดสีเป็นเรื่องรสนิยม
- องค์ประกอบ SVG ประดับ (ดาวประกายเส้นป้าย) — มีในบางตัวไม่มีในบางตัวไม่มีความสัมพันธ์ conversion สม่ำเสมอ
- ความแตกต่าง contrast ของคำบรรยาย — สีขาวบนเข้มสีเข้มบนอ่อนคำบรรยายสีเน้นล้วนใช้ได้ตราบใดที่ contrast สูง
- การเลือกสีกรอบอุปกรณ์ — iPhone สีดำกับ Titanium กับ Natural Pro Max ปรากฏในสัดส่วนที่ใกล้เคียงกันเลือกสิ่งที่เข้ากับสีของคุณ
อะไรควรลอกเลียนอะไรควรเพิกเฉย
ข้อสรุปที่ตรงไปตรงมา: เมื่อคุณศึกษาภาพหน้าจอ top-100 ในหมวดหมู่ของคุณลอกเลียนการตัดสินใจโครงสร้างสี่อย่างและเพิกเฉยต่อสุนทรียศาสตร์พื้นผิวโดยเฉพาะ:
- ลอกเลียน: ตำแหน่งคำบรรยายทิศทางการเอียงอุปกรณ์ (และมุม) สีตามหมวดหมู่ความต่อเนื่องข้าม panel
- เพิกเฉย (ไม่ต้องเสียเวลา): ฟอนต์ที่แน่นอนสีเน้นที่แน่นอนรูปทรงประดับสีกรอบอุปกรณ์
รายการแรกกำลังทำงาน conversion เวลาออกแบบที่ใช้กับรายการแรกสะสมเวลาออกแบบที่ใช้กับรายการที่สองมักไม่ขยับตัวเลข conversion