你大概遇到过这种情况：接到一个电商站的需求，首页、列表页、详情页三张图摆在面前，不知道先动哪张、每张到底该放什么。或者页面做完了，被说「不像能用的」，又说不出哪里不对。这篇按三类页面拆开讲：各自的目标是什么、设计与制作的先后顺序、交付前查哪几项，最后附一份可照着走的排查清单。
你大概遇到过这种情况：接到一个电商站的需求，首页、列表页、详情页三张图摆在面前，不知道先动哪张、每张到底该放什么。或者页面做完了，被说「不像能用的」，又说不出哪里不对。
这篇按三类页面拆开讲：各自的目标是什么、设计与制作的先后顺序、交付前查哪几项，最后给一份能照着走的排查清单。不聊玄学审美，只聊怎么让页面能用。
三类页面各解决什么问题，先分清再动手
- 首页
- 让人知道这是什么站、能往哪走，重点是入口清晰、第一屏不迷路
- 列表页
- 在一堆同类里让用户挑出想点的那一个，重点是筛选、排序、卡片可比性
- 详情页
- 把犹豫变成下单，重点是信息顺序和信任感
这三类页面，用户给的耐心完全不一样。首页是扫一眼就走，列表页是快速对比着划，详情页才会停下来细看。所以别拿同一套排版节奏套三张页面，首页堆满参数、详情页只放一张大图，都是常见的错位。
什么情况下不适用：如果你的站内流量主要来自站外直达详情页，首页和列表页的设计权重可以往下降，把精力压到详情页与站内跳转路径上，先保证落地页那一屏说得清、点得动。
列表页：卡片和筛选怎么排
列表页的核心不是好看，是「可比」。同一排卡片里，用户眼睛要能快速对齐同类信息，所以先定卡片里固定出现哪几项信息，再谈排版。
- 先定卡片固定项：图、名称、关键参数、状态（在售/缺货），这些位置在每张卡片上要对齐
- 参数项越多，横向能放的列数就越少，别硬塞
- 筛选条件按用户最常用来排除的那几个排，不要按后台字段顺序堆一遍
- 分页还是滚动加载，看条目量决定，条目不多就直接铺开，别默认上无限滚动
- 排序默认值想清楚，是按综合、按更新还是按热度，默认值决定了用户看到的第一批
| 自查项 | 怎么验 |
|---|---|
| 长名称会不会挤掉参数 | 把手机宽度缩到最窄，看卡片里参数行是否还在 |
| 筛选是否真能排除 | 随便挑一个筛选条件，看结果条数是否明显变化 |
| 空结果状态 | 搜一个不存在的词，看有没有提示和回退入口 |
| 翻页后位置 | 翻到第二页再返回，看筛选条件是否还在 |
详情页：信息顺序比视觉花样重要
详情页最容易犯的错是把精力全花在视觉上，却把信息顺序搞乱。推荐顺序是「是什么 → 为什么适合我 → 凭什么信你 → 怎么买」，价格与购买按钮要能在滚动中随时够到。
- 先写结构把上面四段顺序列成提纲，每一段回答一个问题，写不出来的段落就是凑数的
- 再填内容图片、参数表、文案三者的说法必须一致，参数对不上是退款与投诉的主要来源
- 留合规位资质、售后、退换规则的固定位置要在设计稿里就占好，别上线前临时塞进图片里
- 压核心几屏客单价低、决策轻的品类，长图文反而拖慢下单，把内容压到核心几屏就够
什么情况下不适用：高客单、需要解释的品类，详情页该长就长，但每一屏都要能回答一个具体疑问，不能只是「再放一张图显得丰富」。数据类的展示，比如销量、评价数，去站内对应页面核对当时的数字，别凭印象写。
制作与交付：设计和前端怎么对齐
页面做完了不代表能用。交付环节最常见的坑是状态不全、断点没说定，上线后前端只能猜，返工都发生在这里。
| 要交付的东西 | 说明 |
|---|---|
| 页面状态清单 | 默认、加载中、空结果、出错、售罄，缺一个到线上就可能出现空白屏 |
| 尺寸与断点 | 先说定断点，再出图，否则前端只能靠猜 |
| 文案与图片归属 | 谁改哪一层要留痕，避免上线后被改乱 |
| 跳转与返回逻辑 | 列表到详情再返回，筛选与滚动位置怎么处理要写清 |
- 结构：先看结构和信息层级对不对，再看视觉
- 信息：有没有缺项，参数表、合规信息、售后入口是否齐
- 断点：最窄和最宽两端都过一遍，看有没有挤掉行或拉太长
- 状态：加载、空、错、售罄四种情况各点一次
- 还原度：拿设计稿和实现逐屏对，重点看间距和信息先后
交付前把状态列全，比多画两张漂亮图更值钱。下一步想看这三类页面在真实站点上的样子和可信度参考，可以去站内站点目录和评测榜单对照着看；页面加载表现可以用工具目录里的测速工具过一遍。数值类的结论都以站内页面当时的数字为准。→
常见问题
三类页面应该先做哪一张？
通常先做详情页，因为它承载转化、信息最密，做完它能反推出列表页卡片该露出哪几项、首页该给哪些入口。首页放最后，因为它依赖前两张页面已经确定的信息层级。如果站点以流量分发为主、商品是标品，顺序可以反过来，先定首页与列表的归类逻辑。
页面做得好看但还是没人点，先查什么？
先查信息本身，不是配色。把列表页卡片遮住图片只看文字，如果看不出这几个商品的差别，问题就在信息项选错了。第二步查详情页前两屏有没有回答「这是什么、适不适合我」。颜色和动效的影响排在很后面，调它们多半解决不了点不动的问题。
新手最容易在哪个环节返工？
状态没列全。默认状态做得很完整，加载中、空结果、报错、售罄这几种没人管，上线后一旦出现就是白屏或错位。出图之前把这些状态各画一版，哪怕只是简单框线，也能省掉一轮前后端来回确认。相关口径可到 /about 看站内对检测与说明的写法参考。
