Button 按钮
按钮就是界面对用户说:“点这里会做一件事。”它不是装饰,也不是所有可点击元素,而是承接提交、保存、购买、删除、继续这类明确动作。
关键结构图
一个按钮分成三层标注:文字动作、视觉层级、状态反馈,箭头指向系统结果。
What
Button 是界面里触发明确动作的控件,它把用户意图转成系统动作。
Button 按钮是界面中用于触发明确动作的控件。它需要说明动作是什么、动作有多重要、触发后会发生什么,并在默认、悬停、聚焦、禁用、加载等状态下给出反馈。它和普通链接的边界在于:按钮通常改变系统状态或提交用户意图,链接主要带用户去另一个位置。
StructureButton = 动作名称 + 状态反馈 + 触发后的系统结果
When
当用户需要提交、确认、继续、删除、保存、创建或购买时,使用按钮。若只是导航到另一个页面,优先考虑链接。
How
先写动作词,再定义按钮层级:主按钮承接当前页面最重要的动作,次按钮承接辅助动作,危险按钮承接高风险动作。每个按钮都要有可见状态和可访问名称。
Examples
报名表底部的 提交报名 是按钮,因为它会把用户输入交给系统处理。了解课程详情 更像链接,因为它主要是导航。
删除项目时,危险按钮应该清楚写出 删除项目,并配合确认流程,不能只写一个模糊的 确定。
来源
类型:设计系统实践 / 可访问性规范
事实线:USWDS 把 button 用于站点里的重要行动,并强调按钮文案应使用清楚动作词;Material Design 和 Apple HIG 都把按钮作为明确动作控件处理。
依据:USWDS Button guidance、Material Design buttons、Apple Human Interface Guidelines buttons。
边界:跳转到另一个页面通常更接近 link;提交、保存、确认、购买、删除等动作更接近 button。
常见误读:不要只用颜色区分按钮含义。按钮还需要文字、状态、层级和可访问名称共同表达。