一文搞定按钮｜产品经理基础技能必学-轻识

这是Kevin的第 859 篇原创，

持续日更，做产品经理的创业斜杠青年。

按钮，在互联网产品里在都被广泛地使用，但我们很少有时间来总结按钮背后的知识点。

其中按钮的设计细节、规范更少有产品经理知道了。如果要做一款app或web产品，那按钮要投入的重点是哪里？如果在大厂做产品，那按钮的细节规范又是什么？今天这一篇文章全部介绍了。

记得收藏@产品经理、产品设计师、运营

1.按钮的样式分类

利用好按钮的分类，是可以直接增加用户体验，减少用户焦虑的最快办法之一。

如下图，按钮主要分6大分类，因此好的产品经理是场景选出积累按钮做最合适的按钮设计组合。达到用户最佳的体验

▲ 按钮的设计分类

按钮也有多种样式，一个功能多项操作；多个功能并列操作；还有多个功能单选操作；

针对样式设计，产品经理只需要提前收集好按钮的原型组件，就可以快速绘制样式。针对自己每个功能下的页面具体需求来做按钮的摆放即可。

产品经理还需要注意按钮使用的场景，比如是app还是web上。在app上常用的带图标的矩形按钮，而图标则是在web上常用的。

2.按钮的状态

按钮的状态可以减少用户操作焦虑，告知用户当前系统状态；比如上面社区文章点击提交操作后，按钮不同的状态和多个样式组合，告知了用户当前发布状态。

在早期产品和用户量不高的情况下，这类同样要避免采用。浪费了UI和前端开发资源，通过下一个页面和系统固定的toast替换即可。

按钮的状态有6个，我整理放在下面。

普通状态：可交互和可用的状态。焦点状态：用户使用键盘或其他输入方法来突出显示一个元素。悬停状态：用户把光标置于可交互元素上的状态。触发状态：用户已点击按钮后的状态。加载状态：当操作没有立即实现时，表示正在进行的状态。禁用状态：按钮目前不可交互，但以后可以使用

在web端中通过增加悬停状态，可以增加用户的操作顺滑度；在app端增加焦点状态，可以减少用户的操作疑惑。

而上面的6类状态一般是组合式使用，不需要一次性6个状态全部用；比如产品从0到1，只需要保证普通状态即可；

3.按钮的位置

按钮的位置也直接会影响用户的点击率，在某些场景还会造成用户的误操作。比如在苹果按钮的保存和取消操作，保存在右。

▲ 苹果按钮

在 windows下，确定按钮是在左边

▲ windows操作

同时当页面存在多个按钮，按钮的位置也会影响首要和次要。设计这类按钮是，你要确保用户能够知道首要操作：

比如下面是某邮箱的界面操作

▲ 写邮件给出的编辑器按钮操作

4.按钮的交互操作

如今移动端屏幕带来的多样硬件支持，产品经理可以对按钮进行更多手势交互设计为用户提供更加细腻的草哦做，比如左右滑动；双击；长按去触发按钮背后的功能逻辑操作

我建议在产品生命周期早期或产品用户量不多的情况下，建议交互操作减少。第一减少用户的产品使用门槛；第二是减少产品开发难度；第三也是节约了产品研发时间。

按钮的一切产品设计核心为用户需求、产品转化靠齐。

▲ 多样的按钮手势操作

5.按钮的文案

按钮的文案可以直接的影响到用户点击情况，甚至还能吸引用户点击。

▲ 百度问答的点赞文案

比如在大多国产软件卸载时，都会冒出一脸哭丧状的拟人化吉祥物，来向你确认是否继续卸载，选择之一便是「残忍卸载」，这实际通过获取用户同理心减少卸载。

还有App Store下，针对付费app和免费app也有文案区别

App Store 购买按钮的标准格式（出现在每个 app 各自的页面里）是「¥XX.XX 购买应用软件」或「免费应用软件」，而在多个 app 并列的列表中采用简化版的「¥XX.XX 购买」或「免费」。

通过按钮文案把应用商店的app挂牌销售，就像在一个服装店商城一样，用户需要首先知价格，才能选择购买。商品价格便宜的自然销量就高了

6.按钮的大小

在 app上尤其要注意按钮的大小，过小用户不能操作、太呆则影响页面内容展示。这一部分只需要按照按钮的UI设计规范实行即可。在web端则会容易许多，因为鼠标是可以点击的，但要突出按钮的样式和分类，避免用户找不到按钮操作的地方

1.2种类型的按钮：「希望操作」「不希望操作」

通常，我们在产品中会为了达成某种指标，需要在界面上增加按钮引导用户去完成我们希望其完成的操作，我们称之为「希望操作」，这类「召唤行为」最常出现的，是在按钮设计的过程中。

