产品对比页需要让用户用同一组维度比较候选，并快速找出会影响选择的差异。先统一单位、条件和缺失值，再组织布局；“只看差异”、固定产品名称和移动端双项比较，都是建立在数据可比的基础上。参数再多，如果一个写整机重量、一个写含包装重量，排成整齐的表格也不能帮助选择。
设计这类页面时，可以用墨刀构建可点击的对比流程，从选择候选、查看差异一直连接到产品详情。先确认用户能基于页面作出判断，再调整卡片、颜色和动效，避免只做出漂亮但难以比较的参数墙。
先问用户在做哪一种选择
同样比较便携显示器，经常出差的用户可能先看重量、连接方式和支架；固定办公用户可能更关心显示面积和桌面摆放。对比页不必替所有用户选出同一个赢家，但应把高频决策维度排在容易找到的位置。
把用户的自然问题转成维度名称，比直接照搬产品数据库更实用。“能不能接我的电脑”对应接口与连接条件，“背着走重不重”对应不含附件的设备重量，“竖着看文档方便吗”对应支架与旋转方式。技术参数仍可保留，但要放在能够解释它的任务组里。
可先将维度分为“需要优先确认”“影响使用体验”“补充规格”。这是一种阅读层级，不是给所有产品建立通用评分。不同参数的价值无法随意相加，尤其不能未经依据就把“接口数量多”换算成更高的推荐分。
可比数据必须有相同单位和适用条件
以下是用于设计对比界面的自拟数据，不对应在售型号。重点在于数值呈现规则：名称和单位固定，同一行只比较同一概念，缺失信息保持缺失。
| 维度 | 候选A | 候选B | 候选C |
|---|---|---|---|
| 屏幕对角线 | 14英寸 | 15.6英寸 | 14英寸 |
| 设备重量，不含附件 | 610克 | 780克 | 未提供 |
| 是否附带支架 | 包含 | 包含 | 需另购 |
| 视频连接 | USB-C，需设备支持视频输出 | USB-C与HDMI，分别说明供电要求 | USB-C，需设备支持视频输出 |
若原资料中A写“610g”、B写“0.78kg”，展示层可以统一成克，但保留原始资料方便核对。价格也要统一货币、计费周期与是否含税；按年订阅折算出的月均价不能与按月付款价格混在同一行而不说明。
“未提供”“不支持”“不适用”不能都写成横杠。未提供表示无法判断，不支持表示已有依据确认没有这项能力，不适用表示该维度不适合该产品。把缺失信息当成0，可能制造并不存在的优劣；把“不支持”写成灰色小点，又容易让用户误读为资料尚未填写。
“只看差异”比较的是含义，不只是字符串
“14英寸”和“14.0英寸”通常不构成有意义的差异；“含支架”和“支架需另购”则会影响购买后的使用。开关应基于规范化后的维度判断，而不是对两段文字做简单的不相等比较。
对于带条件的能力，条件同样是差异。两个产品都写“支持团队协作”，但其中一个限制在某个套餐，另一个限制成员角色，就不能直接折叠成相同。应将条件显示在对应单元格，必要时拆成“是否支持”和“适用条件”两行。
开启“只看差异”后，保留产品名称和维度分组，并显示当前模式。若所选候选在可比较字段上没有差异，提示“已知参数相同，可关闭只看差异查看完整信息”，而不是留下一个空白页。含有未知项的行建议保留，避免用户把缺资料误认为完全一致。
删除一个候选后，差异范围可能变化，应重新计算；但不要让页面突然滚回顶部。如果原来正在比较连接方式，变化后仍尽量让用户停留在相关区域。
让产品名和维度名始终对得上
长表格最容易出现的阅读问题，是滑到下半段后忘记“这一列是谁”。可以固定产品名称行；横向滚动时保留维度名称列。但固定区域不能占满窄屏，产品缩略图、长名称和购买按钮都需要控制高度。
每个分组以具体任务命名，例如“携带与摆放”“连接与供电”，比“基本参数1”“其他参数”更容易扫描。展开或收起分组时，操作状态应清楚；用户需要比较的关键条件不宜默认全部折叠。
强调差异时可使用文字、标记和适量底色，不只靠红绿颜色。每一行都标一个“最佳”会让页面变成竞争广告，也会掩盖权衡：更轻与更大屏幕可能分别服务不同需求，不能在没有任务前提时强行决出唯一赢家。
手机上保住对照关系，不要只缩小桌面表格
宽表格缩到手机后，字可能还能看见，用户却要不断左右滑动才能记住相邻项。一个可用方案是默认比较两项，并允许替换候选；名称与当前维度保持可见。两项是窄屏设计的起点，不是所有产品都必须遵守的数量标准。
另一种方式是按维度分组，将同一维度下的候选值连续排列。例如“重量”下面依次显示A、B、C，接着再看“连接方式”。这种结构牺牲了一部分横向对齐，却能避免用户读完整个A再凭记忆寻找B。不要直接把每列变成一张很长的独立卡片，让比较退化成来回阅读详情页。
无论采用哪种方式，候选集在切换设备布局后应保留。取消一项、替换一项与退出对比是不同动作，按钮名称要能区分。长型号或多语言名称的处理，可参考长文本与多语言UI适配，避免为了对齐把型号关键后缀截掉。
从选择候选到下一步，保持信息连续
列表中的“加入对比”应有选中反馈，并在对比栏显示已选产品名称。达到设计允许的数量时，解释需要先移除哪一项，或提供明确的替换操作；不要静默挤掉第一个候选，让用户比较了自己并未选择的组合。
进入对比页后，可以为每个候选提供“查看详情”或与任务相符的行动入口。推荐文案应说明条件，例如“经常携带时，先核对重量与电脑接口”，而不是在参数还没看清时反复弹出立即购买。详情页负责完整介绍单个对象，对比页负责帮助选择，两者分工明确才不会互相复制。
如果准备承接到完整详情，可结合商品详情页的卖点与信息层级。从对比页进入详情再返回时，保留候选、差异模式和大致阅读位置，用户不需要重新勾选一遍。
让评审者做一个具体选择
将上面的候选放进原型，请评审者完成“需要经常携带，电脑具备兼容的视频输出接口，先选出值得进一步查看的型号”。观察他是否发现C重量未知，而不是自动判断C最轻；是否知道B屏幕更大但重量也更高；能否找到连接条件与详情入口。
再开启只看差异、移除一项、换成手机布局，检查同一结论是否仍能成立。测试发现需要来回记数值时，先改信息对齐与分组；发现无法判断时，先补单位、条件或缺失说明。只有阅读路径和数据口径都清楚，视觉精修才会真正放大对比页的价值。
