为什么很多大厂主按钮不用主题色？原来还有这5个设计方法！

我发现很多人设计主按钮，只会用主题色。而很多大厂设计的主按钮，并不统一用主题色。

注意，这里讲的不是作为陪衬的次按钮，而是一个页面上最显眼的主按钮 CTA (Call to Action) 按钮。

除了主题色之外，主按钮还可以用哪些颜色呢？以下就给大家一些常见的案例。

更多设计干货：

一、背景对比色

例如闲鱼的主题色是黄色，搜索按钮却是黑色：

YouTube 里几乎很少见到红色按钮，大多是黑色：

但是 YouTube 的黑底广告卡片上，又用了白色的主按钮：

Spotify 的主题色是绿色，但很多主按钮都是白色：

这些按钮的颜色虽然有黑有白，但共同点都是，跟背景色是反过来的——黑色背景上放白色按钮，白色背景上放黑色按钮。

为什么他们不用主题色？

主要是因为页面上有太多图片/视频，已经很多颜色了。按钮即便用高纯度的主题色，也未必足够醒目。反而用跟背景截然相反的黑色/白色，会更显眼。

美国的电商平台 Etsy 做过一个 A/B 测试，对比商品详情的“加入购物车”按钮用黄色和黑色，看有什么分别：

结果最后选择了黑色的方案。虽然不知道具体数据差异，但他们在对比后进行了选择，说明数据已经证明黑色主按钮的效果更好。

二、背景相似色

酷狗的短视频广告，“看全集”的按钮是半透明的：

喜马拉雅播放页的按钮，背景色几乎都是半透明的：

闲鱼的帮助与客服页，底部主按钮是浅灰色的：

Revolut 金融 App，按钮也都是半透明的：

这些按钮之所以不用主题色，与用「背景对比色」的第一个原因类似：背景已经很鲜艳，叠加主题色未必显眼。

尤其是在视频或彩色背景上叠的按钮，要适应各种色彩的背景。

那为什么不用更鲜艳的「背景对比色」？主要是因为这个按钮虽然是主按钮，但并不需要过于显眼，所以用半透明或浅灰色。

例如下图的未成年模式，虽然大部分人都会点“不再提醒”，但如果把这个按钮做得太显眼，可能让真的需要未成年模式的人也不小心点中“不再提醒”。

三、环境色

美图秀秀整个首页的按钮，都会跟随广告 banner 变色：

YouTube 有些广告卡片的按钮，会跟随内容变色：

要让按钮随着环境而变色，是有一定技术含量的，所以相关的案例就没那么多了。

之所以要这么麻烦，主要还是为了视觉效果更加和谐。

四、模块色

国内 app 不论主题色如何，会员大概率是金色。所以与会员相关的按钮，也都会用这个颜色。例如主题色为蓝色的酷狗、微信读书和携程：

国内 app 营销相关的信息，都喜欢用橙红色。所以优惠券相关按钮，很多都是这类颜色。例如主题色为黄色的闲鱼、主题色为绿色的 QQ 音乐和主题色为蓝色的饿了么：

有些产品内部会用颜色划分功能模块。例如猎聘 app 选择身份时，求职者为橙色，招聘方为蓝色：

之所以这么设计，显而易见是为了让用户通过颜色来快速理解。尤其对于老用户来说，只需瞥一眼，都不用看清文字，就能猜到按钮的作用。

五、状态色

几乎所有手机的来电显示，都用红色代表拒绝，用绿色代表接听：

淘宝直播间的商品列表，橙色按钮代表现在就可以抢，蓝色按钮代表还不能抢，但是可以预约：

很多负面操作（如删除）的按钮会用红色：

这样的设计，是为了避免用户点错。

总结一下

今天给大家分析了 5 种非主题色的主按钮，包括背景对比色、背景相似色、环境色、模块色和状态色。

主按钮不用主题色的主要原因包括：

1. 界面色彩太多，主题色不够醒目
2. 环境色彩多变，主题色不够和谐
3. 主按钮无需过于醒目
4. 通过色彩差异，帮用户快速理解按钮用途
5. 通过色彩差异，避免用户点错按钮

总而言之，遇到以下几种情况时，你可以考虑不用主题色来设计按钮：

1. 周围的色彩过于鲜艳丰富
2. 需要用户能快速理解
3. 按钮无需太显眼

你也设计过非主题色的主按钮吗？遇到过哪些纠结的地方吗？欢迎留言探讨～

欢迎关注作者的微信公众号：「体验进阶」