▲ 在页面中增加按钮，引导用户操作

▲ 美团app提供用户快速绑定卡的按钮操作

有的按钮在设计之初是希望用户点击，并且是主动让用户点击；而有的只是希望业务、用户体验闭环而“被迫提供的”

▲ 用户解绑的弹窗提示

为了减少用户在美团app的银行卡解绑操作，增加了2个环节。分别是页面提示与弹窗提示。在按钮上对保持绑定增加了提示、文案引导；

颜色、文案、按钮的样式可以引起用户对操作的正向反馈和反面反馈，比如你看到很多产品在对你支付银行卡绑定、手机号绑定、权限开启，都会通过增强：“同意”的文案操作。

▲ 按钮的强提示

比如用户在美团的账户失效，app提示重新登录。「确定」按钮通过黄色、位置布局来增强用户的重新登录。

比如在美团上的新用户注册，用户需要同意《知情授权书》，按钮「默认同意」的按钮被增强了颜色，位置也放在了右边。

▲ 美团的确认按钮

产品希望用户的操作，就会强化「希望操作」行为的按钮，弱化「不希望操作」行为的按钮。

而这里的希望：是指对北极星指标的行为

不希望：降低了北极星指标的行为

在微信公众号里，也能见到这样的设计：

希望用户随时保存，增加保存操作。

我们总是希望用户持续操作下去，但也要给用户提供回退的行为，

7.按钮的设计样式

按钮的设计样式会分4种

凸起按钮
扁平按钮
边框按钮
文本按钮
图标按钮

如下图

▲ 按钮的设计样式

在点击率上，4个样式数据产品经理可以记住下面4个顺序

点击率顺序排列：凸起 > 扁平 > 边框 > 文本。

好的按钮设计：无需让用户思考，本能直接引导下一步操作。帮助用户简化一个思考点。

8.web与app的按钮设计区别

我们现在见到越来越多的 Web 端产品，也开始遵循 App 产品的设计，把「不希望操作」放在左边，「希望操作」按钮放在右边。

但在早期，Web 的「取消按钮」基本是放在右边，原因是眼睛的阅读浏览习惯总是从左到右、从上到下来进行扫描屏幕，我们的视线会首先与文案聚焦到「希望操作」的按钮上，也就是左边，这时候鼠标轻而易举地随之而来。

而手指行为的操作，会以右为前进导向，且右手手势因为便捷性，也会以右为确认操作。否则单手持机，且行进路径长的话，用户想进行确认操作会相对比较吃力。

▲ 移动端交互区域

这就是 Web 与 App 在按钮位置上的主要区别。

在web端你的按钮到底是放左边还是右边，还要基于产品背后的标准规范保持统一即可。不能2种都有，比如前面提到的WIN和MAC虽然是两种位置，但至少在自己的系统里保持了统一。

如果你看了这里想加入Kevin和他的产品朋友交流按钮，欢迎扫码加群（加入我的私域流量！！）

产品经理按钮交流群，7天有效（严禁广告！）

9.按钮的结束、开始两种状态

很多功能的入口是从一个按钮开始，比如PMTalk的提问、发文都是点击按钮开始；同样也有功能结束也是从一个按钮结束，比如发布、提交、确认、取消。

但按钮是可以嵌套搭配的，给予用户多次选择和点击，减少或增加转化率。比如前面提到的美团银行卡解绑，点击「解除绑定」后再提示弹窗。

▲ 按钮广告位的背后逻辑

比如上面的2个按钮，一个是功能入口一个是页面查询；虽然都是代表了页面跳转，但背后逻辑是不一样的。一个是用户登录注册，一个只是普通的页面浏览

什么是好的按钮设计？

每个按钮背后都嵌套页面路径和跳转逻辑，所以抛开设计、美学丑与美，好的按钮应该是转化率最高的；同时好的也是页面里按钮点击率也应该是最高的

不要过于把设计带入到按钮的工作中，反而专注在按钮的使用场景、按钮为用户提供的价值。

按钮设计是严格依附于产品生命周期的。在产品早期和用户量本身就不多的情况下，一定要从简、快、易3点考虑。

一个按钮背后都有这么多产品设计点还不是一个页面，甚至离一个功能十万八千里远，所以我希望这篇文章能够帮助产品经理在按钮上扫除知识盲点，但更重要的是减少按钮的设计成本，注重在重要的部分。

今天的分享就在这。

每天体验1款app知识星球

我创建了一个《每天体验1款app》知识星球，有超过20个行业嘉宾在圈子里。加入后365天，每天体验一款APP。提升产品设计能力，同时有1500份体验报告帮助你找到竞品。

平均1天1块钱，扫码购买即可加入

连续体验90款应用，通过后原路退回