那排标签把商品页收拾得很干净,代价是用户再没法把两块信息放进同一屏
本文目录
- 那排标签省下来的空间,究竟是从谁身上省的?
- 先看看它到底长什么样
- 用户脑子里的默认假设只有一条
- 标签不会跟着你走
- 省下来的那点高度,是从谁身上省的
- 桌面端的账更亏
- 这个版式为什么能活这么久
- 用户不是没找到,是找到了也用不上
- 先做个区分:它跟可折叠区块不是一回事
- 这篇不打算展开的三条边界
- 用户在商品页上做的到底是读,还是把两件事对起来?
- 商品页不是一篇文章
- 那些必须同时在眼前的字段对儿
- 为什么这件事不能靠记
- 排他容器是什么意思
- 两层损失,两种修法
- 现有的那几张检查表,验的都是同一件事
- 这类损失为什么永远排不上期
- 这套说法不只对商品页管用
- 破解的办法是让它变得可以清点
- 为什么说选了这个组件,就等于同时选中了那条你不想要的性质?
- 规范的第一句话就把这事说死了
- 选组件就是选性质
- 还有一条推荐,很少有人读到最后
- 两个各自正确的决定,合起来把体验降了一级
- 键盘走过去的那条路,比你想的短得多
- 自动检测为什么一个字都不会报
- 有一种用法是没问题的
- 换大块时用户在滚,看小节时用户不滚
- 那这个组件到底该用在哪
- 电脑上和手机上,这排标签各自踩的是哪条线?
- 电脑上这笔账是净亏
- 手机上长滚动确实是个真问题
- 标签栏自己都装不下自己
- 手机上还有一种更彻底的搬法
- 横滑这一下,踩到的是一条硬线
- 400%缩放:这根本不只是手机的事
- 例外清单里没有标签栏
- 从2025年6月28日起,这件事换了性质
- 点名你的那一节,管的不是你这件事
- 隐藏这两个字,在几套体系里各自指什么?
- 一个词,五套体系,五种意思
- hidden属性没有折中挡位
- 浏览器愿意替你打开的那一种
- 为什么页内查找在商品页上是高频动作
- 浏览器只替它认识的组件兜底
- 原生折叠元素能替你省下多少事
- 机器拿到的那一份,跟用户拿到的是同一份吗
- 还有第四种情况,最难查
- 一条十秒钟的判别法
- 如果搜不到,还有一件事得跟着改
- 展开、折叠、子页面,到底照什么标准挑?
- 先说结论:两种版式够用了
- 那一行默认配置,会把你改回原样
- 页面一长,目录就不是可选项了
- 内容太长的时候,截断是允许的
- 一张挑版式的表
- 默认展开哪几块,是一个可以算出来的决定
- 区块的排列顺序,也是在决定同屏概率
- 两端要不要长得一样
- 先去砍该砍的,别急着折叠
- 迁移完之后该验的三件事
- 哪几个数字能告诉你这排标签正在收费?
- 先纠正一个读反了的数字
- 指标一:一次都没点开过的会话占多少
- 指标二:把位次的影响先除掉
- 指标三:用户跑去搜索框搜页面上已经有的东西
- 顺手把那份并置清单跑出来
- 指标四:把退货原因按需不需要对照分两类
- 把两个数交叉起来看
- 改版之后别再看的两个数
- 要做对照实验,得先想清楚分流单位
- 给客服记录加一个标签
- 把两件事对起来这个动作,怎么做进页面里?
- 最省事的一招:把关键那几条抄一份放上去
- 摘要里放哪几条,不该凭感觉
- 描述区改成要点式,还有八成的站没做
- 在尺码表旁边,直接写别人穿着怎么样
- 价格旁边那行字,值一笔钱
- 规格表本身也得能扫
- 并置的前提是两边都真的有东西
- 一张能贴在工位上的清单
- 三条写进评审清单的硬规则
- 为什么第三条最有用
- 这件事该怎么排期,投入多少才划算?
- 第一周别碰代码,先出三张表
- 四周能走完的一条路
- 三档投入,按你能拿到的资源挑
- 怎么跟拿预算的人说这件事
- 三条该停手的信号
- 上线之后每个季度花半小时复查
- 哪些品类不用急着做
- 哪些品类做了收益最大
- 谁该在这个项目里
- 保哥踩过的坑:把折叠全打开之后,退货率反而往上走了
- 站的情况和当初的问题
- 改造做得很规范,数据也很给面子
- 第七个月,问题从另一个方向冒出来
- 答案在改版之前的客服对话里
- 这一层是本篇最贵的一条
- 它消失的证据,长成了一条好消息
- 最贵的一层是不可逆的
- 其实有过一次预警
- 后来改了三处
- 如果你手上正好有个环节想砍
- 结果,以及一句总结
- 常见问题解答
- 商品页用一排横向标签,最主要的问题是什么?
- 把横向标签换成可折叠区块,是不是就算改完了?
- 移动端那排要横向滑动才能看全的标签,会踩到无障碍要求吗?
- 怎么判断用户到底有没有看到被折起来的那几块内容?
- 商品页上哪些信息必须挨着放?
- 把部分内容放到独立子页面上,会不会比标签更干净?
- 商品页版式改完之后,该看哪些数字、不该看哪些?
- 权威参考资料
摘要:商品页底下那一排横向标签,看着是把页面收拾利索了,实际收走的是用户把两块信息摆在一起看的能力。尺码在第一格、别人穿着偏大偏小的反馈在第三格,用户得先背下一个再去翻另一个,而人脑背不住几行数字。这篇讲的不是折叠内容还算不算排名,是这类容器天生一次只肯亮一块的性质从哪来、它在手机上踩了哪条无障碍红线、以及怎么把需要同时出现的字段对儿一条条列出来变成排期。末尾有保哥自己踩过的一个坑:把折叠全打开之后,退货率不降反升。
那排标签省下来的空间,究竟是从谁身上省的?
省下来的高度能量出来,付出的代价当时看不见。评审会上,只有能量出来的那一半会被念出声。
先看看它到底长什么样
你打开一个商品页,主图、价格、加购按钮都在上面。往下滚一段,看见一排横着的按钮:商品描述、规格参数、用户评价、配送与退换。第一个是选中的,底下亮着一块内容。
点第二个,第一个的内容收起来,第二块内容出现在原来的位置上。点第三个,第二块又没了。
这就是横向标签页。它是电商页面上活得最久的一种版式,古老到很多人已经不把它当成一个设计决策,而是当成商品页本来就长这样。被当成默认值的那些设计决定,往往最值得回头看一眼,电商网站UI/UX设计原则背后的认知心理学逻辑里也拆过几条同样性质的。
Baymard的研究员Alan Blackwood在这篇2018年发表、2026年7月又更新过一次的文章里给了一个数字:到今天为止,仍有29%的站在用这种版式承载商品页的主要内容区块。八年过去,这个数字没怎么动。
用户脑子里的默认假设只有一条
大规模可用性测试里反复观察到的一件事是:用户在商品页上有一个几乎不会动摇的假设——只要一直往下滚,这一页上有的东西早晚都会出现。
这个假设很朴素,也很合理。整个网页世界都是这么运作的,用户带着一整套跨站养成的预期走进你的页面,电商SEO用户旅程那6个阶段里把这些预期按阶段拆过一遍。
横向标签页恰好把这条假设作废了。默认被选中的那一格之外,其余内容根本不在滚动路径上。用户滚到页底,发现没有评价,得出的结论不是“评价被折起来了”,而是“这个商品没有评价”。
测试里有位受试者在Ashley Furniture上想看某件家具的评价,把页面上下扫了两遍,始终没注意到第二个标签写着“Product Reviews”,最后只能放弃这一项信息继续往下做决定。她的原话是:“我注意到这个没有评价,不知道是不是因为它太新了……”
标签不会跟着你走
还有一层更机械的原因:这排标签几乎从来不是吸顶的。
它就固定在内容区的正上方,用户一开始往下读,它就滑出视野了。等读完当前这一格想找下一块内容,最自然的动作是继续往下滚——而正确答案在上面,在那条已经看不见的标签栏里。
Houzz上有个更极端的例子。受试者想确认这件东西能不能退,他的鼠标一开始就悬停在写着“Shipping and Returns”的那个标签上。然后他一路滚到页底,又慢慢滚回顶部,才终于发现并点开了这个标签。答案从头到尾就在他光标底下。
这类场景在测试记录里不是孤例。B&H上有位受试者找笔记本电脑的评价,一路滚到底也没找着,说了句“所以评价跑哪儿去了”。
省下来的那点高度,是从谁身上省的
用这种版式的理由,几乎总是同一个:页面太长了。把四块内容叠在一起,商品页会拉得很长,用横向标签一收,页面立刻短了三分之二,看着清爽多了。
这个理由在评审会上非常好用,因为省下来的高度是能量出来的,而付出的代价当时看不见。
这里有一句判断说得很硬气:把核心内容藏进标签,治的是症状——页面太长;病根是别的东西——这一页上塞了太多用不着的广告、交叉销售和次要模块。真正该砍的是那些,不是把用户要看的内容藏起来给它们腾地方。
换个说法:你不是把页面变短了,你是把一部分内容的可见性折价卖掉,换回来一屏高度。这笔买卖划不划算,取决于被折价的是什么。而被折进去的,通常恰恰是评价、规格、退换政策这几样——用户下单前最想核对的那几样。它们在高客单价品类里的分量更重,B2B工业品详情页那份14模块结构清单把这几块按信任阶梯排过一次序。
桌面端的账更亏
横向标签唯一站得住的好处是省掉长滚动。可这个好处在电脑上基本不成立。
桌面视口大,一屏能装下的内容多,测试里长滚动的商品页从来不是桌面用户发现内容的主要障碍。也就是说,在电脑上,这个版式的收益接近于零,风险却一分没少。
净效果就是:用户更可能找不到那几块核心内容,而你没换回任何东西。
这个版式为什么能活这么久
八年时间,可用性测试的结论换了好几轮,用它的站还有将近三成。这不是因为没人知道它有问题,而是因为每次讨论它的时候,反对它的证据都不在桌上。
评审会上摆出来的是设计稿。设计稿里那排标签整整齐齐,页面高度从6000像素降到2200像素,视觉上确实体面。而“有一部分用户会永远看不到第三格里的东西”这句话,既没有截图,也没有数字,只有一句听起来像个人偏好的判断。
更麻烦的是它的失败方式很安静。用户没找到评价,不会给你提工单,不会在页面上留下任何痕迹,他只是关掉页面去了别处。这种在报表上不留痕迹的损失,用户扫完一整屏商品一个都没点开那篇从列表页的角度算过一次同类的账。你的后台会忠实地记下这次访问:来过、看了40秒、没加购。至于他这40秒里在找什么、找没找到,一个字都没有。
于是这个版式就一直留着。不是因为它赢了辩论,是因为对手压根没能上场。
用户不是没找到,是找到了也用不上
可见性只是这件事的第一层,而且是相对容易修的一层——把标签换成一排展开的区块,找不到的问题基本就解决了。
第二层要麻烦得多,也更少被人提起:用户在商品页上真正要做的事,往往不是把某一块内容读完,而是把两块内容摆在一起对一下。
这条裤子标着腰围74厘米,评价里有人说“版型偏小,建议大一码”,这两句话必须同时在眼前才有意义。分开看,第一句是一个数字,第二句是一句闲话;放在一起,它才变成一个决定。
而一排横向标签能保证的恰恰是:这两句话永远不会同时出现在屏幕上。这不是它没做好,是它就是干这个的。下一节从这里开始。
先做个区分:它跟可折叠区块不是一回事
讨论这个话题时经常混进来一个说法:不就是折叠吗,手风琴不也折叠。
两者差别很大。可折叠区块是几块内容顺序排在页面上,各有各的标题,用户想展开几块就展开几块,展开一块不会让另一块消失。横向标签是几块内容叠在同一个位置上,一次只能亮一块。
前者是把内容收起来,后者是把内容摞起来。收起来的东西还在原地,摞起来的东西只有最上面那张能看见。这个区别贯穿全文,后面讲版式选型时还会再回到它。
这篇不打算展开的三条边界
这个话题旁边有几个相邻的坑,很容易滑进去,先划清楚。
第一,折叠起来的内容搜索引擎还算不算数、给不给权重,这是另一个问题,跟本文关心的东西没有交集。那件事的口径、历史转折和自测方法,内容折进标签页手风琴Google还算不算数那篇已经讲透了,这里一句都不重复。
第二,不谈渲染性能。把四块内容全铺出来会不会拖慢首屏、要不要延迟加载,那是关键渲染路径和布局稳定性的题目,属于另一条线,想补这一块可以看阻塞渲染的CSS和JS怎么拖慢首屏那篇。
第三,不谈某个建站系统的主题编辑器里那些区块该怎么拖、怎么排。本文只讨论版式本身的性质,以及这个性质会在用户身上产生什么后果,落地部分给的是判断标准,不是某个后台的操作步骤。
剩下的部分,全部围绕一件比可见性更值钱、却很少被单独拎出来讲的事:用户在商品页上真正要干的,从来不是把每一块内容读一遍。
用户在商品页上做的到底是读,还是把两件事对起来?
文章是线性的,商品页不是。用户要完成的是一连串判断,而每个判断都要把两块本来分开存放的信息凑到一起。
商品页不是一篇文章
文章是线性的,从头读到尾,读完就完成了。商品页不是。
用户在商品页上要完成的是一连串判断:这东西合不合我用、值不值这个价、能不能退、几天能到。每一个判断,都需要把两块本来分开存放的信息放到一起去。
一个人查参数不是为了记住参数,是为了拿它跟另一件事比:跟自己家门的宽度比、跟已经有的那台设备比、跟评价里陌生人说的话比。信息本身没有意义,比出来的差值才有。这一点在那些看着无关紧要却真能提转化的UI细节里也出现过:让用户少算一步,比让页面好看一点管用得多。
这一点听起来像废话,但它决定了一件事:商品页真正的产出单位不是“块”,是“对”。把内容当成产品来对待才容易想清楚这件事,把内容当产品来设计才接得住旅程第一步那篇讲的就是这个视角。
那些必须同时在眼前的字段对儿
保哥这些年帮不少出海站梳理过商品页,把常见的判断拆出来之后,发现需要成对出现的信息其实很有规律。下面这张表是从服饰、家电、家具、母婴几类站里归并出来的,够典型:
| 用户要判断的事 | 需要同时看见的两块 | 通常分别住在哪 | 只看到一块会怎样 |
|---|---|---|---|
| 合不合身 | 尺码表数字+评价里的偏码反馈 | 规格格/评价格 | 照标称买,收到小一码 |
| 能不能直接用 | 接口规格+随附配件清单 | 规格格/描述格 | 多买一个转接头,或者少买一个 |
| 这价格贵不贵 | 售价+随附件的价值 | 价格区/描述格 | 跟只卖裸机的对手比价,明面上就输了 |
| 出问题能不能退 | 是否定制/拆封+退换条件 | 描述格/配送退换格 | 下单之后才知道这件不支持退 |
| 几天能到 | 库存状态+配送时效 | 价格区/配送格 | 有货但备货五天,或预售却标着次日达 |
| 保修保的是哪部分 | 部件构成+保修范围 | 规格格/服务格 | 以为整机三年,其实电池只有半年 |
| 颜色是不是这个色 | 官方主图+评价里的实拍图 | 图库/评价格 | 色差退货,运费两头出 |
| 型号对不对 | 标题里的型号+兼容机型清单 | 标题/规格格深处 | 买成上一代,外观一模一样 |
| 家里放得下吗 | 商品三围+安装或开门所需空间 | 规格格/描述格 | 家具类最贵的一种退货 |
| 往后还要花多少 | 主机价+耗材规格与更换周期 | 价格区/规格格 | 低估持有成本,用两个月开始后悔 |
| 给孩子用安不安全 | 认证标识+适用年龄区间 | 图标区/描述格 | 母婴类退货与差评的高发区 |
| 这个评分可信吗 | 平均星级+评价条数 | 星级区/评价格 | 4.8分挺唬人,点进去只有三条 |
十二行里,有十行的两块信息分属不同的标签格。也就是说,这个版式一上,这十个判断全都得靠用户自己在脑子里完成拼接。这张表也可以当成商品页的改造顺序表用,高转化电商网站那套双轴8模块的落地节奏里排优先级用的是同一个思路。
为什么这件事不能靠记
常见的反驳是:不就是多点一下、回头再点回来吗,用户记一下不就行了。
问题在于人记东西的方式。用户从规格格切到评价格的那一瞬间,脑子里留下的不是“腰围74厘米”这个精确值,而是“大概七十几”这个模糊印象。切两次之后,连“七十几”都开始晃。
这是本文最想说清楚的一句:来回切换的代价不是多花几秒钟,是被记住的那一块从精确值退化成了模糊印象——而所有需要成对判断的问题,恰恰只有精确值才解得开。
更常见的结局是用户压根不做这次切换。他把“大概七十几”当成够用了,直接下单。三天后包裹到了,他发现自己应该多要一码。这次退货会被记进退货原因表里的“尺码不合适”,而它真实的成因是一次没能发生的对照。
排他容器是什么意思
给这类版式起个名字方便往下讨论:排他容器。
它的定义只有一句:同一时刻,容器里只有一块内容可见,让另一块出现的代价是让当前这块消失。
横向标签是最典型的一个。轮播图是另一个。手机上那种一屏一页的向导式流程也是。它们共同的性质不是“藏东西”,而是“不许并排”。线下门店里其实很少有这种容器,把线上SEO思维搬到实体店那篇里对照过两边的信息组织习惯。
与之相对的是共存容器:几块内容各占一段版面,同时在文档流里,用户靠滚动决定看哪一块。展开区块、可折叠区块、分栏,都属于这一类。共存容器里两块内容能不能同屏,取决于它们隔多远;排他容器里,这个概率是零,跟隔多远没关系。
两层损失,两种修法
把话说到这儿,商品页版式带来的损失就能拆成清清楚楚的两层,而它们该用不同的办法治。
| 第一层:可见性 | 第二层:并置 | |
|---|---|---|
| 用户的处境 | 压根没找到那块内容 | 两块都找到了,但没法一起看 |
| 怎么修 | 换掉排他容器,改成展开或可折叠区块 | 把配对的字段搬到彼此身边,或做一份摘要 |
| 修完能不能验 | 能,看各区块的到达情况 | 难,得看退货子类和售前问题构成 |
| 典型症状 | 用户问页面上明明有的东西 | 退货理由集中在尺寸、兼容、色差 |
| 谁会先发现 | 客服,问题重复且好归类 | 仓库,而且要等一个退货周期 |
大部分团队做的是第一层,做完就收工了。第二层没人做,倒不是因为难,是因为它从来没被单独命名过——没有名字的东西写不进需求文档。给一件事命名这个动作本身就有产出,替AI客服把资料组织过一遍那篇里说的也是这个道理。
现有的那几张检查表,验的都是同一件事
做电商的团队手上通常有好几张商品页检查表。挨个看一遍就会发现一件有意思的事。
| 这张表在验什么 | 通过的标准 | 对并置有没有话说 |
|---|---|---|
| 字段覆盖率 | 该有值的字段有值 | 没有 |
| 结构化数据校验 | 必填属性齐、格式合法 | 没有 |
| 合规披露检查 | 购买前用户可以获取到 | 没有,点开也算获取到 |
| 无障碍自动检测 | 对比度、名称、焦点顺序合格 | 没有 |
| 内容质量审核 | 文案准确、无夸大 | 没有 |
五张表,验的全是“这条信息在不在”。没有一张问过“这两条信息能不能同时在”。
于是有了这一节的总纲:信息都在页面上,和任意两条信息能同时进视野,是两个不同的命题。前者是内容问题,后者是容器问题,而所有的信息完备性检查都只验第一个。
这类损失为什么永远排不上期
还有一个组织层面的原因。字段缺失有主人——内容运营会被问覆盖率。组件难用有主人——前端会被问工单。而“这两个字段应该挨着”这件事,在大多数团队里不属于任何一个人的职责。
信息架构的人负责区块的顺序和层级,内容的人负责字段有没有值,前端负责组件能不能点,数据的人负责埋点齐不齐。字段与字段之间的关系,掉在了所有人的中间。
掉在中间的东西不会消失,它只会变成退货原因表里那几个大桶:尺码不合适、与描述不符、买错了。这几个桶年年都在,年年被解释成不可避免的行业损耗。真要往下追,跨境电商退货率怎么从尺码、产品图到物流一层层降下来那篇给过一份成因拆解,其中好几条的根子就在页面组织上。
这套说法不只对商品页管用
排他容器这个概念一旦拿在手上,会发现它在别的地方也天天出现。
结算流程做成一步一页的向导,就是排他容器——用户在填地址那一步想核对一下运费,做不到。商品对比页要是做成左右切换而不是并排,那它就把自己唯一的功能给关掉了。后台的报表面板把两个必须一起看的图表分在两个标签里,分析师只能截图拼图。
判断方法始终是同一个:先问用户在这儿要做的判断需不需要两样东西,再看这个容器允不允许两样东西同时在。两个问题的答案对不上,问题就在容器上,不在内容上。
反过来也成立。如果用户在这一屏只需要读一样东西,用排他容器完全没问题,甚至更清爽。这个概念不是用来给某个组件定罪的,是用来在选组件之前多问一句的。
破解的办法是让它变得可以清点
不能量化的问题排不上期,这条规矩不讲道理但确实管用。所以破解的路子不是去证明并置有多重要,而是把并置需求变成一份能数出条数的清单。
三个来源,都不用新埋点:客服对话记录里同一通对话中被同时问到的两个字段;退货备注里同时提到两样东西的那些句子;站内搜索框里用户输入的、其实页面上已经有的词。把它们按频次排序,取前十二对,就是你这个品类的并置需求清单。第三个来源尤其值得挖,独立站搜索框那个高转化入口的四层拆解里讲过怎么读这批词,它们几乎都是页面没答上来的问题。
有了这张清单,讨论就从“标签页好不好”变成了“这十二对里有几对现在是分开的”。前一个问题吵三年也没结论,后一个问题一个下午就能查完。
为什么说选了这个组件,就等于同时选中了那条你不想要的性质?
一次只显示一块,不是哪个前端图省事,它写在这个组件规范定义的第一句里,是个陈述句。
规范的第一句话就把这事说死了
很多人以为标签页一次只显示一块,是某个前端图省事的实现方式,换个写法就能让两块同时展开。
不是。这条性质写在这个组件的定义里,而且是定义的第一句。
W3C那份写给开发者的ARIA编写实践指南里的标签页模式,开篇原话是:标签页是一组层叠的内容区块,一次显示其中一块。往下第二段说得更直白:当用户激活另一个标签时,先前显示的那个面板被隐藏,与新标签关联的面板变为可见。
注意这句话的语法。它不是“你可以选择隐藏”,是“被隐藏”,一个陈述句。隐藏另一块不是这个组件的副作用,是它的工作内容。标签这类元素本身就带着语义,网页语义化HTML那8类标签对SEO的真实影响里讲过语义和呈现为什么不该分家。
选组件就是选性质
这就引出一句值得贴在评审室墙上的话:当你选定一个界面组件时,你同时选中了它的定义里那条你根本没打算要的性质,而讨论中出现的通常只有你想要的那条。
需求文档上写的是“把商品页收得紧凑一些”。规范里跟着一起来的是“任意两块内容永不同屏”。这两句话在任何一次评审里都不会被并排念出来。想把页面做简洁本身没错,出海独立站极简设计那8步落地法里区分过简洁和少给信息的差别。
把常见的几个容器摊开对一遍,这笔账就很清楚了:
| 组件 | 你想要的那条性质 | 一起买回来的性质 |
|---|---|---|
| 横向标签 | 页面高度砍掉大半 | 两块永不同屏;标签滑出视野后就没有入口;键盘要靠左右键 |
| 轮播 | 首屏能摆下好几张图 | 第二张往后多数人不会看到;自动播还会打断正在读的人 |
| 可折叠区块 | 页面短,但结构还在 | 默认收起的部分要点一下;好处是允许同时展开好几块 |
| 全展开区块 | 什么都不用点 | 页面很长,得配一个吸顶目录才不至于走丢 |
| 子页面 | 主页面清清爽爽 | 多一次跳转,返回之后滚动位置常常丢失 |
| 弹层与抽屉 | 不用离开当前页 | 打开期间背景内容不可用,本质上也是排他的 |
第三列没有一条是bug,全是设计。真正的问题是这一列几乎从来不在需求文档上出现。首屏那些组件也有同样的问题,首页首屏的导航、主Banner到分类区怎么设计那篇里的轮播就是一个现成例子。
还有一条推荐,很少有人读到最后
同一份指南里有一条容易被跳过的注记:建议标签在获得焦点时就自动激活,但有个前提——关联的面板要能无明显延迟地显示出来,而这通常要求面板内容已经预先加载好。
否则会怎样?指南自己给了答案:自动激活会拖慢焦点移动,严重妨碍用户在这排标签之间高效地移动。
这句话看着技术,实际上是个组织问题。
两个各自正确的决定,合起来把体验降了一级
现实里的流程通常是这样的。
第一次评审,设计侧说页面太长,用标签页收一下,通过。第二次评审,性能侧说四块内容一次全渲染,首屏字节太大,把非默认标签改成点击时再请求,通过。两次会都开得很正常,两个决定都对得起各自的指标。
但合起来的结果是:面板内容不再预加载,于是规范推荐的那种交互模式失效了;键盘用户在标签之间移动时,每一次都要等一次网络往返;而这个因果关系,不在任何一份会议纪要里。
保哥见过好几个团队为此互相埋怨过:前端说无障碍要求做不到,性能说首屏指标不能退。其实两边都没错,错在这两个决定从来没在同一张桌子上摆过。弱网和低端机场景下这对矛盾更尖锐,海外客户用低端机打开你的独立站有多卡那篇做过实测。
键盘走过去的那条路,比你想的短得多
再看一个更少被讨论的细节。按照规范,一整排标签在页面的Tab键序列里只占一个停靠点——焦点进到标签栏时,落在当前激活的那个标签上,再按Tab就直接跳到面板里去了。
要切到别的标签,得用左右方向键。这是标准约定,屏幕阅读器用户大多知道,但只用键盘不用读屏的人未必知道。
后果是:对这部分用户来说,另外三格内容在纯Tab键路径上等于不存在。他不会收到任何提示,也不会觉得页面坏了,他只是走完了整条路,没遇到那些内容。
自动检测为什么一个字都不会报
假如这排标签是照规范实现的,role齐、aria标注齐、键盘交互齐,那么任何一款自动化无障碍检测工具跑过去,都会给出满分。
这就是另一条值得记下来的话:自动检测能验的是这个组件有没有按规范实现,验不了这个组件该不该出现在这个位置;而在真实的站上,绝大多数体验损失出在第二个问题上。
一排完美实现的横向标签,和一排随手写的横向标签,对那位找不到评价的用户来说,区别是零。顺带说一句,机器读页面读的也是这一层结构,智能体读的是无障碍树不是页面截图那篇讲清楚了它到底看到了什么。
有一种用法是没问题的
大规模测试里还有一个反过来的观察:同样是横向标签,用来在某个区块内部的几个小节之间切换时,受试者很少漏掉。
比如把技术规格拆成几个方面,用一排小标签在它们之间切;或者在一个展开的详情浮层里分成三小节。测试记录里有位受试者对这种用法的反应是正面的:能从一节跳到另一节挺好,那我就一节节看过去。另一位在某个购物应用里看到详情被分成三个小节,评价是——它不给人一种什么东西被藏起来了的感觉。
差别在哪?在于用户当时的动作模式不一样。
换大块时用户在滚,看小节时用户不滚
当一个人打算换一大块内容——从描述换到评价——他的本能是往下滚,一边滚一边找线索。滚动的方向是向下的,而标签在上面,两者背道而驰,于是漏掉。
而当他已经进到自认为对的那一块里,他会停下来仔细看,不再滚动。这时候视野是稳定的,那排小标签就一直在他眼前,点中的概率高得多。用户在页面里的位置感还依赖别的线索,Google移动搜索取消面包屑之后那篇讨论过这类线索少了会怎样。
同一个组件,放在两种动作模式下,成败完全相反。这也解释了为什么“标签页到底能不能用”这个问题吵不出结果——问题问错了,该问的是它承载的是跨区块跳转还是区块内部切换。
手机上还有一条硬约束:即便是这种没问题的用法,也不该让用户为了看见全部小标签而横向滑动。按标题字数折算,实际能摆下的大约是两到三个,再多就得换别的方式。
那这个组件到底该用在哪
把它一棍子打死也不对。规范定义的排他性质本身没有好坏,它只是不适合承载需要互相印证的内容。工具没有对错,用错地方才有。
这里顺便回答一个常被问到的问题:那些做得很讲究、带滑动指示条和平滑动画的标签页,是不是就没这个毛病了?动画只影响用户切换时的观感,不改变同一时刻只有一块可见这件事。把一个排他容器做得再精致,它也还是排他的。
判断方法可以简化成一句:如果用户可能需要把A和B对着看,那A和B不能分在两个标签里;如果A和B之间不存在任何对照关系,用标签就没问题。
规格参数里的“电气特性”和“外形尺寸”通常互不相干,分成两格没事。规格参数和用户评价之间,几乎每一对判断都要对着看,分成两格就要命。评价这块内容的重量常被低估,电商产品评论的结构化数据与GEO联动那篇把它当成一类独立资产在处理。这条判断标准在下一节还会再用一次,只不过换成设备的角度。
电脑上和手机上,这排标签各自踩的是哪条线?
桌面上它的唯一好处本来就不存在,手机上它自己都装不下自己。而后者从2025年起还多了一层性质。
电脑上这笔账是净亏
先把两块屏幕分开算,因为它们的账完全不一样。
桌面视口宽、一屏装得下的东西多,测试里长滚动的商品页从来不是桌面用户找不到内容的主要原因。真正让桌面商品页长得离谱的,往往是塞在核心内容之间的广告位、交叉销售模块和一堆次要内容。
这意味着横向标签在电脑上唯一的卖点——节省滚动——本来就不需要。收益接近于零,而它带来的那两条性质一分没少。
所以在桌面端,这个决定不需要权衡,它只是一笔单向的支出。要收拾页面,先去砍那些没人要的模块,不是把用户要看的东西藏起来给它们腾位置。两端表现本来就有差异,移动端和PC端排名差异那6大因素里的诊断思路可以顺手借来做版式对照。
手机上长滚动确实是个真问题
换到手机就不一样了。视口小,同样多的内容会拉出好几倍的滚动距离,用户在页面里迷路是常事。这时候“想办法让页面短一点”是个正当诉求。
但横向标签依然不是那个办法,而且在手机上它多长了一颗牙。
第一颗牙是老问题的放大版:手机屏幕矮,用户读默认那一格的内容时几乎立刻就把标签栏滚出了视野。读完想看下一块,他得往回滚——可能是好几屏——才能重新看见那排标签。而人的本能是继续往下滚。移动端的改造是个系统工程,从响应式到Core Web Vitals那三类站点的改造对比可以拿来对号入座。
标签栏自己都装不下自己
第二颗牙是手机独有的:那排标签本身放不下。
四个标签,中文四到五个字一个,英文更长,横着排在一块390像素宽的屏幕上,通常只有前两个是完整可见的。测试里就有这样的例子:某个品牌站的移动端商品页,四个标签里任何时刻只有两个完全露出来,用户必须横向滑动才能看见其余的。
于是任务变成了三步:先意识到有这么一排标签,再意识到它可以横着滑,滑完再判断哪个才是自己要的。每多一步,掉队的人就多一批。这类移动端特有的坑不止这一个,移动端SEO那十个致命错误里有几条同样是版式带来的。
这也是为什么“我们移动端也用了标签,只是标签更短”往往解决不了问题——只要还需要横滑,性质就没变。
手机上还有一种更彻底的搬法
比标签更狠的做法,是把内容整个搬到另一个页面上去。用户在移动端商品页上点一下“配送与退换”,浏览器跳走,打开一张单独的页面。
这类做法的普及程度不低。在移动端基准里,有26%的站把商品页的一部分内容放在子页面上,主页面上只留一个入口。
它带来的问题比标签更硬:跳走再返回,滚动位置常常丢,用户被扔回页面顶部,刚才读到哪儿全忘了。想把子页面里的一句话和主页面上的一个数字对着看,除了截图或者记在手机备忘录里,没有别的办法。
有意思的是,子页面在数据上通常不难看——它有独立的页面浏览量,甚至有独立的停留时长。一个把用户赶到别处才能读完的设计,在报表上反而多出一行成绩。
横滑这一下,踩到的是一条硬线
到这里,事情从体验问题变成了另一类问题。
W3C的无障碍准则1.4.10回流写的是:内容要能在等效于320 CSS像素的宽度下呈现,不丢失信息与功能,并且不要求用户在两个方向上滚动。这是AA级的要求,不是可选的加分项。
一个纵向滚动的商品页,配一条必须横向滑动的标签栏,正好就是“在两个方向上滚动”。而且这份文档里专门有一条实现技术,讲的就是横向滚动的区块面板应当设计成能在320 CSS像素宽度内放下。
换句话说,这个场景不是被顺带覆盖到的,它是被点名讨论过的。
400%缩放:这根本不只是手机的事
这一条最容易被误读成“移动端专属”,其实不是。
同一份文档里解释得很清楚:320 CSS像素相当于一个1280像素宽的桌面浏览器窗口放大到400%之后的可视宽度。也就是说,一位在电脑上把页面放大四倍的低视力用户,看到的布局条件跟手机用户是一样的。
所以这条准则一次覆盖两拨人:拿手机的所有人,和在电脑上放大页面的那部分人。你在桌面端保留横向标签、以为反正桌面视口大没关系,对后面这拨人并不成立。
顺带说一句,把浏览器缩放拉到400%看一眼自己的商品页,是这篇文章里成本最低的一个检查动作,花不了两分钟。愿意再往下做一层的,网站无障碍访问那18个改动给了一份从对比度到键盘操作的完整清单。
例外清单里没有标签栏
准则确实留了例外:那些为了使用或表意必须二维布局的部分可以豁免,文档里举的例子是需要看懂的图片比如地图和图表、视频、游戏、演示文稿、数据表格,以及那些操作时必须让工具栏保持可见的界面。
这份清单里没有导航栏,也没有标签栏。它们不需要二维布局才能表意,把四个入口竖着排、或者换成一列可折叠区块,信息一点没少。
这就是例外条款的一般脾气:它保护的是那些真的换不了形式的东西,而不是那些你不想换形式的东西。欧盟这几年的规则大多是这个写法,商品页上写环保材质要拿出什么证据那篇里的举证要求也是同一种脾气。
从2025年6月28日起,这件事换了性质
如果你的站卖到欧盟,还有一层时间线要算进来。
欧洲无障碍法案第2条第2款写明,本指令适用于2025年6月28日之后向消费者提供的一系列服务,电子商务服务在列。它给电商服务下的定义相当宽:通过网站和移动端服务、以电子方式、远程、应消费者个别请求提供,目的是缔结一份消费者合同。
这个定义没有留下什么闪转腾挪的空间。只要你在网上卖东西给欧盟消费者,你就在里面。小语种市场的页面还有另一层要求,落地页上那几个最像装饰的信任元素在这些市场恰恰是搜索量最高的购买词。
而合规怎么认定?成员国的做法是:符合欧盟为信息通信技术产品与服务制定的那份协调标准,就推定符合要求;那份标准的网页部分,对齐的正是WCAG的AA级。回流那条准则,就在AA级里。
点名你的那一节,管的不是你这件事
最后有个细节值得单独说,它反直觉,但很有用。
这部法案的附件里有专门给电商服务写的一节,一共三条:提供所售商品与服务的无障碍信息、保证识别与支付这类功能可用、以及识别方式与电子签名的无障碍。
三条读下来会发现,没有一条谈商品页的信息该怎么组织。真正管到你这一页版式的,是那一节前面的通用服务要求——提供关于服务运作的信息,并且以用户能够感知的方式呈现——外加上面那份被引用的技术标准。
于是有了一条挺实用的经验:法规里点名你这个行业的那一节,往往不是最终约束你的那一节;真正落到页面上的要求来自没有点名任何人的通用条款,加上一份被它引用的技术标准,而这两样都不会出现在任何一份行业合规清单的标题里。
再看时间线就更有意思了:讨论横向标签的那批可用性研究在2018年就发表了,那时候这部法案还没通过。八年之后,它从一个体验建议,变成了一件有截止日期的事,中间没有任何人发过通知。出海的合规节奏基本都是这样往前推的,退换货政策页怎么写才既是信任背书又能拿搜索流量那篇里也遇到过同一种时间差。
隐藏这两个字,在几套体系里各自指什么?
开会时说的隐藏,和规范里说的隐藏,严格程度差着好几档。而浏览器只替它认识的那几种兜底。
一个词,五套体系,五种意思
开会讨论商品页的时候,“隐藏”这两个字会被反复使用,而每个人心里想的可能不是同一件事。摊开看会发现,它在五套体系里有五种严格程度完全不同的含义。
| 谁在说 | 它指的是 | 判定标准 | 对用户意味着什么 |
|---|---|---|---|
| 评审会上的团队 | 默认收起,点一下就出来 | 能点开就不算藏 | 多一次点击而已 |
| HTML的hidden属性 | 这块内容当前跟页面无关 | 浏览器不渲染它 | 屏幕阅读器同样读不到 |
| until-found这个取值 | 视觉上收起,但查得到 | 参与布局,能被页内查找揭开 | 搜得到,锚点也跳得过去 |
| 标签页规范 | 同一时刻只亮一块 | 写在组件定义里 | 另外几块永远不与它同屏 |
| 搜索引擎的政策口径 | 标记引用的内容用户拿不到 | 列在人工处罚的触发条件里 | 富媒体展示可能被撤下 |
五行里,只有第一行是团队开会时用的那个意思。剩下四行都比它严格,而且各自严格在不同的地方。同一个词在不同体系里含义打架,这在结构化数据领域是常态,结构化数据怎么配合SEO落地那篇里的坑有一半来自这个。
hidden属性没有折中挡位
先说最容易踩的一个。HTML的hidden属性有一条明确的使用规则:它不能用来只对某一种呈现方式隐藏内容——一旦标上,这块内容对所有呈现方式都隐藏,屏幕阅读器也包括在内。
还有一条同样明确:不要从可见元素链接到一个hidden的元素,除非用的是until-found这个取值。
这两条加起来是什么意思?意思是你不能一边把某块内容标成hidden,一边在页面别处放一个“点这里看详情”的链接指向它。这个组合在很多自研的标签页实现里恰恰是标配。规范里这类互相牵制的条款不少,给页面加结构化数据时那128种类型怎么选那篇也遇到过同样的取舍。
浏览器愿意替你打开的那一种
until-found是个值得单独认识的取值。标了它的元素,视觉上是收起的,但内容对浏览器的页内查找功能以及片段导航是可见的。
当这两个功能把用户带到这块内容上时,浏览器会做三件事:触发一个事件让你有机会做点什么、把hidden属性移除、然后滚动到该元素。用户看到的效果就是——他搜了一个词,页面自己把那一段展开了。
实现上它通常靠一条特定的CSS属性完成,与彻底不渲染有个关键区别:元素照样生成盒子、参与页面布局,外边距、边框、内边距和背景都正常渲染。也正因如此,如果这个元素的display是none、contents或者inline,它就不会被揭示——这是个很容易踩的实现细节。
为什么页内查找在商品页上是高频动作
可能有人觉得,谁会在商品页上按查找快捷键啊。
会的人比想象中多,而且很集中。买过一次亏的人会搜“退换”,买大件的人会搜“尺寸”,买电子产品的人会搜“电池”“兼容”“保修”。这几个词几乎是固定的,因为它们对应的正是前面那张表里最容易被拆散的字段对儿。
用户按下查找、输入“退换”、回车,浏览器告诉他没有匹配项。他得到的结论不是“这块内容被折起来了”,而是“这家店没写退换政策”。
这跟一开始那位在Ashley Furniture上找评价的受试者,得出的是同一种结论——只不过这次他连滚动都省了。用户在站内找东西的路径其实很短,站内搜索URL该不该写进robots.txt那篇顺带讲过这类查询的构成。
浏览器只替它认识的组件兜底
把上面几件事串起来,就得到本节的核心:
浏览器只对它认识的机制兜底。原生的折叠元素、标了until-found的区块,它知道那是暂时收起的,于是查找命中时会替你展开、锚点跳转时会替你打开。而你用一个div加一个类名加一段脚本自己实现的标签页,它只看到display是none,它不知道那叫折叠,也就不会替你做任何事。
换个说法:每写一个自定义组件,你都在悄悄放弃一层本来免费拥有的兜底。平时看不出来,出问题的时候才发现地板是空的。锚点跳转这件事本身也有讲究,Google那个直接跳到段落的深链是怎么做出来的里给过一套实现口径。
顺带一提,客服想给用户发一条直达退换政策的链接,在原生折叠的页面上带个锚点就行;在自研标签页上,这条链接会把用户扔到页面顶部,然后由他自己去猜下一步。
原生折叠元素能替你省下多少事
说到兜底,HTML里本来就有一个专门干这件事的元素。details元素加上一行标题,就是一个可折叠区块,展开收起是浏览器自己实现的。
它自带的东西比看上去多:键盘可达不用你操心,无障碍语义不用额外标注,展开状态变化时会派发一个事件供你监听——想统计哪个区块被展开过,接这个事件就行,不用另写埋点。
更关键的是,它是浏览器认识的那一类。页内查找命中收起的内容时,现代浏览器会替你展开它。
常见的顾虑是样式不好改。这个顾虑在几年前成立,现在基本不成立了——三角标能换、标题能排版、展开动画也能做。真正需要权衡的只剩一条:你要的是一个能完全按设计稿长的组件,还是一个浏览器认识、出事时会替你兜住的组件。这两者在商品页上很少能兼得,而多数团队从来没意识到自己在这两者之间做过选择。
机器拿到的那一份,跟用户拿到的是同一份吗
还有一层跟内容组织有关,但跟排名没关系,值得单独拎出来。
标签页的实现通常有三种:四块内容全写在初始HTML里,靠CSS控制显隐;服务端只渲染默认那一格,其余点击时再请求;或者干脆整个组件都由脚本在浏览器里拼出来。
这三种在页面上看起来一模一样。而在很多团队里,压根没人说得清自己用的是哪一种——因为做这个决定的人和维护商品页的人,往往不是同一批。想知道机器实际拿到了什么,用日志分析看爬虫到底抓没抓你的站是最直接的一条路。
还有第四种情况,最难查
除了那三种,实务里还有一种混合情况:内容写在初始HTML里,但被样式挪到了视野之外,或者高度被压成了零。
这种做法通常不是有意的,是某次改版留下的残留——组件换了,旧容器还在,样式被临时改成了不可见。它的麻烦在于两头不讨好:机器读得到,用户看不到,而任何一种单侧检查都发现不了它。
查它的办法是把两侧的结果对一遍:拿初始HTML里出现过的关键字段,逐个在渲染后的页面上确认能不能被看到、被查找命中。两侧都查,差集就是问题所在;只查一侧,永远查不出这一类。
这件事一年做一次就够,但最好写进上线检查表,因为它几乎总是在版本迭代的缝隙里长出来的。
一条十秒钟的判别法
不用装工具。从第三个标签格里挑一句只在那儿出现的话,比如退换政策里的某个词组,然后用命令行把这个页面的原始响应抓下来,搜这句话。
搜得到,说明内容在初始HTML里;搜不到,说明它是后来才被请求进来的。就这么简单,两分钟能把全站几个主要模板都验一遍。至于标记本身对AI搜索到底管不管用,Schema结构化数据对AI搜索有没有用的官方说法与实测给过一个不那么讨喜但诚实的答案。
要注意的是抓的必须是原始响应,不是浏览器开发者工具里那棵已经跑完脚本的元素树——那棵树上什么都有,看不出差别。
如果搜不到,还有一件事得跟着改
假设你验下来的结果是“搜不到”,那就得回头看一眼商品页的结构化数据。
Google的结构化数据通用指南里有一条写得很直白:不要标记页面读者看不到的内容。同一份文档在列举可能触发人工处罚的情形时,其中一条正是——结构化数据所引用的内容对用户是隐藏的。
把材质、尺寸、保修这些属性写进标记,是完全正当的做法。前提是页面上确实有,而且用户能拿到。如果它们只存在于一个点击之后才发出的请求里,这两者之间就出现了一道缝。问答类内容也有同样的对应关系要求,论坛和问答结构化数据该怎么做那篇里讲过标记与可见内容的绑定规则。
这道缝不会立刻出事,多数时候什么都不会发生。但它属于那种一旦出事就很难解释的问题:你并没有作弊的意图,你只是做了一次性能优化,而没有人告诉你这次优化把标记和内容拆开了。标记和页面能不能对得上,在AI读页面的场景里更要紧,AI推荐产品页怎么对齐它的理解逻辑那篇讲了十条相关做法。
展开、折叠、子页面,到底照什么标准挑?
表现稳定的方案只有两个,都不新鲜。真正容易翻车的是组件库里那个默认开着的开关。
先说结论:两种版式够用了
大规模测试里表现稳定的方案只有两个,都不新鲜。
一个是全展开区块:几块内容按顺序铺在页面上,用户往下滚就能挨个读到,什么都不用点。桌面端的默认答案就是它,因为它精确匹配了用户那条“往下滚就能看全”的假设。长页面的导航还可以靠面包屑补一层,多级面包屑那3种方案与结构化数据实战里的做法可以直接搬到商品页上。
另一个是可折叠区块:每块内容有一行标题,默认收起或展开,点标题切换。移动端的长商品页适合它,既控制了滚动长度,又保留了“每一块都在页面上、按顺序排着”这个结构。
两个方案有一个共同点,也是它们跟标签页的根本区别:几块内容同时存在于页面的文档流里,用户可以让其中两块同时展开。并置这件事,在这两种版式里是可能的;在标签页里不是。
那一行默认配置,会把你改回原样
这里有个坑,保哥见过不止一次。
团队认真读完研究,把横向标签换成了可折叠区块,上线,页面结构确实变好了。然后有人在组件库里发现一个配置项,叫“同时只展开一项”或者类似名字,默认是开的。没人动它。
于是这套可折叠区块的行为变成了:点开规格,评价自动收起;点开评价,规格自动收起。
你花了两周时间换掉的那条性质,被一行默认配置原样装了回来。可见性问题解决了,并置问题一点没动,而报表上看不出任何差别——毕竟从数据角度,用户确实“找到”了每一块内容。默认值这东西一向比想象中重,邮件弹窗怎么设计才不招人烦那篇里的默认勾选也是同一类问题。
所以迁移的时候,第一件要做的事不是画设计稿,是去把这个开关关掉。
页面一长,目录就不是可选项了
全展开的代价很实在:页面会很长。桌面端一屏装得下的东西多,但十二屏也是十二屏。
解法是给它配一个吸顶的区块目录——几个区块名常驻在视口顶部,用户既可以照常往下滚,也可以直接点某个名字跳过去。测试里这种组合表现很好,因为它同时满足了两拨人:习惯滚的照滚,目标明确的直接跳。
注意这跟横向标签的差别只有一个字:目录是常驻的,标签是会滑走的。就这一个字,决定了用户在页面中段想换一块内容时,手边有没有入口。长文档的目录设计有现成经验可搬,长文档的样式、目录与交叉引用怎么做才不会一改就崩里那套结构思路是通用的。
内容太长的时候,截断是允许的
有些区块天生就长:一段两千字的品牌故事、几十条问答、上百条评价。这类内容做截断是合理的,全铺出来反而把别的区块挤到没人看得见的地方。
但截断有个硬要求:必须明确告诉用户下面还有。一个模糊的渐变遮罩、一个没有文字的小箭头,都不够——用户会把它读成“就到这儿了”。写清楚还有多少条、还有多长,用户才会判断要不要展开。
否则你只是把标签页的问题换了个地方重演一遍:内容还在,用户不知道它在。文本折叠这件事另有一层顾虑,Show More文本折叠会不会拖累SEO那篇把风险边界和合规做法都划过了。
一张挑版式的表
把这几条揉成一张表,评审的时候直接对着填就行:
| 这块内容 | 桌面端 | 移动端 | 理由 |
|---|---|---|---|
| 在并置清单前三对里 | 展开,且彼此相邻 | 展开,且彼此相邻 | 这几对决定了大部分退货 |
| 核心内容,不在清单里 | 展开 | 可折叠,标题写清楚 | 滚动长度要控制 |
| 很长的描述或问答 | 展开+截断+明确提示 | 可折叠+截断+明确提示 | 别让它挤掉后面的区块 |
| 同一区块内部的小节 | 小标签可以用 | 最多两三个,不许横滑 | 用户在这一层不滚动 |
| 次要模块与推广位 | 先考虑砍掉 | 先考虑砍掉 | 页面长的真正原因常在这里 |
| 法定必须展示的信息 | 展开 | 展开 | 别把合规项放进任何需要点开的容器 |
默认展开哪几块,是一个可以算出来的决定
移动端用可折叠区块,就要决定哪几块默认是开的。这个决定常常凭感觉做,其实它有答案。
拿出并置需求清单,看排在最前面的那几对分别落在哪些区块里。出现频次最高的那两个区块,默认展开,而且要挨着放。
举个例子:如果服饰站的清单第一行是尺码表配合身反馈,那么尺码区块和评价里的合身摘要就该默认同时可见,中间不要隔着品牌故事和搭配推荐。
这条规则的好处是它把一个审美问题变成了一个查表问题——而查表问题不需要开会。区块顺序在不同端上还可能不一致,用flex的order属性给移动端区块换位是最省事的一种实现办法。
区块的排列顺序,也是在决定同屏概率
换成展开或可折叠之后,还有一件事经常被当成小事:这几块内容按什么顺序排。
现实里的顺序往往是历史形成的——哪个模块先做出来的,就排在前面;某次大促加的推广位插在了中间,之后就一直在那儿。没有人专门决定过它。
但顺序至少管着两件事。一是用户会把它读成重要性排序,排在最后的那块会被默认成不重要。二是它直接决定了两块内容之间的物理距离,而距离决定了它们能不能进同一屏。
把这两件事合起来看,排序就有了一条硬标准:并置清单里配对的两块,中间不能隔着第三块。这条标准不好听,但很好执行——打开页面数一数,隔着就挪。
两端要不要长得一样
还有个常问的问题:桌面端和移动端要不要用同一种版式。
没有标准答案,但有个挺实用的判断口径。如果你的团队维护的是同一套模板,两端保持一致能省下大量维护成本,也省得两边行为不一致把人绕晕;如果两端本来就是两套代码、两拨人,那各自选最合适的版式反而更划算——桌面全展开,移动可折叠,这个组合在测试里表现都不错。
需要一致的其实不是版式,是并置关系。同一对必须挨着的字段,不管在哪一端都得挨着。至于它们是躺在展开的区块里还是收在可折叠区块里,那是次要的。分页和长列表也有类似的一致性问题,分类页分页那5种方案的对比里讨论过跨端保持同一套结构的代价。
顺便提一句:如果两端版式不同,两端的检查也得各做一遍。见过太多团队桌面端改得很漂亮,移动端还留着老组件,因为发版排期是分开的,而验收清单只有一份。
先去砍该砍的,别急着折叠
还有一件顺序上的事,值得单独说。
页面太长的时候,第一反应通常是“折起来一部分”。但更该先问的是:这一页上到底有多少东西是用户想看的?夹在描述和评价之间的三个推广横幅、两排交叉销售、一个订阅弹窗——把这些理一遍,页面往往就短了三分之一,一块核心内容都没动。
折叠是给真正的核心内容用的手段,不该拿来给次要内容腾地方。这个顺序搞反了,你就会得到一个奇怪的页面:广告全是展开的,用户要的东西全是收起的。页面底部同样容易变成杂物间,独立站页脚怎么设计才是信任收口那篇讲的是同一种收拾思路。
最后提醒一句顺序上的小事:这些改动最好一次只上一项,中间隔上几天。全部一起推上去,出了问题你会分不清是哪一项造成的,而版式类改动的回滚成本通常不低。
迁移完之后该验的三件事
版式改完不能只看转化率,那个数字被太多东西影响。建议按顺序验这三样。
第一,把浏览器缩放到400%走一遍主要商品页,看有没有出现横向滚动条。第二,用页内查找搜几个高频词,看能不能被带到对应内容上。第三,拿并置清单前五对逐一试,看能不能在不做任何点击的前提下,让两块信息同时进视野。
三样都过了,再去看数字。至于该看哪些数字,下一节专门讲。
哪几个数字能告诉你这排标签正在收费?
先把一个读反了的数字掰过来:用户被迫做的那次点击,是成本,不是参与度。
先纠正一个读反了的数字
很多商品页周报上都有一行“标签点击次数”或者“区块展开次数”,而且这个数字通常被放在参与度那一栏,越高越好。
这就读反了。用户点开规格标签,不是因为他喜欢点,是因为他要的东西不在眼前。这一下点击是他为了拿到本该看见的信息而被迫支付的费用。
于是有了这一节的第一条:一个交互如果是用户为了拿到本该看见的东西而被迫做的,那么它的发生次数是成本,不是收益;而绝大多数分析后台默认把所有交互都记在收益那一栏。
这条一旦想明白,接下来几个指标该怎么读就顺了。类似该退休的老指标还有一批,2026年该淘汰的那9个SEO指标给过一份替代方案对照。
指标一:一次都没点开过的会话占多少
第一个指标很朴素:进了商品页的会话里,一次标签或折叠区块都没有点开过的比例。
这个数据不用新埋点。用标签页的站本来就有点击事件;用原生折叠元素的站,接一下展开状态变化的事件就行,两行代码。想让用户愿意多待一会儿、多点几下,还得靠别的东西,用增长心理学把想再来一次设计进体验那篇给了一批可落地的做法。
| 缺席率 | 该怎么读 | 先做什么 |
|---|---|---|
| 高于70% | 多数人只看到了默认那一格,你的商品页实际生效的内容不到四分之一 | 直接换版式,不用再论证 |
| 40%到70% | 常见区间,说明入口勉强能被发现,但成本不低 | 看区块到达率,定位是哪一格漏了 |
| 25%到40% | 入口没问题 | 重点转到并置,不在可见性 |
| 低于25%且转化不差 | 你的内容量可能压根不需要折叠 | 试着全展开,多半更好 |
注意最后一行的反直觉之处:缺席率低有两种完全相反的成因,一种是入口做得好,另一种是内容少到没什么可折的。两者的处理方式不一样,得结合内容量一起看。一个数配两种解释的情况在分析里很常见,GA4核心指标最容易被解析错的那4个地方里列过好几个。
指标二:把位次的影响先除掉
第二个指标是每个区块被展开过的会话占比。这个数字直接看没意义,因为排在第二位的区块天然比排在第五位的高,跟内容好坏无关。
做法是先算一条位次衰减曲线:把全站商品页按区块排列顺序分组,统计各位次的平均展开率,画出来通常是一条陡降的曲线。然后拿每个区块的实际展开率去除以它所处位次的预期值。
大于1的是标题写得好、内容确实有人要;小于1的说明这块内容明明排在好位置,用户还是不点。
后一种情况多半不是位置问题,是标题问题——“更多信息”“产品详情”这类标题什么都没承诺,用户不知道点开会得到什么,自然不点。改成“尺码与版型”“随附配件与保修”,展开率会立刻不一样。标题该怎么写才有人点,那10个技巧加5类高点击公式里的原理在区块标题上同样成立。
指标三:用户跑去搜索框搜页面上已经有的东西
这个指标是免费的,数据在站内搜索日志里躺着。
把搜索词过一遍,挑出那些其实不是商品名的:退换、退货、尺码、保修、多久到、发什么快递。这些词的用户,是在当前页面上没找到,跑去搜索框碰运气的。
这类词占搜索总量的比例,就是你页面组织不到位的一个直接读数。而且它通常还带一个副作用:站内搜索索引的是商品,不是政策文档,所以这些搜索的零结果率高得吓人。
一个指标同时暴露两个问题——页面上找不到,搜索框也答不了——这种便宜不多见。要顺手把搜索这条线也修一修,集合页没有产品时SEO该怎么处理里那几种零结果的兜底做法可以直接搬。
顺手把那份并置清单跑出来
前面几次提到的并置需求清单,到这一步可以真的跑一遍了,用的还是同一批现成日志。
做法不复杂。先列一份字段词表:尺码、腰围、材质、重量、接口、电压、保修、退换、配送时效、库存、配件、认证,每个字段配上它的常见口语说法。然后拿这份词表去扫客服对话记录,统计同一通对话里被同时提到的字段对儿,两两计数。
退货备注同样扫一遍,权重可以给高一点——愿意写备注的用户,说的通常是真原因。这批文字本身也是内容资产,品牌情感评分从67提到82那份操作手册里用的正是同一批原料。
把计数排序,取前十二对,这就是你这个品类的并置清单。整个过程一个熟悉数据的人半天能跑完,不需要用研排期,也不需要新埋点。
跑完之后通常有个小小的意外:排在最前面的那几对,往往不是团队开会时会猜到的那几对。要把这类分析固化成常规动作,得先有个测量框架,先把测量框架设计清楚再上工具那篇讲的就是这个顺序。保哥经手的项目里出现过好几次“没想到用户最常一起问的是这两个”,而这种意外恰恰是这份清单的价值所在——它替代的是猜测。
指标四:把退货原因按需不需要对照分两类
前三个指标都在测可见性。第四个才测并置,而它只能从结果侧倒推。
把退货原因分成两类。第一类是需要把两条信息对着看才能避免的:尺寸不合适、与描述不符、买错型号、颜色不对、配件不全。第二类是跟页面组织无关的:质量问题、运输破损、不想要了、找到更便宜的。
第一类占全部退货的比例,就是并置损失的一个下限——说下限,是因为还有一大批用户在页面上就放弃了,他们连退货的机会都没给你。
经验值是这样:第一类占比超过四成,版式和字段排列这件事就值得单独立项,而不是挂在某个大改版下面当子任务。整体的指标体系怎么搭,从指标体系到异常诊断那套数据分析框架可以拿来做参照。
把两个数交叉起来看
单看一个指标容易误判,把缺席率和退货第一类占比交叉起来,结论会清楚很多。
| 对照类退货占比高 | 对照类退货占比低 | |
|---|---|---|
| 缺席率高 | 典型的容器问题,换版式收益最大,优先做 | 内容本身少,折叠没造成什么损失,排期靠后 |
| 缺席率低 | 用户点开了还是对不上,问题在两块内容的距离,改排序和摘要 | 现状够用,把精力放别处 |
左下角那一格最容易被误判。数据上看用户明明都点开了,于是团队认为版式没问题,接着去改文案、改图片、改价格。真正的答案是那两块内容离得太远,用户点开第二块的时候已经把第一块忘了。
改版之后别再看的两个数
版式一换,有两个数会立刻变化,而且怎么变都不能用来评价这次改动。
一个是标签点击率——标签都没了,这个数当然归零,它不代表任何好坏。另一个是页面停留时长:内容一次全铺出来,用户可能读得更快(省掉了找的时间),也可能读得更久(终于看到了更多东西),方向不定。
该看的是这几样:加购率、退货第一类占比、售前咨询里“找不到”型问题的条数、以及会话内平均访问的商品页数——最后这个应该下降,因为用户不必再靠反复开关页面来拼信息。
要做对照实验,得先想清楚分流单位
有条件跑实验的团队,还得注意一个容易出错的地方:这类改动的分流单位不该是页面浏览,应该是用户或者会话。
原因很直白。用户在一次会话里会来回看好几个商品页,如果按浏览分流,同一个人可能这一页看到新版、下一页看到老版,他自己会先被绕晕,你拿到的数据也没法解释。
还有一条:观察期必须覆盖一个完整的退货周期,否则你只会看到收益,看不到代价。加购率和咨询量几天就能出结果,退货结构要一个月往上。很多改版之所以被评价为成功,是因为评价发生在代价出现之前。
这也是本文倒数第二个提醒:版式类改动的收益是快的,代价是慢的,而季度总结通常写在两者之间。
给客服记录加一个标签
最后补一个成本几乎为零、但特别管用的动作。
让客服在记录咨询时多打一个标记,把问题分成两类:一类是“找不到”,用户问的东西页面上有;另一类是“对不上”,用户问的是“这个尺码配我这个身高行不行”“这个配件跟我那台机器兼不兼容”——他要的是有人替他把两件事对起来。
这两类的条数趋势,比任何一个页面指标都更早反映问题。而且它们的走向应该是相反的:版式改好了,第一类会掉;第二类如果也跟着掉,那说明并置也做到位了。要是第一类掉了第二类没动,你就只做完了一半。客服这条线本来就该跟内容打通,从工单到帮助中心那7个协作动作给过一份可直接照搬的账本。
这个区分为什么重要,下下节那个失手复盘里会给出一个代价很高的答案。
把两件事对起来这个动作,怎么做进页面里?
有一招今天就能做,而且只有3%的站做了。剩下的动作按投入排序,前四条能吃掉一大半收益。
最省事的一招:把关键那几条抄一份放上去
换版式要排期、要设计、要发版。有一招不用等这些,今天就能做:在规格区的最上面放一小块摘要,把几条最关键的参数直接写在那儿。
这件事的普及程度低得惊人。在一项针对规格表可扫视性的基准里,只有3%的站提供了这样一份关键规格摘要,而同一份基准里有50%的站,规格表被判定为难以扫视。
3%是什么概念?它意味着这件事既不难做、也没什么人做,属于那种一做就拉开距离的动作。这类被大多数人跳过的低成本动作往往性价比最高,那9个被低估的谷歌SEO技巧里也是同一种气质。
摘要里放哪几条,不该凭感觉
但摘要有个天生的毛病:它一旦没人管,就会慢慢长成第二份完整规格表。
过程是这样的:负责电池的人觉得续航该进去,负责材质的人觉得面料该进去,市场觉得那个新拿的认证必须进去。半年之后摘要有十八条,跟下面那张规格表的区别只剩排版。文案口吻要是也没人管,散得更快,用技能把品牌口吻固化下来那篇给过一种约束办法。
要治它,得给摘要两条硬规矩。第一条是数量上限,六条封顶,多一条就得踢掉一条。第二条是准入标准:只有出现在并置清单里的字段才能进摘要。
这两条合起来把“摘要里放什么”从一个人人有话说的审美问题,变成了一个查表问题。给字段定准入规则这件事,跟Meta描述到底怎么写才提点击率那篇里的取舍是同一类:位置有限,得先决定谁有资格进去。摘要的定义也随之变了——它不是“最重要的那几条”,是“最常需要跟别的信息对着看的那几条”。这两者不一样,而且后一个能算出来。
描述区改成要点式,还有八成的站没做
商品描述那一大段连续文字,很少有人真的从头读到尾。把它改成按要点组织——每条一个小标题加一两句话——用户参与度会明显不一样。
这件事同样是少数派在做:按要点结构组织商品描述的站只有22%,另外78%还是一整块文字,哪怕只统计它们卖得最好的那五件商品也是这个比例。
要点式对并置的帮助是间接但实在的:一段八百字的描述里藏着的那句“随附三件配件”,用户扫不到;变成一条独立要点,它就能和价格一起进视野了。描述本身写不出彩的话,怎么摆脱供应商文案做出唯一内容那篇可以先看一遍。
在尺码表旁边,直接写别人穿着怎么样
这是并置最典型的一个落地例子,服饰站几乎必做。
做法不是“引导用户去看评价”,那还是要跳一次。做法是把评价里的合身反馈聚合成结构化的一两行,直接放在尺码表下面:多少人觉得偏小、多少人觉得正好、建议大一码的占比是多少。
这一两行的信息量不算大,但它把一次跨区块的对照,压缩成了一次原地阅读。用户不需要记住腰围数字,也不需要去翻评价。图片这一侧同样能承担对照的任务,那6类真实图片带来的视觉信号里讲过实拍图为什么比精修图更能解决问题。
同样的做法可以复制到别处:电子产品的规格旁边写兼容机型、家具的尺寸旁边写常见摆放建议、耗材的价格旁边写平均更换周期。共同点是——把配对那一方的信息压缩成一两行,搬到本方身边。这批一两行的内容从哪来?怎么用AI把用户评论变成高转化的产品描述里那套抽取流程正好能接上。
价格旁边那行字,值一笔钱
随附件是另一个高频配对。用户看到价格时,脑子里在问的是“这个价买到的是什么”,而答案通常写在描述区中段。
解法是在价格下面加一行清单式的短句:含什么、不含什么。别小看这行字,它同时解决三件事:跟对手比价时你的价值说清楚了、随附件不明导致的退货少了、用户不用再点开描述。
写这行字有个细节:不含什么比含什么更该写。用户默认会往乐观的方向推断,而这类推断的方向是可预判的——他会假设配件是全的、假设电池是带的、假设安装是包的。商品标识这类硬字段也别漏,跨境电商GTIN怎么从商品条码申请到被谷歌购物收录那篇讲了它牵动的下游有多长。
规格表本身也得能扫
还有一个常见的顾虑:把关键参数抄一份放上面,会不会显得重复啰嗦?实践下来基本不会。用户读摘要和读完整规格表是两个不同的动作,前者是快速排除,后者是确认细节,两者服务的是不同阶段的同一个人。真要说重复,那也是一种有用的重复。
做完摘要,下面那张完整规格表也别放着不管。同一份基准里的几个数字值得对照自查:有23%的站不按语义把规格分组,把三十条参数平铺成一张长列表;也有23%的站不使用任何视觉辅助来帮用户扫读。
规格表的改法很朴素:按用户关心的维度分组、组间留白、关键行加粗、单位统一、数值右对齐。这些都不需要产品经理批准,前端顺手就改了。页面上的图片也值得顺手体检一遍,一页图片的alt与属性怎么批量查里那套流程半小时能跑完全站模板。
还有一条容易忽略:规格表如果做成多列,在窄屏上就会变成横向滚动——又回到前面那条准则上去了。数据表格虽然在例外清单里,但那说的是真正需要二维阅读的数据表,不是被硬排成两列的参数清单。
并置的前提是两边都真的有东西
有个前提得先确认:把两块信息摆到一起,前提是这两块信息都存在。如果其中一边压根没写,摆得再近也没用。
这个前提没有想象中牢靠。在一项针对头部电商站商品描述的评估里,有10%的站做不到在全站范围内保持一致的详细程度——不是全站都差,是有的商品写得很足、有的只有一句话。用户不知道这个规律,他会把没写解读成没有。
同一份研究里还有个具体数字:在桌面端测试中,有50%的受试者需要商品的成分信息才能做判断。成分这种东西属于要么有要么没有,缺了就是一道死路。
所以落地顺序应该是:先补齐字段,再谈摆放。反过来做,你会得到一排排列整齐的空白。字段这一层的治理是另一件长期工程,出海独立站的社会证明体系怎么搭里讲过评价字段怎么从散装变成资产。
一张能贴在工位上的清单
把这一节的动作按投入从小到大排一遍,就是一份可以直接照着做的清单:
- 把浏览器缩放到400%,走一遍主力商品页,记下所有出现横向滚动的地方
- 关掉可折叠组件里那个“同时只展开一项”的开关
- 给每个区块换一个承诺具体的标题,别再用“更多信息”
- 价格下面加一行含什么不含什么
- 规格区顶部加一份不超过六条的摘要
- 用现成日志跑出并置清单,取前十二对
- 按清单调整区块顺序,把配对的两块挪到一起
- 把评价里的合身或兼容反馈聚合成一两行,搬到对应字段旁边
- 桌面端换成全展开加吸顶目录,移动端换成可折叠区块
- 把三条评审规则写进模板验收清单
前四条一两天就能做完,最后两条要排期。有意思的是收益分布跟投入顺序基本相反——前四条通常吃掉一半以上的收益。
三条写进评审清单的硬规则
上面这些改动做完,还得有东西守住它,不然半年后又会被慢慢改回去。保哥的建议是往模板评审清单里加三条,都很短。
第一条:并置清单里排前五的字段对儿,必须在不做任何点击的前提下同时进视野。这条是验收标准,不是建议。
第二条:新增任何区块,不得插进已经配对的两块内容中间。想插,先证明这一对可以拆。这类硬规则最好跟图片、命名那些规范放在同一份文档里,从命名到压缩那份图片清单就是个可以合并的例子。
第三条:任何把内容移进排他容器的改动,需求文档里必须写明它拆散了清单里的哪几对。写不出来,就说明没查过。
为什么第三条最有用
三条里,第三条看着最啰嗦,实际最管用,因为它改变的不是设计,是举证责任。
在此之前,主张“折起来”的人只需要说页面太长,主张“别折”的人得拿出用户会看不到的证据——而这个证据前面说过,天然不存在。举证责任压在反对方身上,反对方永远输。
加了第三条之后,位置调了个个儿:想折叠的人得先说清楚折的是哪几对。这一句话就把讨论从感觉拉回了清单。
顺带说个副作用,是个好的副作用:这条规则会逼着团队定期维护那份并置清单,因为不维护就没法填这一栏。一份被迫定期更新的清单,比一份放在文档库里落灰的清单值钱得多。设计侧要一起遵守这些规则才守得住,网页设计师那7个协作动作从信息架构到Figma落地给过一份分工建议。
这件事该怎么排期,投入多少才划算?
第一周一行代码都别写,先出三张表。收益那笔钱不用估算,它已经躺在退货明细里了。
第一周别碰代码,先出三张表
这类项目最容易的失败方式,是第一周就开始改页面。改到第三周有人问“我们到底解决了多少问题”,谁也答不上来,因为没有基线。
所以第一周只干一件事:出三张表,一行代码都不写。
第一张是现状表。把站上所有商品页模板列出来,每个模板一行,写清楚它用的是哪种容器、几个区块、默认展开哪些、移动端跟桌面端是不是一套。这张表通常会带来第一个惊讶——多数团队以为自己只有两三个模板,实际数出来往往有七八个,因为大促页、新品页、清仓页各有各的历史。
第二张是并置清单,前面讲过怎么跑。第三张是字段现状:清单里涉及的那些字段,覆盖率各是多少,哪些是法定必须展示的。模板一多,页面之间的信号还容易互相打架,产品页关键词蚕食怎么用5个维度的信号区隔修好那篇的排查方法可以顺手用上。
四周能走完的一条路
三张表出来之后,剩下的三周有比较明确的顺序。
第二周做零成本的那批:关掉互斥开关、改区块标题、加价格附带说明、加规格摘要。这些改动不改结构,风险低,而且能马上放出去。要是你的站建在成熟平台上,节奏还能更快,Shopify独立站怎么同时做好SEO和AI搜索优化里给过一份对应的动作表。
第三周动顺序和内容:按并置清单调整区块排列,把配对的两块挪到一起;同时启动评价字段的聚合,这一项通常要跟数据侧配合,是四周里最容易拖的一环。
第四周才换版式,并且按前面那三条验收:缩放400%无横滚、页内查找能命中、清单前五对零点击可同屏。
为什么把换版式放在最后?因为前三周的改动本身会改变你对版式的判断。这种边做边修正方案的节奏,跟SEO实验设计里单因素隔离和最小可检测效应那套要求正好互补:一次只动一件事,才知道是哪一步起了作用。有几次保哥经手的项目做完前两周就发现,页面已经短了三分之一,全展开完全扛得住,原本计划的可折叠方案根本没必要上。
三档投入,按你能拿到的资源挑
不是每个团队都有四周。按投入拆成三档,每一档都能独立交付,不是必须走完全程。
最小档大概两到三个人周:只做第二周那批零成本动作,加上把互斥开关关掉。不换版式、不动数据。经验上这一档能吃掉整体收益的一半左右,因为它解决的正是最高频的那几对。
中档大概六到八个人周:加上区块顺序调整和评价字段聚合,桌面端换成全展开加吸顶目录。这一档做完,前面那几个指标应该能看到明确变化。
完整档十五个人周往上:两端版式统一重做、并置清单进模板评审流程、加上季度复查机制。这一档的边际收益明显低于前两档,适合本来就要做商品页大改版的团队顺手带上。
把三档摊成一张表,方便你对着现有资源挑:
| 档位 | 做什么 | 要谁 | 多久见效 |
|---|---|---|---|
| 最小档 | 关互斥开关、改标题、加摘要与价格附带行 | 前端一人,内容一人 | 两周内能看到咨询量变化 |
| 中档 | 加区块排序、评价字段聚合、桌面端换版式 | 再加数据与客服各一人 | 一个退货周期 |
| 完整档 | 两端统一重做、清单进评审流程、季度复查 | 加设计与项目管理 | 一个季度往上 |
怎么跟拿预算的人说这件事
很多好项目死在立项那一步,因为讲不清收益。这件事有个便利:它的钱已经在账上了,不需要估。
拿最近一个季度的退货明细,按前面那个方法分成两类,把对照类那一半的直接成本加出来——双程运费、入库检验、二次销售的折价。这是一个财务已经认过的数字,没有任何假设成分。
然后说一句话就够了:这笔钱里有一部分,是因为页面上两条信息没能同时出现在用户眼前。我们不知道具体是几成,但我们知道分母是多少。
这跟很多需求文档里那种“预计提升转化率x%”的写法完全不同。如果一个项目非要靠估算才能立项,通常说明你没找到那笔已经躺在账上的钱。而商品页这类项目的好处正在于——它的损失早就以退货、客服工时和差评的形式被记录下来了,只是从来没人把它们归到版式这一栏。要把这几本账并到一起看,出海客服从0到1那套多语种分层与工单分流里的分类口径是个不错的起点。
三条该停手的信号
做到一半要不要继续,有三个信号可以帮你判断。
第一条:区块到达率明显上去了,退货里的对照类占比却没动。这说明你只做完了可见性那一层,并置没碰。继续加大可见性的力度不会有用,该转去调顺序和做摘要了。
第二条:并置清单跑出来,排前面的几对全部落在同一个区块内部。这说明用户的困难不是跨区块对照,是那个区块本身写得不清楚。这时候该去补字段、改文案,版式动不动都行。
第三条:上线半年后回头看那份规格摘要,条数从六条涨到了十几条。这不是内容变多了,是准入规则失效了。去查一下最近三次是谁往里加的东西、依据是什么,通常能查到一次没人反对的会议。
上线之后每个季度花半小时复查
这类改动最容易被时间磨回去,所以建议排一个很轻的季度复查,三件事,半小时能查完。
第一,数一下规格摘要现在有几条,超过六条就动手删。第二,打开并置清单排前三的那几对,确认它们中间没有被塞进新东西——大促期间加的推广位是最常见的入侵者。第三,把浏览器缩放到400%再走一遍,看有没有新的横向滚动冒出来。
三件事都不需要开会,也不需要拉人,一个人对着页面点几下就行。真正让改造失效的从来不是某次大的回退,是十几次各自都有理由的小改动。
哪些品类不用急着做
这套东西不是对所有站都同样值钱,说清楚边界比夸大适用范围有用。
单品牌、SKU很少、每件商品内容量本来就小的站,多半用不上——你的商品页压根没长到需要折叠。硬套一份并置清单,只会得到三对,还都在同一屏里。
订阅制和服务类的站也可以往后放。用户的决策重心在方案对比页和价格页上,商品页承担的判断没那么多。
标准化程度极高的耗材同理。一卷标准规格的胶带,用户不需要把两条信息对着看,他只需要确认型号和价格。这类商品的竞争往往直接落到价格和曝光上,Google Shopping那6大排序因素比页面版式更能决定成败。
哪些品类做了收益最大
反过来,有几类站基本上做了就有效果,值得优先排。
一是参数多且互相牵制的:电子、五金、汽配、乐器。用户几乎每个判断都要对照两个以上的参数。
二是有合身或尺寸问题的:服饰鞋履、家具、母婴。这类站的退货率里,对照类占比通常是最高的。
三是有兼容概念的:配件、耗材、模块化产品。用户最怕的就是买回来装不上,而“装得上装不上”永远是一个需要两条信息的判断。
四是客单价高、决策周期长的。这类用户会仔仔细细看完你的页面,页面里的每一处不便都会被他放大感受。这类站的胜负手其实在内容和信任上,高客单价独立站卖不动时该补的那两块讲得比较透。
还有一类站介于两者之间:品类不多但每件商品参数不少的,比如小众器材或者定制类。这种情况下先做最小档,看看指标动不动,再决定要不要往上走。
谁该在这个项目里
最后说说人。这类项目最常见的组队方式是产品加设计加前端,而这个组合会漏掉两个关键角色。
第一个是客服。并置清单的原料在他们手上,改完之后最早的反馈信号也在他们手上。不拉他们进来,你得等一个退货周期才能知道效果。
第二个是负责商品数据的人。摘要放哪几条、评价字段怎么聚合、字段覆盖率够不够,全都要他们点头。等到第三周才发现某个字段全站只有六成商品有值,排期就废了一半。
至于要不要拉数据分析的人,取决于你打算做到哪一档。最小档不需要,中档往上必须有,因为那几个指标的口径得有人定死,否则三个月后没人说得清当初到底改善了多少。口径没定死会出什么事,同一个推荐位两套报表算出相反结论那篇是个现成的例子。
保哥踩过的坑:把折叠全打开之后,退货率反而往上走了
四个维度全绿,咨询量降了三成多,写进了收益栏。第七个月才发现,那三成里有一部分本来是资产。
站的情况和当初的问题
这个案子是一家做出海运动服饰的独立站,卖跑步与训练服、瑜伽裤和运动鞋,主要市场是英国、德国和法国,客单价四十到一百五十欧。
找过来的时候,问题很典型:移动端商品页用一排横向标签,四格分别是描述、规格与尺码、材质保养、用户评价。售前咨询里最多的一类是“你们尺码表在哪儿”,其次是“这个能退吗”。
诊断没什么悬念:标签缺席率超过七成,尺码那一格的到达率低得离谱,而它是这个品类最要命的一块内容。服饰类的退货结构本来就特殊,结账放弃率超七成背后那9个真实成因里也提过尺码这一项的连锁影响。
改造做得很规范,数据也很给面子
方案基本就是本文前面那一套:移动端换成可折叠区块,桌面端全展开加吸顶目录,互斥开关关掉,跑了一份并置清单,把尺码区和评价区挪到相邻位置,尺码区默认展开。
头两个季度四个维度全绿。区块到达率翻了不止一倍;加购率上升;会话内平均访问的商品页数下降;售前咨询量降了34%。
最后这个数字尤其漂亮,因为它能直接折算成钱——客服工时省下多少、按人力成本换算是多少欧元,一笔一笔算得清清楚楚,写进了季度总结的收益栏。
基于这个数字,客服排班往下收了一档。两位做了三年多、最熟悉版型的多语种客服转去做社媒内容,这是个正常的人员安排,当时没有任何人觉得不妥——咨询量确实降了,人闲着也是闲着。多语种客服的人力配置本来就紧,出海团队那5个场景的网络与账号分线那篇里也提到过这类岗位的稀缺性。
第七个月,问题从另一个方向冒出来
它不是以转化率下降的形式出现的。转化率一直很稳。这类总量稳、结构变的情况最容易被放过,跨境独立站在AI搜索时代那套内容优化底层逻辑里提过一个类似的观察窗口。
是仓库那边的月度退货复盘里,“尺码不合适”这个子类的占比涨了一截,而且几乎全部集中在瑜伽裤和跑鞋这两个品类上。
第一反应当然是查页面。查完之后所有人都有点懵:尺码表在,位置好;评价在,紧挨着尺码表;缺席率很低;页内查找能命中;缩放四倍没有横滚。按这篇文章里的每一条标准,这个页面都是优等生。
答案在改版之前的客服对话里
转折点是有人去翻了改版前的客服记录。
改版前,用户来问“我165公分62公斤,这条裤子该拿M还是L”,客服的回答从来不是把尺码表念一遍。典型的回答是这样的:按尺码表你是M,不过这一款版型偏小,评价里有好几位提到建议大一码;你要是喜欢贴身就M,喜欢宽松就L。
看出来了吗——客服在做的,正是这篇文章从头讲到尾的那件事:把尺码表和评价里的合身反馈对起来,然后给一个判断。
改版之后,用户能自己找到尺码表了,于是他不再来问。他照着标称选了M,两周后寄回来一条M。
我们消灭的是“找不到”型咨询,可“对不上”型咨询是搭着它一起走的——用户不来问尺码表在哪,也就不会顺带听到那句偏码提醒。
这一层是本篇最贵的一条
你消除的那个多余步骤,可能同时是整个系统里唯一一个把两条信息对起来的地方。效率改进删掉的往往不是冗余,是一个从来没人画在流程图上的整合环节。
那位客服每天做几十次并置,做了三年多。这件事没有任何一份文档记录过,没有一个指标衡量过,甚至没有一个名字。它只在两个人的对话里存在了几十秒,然后消失。
而这类环节有个共同特征:它们通常寄生在一个被视为“损耗”的流程上。客服咨询在所有公司的账本里都是成本项,谁也不会去研究一项成本里到底藏着什么价值。真要用机器接手这部分工作,用户宁可打电话也不点你的AI客服那篇里的转人工边界必须先想清楚。
它消失的证据,长成了一条好消息
还有更难受的一层。
这个整合环节被删掉的时候,报表上留下的不是空白,是一个正号。售前咨询量下降34%,白纸黑字写在收益栏里,还配了工时折算和一张漂亮的趋势图。
一个整合环节被删掉时,它在报表上留下的从来不是缺口,而是一条正向指标——因为它的工作量本身就是被当成成本来统计的。你去砍成本,成本下降,一切合乎逻辑,没有一个环节出错。
回头看,那条34%是整件事里最有说服力的证据,同时也是最误导人的证据。它是真的,它算得也对,它只是量错了东西。
最贵的一层是不可逆的
知道原因之后,最自然的想法是把那句偏码提醒做进页面。这也确实是最后的解法。
问题是,没人知道该写什么了。
哪些款偏小、偏多少、什么身形要注意什么,这些判断从来只存在于那两位客服的经验里,没有落成过任何一条字段。其中一位已经转岗半年,另一位后来离职了。
最后只能从头跑一遍:调评价、人工标注、按款式归纳、试跑验证,前后花了六周。这类补课的成本很容易被低估,让机器批量写内容时最难的其实是说清楚哪一版算写好了那篇也算过一笔类似的账。而第一版做出来的提示,质量明显不如当年客服随口说的那句——因为她还会看用户发过来的身高体重和以往购买记录,而聚合出来的字段只会说个平均值。
隐性知识的载体是岗位,不是文档;砍掉一个岗位,等于删了一次库,而且删的往往是唯一一份副本。
其实有过一次预警
后来复盘时翻会议记录,发现第五个月有位运营在周会上说过一句话:以前客服会主动提醒哪些款偏码,现在好像没人提了。
这句话当时被当成一句怀旧带过去了。会上正在看的是一张所有指标都朝好的方向走的看板,谁也没把这句没有数据支撑的闲话当回事。
这类信号的处境跟前面说过的很像:一条孤立的定性观察,站在一屏绿色数字面前,天然没有分量。而这类问题在早期恰恰只能以这种形式出现。
后来改了三处
第一处是口径。把售前咨询拆成两类分开统计:找不到型和对不上型。规则写死——找不到型下降算收益,对不上型下降是警报,需要单独说明原因。这一改,那张季度总结表里的收益栏当场少了将近一半,有人不太高兴,但这个数字本来就不该在那儿。
第二处是把并置真正做进页面。从评价里抽出合身反馈聚合成三行——偏小、正好、偏大各占多少,加一句建议——放在尺码表正下方,瑜伽裤和跑鞋先上。
第三处是建了一条很土但很管用的规矩:客服每周挑三条最典型的对不上型对话,把里面那句判断写成一条商品级或者款式级的字段。这批字段攒起来之后还有别的用处,把用户评价、问答和社区内容做成会排名的资产那篇讲了怎么让它们二次发力。半年攒了四百多条。这条规矩的真正价值不在那四百条,在于它把一种一直只存在于对话里的知识,变成了会留下来的东西。
如果你手上正好有个环节想砍
这件事之后,保哥给自己留了三个自查问题,凡是要砍掉某个人工环节之前都会过一遍。
第一个:这个环节的产出,除了它自己那份工作量,还有没有别的东西?比如它是不是在替系统做某种整合、翻译或者判断。第二个:这份产出有没有落成过可以留下来的东西——一条字段、一份文档、一段规则?如果没有,那它只存在于人的脑子里。第三个:砍掉之后,最早的坏消息会从哪张表上出现,要多久?
三个问题里最关键的是第二个。只要产出从来没被记录过,砍掉它就是不可逆的,因为你连自己失去了什么都描述不出来。
结果,以及一句总结
尺码类退货回到了改版前的水平,还略低一点。售前咨询量回升了一部分,回升的全是对不上型,而它现在被定义成中性指标,涨了不扣分。加购率和会话内页面数守住了改版拿到的成绩。这套信任是一层层垒起来的,DTC独立站那7层信任的落地实战里把它们排过一个先后。
那两位客服没有回来。
最后一句总结是这样的:改版本身没错,页面确实变好了,每一步都有数据支持。我们错在把客服当成了页面的一块补丁——而揭补丁之前,没有先看看下面到底长好了没有。这件事最难受的地方在于,从头到尾报表上没有出现过一个负数:先是咨询量下降被记成收益,后是退货上升被记进另一张表,两张表中间隔着三个部门和一个季度。
常见问题解答
商品页用一排横向标签,最主要的问题是什么?
两个问题,一大一小。小的那个是找不到:用户默认往下滚就能看全一页内容,而标签之外的几格根本不在滚动路径上,测试里反复出现受试者扫了两遍页面仍然没发现第二个标签的情况。大的那个是没法对照:这类容器一次只显示一块,让另一块出现的代价是让当前这块消失,所以用户永远没办法把尺码和评价、参数和配件清单摆在一起看。第一个问题换成展开或可折叠区块就能解决,第二个问题得靠调整区块顺序和做摘要才行。
把横向标签换成可折叠区块,是不是就算改完了?
不一定。多数组件库的可折叠组件带一个默认开着的配置项,叫同时只展开一项或者类似名字。这个开关一旦留着,点开规格就自动收起评价,行为跟标签页完全一样——你花时间换掉的那条性质被一行默认配置装了回来。所以迁移时第一件事是把这个开关关掉,让用户能同时展开两块。改完之后可以拿一份并置清单验:清单里排前五的字段对儿,能不能在不做任何点击的情况下同时进视野。
移动端那排要横向滑动才能看全的标签,会踩到无障碍要求吗?
会。WCAG的回流准则要求内容能在等效320 CSS像素的宽度下呈现,且不要求用户在两个方向上滚动,这是AA级要求。一个纵向滚动的商品页配一条必须横滑的标签栏,正好是两个方向。它的例外清单里列的是地图、图表、视频、游戏、数据表格这类真正需要二维布局的内容,导航栏和标签栏都不在其中。还要注意320 CSS像素同时对应桌面浏览器放大到400%的情形,所以这不只是手机端的问题。
怎么判断用户到底有没有看到被折起来的那几块内容?
最直接的一个数是缺席率:进了商品页的会话里,一次标签或折叠区块都没点开过的比例。用标签页的站本来就有点击事件,用原生折叠元素的站接一下展开状态变化事件即可,不需要新埋点。缺席率高于七成,说明多数人只看到了默认那一格。另外还有两个免费数据源:站内搜索日志里那些搜退换、尺码、保修的词,说明用户在页面上没找到;客服记录里问页面上明明有的东西那一类,同理。
商品页上哪些信息必须挨着放?
不用凭感觉猜,可以算。做法是列一份字段词表,拿去扫客服对话记录和退货备注,统计同一通对话或同一条备注里被同时提到的字段对儿,按频次排序取前十二对。常见的高频对包括尺码表配评价里的合身反馈、接口规格配随附配件清单、售价配随附件价值、库存状态配配送时效、商品三围配安装所需空间。跑这份清单一个熟悉数据的人半天能完成,不需要用研排期。
把部分内容放到独立子页面上,会不会比标签更干净?
页面确实更干净,代价也更大。移动端基准里有26%的站这么做。用户点进子页面再返回时滚动位置常常丢失,被扔回页面顶部;想把子页面里的一句话和主页面上的一个数字对着看,基本只能靠截图。更麻烦的是它在数据上不难看——子页面有独立的浏览量甚至独立的停留时长,一个把用户赶去别处才能读完的设计,在报表上反而多出一行成绩。
商品页版式改完之后,该看哪些数字、不该看哪些?
有两个数改完必然变化,但怎么变都说明不了好坏:标签点击率(标签没了自然归零)和页面停留时长(读得更快和看得更多方向相反)。该看的是加购率、退货原因里需要对照两条信息才能避免的那一类占比、售前咨询里找不到型问题的条数,以及会话内平均访问的商品页数——最后这个应该下降。另外建议把售前咨询拆成找不到型和对不上型两个口径:前者下降是收益,后者下降是警报。
权威参考资料
本文标题:《那排标签把商品页收拾得很干净,代价是用户再没法把两块信息放进同一屏》
本文链接:https://zhangwenbao.com/product-page-horizontal-tabs-adjacency-requirement.html
版权声明:本文原创,转载与引用请注明作者与原文链接。许可协议: CC BY 4.0