Tổng quan dự án
Với website Shopyy MMJerseys, chúng tôi tổ chức các trang quanh danh mục giải đấu và chọn áo đấu. Điều hướng giải đấu, lối vào danh mục và lưới hàng mới ở các cấp khác nhau, phục vụ cả người tìm đội bóng lẫn người xem mẫu. Lưới sản phẩm trắng, điểm nhấn điều hướng đỏ và chữ đen nối liền khám phá chủ đề, so sánh danh mục và xem từng sản phẩm.
| Dịch vụ | Ngành hàng | Nền tảng |
| Thiết kế và xây dựng website Shopyy | Thời trang | Shopyy |
| Yêu cầu dự án | Thị trường mục tiêu | Phong cách thiết kế |
| Danh mục giải đấu và lựa chọn áo đấu | Cửa hàng tiếng Anh cho khách mua áo đấu quốc tế | Lưới sản phẩm trắng, điểm nhấn điều hướng đỏ và chữ đen |
| Báo giá dự án | Hạng mục bàn giao | Thời gian thực hiện |
| 9.400 CNY | Trang chủ, cấu trúc danh mục, chi tiết sản phẩm, giao diện đáp ứng, trang thương hiệu và liên hệ | 22 ngày |
Thách thức thiết kế
Giải đấu, đội bóng, mùa giải và mẫu áo cùng ảnh hưởng đến lựa chọn. Cần làm rõ phân cấp danh mục trước, rồi để ảnh và thông số hỗ trợ quyết định cụ thể, tránh dồn mọi phân loại và mô tả vào cùng một cấp.
Chiến lược thiết kế: danh mục giải đấu và lựa chọn áo đấu
Điều hướng giải đấu, liên kết danh mục và hàng mới ở các cấp riêng, tạo lối vào cho cả người tìm đội và người tìm mẫu. Trang chủ định hướng, danh mục hỗ trợ so sánh, sản phẩm giải thích diện mạo và tùy chọn. Điều hướng và liên kết nội dung nối các cấp.
Arial và Helvetica tổ chức tiêu đề, điều hướng và nội dung; chữ hẹp nhấn thông tin trên thanh khuyến mại. Kích thước, độ đậm và độ rộng đoạn tạo thứ bậc. Lưới trắng, điểm đỏ và chữ đen xuyên suốt các trang chính, với thông tin trong nhóm gần nhau và khoảng cách lớn hơn giữa nhóm.
Chuyển động và chức năng: hỗ trợ lựa chọn hiện tại
Menu bung khi rê chuột mở danh mục; vùng sản phẩm giữ tab và ảnh mẫu thu nhỏ. Chi tiết tiếp tục với cỡ, số áo và tùy chọn cá nhân hóa. Trạng thái chọn rõ và khoảng nhóm nối việc xem với quyết định, không dùng hoạt ảnh thừa cạnh tranh với ảnh áo.
Sản phẩm trang chủ: so sánh diện mạo trước tên mẫu
Các tab New Arrivals, World Cup 2026 nằm trên lưới; màn hình minh họa đang hiển thị hàng mới. Mỗi thẻ đưa mặt trước áo lên đầu, tiếp theo là tên, giá và thông tin bổ sung. Kích thước ảnh gần nhau trên một hàng giúp so màu và họa tiết.
Nền trắng và chữ đen mảnh để màu đội bóng làm chủ đạo. Khoảng cách tách tab khỏi sản phẩm, thông tin trong thẻ vẫn gọn. Khách có thể quét một hàng mẫu rồi dừng đọc tên cụ thể.
Danh mục giải đấu: dùng đội bóng để thu hẹp lựa chọn
Trong Premier League, tên đội thành liên kết chữ bên trên lưới sản phẩm. Tiêu đề trang, danh mục con, Refine và Sort By mỗi phần có một cấp, tạo trình tự rõ dù nhiều thông tin.
Đỏ chỉ dùng cho điều hướng và dấu hàng mới; sản phẩm vẫn trên nền sáng. Ảnh áo lớn và chiều rộng thẻ nhất quán giúp so sánh. Thông số chi tiết ở trang sản phẩm để chữ dài không kéo giãn thẻ.
Chi tiết sản phẩm: ảnh thực tế cạnh thông tin lựa chọn
Ảnh áo lớn ở trái; bên phải lần lượt là tên, giá, ưu đãi và liên kết Similar Style. Áo sọc xanh đỏ chiếm vùng nhìn chính, ảnh thu nhỏ bổ sung các góc khác.
Đoạn chữ ngắn và khoảng nhóm tổ chức cột phải, nơi thanh ưu đãi vàng tạo điểm nhấn cục bộ. Chiều rộng ảnh và chữ xác định rõ giúp khách kiểm tra diện mạo trong khi tiếp tục chọn.
Tùy chọn: chia nhóm mẫu và cá nhân hóa
Ảnh áo và ảnh thu nhỏ giữ bên trái. Bên phải, thẻ ảnh dày nhưng căn thẳng thể hiện mẫu liên quan, rồi đến cỡ và tùy chỉnh. Các quyết định được tách theo thứ tự thay vì gom vào một danh sách thả xuống dài.
Ảnh nhỏ cách đều, viền sáng và khoảng trắng chia nhóm tùy chọn chữ. Khi nhiều mẫu, lưới vẫn giữ trật tự so sánh. Trường cỡ và số áo gần thông tin sản phẩm, giảm tìm qua lại giữa các khu vực.
Trang giới thiệu: đoạn ngắn bổ sung bối cảnh kinh doanh
Tiêu đề giữa và đoạn ngắn giới thiệu doanh nghiệp, giữ đầu và chân trang cửa hàng. Trang chỉ bổ sung bối cảnh; khách vẫn quay về danh mục qua điều hướng sau khi đọc.
Chữ không chân rõ, giãn dòng thoáng và khoảng giữa đoạn giúp đọc dễ. Nền trắng chữ đen tiếp tục mà không thêm banner sản phẩm, tạo nhịp khác với trang chọn áo.
Trang liên hệ: đặt lối nhắn tin ở vị trí rõ
Thông tin liên hệ ở trên, hình nhắn tin tròn màu xanh nhấn bước tiếp theo. Khoảng nhóm phân biệt email, hướng dẫn và lối vào để khách hiểu các kênh trước khi chọn cách liên hệ.
Vùng trắng đơn giản tiếp tục; lối vào xanh khác với điều hướng cửa hàng đỏ bên trên. Trang này hướng dẫn trao đổi, còn danh mục và giá ở các trang riêng.
Trang chủ di động: banner và sản phẩm hai cột tiếp nối chủ đề
Trên màn hình hẹp, thanh ưu đãi, banner áo và khu hàng mới được giữ lại. Lưới thích ứng chiều rộng điện thoại. Banner giới thiệu bộ sưu tập, danh sách ngay sau đó đi vào từng mẫu.
Tiêu đề và tên sản phẩm xuống dòng theo thẻ, ảnh vẫn đủ lớn để xem. Khoảng dọc tách banner, tab và hàng hóa, giữ cùng thứ tự nội dung trên di động.
Trang sản phẩm di động: ảnh chính giới thiệu mẫu
Di động bắt đầu bằng ảnh áo lớn và ảnh các góc, rồi tên, giá và thông tin khuyến mại. Hai cột máy tính thành trình tự dọc để mỗi nhóm đủ chiều rộng.
Ảnh áo vẫn nổi bật; chữ căn trái và khoảng cách có kiểm soát tổ chức chi tiết. Mẫu và thông số tiếp tục dọc trang, nối ảnh, tên và lựa chọn một cách liên tục.
Tổng kết thiết kế: nối chủ đề với chi tiết thực tế
Với MMJerseys, danh mục giải đấu và chọn áo định hướng lưới trắng, điều hướng đỏ và chữ đen trên trang chủ, danh mục và sản phẩm. Ảnh thể hiện bộ sưu tập, chữ giải thích chi tiết, điều khiển danh mục và thông số hỗ trợ bước sau. Di động giữ cùng thứ tự cho trải nghiệm nhất quán.
Lên kế hoạch website Shopyy rõ ràng cho thương hiệu
Hãy gửi website hiện tại, tư liệu thương hiệu và phạm vi trang cần làm. Chúng tôi sẽ cùng xem xét sản phẩm, thị trường mục tiêu và trọng tâm nội dung để lên kế hoạch trang, hình ảnh và chức năng phù hợp.
