Hình ảnh là yếu tố quan trọng khi thiết kế cửa hàng. Chất lượng hình ảnh tốt và cách hiển thị hợp lý có thể cải thiện thiết kế tổng thể của cửa hàng và nâng cao tỷ lệ chuyển đổi của cửa hàng. Chúng tôi đã liệt kê kích thước hình ảnh lý tưởng cho từng mô-đun và một số vấn đề bạn có thể gặp phải trong quá trình thiết kế để bạn có thể lựa chọn hình ảnh phù hợp theo những gợi ý sau đây
1. Kích thước hình ảnh được đề xuất cho mỗi mô-đun
A. Hình ảnh sản phẩm
Vì bố cục sản phẩm trên phiên bản máy tính có thể điều chỉnh được, vì vậy bạn nên ưu tiên điều chỉnh hiệu quả hiển thị hình ảnh trên phiên bản điện thoại.
Chúng tôi cung cấp 4 tỷ lệ sản phẩm: vuông (1: 1), dọc (2: 3), ngang (4: 3) và một tỷ lệ gốc. Bạn có thể chọn tỷ lệ thích hợp theo hình dạng sản phẩm của bạn.
Lưu ý: Nếu tỷ lệ gốc được chọn, nó sẽ được hiển thị theo tỷ lệ của ảnh gốc. Vui lòng giữ tỷ lệ của tất cả các hình ảnh sản phẩm nhất quán nhất có thể. Nếu không, khi hiển thị danh sách sản phẩm, hình ảnh của các sản phẩm sẽ xuất hiện không đồng đều và ảnh hưởng đến trải nghiệm khi xem cửa hàng.
Tỷ lệ được đề xuất |
2:3 |
|
Kích thước tối thiểu (75% chiều rộng của phiên bản điện thoại) |
Chiều rộng 560px |
Chiều cao 840px |
Kích thước được đề xuất (ảnh lớn trong trang chi tiết sản phẩm) |
Chiều rộng 1700px |
Chiều cao 2550px |
B. Trình chiếu Slide
Chúng tôi hỗ trợ xử lý cho ảnh đơn đối với phiên bản máy tính và phiên bản điện thoại, và các hình ảnh có thể được tải lên riêng biệt tùy theo hiệu quả hiển thị.
Lưu ý: Nếu bạn chọn Chiều cao cố định, hình ảnh của bạn sẽ bị cắt; nếu bạn chọn Hiệu ứng cuộn song song, hình ảnh cũng sẽ bị cắt ngay cả khi bạn đã chọn chế độ tự động điều chỉnh kích thước hình ảnh.
Tỷ lệ đề xuất cho phiên bản máy tính |
16:9 |
|
Kích thước đề xuất |
Chiều rộng 1920px |
Chiều cao 1080px |
Tỷ lệ đề xuất cho phiên bản điện thoại |
1:1 |
|
Kích thước đề xuất |
Chiều rộng 1125px |
Chiều cao 1125px |
C. Hình ảnh đơn
Hình ảnh đơn có chiều cao mặc định cố định và ảnh sẽ bị cắt. Bạn có thể kiểm soát vùng ảnh mà bạn không muốn cắt bằng cách chọn khu vực hiển thị ảnh hoặc chọn chế độ "tự động điều chỉnh kích thước hình ảnh" để tránh bị cắt.
Lưu ý: Chiều cao của hình ảnh phải cao hơn chiều cao cắt đã thiết lập, nếu không hình ảnh sẽ bị phóng to và mờ.
Tỷ lệ đề xuất |
16:9 |
|
Kích thước đề xuất |
Rộng 1920px |
Cao 1080px |
D. Danh sách đồ hoạ
Tỷ lệ đề xuất |
4:3 (tỷ lệ này chỉ dùng để tham khảo, tỷ lệ ban đầu sẽ được sử dụng) |
|
Kích thước đề xuất |
Chiều rộng 650px |
Chiều cao 488px |
E. Quảng cáo chân trang
Tỷ lệ đề xuất |
16:9 (có thể định dạng cấu hình) |
|
Kích thước đề xuất |
Chiều rộng 650px |
Chiều cao 365px |
F. Đề xuất về kích thước cho các mô-đun khác
Tên mô-đun |
Kích thước đề xuất |
Giao diện có thể áp dụng |
Icon Nhãn trình duyệt |
144px*144px |
Edges/Cycle/Carfit |
Mẫu bình luận |
240px*240px |
Edges/Cycle/Carfit |
Lưới đồ hoạ |
Các bố cục khác nhau có kích thước khác nhau và chiều rộng được đề xuất trên 1420px. |
Edges/Cycle/Carfit |
Đề xuất sản phẩm nổi bật |
Các bố cục khác nhau có kích thước khác nhau và chiều rộng được đề xuất trên 1420px. |
Edges/Cycle/Carfit |
Hình ảnh mua sắm - Cài đặt |
Các bố cục khác nhau có kích thước khác nhau và chiều rộng được đề xuất trên 1420px. |
Edges/Cycle/Carfit |
Danh mục thương hiệu |
320px*320px |
Expect/Control/Metal/Soo/Flexible |
Chiến dịch quảng cáo |
Danh mục: chiều rộng 1600px trở lên Hình ảnh banner: chiều rộng 400px trở lên |
Expect/Control/Metal/Soo/Flexible |
2. Các đề xuất khác
Bạn nên tải lên hình ảnh gốc có kích thước càng lớn càng tốt để hiển thị hình ảnh tốt nhất.
Bạn nên sử dụng định dạng tệp ".jpg" thay vì "png" để tải hình ảnh nhanh hơn. Giao diện sẽ tải kích thước hình ảnh phù hợp dựa trên màn hình để đảm bảo tốc độ tải trang web của bạn.
3. Câu hỏi thường gặp
Q1. Tại sao hình ảnh tải lên sẽ bị cắt?
A1.
-
Thông số được thiết lập để cố định chiều cao.
SMô-đun ảnh đơn: Khi điều chỉnh phù hợp với các chiều rộng màn hình và điện thoại khác nhau, chiều cao của mô-đun được cố định theo mặc định và không thể hiển thị hình ảnh theo tỷ lệ bằng nhau để đảm bảo có thể đọc được nội dung.
Mô-đun trình chiếu slide: Nếu được thiết lập ở chiều cao cố định, hình ảnh sẽ duy trì cùng chiều cao khi hiển thị trên màn hình có chiều rộng khác nhau. Hình ảnh sẽ bị cắt khi tỷ lệ thay đổi.
-
Một tỷ lệ cố định được thiết lập
Nếu một mô-đun được đặt là tỷ lệ cố định, nó sẽ tự động cắt ảnh; nếu khu vực hiển thị hình ảnh không định dạng được, hình ảnh sẽ mặc định bị cắt ở giữa. -
Xử lý hình ảnh tương thích nhiều màn hình
Hình ảnh tương thích nhiều màn hình được sử dụng trong nhiều mô-đun giao diện (slide trình chiếu, hình ảnh đơn, v.v.). Hình ảnh tương thích nhiều màn hình là công nghệ tiêu chuẩn công nghiệp để phóng to và cắt hình ảnh có định dạng rộng để đảm bảo rằng hình ảnh có cùng kích thước trên máy tính và điện thoại. Ảnh bạn tải lên sẽ được phóng to cho đến khi hình ảnh bao phủ hoàn toàn khu vực hiển thị để mở rộng tỷ lệ mà không làm kéo hoặc làm biến dạng hình ảnh,
Hình ảnh được hiển thị trước khi sử dụng chức năng tương thích nhiều màn hình
Hình ảnh được hiển thị sau khi sử dụng chức năng tương thích nhiều màn hình
Q2. Tại sao hình ảnh vẫn bị cắt sau khi tôi chọn chế độ tự động điều chỉnh kích thước hình ảnh?
A2. Có thể bạn đã bật hiệu ứng cuộn song song. Để hiệu ứng này hiển thị hiệu quả, hình ảnh sẽ tự động được phóng to như vậy sẽ làm cho kích thước hình ảnh vượt quá khu vực hiển thị hình ảnh dẫn đến xảy ra tình trạng hình ảnh bị cắt xén.
Q3. Tại sao hình ảnh vẫn hiển thị không đầy đủ ngay cả khi tôi đã sử dụng hình ảnh đáp ứng với kích thước được đề xuất?
A3. Trước tiên, bạn hãy kiểm tra xem chiều cao của hình ảnh đã chọn chế độ "tự động điều chỉnh kích thước hình ảnh" hay chưa. Nếu các thông số cài đặt không bị sai sót, hãy kiểm tra xem bạn có bật "hiệu ứng cuộn song song" hay không. Nếu có, bạn hãy tắt hiệu ứng này để hình ảnh không bị cắt.
Bình luận