按钮配色对比 · 同一套悬浮凹凸感,四种橙
同一颗按钮(顶内高光 + 底内阴影 + 彩色浮影,fulingchen.me 式悬浮立体)分别套四种橙,看哪种最适合 Ember(奶油底 + 墨绿字 + 橙单强调)。每列含:默认/悬浮/按下三态、大数字、标签、进度线、白字对比度、奶油底达标小字色、色阶。
仅用于对比 · 不改线上后台界面(线上后台仍为金盏花橙)
默认
悬浮
按下
金盏花橙 当前线上
#FAA21C 本轮新做(当前线上后台按钮)
默认
悬浮
按下
大众点评橙
#FF6633 Brandfetch · CMYK 0/60/80/0 · 偏红暖橙(非美团黄)·置信中
默认
悬浮
按下
阿里橙
#FF6A00 BrandPalettes · Pantone 1585C · 1999至今 · 置信高
默认
悬浮
按下
三视角对抗评审结论
三个独立评审视角(Ember 高级感 / 可读性 WCAG / 品牌策略联想)各自打分 → 首席设计师合成。
综合推荐:维持品牌橙 #FD6F1D 作全站唯一强调基色。
阿里橙 #FF6A00 仅建议作「外贸出海」专属场景的备选强调色(出海客群对跨境电商巨头联想是正向的),不作全站基色。
大众点评橙 #FF6633 与金盏花橙 #FAA21C 均不推荐——尤其金盏花橙(当前线上后台在用)是四色里唯一可读性不达标的,应尽快换回品牌橙。
- ① 品牌橙 #FD6F1D 综合最优:Ember 高级感 + 品牌策略两票第一;卡在「红橙(点评)↔纯橙(淘宝)」之间无人撞车色位,与墨绿+奶油咬合最好。
- ② 阿里橙 #FF6A00 稳居中:纯橙干净自信、白字对比第二;但满 chroma 略发烫、电商巨头味重 → 适合出海场景备选。
- ③ 大众点评橙 #FF6633 白字物理对比最高,但 H≈15° 撞大众点评/美团色位,本地生活客群有「抄点评/引战」风险,偏红撞墨绿偏促销。
- ④ 金盏花橙 #FAA21C 三视角一致垫底:白字 2.05:1 发飘发糊,数字色被迫压成棕 #966111 丢失「橙=强调」语义。除「零迁移成本」外无优点。
| 候选 | 白字/底色 | 奶油底小字 | 一句话取舍 |
|---|
| 品牌橙 #FD6F1D | 2.81:1 | #B65015 · 4.73 | 独占无人撞车色位、最高级;白字裕度偏低需靠投影。 |
| 阿里橙 #FF6A00 | 2.87:1 | #B84C00 · 4.82 | 对出海有正向巨头光环;大面积略发烫、电商味重。 |
| 大众点评橙 #FF6633 | 2.92:1 | #B84925 · 4.88 | 白字对比最高、最跳;撞美团/点评、廉价促销风险高。 |
| 金盏花橙 #FAA21C | 2.05:1 | #966111 · 4.89 | 仅零迁移成本;白字发糊、数字变棕,三视角垫底。 |