立即登入 按钮这东西，在 App 和网页里几乎无处不在。点一下，就能完成关注、下单、提交、删除……可以说是界面里最直白、也最频繁用到的一种交互方式。用得好，用户几乎感觉不到它的存在；用得不好，轻则让人犹豫一下，重则直接把人劝退。这次就聊聊我平时对按钮的一些理解和处理习惯。
我理解的按钮，本质上就是一个可点击、能即时触发的操作媒介。它不需要多余的解释，用户看到就知道“这里可以点，点了就会发生点什么”。也正因为这种即时性，按钮的设计才需要多花些心思——视觉层级、状态反馈、尺寸、位置，每一处都直接关系到操作效率和体验。
按钮按类型来分，常见的有四种：主按钮、次按钮、虚线按钮和链接按钮。主按钮在同一个操作区域内，能少则少，一般只留给最核心的那个动作，比如“提交订单”“确认支付”。次按钮用来承载次要流程，像“取消”“返回”这类。虚线按钮和链接按钮就更轻量了，通常用在不会打断主流程的辅助操作上，比如“查看详情”“重新上传”。从承载形式看，有的按钮纯靠文字，有的靠图标，也有用几何图形的。实际项目中，我们更多把几何型按钮当成常规按钮来讨论，因为它的识别效率最高，也容易适配各种风格。
风格上，按钮有线型和面型之分，也可以是组合形式，比如图标加文字，或者一组按钮并排。但不管哪种风格，真正让按钮“活起来”的，还是它的状态变化。
按钮的状态通常有四种：常规、悬浮、点击和不可点击。常规状态下的主按钮，颜色要贴合产品调性，用品牌色或主色来强化识别。悬浮状态在 PC 端尤其重要，鼠标移上去得有反馈；点击瞬间也需要一种视觉上的按压感，让用户知道“已经点到了”。我自己的习惯是：hover 时在按钮层上覆盖一层 15% 透明度的白色，click 时则覆盖一层 15% 透明度的深色。这样既不会破坏原本的色彩，又能给出清晰的即时反馈。不可点击状态就直接置灰，同时最好配合一句文字提示，免得用户不知道为什么不给点。
从属性上再往下细分，按钮还可以对应四种常见场景，每一种都带有明确的使用意图。
危险操作，像删除、移动、修改权限这类动作，通常都需要二次确认。用红色来做警示，再配合弹窗提醒，能有效减少误操作。微信里删除表情包时那种“再问一次”的弹窗，就是这个逻辑。
幽灵按钮，常见于背景复杂、图片偏多的场景，比如首页大图、产品展示页。它用半透明或者仅保留边框的样式，既能看清按钮，又不会破坏背景画面的完整性。
禁用按钮，当某个操作暂时不可用时，除了置灰，最好用文案解释一下原因，比如“请先填写姓名”或者“库存不足”，别让用户一头雾水。
加载中按钮，是异步操作时非常重要的反馈。提交订单后，按钮变成“处理中…”并带一个小小的转圈动画，既能防止重复提交，也能给用户一个等待的预期，明显缓解焦虑。
说到按钮样式，尺寸和圆角这两个细节，对整体气质的影响特别大。移动端从指尖触控的习惯出发，10mm×10mm 已经是最小触控目标的尺寸了，iOS 人机交互规范里更建议 44pt×44pt 的最小点触面积。所以我会根据设备 PPI 来对应设定移动端按钮的高度，大致在 35px 到 50px 之间，字号 13pt 到 17pt，圆角 4 到 8，这样点起来舒服，看起来也好看。Web 端按钮高度通常在 24px 到 48px，字号 12 到 18，圆角 6 到 10，具体当然还要根据页面比例和场景去微调。其他终端也按这个思路等比适配就好。
圆角的大小，其实能帮按钮定下基调。小圆角甚至直角，往往显得严肃、专业、有力量感，很多奢侈品、健身、金融类产品就爱这么用。0 到 12 的圆角比较中性，适用范围广，社交类产品里很常见。全圆角则显得年轻、活泼、亲切，在儿童、娱乐、购物类 App 里出现得最多。至于更少见的多边形按钮，则带点个性、科技感或者文艺气息，偶尔用一下挺出彩的。
至于按钮的风格，那就更是五花八门了。线框的、渐变的、带阴影的 3D 效果、凸起按钮、长阴影、光晕、带图标的、按钮组、宽度随页面安全区变化的 block 按钮、环绕效果、表单内的按钮……每一种都能在合适的场景里发光。设计师要做的，就是从产品调性出发，挑一种最匹配的表达方式，而不是把所有花样都堆上去。
说到底，按钮虽然小，却是用户和产品之间最直接的对话点。把状态做清楚，把尺寸和圆角调舒服，把属性考虑周全，就已经能解决绝大多数问题了。以上是这次关于按钮的分享，来自作者“不”，公众号：猪三的日常生活。
