很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
按钮，在互联网产品里在都被广泛地使用，但我们很少有时间来总结按钮背后的知识点。
其中按钮的设计细节、规范更少有产品经理知道了。如果要做一款app或web产品，那按钮要投入的重点是哪里？如果在大厂做产品，那按钮的细节规范又是什么？今天这一篇文章全部介绍了。
记得收藏@产品经理、产品设计师、运营
利用好按钮的分类，是可以直接增加用户体验，减少用户焦虑的最快办法之一。
如下图，按钮主要分6大分类，因此好的产品经理是场景选出积累按钮做最合适的按钮设计组合。达到用户最佳的体验
▲ 按钮的设计分类
按钮也有多种样式，一个功能多项操作；多个功能并列操作；还有多个功能单选操作；
针对样式设计，产品经理只需要提前收集好按钮的原型组件，就可以快速绘制样式。针对自己每个功能下的页面具体需求来做按钮的摆放即可。
产品经理还需要注意按钮使用的场景，比如是app还是web上。在app上常用的带图标的矩形按钮，而图标则是在web上常用的。
按钮的状态可以减少用户操作焦虑，告知用户当前系统状态；比如上面社区文章点击提交操作后，按钮不同的状态和多个样式组合，告知了用户当前发布状态。
在早期产品和用户量不高的情况下，这类同样要避免采用。浪费了UI和前端开发资源，通过下一个页面和系统固定的toast替换即可。
按钮的状态有6个，我整理放在下面。
普通状态：可交互和可用的状态。焦点状态：用户使用键盘或其他输入方法来突出显示一个元素。悬停状态：用户把光标置于可交互元素上的状态。触发状态：用户已点击按钮后的状态。加载状态：当操作没有立即实现时，表示正在进行的状态。禁用状态：按钮目前不可交互，但以后可以使用
在web端中通过增加悬停状态，可以增加用户的操作顺滑度；在app端增加焦点状态，可以减少用户的操作疑惑。
而上面的6类状态一般是组合式使用，不需要一次性6个状态全部用；比如产品从0到1，只需要保证普通状态即可；
按钮的位置也直接会影响用户的点击率，在某些场景还会造成用户的误操作。比如在苹果按钮的保存和取消操作，保存在右。
▲ 苹果按钮
在 windows下，确定按钮是在左边
▲ windows操作
同时当页面存在多个按钮，按钮的位置也会影响首要和次要。设计这类按钮是，你要确保用户能够知道首要操作：
比如 下面是某邮箱的界面操作
▲ 写邮件给出的编辑器按钮操作
如今移动端屏幕带来的多样硬件支持，产品经理可以对按钮进行更多手势交互设计为用户提供更加细腻的草哦做，比如左右滑动；双击；长按去触发按钮背后的功能逻辑操作
我建议在产品生命周期早期或产品用户量不多的情况下，建议交互操作减少。第一减少用户的产品使用门槛；第二是减少产品开发难度；第三也是节约了产品研发时间。
按钮的一切产品设计核心为用户需求、产品转化靠齐。
▲ 多样的按钮手势操作
按钮的文案可以直接的影响到用户点击情况，甚至还能吸引用户点击。
▲ 百度问答的点赞文案
比如在大多国产软件卸载时，都会冒出一脸哭丧状的拟人化吉祥物，来向你确认是否继续卸载，选择之一便是「残忍卸载」，这实际通过获取用户同理心减少卸载。
还有App Store下，针对付费app和免费app也有文案区别
App Store 购买按钮的标准格式（出现在每个 app 各自的页面里）是「¥XX.XX 购买应用软件」或「免费应用软件」，而在多个 app 并列的列表中采用简化版的「¥XX.XX 购买」或「免费」。
通过按钮文案把应用商店的app挂牌销售，就像在一个服装店商城一样，用户需要首先知价格，才能选择购买。商品价格便宜的自然销量就高了
在 app上尤其要注意按钮的大小，过小用户不能操作、太呆则影响页面内容展示。这一部分只需要按照按钮的UI设计规范实行即可。在web端则会容易许多，因为鼠标是可以点击的，但要突出按钮的样式和分类，避免用户找不到按钮操作的地方
通常，我们在产品中会为了达成某种指标，需要在界面上增加按钮引导用户去完成我们希望其完成的操作，我们称之为「希望操作」，这类「召唤行为」最常出现的，是在按钮设计的过程中。
▲ 在页面中增加按钮，引导用户操作
▲ 美团app提供用户快速绑定卡的按钮操作
有的按钮在设计之初是希望用户点击，并且是主动让用户点击；而有的只是希望业务、用户体验闭环而“被迫提供的”
▲ 用户解绑的弹窗提示
为了减少用户在美团app的银行卡解绑操作，增加了2个环节。分别是页面提示与弹窗提示。在按钮上对保持绑定增加了提示、文案引导；
颜色、文案、按钮的样式可以引起用户对操作的正向反馈和反面反馈，比如你看到很多产品在对你支付银行卡绑定、手机号绑定、权限开启，都会通过增强：“同意”的文案操作。
▲ 按钮的强提示
比如用户在美团的账户失效，app提示重新登录。「确定」按钮通过黄色、位置布局来增强用户的重新登录。
比如在美团上的新用户注册，用户需要同意《知情授权书》，按钮「默认同意」的按钮被增强了颜色，位置也放在了右边。
▲ 美团的确认按钮
产品希望用户的操作，就会强化「希望操作」行为的按钮，弱化「不希望操作」行为的按钮。
而这里的希望：是指对北极星指标的行为
不希望：降低了北极星指标的行为
在微信公众号里，也能见到这样的设计：
希望用户随时保存，增加保存操作。
我们总是希望用户持续操作下去，但也要给用户提供回退的行为，
按钮的设计样式会分4种
凸起按钮
扁平按钮
边框按钮
文本按钮
图标按钮
如下图
▲ 按钮的设计样式
在点击率上，4个样式数据产品经理可以记住下面4个顺序
点击率顺序排列：凸起 > 扁平 > 边框 > 文本。
好的按钮设计：无需让用户思考，本能直接引导下一步操作。帮助用户简化一个思考点。
我们现在见到越来越多的 Web 端产品，也开始遵循 App 产品的设计，把「不希望操作」放在左边，「希望操作」按钮放在右边。
但在早期，Web 的「取消按钮」基本是放在右边，原因是眼睛的阅读浏览习惯总是从左到右、从上到下来进行扫描屏幕，我们的视线会首先与文案聚焦到「希望操作」的按钮上，也就是左边，这时候鼠标轻而易举地随之而来。
而手指行为的操作，会以右为前进导向，且右手手势因为便捷性，也会以右为确认操作。否则单手持机，且行进路径长的话，用户想进行确认操作会相对比较吃力。
▲ 移动端交互区域
这就是 Web 与 App 在按钮位置上的主要区别。
在web端你的按钮到底是放左边还是右边，还要基于产品背后的标准规范保持统一即可。不能2种都有，比如前面提到的WIN和MAC虽然是两种位置，但至少在自己的系统里保持了统一。
很多功能的入口是从一个按钮开始，比如PMTalk的提问、发文都是点击按钮开始；同样也有功能结束也是从一个按钮结束，比如发布、提交、确认、取消。
但按钮是可以嵌套搭配的，给予用户多次选择和点击，减少或增加转化率。比如前面提到的美团银行卡解绑，点击「解除绑定」后再提示弹窗。
▲ 按钮广告位的背后逻辑
比如上面的2个按钮，一个是功能入口一个是页面查询；虽然都是代表了页面跳转，但背后逻辑是不一样的。一个是用户登录注册，一个只是普通的页面浏览
什么是好的按钮设计？
每个按钮背后都嵌套页面路径和跳转逻辑，所以抛开设计、美学丑与美，好的按钮应该是转化率最高的；同时好的也是页面里按钮点击率也应该是最高的
不要过于把设计带入到按钮的工作中，反而专注在按钮的使用场景、按钮为用户提供的价值。
按钮设计是严格依附于产品生命周期的。在产品早期和用户量本身就不多的情况下，一定要从简、快、易3点考虑。
一个按钮背后都有这么多产品设计点还不是一个页面，甚至离一个功能十万八千里远，所以我希望这篇文章能够帮助产品经理在按钮上扫除知识盲点，但更重要的是减少按钮的设计成本，注重在重要的部分。
今天的分享就在这。
-END-
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
Powered by QINGMOB PTE. LTD. © 2010-2022 上海青墨信息科技有限公司 沪ICP备2021034055号-6
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)