按钮样式需要结合当前页面任务判断。按钮是UI界面中最常见的交互元素之一，优秀的按钮设计可以帮助用户快速选择出与他们目标相符的决定，而混乱的按钮会让用户无从选择，增加选择和操作的负担。那如何才能设计出优秀的按钮呢？下面从状态、文案、外观与反馈十个细节展开。
把这些细节放入UI控件设计与状态管理流程时，先统一同一操作的名称和主次层级，再整理默认、焦点、禁用与处理中的版本。
1. 常见按钮设计状态
按钮是一个交互式元素，可以根据特定命令从系统获得预期的交互式反馈。例如：发送邮件、购买商品、下载数据、订阅信息等等操作。常见状态包括默认、悬停、按下、键盘焦点、禁用和处理中。不同状态有不同职责，不能用悬停态替代键盘焦点。
2. 十个按钮设计技巧
样式简单
按钮设计的技巧首先要做到简简单单、一目了然。以Pixso社区的搜索和关注按钮设计为例，当用户浏览到页面时，很快知道什么是可点击的，用户思考时间越久，点击按钮的可能性就越低。设计师不要尝试太另类的设计形式，只需要细微的设计感即可，例如下面案例中的按钮，按钮框+文字，图标可以选择性添加，颜色好看造型规整，稍微加点圆角和投影等简单的样式。
提供充足的对比
按钮需要一定的识别性，不可以和背景混为一谈，要保证按钮可以轻松的被辨认出来。这就需要提高按钮和背景的对比度，可以用提高明度对比度和色相对比度两种方式。
-
在Pixso的编辑器，调整明度对比，拉开按钮和背景的明度来区分两者；
-
调整色相对比，使用互补色（黄蓝、红绿等）来区分两者。
下面案例分别使用了这两种方式对按钮进行了区分。
按钮颜色明确
鲜艳的颜色可以让用户一眼就看到按钮，所以许多按钮设计会使用较为鲜艳的颜色。丰富的颜色也是一种非常流行的设计技巧。从明亮的颜色到带有简单渐变的按钮，颜色让交互体验更加简单。需要注意的是按钮颜色需要结合整体页面风格设计，不可过于花哨。例如下图案例中的按钮，以大色块为主。
按钮文案
按钮文案优先说明动作，例如“保存设置”“继续编辑”“删除文件”。取消、退出或拒绝应使用中性、清楚的文字，不用“残忍拒绝”等情绪施压的措辞。用户应能根据后果作出选择，而不是先猜哪个按钮才代表自己的意图。
适当的动画效果
可以通过给按钮添加轻微动画效果，例如摇晃、旋转、变色等简单形式的动画。动画用于表达按下、处理中或状态变化即可，不需要持续晃动来抢注意。尊重系统减弱动效偏好，并避免让关键信息只在短暂动画里出现。
按钮大小合适
按钮设计技巧除了便于用户点击外，还是层级的表现。大按钮一般意味着更重要的操作，优先级也更高。移动端的按钮设计技巧，要充分考虑用户手指的大小，让大部分用户可以顺利点击按钮，避免出现按钮过小无法点击的情况。
按钮的可点击区域可以大于视觉图形，但不应与相邻控件重叠。尺寸应结合平台规范、使用距离和相邻间隔检验，不能用一组手指尺寸推导所有屏幕的固定最小值。
使用熟悉的风格
按钮设计尽量使用通用的按钮样式，比如矩形、圆角矩形、圆形等等，如果使用难以识别的图形会让用户无法辨识按钮，降低用户体验。例如下图，同样的按钮样式，右边的图形从视觉上就不像按钮，会给用户带来很大的困惑，“到底能不能点？”
按钮位置合理
按钮应该放在用户容易发现的地方，不能让用户满屏幕地找按钮。按钮周边尽量保证充足的留白，与内容信息相隔一定距离，同类型按钮尽量放在一起，方便用户点击，具体位置应跟随阅读与操作顺序，不按页面类型统一放在某个角落。
加入点击反馈效果
按钮分为默认、点击、禁用等几种状态，在按钮被点击时需要设计点击反馈效果，一般为变色、放大、位移等简单的效果，也可以适当加入音效，让用户明确点击已被接收；按下反馈不等于业务已经成功。为什么会这样说？这与人们的习惯有关，人们在与某物交流互动的时候总期望获得反馈，不论是视觉还是听觉，反馈应先说明点击已被接收，再根据处理结果确认业务是否成功。
有意使用按钮
按钮其实就是选择，按钮数量过多不会让用户觉得友好和尊重，反而让用户觉得画面混乱和选择困难。比如下图的登录页面，一共有5个按钮，分别是：登录、忘记密码、两种登录方式、创建账号。但是除了登录按钮外，其他的都是不常用按钮。设计的时候可以弱化不常用按钮，将常用按钮放大、变色，让用户感觉页面上似乎只有一个他们需要的按钮。
设计师在设计按钮时，带有一定的引导性，上面十条按钮设计小技巧就是解决这个问题，让大家都可以设计出清晰易识别的按钮。Pixso是一款专业的在线设计工具，社区资源中有大量优秀设计按钮的案例，可按资源详情查看不同按钮的预览和使用条件，非常适合UI/UX设计师在线使用。
保存设置与取消：先明确哪一步产生更改
假设用户正在修改通知偏好。主按钮写“保存设置”，次按钮写“取消”；取消保留原设置，保存成功后再反馈“设置已保存”。当网络仍在处理时，按钮可以显示“保存中”，并避免重复提交；失败则恢复可操作状态，保留用户已填内容，说明如何重试。
主次层级不等于让次动作难以使用。用户有权取消修改，取消按钮仍需要可辨认、可聚焦。禁用保存时，应让用户知道是内容未改变、必填信息缺失，还是权限不足；只有一颗灰色按钮通常无法表达原因。
图形大小、触区和焦点环分别检查
同一按钮在鼠标悬停、键盘聚焦和触屏按下时可能需要不同反馈。焦点环不能被相邻容器裁掉，按钮文字也不能因为加载图标出现就左右跳动。对图标按钮，要检查可访问名称和图形含义是否一致。
WCAG 2.2目标尺寸说明给出了24×24 CSS像素及间距等例外条件；这是网页可访问性要求的一部分，不是所有产品都应把按钮做成最小尺寸的建议。核心动作仍应按实际触控场景提供足够面积，并在手机和键盘路径中检查。
颜色对比也要区分文字与背景、控件与周围区域。两种鲜艳颜色未必有足够明暗差异；前文的样式可作为视觉方向，实际方案还需测量对比度。按钮点击之后的异步反馈可以接着参考加载、成功、失败与重试的按钮反馈。
