电子商务设计中，将产品页面主色调与商品颜色匹配的趋势日益流行，但这是一种极差的用户体验（UX）。
人类倾向于以最低认知成本完成目标。视觉障碍会迫使大脑额外消耗精力，即便是在线购物也不例外。
案例分析：色彩过载导致的信息迷失
假设你被某天然除臭剂品牌吸引，但在手机端看到如下界面：
如何区分不同的香味？
满屏绿色且各香味变体外观一致，缺乏有效提示。用户不得不逐一点击确认，甚至怀疑是设备显示故障。而宽屏版本的问题更为严重：
在桌面上，只有产品名称和图片突出显示。
页面完全被与包装同色的绿色覆盖，香味变体依然难以分辨。除产品名称和图片外，链接缺乏视觉指引；订阅折扣标签的划线价格、添加到购物车按钮均与背景融为一体，毫无辨识度。
茶品牌Blue Bear的产品页更是将这一趋势推向极致：从产品名称、利益点图标到“订阅节省”标签及购买按钮，全页皆绿。
Blue Bear有一个绿色的页面。
例如，“12包装”示例使用了与下方“订阅并节省”框相同的填充色。
正如学生划满教科书重点等于没有重点，单一色彩意味着无优先级。当视线触及“加入购物车”按钮时，缺乏任何行动暗示。
视觉层次与对比度的重要性
视觉层次结构用于引导消费者识别核心信息、次要内容及下一步操作。色彩传达优先级依赖于对比度——人眼只会关注与环境差异显著的元素。全页使用品牌色恰恰消除了这种关键对比。
优化建议
- 灰度测试验证层次：截取产品页转为灰度并模糊处理。若视线未首先落在“加入购物车”按钮上，而是被标志、徽章吸引或无处聚焦，说明页面层次仅依赖色彩而非结构。
- 为交互保留专属色：品牌色可用于背景和摄影区域，但主按钮及选中状态应使用单一的对比色，并确保该颜色未被其他非交互元素占用。
- 区分“可点击”与“纯展示”：利益标签、声明和徽章不应设计成按钮样式。不可点击的元素应采用带图标的纯文本形式，避免使用填充圆角矩形误导用户。
- 强化优惠信息的可视性：若划线价格的粗细、颜色与周围文本无异，便会失去存在感。务必为折扣信息提供足够的对比度，确保用户一目了然。