รีดีไซน์ร้านค้า: ลุคพรีเมียมพร้อมความลึกและความสมบูรณ์แบบ

ใหม่

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

สิ่งที่เปลี่ยนแปลง

การ์ดสินค้า

หัวใจของร้านค้าได้รับการอัปเกรดครั้งใหญ่ที่สุด:

เอฟเฟกต์กระจก พร้อมการไล่ระดับแบบเลเยอร์และเงาลึก
ฮอเวอร์ที่ลื่นไหล — การ์ดยกขึ้น, รูปภาพขยายเป็น 1.08 เท่า, แสงเรืองปรากฏขึ้น
รูปภาพที่ใหญ่ขึ้น (สูง 170px, จากเดิม 150px)
โหลดแบบ Lazy — รูปภาพโหลดเฉพาะเมื่อเลื่อนเข้าสู่มุมมอง, ช่วยประหยัดแบนด์วิดท์
เส้นแบ่งขอบ ระหว่างข้อมูลสินค้าและพื้นที่ราคา/ปุ่ม
ราคาที่ใหญ่ขึ้น (16px) พร้อมแสงเรืองที่เข้มข้นขึ้นสำหรับสกุลเงิน CC และ KC

ส่วนหัวร้านค้าใหม่

แถบเอกลักษณ์ใหม่ปรากฏเหนือตารางสินค้า โดยแสดง:

ไอคอนประเภท ของร้านค้าในคอนเทนเนอร์สีโทนกลม
ชื่อร้านค้า ในข้อความตัวหนาขนาดใหญ่
ป้ายประเภท (เช่น “Hardware”, “Food”, “Services”) พร้อมสีของประเภทนั้น
จำนวนสินค้า และ สกุลเงิน

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

แท็บช่องทาง

แท็บสำหรับสลับระหว่างร้านค้าได้รับลุคที่สะอาดตาขึ้น:

สไตล์แบบยาเม็ด พร้อมมุมโค้งมน
ฮอเวอร์ เปลี่ยนพื้นหลังอย่างละเอียด
แท็บที่ใช้งานอยู่ เรืองแสงด้วยการไล่ระดับสีฟ้า-ไซยานและเงาด้านใน
ลบเอฟเฟกต์ border-mask ที่ซับซ้อนเพื่อประสิทธิภาพที่ดีขึ้น

แถบตัวกรอง

ตัวควบคุมการค้นหาและตัวกรองตอนนี้สมบูรณ์แบบขึ้น:

ช่องป้อนข้อมูลแบบโค้งมน (border-radius 10px) พร้อมวงโฟกัส
เมนูเลือกแบบยาเม็ด ที่ไฮไลต์เมื่อฮอเวอร์
จำนวนตัวกรอง แสดงเป็นป้ายพร้อมพื้นหลัง
ปุ่มล้าง พร้อมสีแดงและเอฟเฟกต์ยกขึ้นเมื่อฮอเวอร์

แถบด้านของตะกร้า

ตะกร้าสินค้าและพาเนลคำสั่งซื้อด้านขวา:

ตำแหน่งแบบ Sticky — อยู่ในมุมมองเสมอขณะเลื่อนดูสินค้า
สกอลบาร์แบบกำหนดเอง — แถบสีฟ้าบางแทนค่าเริ่มต้นของเบราว์เซอร์
พื้นหลังแบบไล่ระดับ พร้อมเงาที่ละเอียดอ่อน
ปุ่มขนาดใหญ่ขึ้น พร้อมเอฟเฟกต์ยกขึ้นเมื่อฮอเวอร์
ปุ่มชำระเงิน พร้อมการไล่ระดับสีและแสงเรืองเมื่อฮอเวอร์

รีวิว

ส่วนรีวิวที่ด้านล่างของร้านค้าแต่ละแห่ง:

