更新时间：2026年10月16日

商品对比页要先固定具体型号和规格，再让相同指标在同一行出现。统一单位，区分“不支持”与“未提供数据”，把重要差异放在易看到的位置；替换或移除商品时保留当前指标。窄屏优先保证两件商品能按同一参数比较，而不是把整张宽表缩小到看不清。

下面用便携显示器的三个虚构型号A、B、C做界面练习，数据只用于说明比较方法。读者的任务是给经常出差的工作方式选一块副屏，重点看重量、支架、连接方式和尺寸。可用Pixso设计商品比较界面，把候选对象、参数分组与移动端呈现放在同一份文件中。

比较对象必须精确到当前规格

“轻行显示器”可能有不同尺寸、接口与配件版本。对比列头应显示完整型号及当前规格，缩略图只帮助识别，不能代替名称。用户从详情页加入“14英寸标准版”，对比页不能悄悄换成同系列的基础款，让重量与接口看起来对不上。

从列表加入商品时，提供持续可见的对比入口，说明已选数量及已选对象。达到容量上限后让用户明确替换哪一项，不要自动挤掉最早加入的商品。上限由可读空间和任务决定，不存在所有网站都必须比较四件的固定规则。

本例桌面支持三列比较，手机重点比较两列。加入第三件时可以切换显示对象，但仍保留完整候选清单；手机暂时未显示C，不代表把C从对比中删除。移除最后一项后，空状态提供返回候选列表的动作，保留此前筛选，而不是送回商城首页。

价格应随当前规格和销售条件展示，并标注必要的适用范围。不把未选配件后的最低起售价与另一款完整套装价格放在一行，制造看似直接可比的差价。若本页不负责选择优惠，可让用户继续到详情确认交易条件，但参数本身仍应准确。

先统一参数，再决定哪些差异值得突出

把三份详情资料整理成同一套字段，是对比页设计的核心。A写“净重0.7kg”、B写“重量720g”，可以在确认两者都不含配件后统一为克；C若写的是含保护套总重，就不能只换算单位后和裸机重量比较。单位统一不等于测量条件一致。

这张表里，C的重量未知，不能写成0g；触控资料没有提供，也不能直接画叉号。“不支持”是明确事实，“未提供”是资料缺口，两者对购买判断的影响不同。可以提供查看该型号详情的入口，但不要为了填满表格从相邻型号复制参数。

参数分组沿着读者问题组织。出差场景先看便携与支撑，再看显示与连接；所有型号都一样的包装说明可以放在后面。对专业人群确实关键的技术参数保留准确名称，必要时用简短解释帮助理解，而不是把技术词全部换成含糊的“高性能”。

“只看差异”按规范化后的含义判断，不按字符串逐字比较。0.7kg和700g若口径一致，不应算成差异；支持与未提供则不能被当成同一类。打开差异模式后持续显示开关状态及隐藏了哪些相同参数；如果全部相同，告诉用户当前没有已知差异，并提供恢复全部参数的入口。

不要把所有更大的数字标成绿色赢家。重量更小可能更便携，尺寸更大可能更适合固定办公，二者体现取舍。明确展示差异，比给出没有依据的综合分数更能帮助用户选择。确实使用推荐标记时，说明推荐对应的需求，不把“出差更轻便”改成“全面领先”。

列头可以随滚动保留型号、当前规格和移除入口；首列保留参数名，让用户看到700g时知道属于谁、测量什么。粘性区域不能占满手机半屏，型号可使用有辨识度的短名，完整规格通过可展开区域补充。没有信息辨识力的三个产品缩略图并不能承担固定表头的职责。

页面结构也要表达表格关系。W3C双向表头教程说明了行表头与列表头如何关联数据。比较页实现时应保留这种关系，让辅助技术能够识别“B型—不含配件重量—720g”，而不只是连续读出一串数字。

在Pixso里制作桌面三列比较和手机双列比较两张画板。手机首列是参数，后面保留A、B两件商品，并提供将B换成C的明确入口。两张画板沿用相同的尺寸、重量和支架参数，把“未提供”做成可读文字；不要靠缩小桌面字体模拟手机适配。

还有一种方案是固定一个基准商品，另一列切换候选。它适合用户已经有明确首选、只需逐一比较的情境。若任务需要同时看三个型号的整体取舍，仍应提供完整比较视图。不能把一种移动端安排描述成所有商品都适用的唯一模式。

用户正在“连接方式”分组时，将B替换为C，理想结果是当前分组仍留在可见区域，列表重新展示A和C的对应参数。新商品加载中可以保留另一列，给正在替换的列单独显示状态；不要先闪出旧型号参数，再换个标题让用户误以为那是新结果。

新商品没有“连接方式”资料时，保持这一行并标明缺失，而不是删除整行、让页面跳到其他分组。若新旧商品属于完全不同类别，原有参数结构已不可比较，应在选择前说明并限制不适用的组合，或给出清楚的类别切换，不能硬拼成一个空值居多的表。

从某一列进入详情后，返回时保留比较集合、规格、差异开关和阅读位置。用户更换规格后再回到比较，需确定是否同步更新该列，并让变化可见；不能详情里是高配版、对比仍用基础版，而两个页面都只显示相同的简称。

最后的购买入口与对应商品列绑定，文案说明进入哪一款、哪种规格。比较页的目的不是催用户选最贵的型号，而是让他解释自己的选择：是否值得为了更大屏幕承担额外重量，是否确实需要触控，未知参数是否还要补充确认。能保住这些判断依据，页面才真正完成了对比任务。