电商设计最佳实践，按购物者所在页面组织：首页、导航、分类列表、搜索、商品页和手机端，包括应包含的内容和常见错误。
按购物者思维建立清晰的导航、快速的页面、大且可放大的商品图片、加入购物车按鈕附近显示价格和配送信息、可见的评价、应用程序内搜索功能，以及支持游客购物的简短结账流程。优先按手机端设计，因为大多数浏览发生在手机上。
足够让购物者对比而不需要翻页翻个不停。很多网店每页显示24到48件，或使用“加载更多”按鈕。更重要的是按选购标准设置筛选器，例如尺寸、颜色、价格和库存状态。
商品名称、主图、价格、主要规格选择器（尺寸、颜色）、库存状态、加入购物车按鈕，以及配送或送达时间。如果有评价，星级评分和评价数量也应在首屏内。
通常不应该。自动轮播的幻灯片往往会被忽视，并可能影响无障碍访问和加载速度。单一强功能主图配合一条清晰信息和主要分类链接通常效果更好。
良好的电商网站设计帮助购物者快速完成三件事：找到合适商品、建立足够信任并购买，以及顺畅完成支付。实际操作中这意味着导航符合颅客思维方式、手机页面加载快速、商品图片尺寸足够、价格和配送信息展示如预、评价展示在显见位置，以及简短的结账流程。
此指南不列出通用原则，而是逐页讲解，因为购物者在每个页面的问题各不相同。
首页只有几秒钟确认你售什么以及针对谁。
应包含：
应避免：页面未加载完成就弹出弹窗、页面未加载完就自动轮播的幻灯片，以及影响手机端首屏显示的视频。
这里是大多数对比发生的页面。
| 元素 | 最佳实践 |
|---|---|
| 商品卡片 | 每件商品相同图片比例、名称、价格、评分，悬停时显示第二张图片 |
| 筛选器 | 匹配实际决策因素：尺寸、颜色、价格、材质、库存。显示数量。 |
| 排序 | 默认显示“推荐”或“销量最好”，并提供价格和最新选项 |
| 库存 | 隐藏或清晰标记应售尽商品 |
| 分页 | 加载更多或数字分页；返回时保留筛选器状态 |
| 手机端 | 筛选器放在向上滑出面板中，配合明确的“显示34个结果”按鈕 |
一个常见错误是筛选器在颅客打开商品页再返回时清空。请测试返回按鈕行为。
搜索的购物者通常购买意向很强，因此差劲的搜索功能会直接导致销售损失。
商品页承担销售功能。从上到下逐项梳理。
先按商品对颅客的实用价值描述，再进行规格说明。对尺寸、材质和保养使用简短的规格表格。尺寸表应在同一页面内展开显示，而非跳转至其他页面。
添加商品结构化数据（名称、图片、价格、库存状态、评价），让搜索结果可展示价格和评分。
结账设计是一个独立的学科。简短版本：尽早展示全部费用，允许游客结账，尽量精简表单，并提供 Apple Pay 和 Google Pay 等快捷支付方式。结账流程优化指南逐步介绍每个环节。
设计并不在付款按鈕后结束。订单确认页和邮件几乎被每位买家仔细阅读。
大多数网店访问来自手机，因此应优先设计和测试手机端布局，再拓展至桌面端。
两者都是设计决策，而非仅仅是技术问题。
速度：压缩图片并使用 WebP 或 AVIF 格式，为图片设置宽度和高度以防止布局偶移，限制第三方应用和脚本，并在 Google PageSpeed Insights 中检查核心网页指标。
无障碍访问：符合 WCAG 2.2 AA 的颜色对比度、商品图片的 alt 文字、带标签的表单字段、可用键盘访问的菜单和筛选器，以及说明具体错误内容的错误提示。无障碍访问的网店人人都更易用，而且在很多地区，无障碍访问也是法律要求。
如果你从零开始，一个良好的起始布局可以育唔很多默认设定。浏览模板中的网店设计，或在对话中向 We.Inc 描述你的商店，它会自动建立含商品页、购物车和结账功能的网店，你再用可视化或代码编辑器调整，含托管和 SSL。
免费开始 · 无需信用卡