ลำดับชั้นทางสายตาที่ดีขึ้น พร้อมเส้นแบ่งใต้สรุป
เอฟเฟกต์ฮอเวอร์ บนการ์ดรีวิวแต่ละใบ (ขอบด้านซ้ายสว่างขึ้น)
ดาวที่ใหญ่ขึ้น และระยะห่างที่ดีขึ้น
ปุ่มส่ง พร้อมการไล่ระดับสีและเงาเมื่อฮอเวอร์

ค้นหาใกล้เคียง & ค้นหาร้านค้า

ทั้งสองฟีเจอร์ค้นหาได้รับการออกแบบการ์ดแบบพรีเมียม:

ความลึก ด้วยเงาแบบเลเยอร์
แอนิเมชันเลื่อน เมื่อฮอเวอร์ (การ์ดใกล้เคียงเลื่อนไปทางขวา)
เอฟเฟกต์ยกขึ้น บนการ์ดค้นหาร้านค้าพร้อมแสงเรืองสีม่วง
ไอคอนที่ใหญ่ขึ้น (40px) พร้อมเงาของตัวเอง

สถานะว่าง

เมื่อไม่มีสินค้าให้แสดง แทนที่จะเป็นข้อความธรรมดา ตอนนี้คุณจะเห็น:

ไอคอนขนาดใหญ่ (📦)
ข้อความชัดเจน (“ไม่มีสินค้าที่ตรงกับตัวกรองของคุณ” หรือ “ยังไม่มีสินค้า”)
คำใบ้ที่เป็นประโยชน์ (“ลองปรับการค้นหาของคุณหรือกลับมาตรวจสอบใหม่ภายหลัง”)

แอนิเมชัน

การ์ดสินค้าตอนนี้จะแอนิเมตเข้ามาด้วย ลำดับการปรากฏแบบพลิ้ว — การ์ดแต่ละใบจะค่อยๆ ปรากฏและขยายขึ้นเล็กน้อย โดยมีดีเลย์สั้นๆ ระหว่างการ์ด แอนิเมชันใช้เส้นโค้ง cubic-bezier ที่ลื่นไหลเพื่อให้รู้สึกพรีเมียม

ตัวเลือกปิดหมุดแผนที่

การเปิดตัวครั้งนี้ยังรวมถึงฟีเจอร์ความเป็นส่วนตัวใหม่สำหรับเจ้าของร้านค้า:

ผู้ให้บริการที่ไม่ต้องการเปิดเผยตำแหน่งทางกายภาพของตน ตอนนี้สามารถ ยกเลิกการเลือก “แสดงร้านค้าของฉันบนแผนที่โลก” ในการตั้งค่าร้านค้าได้ ร้านค้ายังคงใช้งานได้ตามปกติ — เพียงแต่จะไม่ปรากฏเป็นหมุดบนแผนที่

สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับที่ปรึกษา, ผู้ให้บริการดิจิทัล, และผู้ที่ธุรกิจไม่มีหน้าร้านสาธารณะ

ประสิทธิภาพ

แม้จะมีรูปลักษณ์ที่สมบูรณ์ขึ้น ร้านค้ากลับ เร็วขึ้น จริงๆ เนื่องจาก:

loading="lazy" บนรูปภาพสินค้า — เบราว์เซอร์โหลดเฉพาะรูปภาพที่มองเห็นได้
CSS ที่เรียบง่ายขึ้น (ลบ ::before masks ที่ซับซ้อนบนแท็บช่องทาง)
ทรานส์ฟอร์มที่เร่งด้วย GPU สำหรับแอนิเมชันฮอเวอร์

อะไรต่อไป

การรีดีไซน์ร้านค้าวางรากฐานทางสายตาสำหรับฟีเจอร์ที่กำลังจะมา:

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

ENLIGHTENMENT คือเกมบนบล็อกเชนเกี่ยวกับการเติบโตส่วนบุคคล, การสำรวจอาร์คิไทป์, และการสั่นพ้องร่วมกัน ร่วมกับเราได้ที่ getplasma.org.