UI按钮怎么设计？识别、状态与操作层级

UI 按钮设计先保证“看得出能点、看得懂会发生什么”，再区分主要和次要动作，并补齐默认、悬停、按下、禁用、加载和失败状态。把这些状态做成同一组可复用组件时，可在界面设计软件中统一检查。

按钮承载明确动作，例如保存、提交或继续。视觉样式负责让人发现它，文案解释动作结果，状态反馈让人知道系统是否接受了操作；这三项需要一起设计。

免费按钮设计素材

1. UI按钮设计的可识别性

UI按钮作为一个交互元素，如果不易识别，用户就无法按照预期进行交互，这个UI按钮设计就是失败的。如何让用户一眼就看出这玩意儿是个按钮？很简单，在可点击元素上使用合适的视觉样式，提醒人们该元素是可点击的即可。

UI按钮设计的可识别性与颜色、形状、字体、大小、阴影和留白等视觉属性息息相关。最常见也最基础的UI按钮设计方法就是用一个矩形边框（形状）将按钮文本（字体）包围起来，在这基础上，设计师结合界面整体风格调整边框、文字颜色、阴影和留白，最后再结合用户浏览习惯和界面排版布局，调整按钮的大小和位置。

设计提示：分别标注按钮的可见尺寸与可点击区域，并按目标平台的触控要求检查。小图标可以拥有更大的点击区域，但相邻区域不能互相干扰；圆角形状本身不能保证按钮更容易被注意。

2. UI按钮设计的可交互性

点击按钮后，界面应反馈操作是否已受理，以及接下来会发生什么，UI按钮设计必须有反馈，不然用户不知道交互是否成功，用户总是期待得到反馈的，当用户摸不着头脑时，就会失去耐心而离开网站或应用程序。尤其是在外卖或电商等需要用户支付的网站/应用程序中，当用户在走完一个流程的时候，应说明当前正在处理什么；能够可靠估计时再提供等待时间，让用户知道如何继续，让用户对自己的操作有心理预期，增加安全感。

设计提示：UI按钮除了有默认按钮，还会有悬停状态／点击状态／禁用状态等多种交互形式。设计师在设计按钮时，需要兼顾按钮设计的所有状态，由于不同状态间的按钮通常只有细微的差别，如果一个个重新做，会耗费很多时间，而且当基本状态调整时，很难做到所有状态同步更新。

在 Pixso 中组织按钮组件时，把名称、尺寸、文案和状态规则一起整理，方便在页面中复用。主组件与实例的基础操作可参阅组件创建与复用方法；具体项目还需明确哪些属性允许单独修改，避免同名按钮出现不同交互。 需要逐步练习时，可继续阅读组件和样式创建指南。

紫色按钮组件集

3. UI按钮设计的引导性

合理的UI按钮设计，要具备良好的引导性，使用户能正确明白按钮的操作功能。当界面出现多个按钮时，按钮不仅需要与页面上的其他元素区分开来，还需要彼此区分，让主要按钮更加突出。

如下图 Pixso资源社区 的 服装电商类APP 所示，在登录页面，【登录】按钮和【注册】按钮使用不同的颜色，形成较强的对比度，引导用户进行登录。而在商品详情页【立即购买】按钮的尺寸明显比【加入购物车】按钮设计要大，更能吸引用户注意力，引导用户消费，除此之外，较为次要的【购物车】和【收藏】按钮则仅以图标显示，置于右上角。

按钮状态与交付检查

例如删除项目时，“删除项目”比“确定”更能解释后果；普通表单提交中，可把按钮文案改为“正在提交”并防止重复触发。若提交失败，失败原因应出现在相关内容附近，按钮恢复为可重试状态，不能只变红后让用户猜测。

按钮文案使用动作动词，主要动作在颜色、位置或尺寸上突出，次要动作保持可发现但不抢焦点。默认、悬停、按下、禁用、加载和失败状态要说明触发条件；命中区域、键盘焦点和高对比度模式也要纳入验收，不能只用颜色表达结果。

在 Pixso 中把按钮状态建成组件变体，修改主组件后同步检查实例；评审时用具体动作替代含糊的“确定”占位，并按语境保留清楚的取消入口，研发可直接对照状态和触发条件。

推荐使用专业的UI设计软件Pixso

可以先从一个真实表单开始练习：写清提交按钮的动作，画出默认、填写不完整、提交中与失败状态，再邀请同事只看页面完成任务。需要动手整理时，打开Pixso 工作台，把状态和触发条件放在同一文件中。