如何设计行动按钮？用超多案例帮你完整掌握！

前言

“行按钮”作为连接户与产的交互触点，在产设计中扮演了至重要的角色，一个优秀的按钮控件可有效的升交互体验，引导户，升产转率。本是我在设计环节遇到问题并寻求解决方案过程中总结沉淀来的几点小结，希望为设计师伙伴们供一些启发或帮助。

背景

需求源于一款产意在升桌面图标的生成率，务侧希望在户退该产时弹的形式引导户创建图标。针对该需求，在弹行按钮的优先级表达、行退操作布设计中产生了疑惑，要体现在4个方案中，页面示意如：

现问题

• 按钮的优先该如何表达？
• 行进、退该何放置？
• 务侧与户侧该如何权衡？

问题聚焦

• 行动按钮的优先表达规范
• 行动按钮的召唤行为分析
• 行按钮的本源分析

Part 1. 行动按钮的优先级表达规范

通过对 Material Design、简书、IXDC、MicroUX及计相关文献的查阅归纳，对中行动按钮的规范、经验总结提炼如下：

按钮的优先表达可划为三个层

备高度调作用的“填充（包含）按钮”、中度调的“轮廓（概述）按钮”、低度调的“文本按钮”。

正确表

单个突出按钮：布局应含个突出按钮，以使其他按钮在层结构要性降低。此高强调按钮吸引了最多关注。

多个按钮：个应用可以在（模态弹窗/底部栏）布局显示多个按钮，此高强调按钮可以与执要功能强调按钮和低强调按钮配合使用。

可以在填充的按钮（高调度）边放置一个轮廓按钮（中等调）。

可以在轮廓按钮（中等调）边放置一个文本按钮（低调）。

使用多个按钮，指示更重要的操作，请将其放置在填充的按钮中。

文本按钮通常嵌入在包含的组件（如卡片和对话框）中，以使其身出现它的组件相关。

文本按钮间可以通过颜色，粗细进行优先。

尽避免

避免同时并列使用两填充按钮（高优先级按钮）。

Part 2. 弹窗中行动按钮的召唤行为分析

户惯性认知：左后退，右行进

论据说明：

头部平台情况

• iOS移动、电脑设备绝大所述情况下进按钮都在右侧，后撤在左侧；
• 早些候，winAndroid都为左前进，右后撤。而Android在4.0版本发布后也将按钮调换为了“左后退，右行进”，顺应了计的大趋势。

A/B test数据结论。

早 2004 ，就 Walker  Stanley 的两人针对这问题了对比研究实验，实验选取测试者对程序行操作，行两轮测试并分别按钮置与问题了调换；

实验结果：在第一次实验中，A、B两实验组行进与后退的正确率相差无几，未达到（统计中）“有感”；第二次实验（A、B组调换位置，并问相反的问题），A组变大，B组错误率倍。（资来源：《体验进阶》）

结论：该实验告诉我们一个道，即要轻易违背户习惯。为了效率，人们通只会在第一次接触事物时，启大脑，之后大分情况都处于“无意识状态”。

行情况

PC端。源于眼视觉轨迹：自左向右的浏览习惯，因此行按钮一般为：左行进，右后退。

△ PC端（win系统）：左行进，右后退

移动端

• 于大多数右利手户单手持机操作；
• 符合古腾堡法则：左角视觉的第一落点区，右下角视觉终落点区，右侧行可避免阅读视线顺序造无意识的回跳。

△ 移动端：左退，右行进

按钮的召唤行为

通常，我们在产品中为达成某种指标，需要在界面上引导用户去完成我们希望其完成的操。且类操是以达成某种目的的，我们把类操称为「召唤行为」，该按钮成为召唤按钮，又称CTA（Call To Action），即从元素的角度引导用户完成任务，提升产品转化率。

△ 召唤行为：取消

△ 召唤行为：取消

△ 召唤行为：继续选座

△ 召唤行为：继续选座（换位置虽能暂时决用户的退出行为，但容易产生误操，与用户的期望不同，导致在产品验上被用户排斥）

在模态弹，还需要配合同弹类的标题案/说明案意向及使场景，来进行召唤按钮的设计，举例示意如。

小结：在移端产行按钮设计中，一般回退操在左，行进操在右，召唤属根据场、弹窗标题等对按钮做突出处理。

Part 3. 模态弹窗下按钮的召唤行为优先级程度评估

以上是站在用户验角度对按钮设计的分析，么，在际的方案设计到落地程中，我们不仅要满用户验，同时也要站在业务方的角度看待问题，综合评估业务价值与用户验，最终权衡两者得到的最优方案。么何评估召唤行为的强弱以及权衡业务价值与用户验关系呢，小编有以下几点建议。

依据产品业务质

依据产品生命周期

归纳&总结

• 「召唤按钮优先级表达」：包含的按钮>概括按钮>本按钮（本颜色、粗）。
• 「行动按钮置循序」：左回退，右行，核建立并遵循用户惯性认知，不随意打破。
• 「召唤为内核」召唤为不是用户想做事，而是我们应该要让用户做事，不是强迫。
• 「召唤行为优先程度评估」：需要结需求的触发景，所的产品业性质，确定所的产品生命周期。

欢迎关注作者微信公众号：「VMIC UED」