ออกแบบเว็บเสื้อบอล Shopyy: MMJerseys เมนูลีกและการเลือกรุ่น

ภาพรวมโครงการ

เว็บ Shopyy ของ MMJerseys จัดหน้าตามลีกและการเลือกเสื้อบอล เมนูลีก ทางเข้าแคตตาล็อก และกริดสินค้าใหม่แยกเป็นระดับ รองรับทั้งคนหาเฉพาะทีมและคนดูรุ่น กริดพื้นขาว จุดเน้นสีแดง และข้อความดำเชื่อมการดูธีม เปรียบเทียบ และดูรายชิ้น

ความท้าทายในการออกแบบ

ลีก ทีม ฤดูกาล และรุ่นต่างมีผลต่อการเลือก เราจึงทำลำดับแคตตาล็อกให้ชัดก่อน แล้วให้ภาพและตัวเลือกรองรับรายละเอียด ไม่อัดหมวดหมู่และคำอธิบายทั้งหมดในระดับเดียว

กลยุทธ์: แคตตาล็อกลีกและการเลือกเสื้อบอล

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

Arial และ Helvetica ใช้กับหัวข้อ เมนู และเนื้อหา ส่วนแถบโปรโมชั่นบนสุดใช้ตัวแคบเน้นข้อมูล ขนาด น้ำหนัก และความกว้างย่อหน้าสร้างลำดับ กริดขาว แดง และดำใช้ต่อเนื่อง ข้อมูลในกลุ่มกระชับและระหว่างส่วนโปร่งขึ้น

การเคลื่อนไหวและฟังก์ชันเพื่อการเลือกปัจจุบัน

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

สินค้าหน้าแรก: เทียบรูปลักษณ์ก่อนอ่านชื่อ

แท็บ New Arrivals และ World Cup 2026 อยู่เหนือกริด โดยภาพนี้แสดงสินค้าใหม่ การ์ดแต่ละใบเริ่มด้วยด้านหน้าเสื้อ ตามด้วยชื่อ ราคา และข้อมูลเสริม ภาพขนาดใกล้กันช่วยเทียบสีและลาย

พื้นขาวกับข้อความดำบางให้สีทีมโดดเด่น เว้นระหว่างแท็บและสินค้า ขณะที่ข้อมูลในการ์ดกระชับ ผู้ชมกวาดดูทั้งแถวก่อนหยุดอ่านชื่อเฉพาะได้

แคตตาล็อกลีก: ใช้ทีมจำกัดตัวเลือก

ใน Premier League ชื่อทีมเป็นลิงก์เหนือกริดสินค้า ชื่อหน้า หมวดย่อย และ Refine กับ Sort By มีระดับของตนเอง จัดข้อมูลจำนวนมากให้มีลำดับ

สีแดงใช้เฉพาะเมนูและป้ายสินค้าใหม่ พื้นสินค้ายังอ่อน ภาพเสื้อใหญ่กับการ์ดกว้างเท่ากันช่วยเปรียบเทียบ สเปกยาวอยู่ในหน้ารายละเอียดไม่ยืดการ์ด

รายละเอียดสินค้า: ภาพกับตัวเลือกอยู่ข้างกัน

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

ย่อหน้าสั้นกับช่องว่างกลุ่มจัดคอลัมน์ขวา แถบเหลืองเน้นโปรโมชั่น ภาพและข้อความมีความกว้างชัดเพื่อดูรูปลักษณ์พร้อมเลือกต่อ

ตัวเลือก: แยกรุ่นและการปรับแต่งเป็นกลุ่ม

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

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

หน้าแบรนด์: อธิบายธุรกิจด้วยย่อหน้าสั้น

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

ตัวอักษร sans serif ชัด ระยะบรรทัดกว้าง และช่องว่างระหว่างย่อหน้าช่วยอ่าน ใช้ขาวดำโดยไม่เพิ่มแบนเนอร์สินค้า จังหวะจึงต่างจากหน้าเลือกรุ่น

ติดต่อ: ทางเข้าแจ้งข้อความที่เห็นชัด

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

พื้นที่ขาวยังเรียบง่าย ทางเข้าสีน้ำเงินต่างจากเมนูแดงด้านบน หน้านี้นำสู่การติดต่อ ส่วนแคตตาล็อกและราคาอยู่หน้าของตนเอง

หน้าแรกมือถือ: แบนเนอร์และสินค้าสองคอลัมน์

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

หัวข้อและชื่อสินค้าตัดบรรทัดตามการ์ด ภาพยังใหญ่พอ ระยะห่างแนวตั้งแยกแบนเนอร์ แท็บ และสินค้า ให้ลำดับเนื้อหาเหมือนเดิม

หน้าสินค้ามือถือ: ภาพใหญ่แนะนำรุ่นก่อน

มือถือแสดงภาพเสื้อกับภาพย่อก่อน ตามด้วยชื่อ ราคา และโปรโมชั่น สองคอลัมน์เปลี่ยนเป็นแนวตั้ง ให้แต่ละกลุ่มมีความกว้างพอ

ภาพเสื้อยังเด่น ข้อความชิดซ้ายและระยะห่างควบคุมช่วยจัดข้อมูล รุ่นและสเปกต่อเนื่องลงไป เชื่อมภาพ ชื่อ และการเลือก

สรุปการออกแบบ: เชื่อมธีมกับข้อมูลจริง

MMJerseys ใช้ลีกและการเลือกเสื้อเชื่อมหน้าแรก หมวดหมู่ และรายละเอียดด้วยกริดขาว แดง และข้อความดำ ภาพสื่อธีม ข้อความอธิบาย เมนูและสเปกรองรับขั้นต่อไป มือถือคงลำดับเพื่อประสบการณ์ภาพและการดูที่สอดคล้องกัน

วางแผนเว็บไซต์ Shopyy ที่ชัดเจนสำหรับแบรนด์ของคุณ

ส่งเว็บไซต์เดิม สื่อแบรนด์ และขอบเขตหน้าที่ต้องการ เราจะพิจารณาประเภทสินค้า ตลาด และเนื้อหาสำคัญเพื่อวางหน้า ภาพ และฟังก์ชันร่วมกัน