一、定义

按钮是一个通过单击来触发行为的组件，是最常使用的组件之一。

二、按钮种类

1. 文字按钮

视觉上最弱的按钮，是最次级的行动点。

可用于需大面积展示按钮场景button是什么意思，例如表格组件中的操作列。

文字式控件的高度低于轮廓式控件与填充式控件，在相同尺寸的显示区域里，选用文字式控件可以展示更多条目，这种方式增强了用户的查阅效能。

如下图所示：

文字按钮在外观上与链接几乎没有区别，然而链接的主要功能是实现页面间的跳转。

2. 轮廓按钮

常规按钮，用于非主要动作。

常常出现在主要按钮旁边，作为次要行动点。

在具有丰富背景的图像或影片中，为了降低干扰并维持适当的视觉效果，常常会采用带边框的按钮设计。

3. 填充按钮

填充选项是核心选项，外观极为突出，经常用于突出某个关键步骤。

常常使用在“完成”、“确定”类操作上。

一个按钮区域中，主按钮的数量不宜过多，否则用户难以迅速识别，主按钮的作用也就无法体现。

4. 图标按钮

图标提供视觉线索，避免逐字阅读按钮文案，更高效地使用界面。

需要在较小的空间内展示尽量多的按钮。

使用纯图标按钮必须有 提示按钮含义。

按钮有强弱的分别。

填充按钮＞轮廓按钮＞文字按钮。

图标按钮往往出现在工具类的产品中，呈现 group的形式。

确定按钮的样式时，通常依据单页面的视觉设计，突出重点时采用带填充的按钮，而仅在次要情况下才会选用纯文字的按钮。

但是也有特殊的用法。

在此机制中button是什么意思，各环节的视觉布局大致相同，某个控件在何种版式下呈现何种形态，须依据最为繁复的情形来确定。以映兔联盟管理平台为例，待评估单元里的"沟通"键，若依照先前设定的图形规范，理应采用带填充的图形样式

要是那些经过检测的卡片里，标注为轮廓形按键的“发表意见”选项，并且这些卡片遵循同一个操作步骤，那么性质相同的按键就必须统一样式。

当两个选项同时呈现，并暗示需要做出选择时，若需提供方向性提示，可以突出显示其中一个，同时降低另一个选项的视觉关注度，以下展示的是Mate的示例。

rial 中的案例

三、按钮大小1. 按钮宽度

（1）由文字宽度决定

通常情况下，按钮的尺寸会根据文字的尺寸进行调整，不会采用固定的数值，这种做法能够使按钮的宽度更加灵活。

（2）由容器决定

左下方图片中，发布视频按钮的宽度受左侧导航栏影响，该导航栏不会随浏览器窗口尺寸调整而改变，因此发布视频按钮的尺寸也保持固定。

下图所示，所谓马上联络的按键大小，须依据那位博主挑选模块，而且会依据浏览器窗口尺寸。

那么什么时候由文字宽度决定，由容器决定呢？

当单个填充式按钮或带边框的按钮所占据的空间，小于“三个栏目与两个插槽总宽度”的情况下，应优先考虑让容器本身来决定其尺寸。

2. 按钮高度

实际项目实施时，各个具体情境下应用的按钮长度存在差异。标准按钮分为巨型、中型、微型三种规格，其长度分别设定为40像素、32像素和24像素。

B端后台通常倾向于采用中等高度的按钮设计，由于大尺寸按钮显得过于高大，会显著增加屏幕的占用比例。

四、按钮状态

按钮一共有6种状态普通、悬浮、点击、激活、不可用、加载中。

1. 禁用状态

按钮呈现不可点击状态，表明它一旦符合特定要求便能获得交互能力，使我们清晰地知道其存在，未来具备可执行性。只是目前无法操作，但若明确告知用户后续流程，就能让该按钮发挥作用。例如某些促销活动界面，会显示距离活动启动剩余xx小时xx分xx秒。

说明无法操作的理由。有时候，用户先前能够点击按钮，后来却无法使用了。例如，由于链接邀请设有时间期限，一旦超出期限就会变为无效状态。用户或许会困惑于为何无法发送邀请，若在禁用状态时提供额外说明，就能阐明缘由。

2. 激活状态

处于启用形态的按键并不常见，由于多数人倾向于运用鼠标操作。当进行信息登记时，若需操作某个按键，通常让鼠标光标停留在目标位置再执行点选动作，因而无法观察到其被激活时的样子。

运用键盘上的箭头键和竖线键同样能够控制各个界面元素，完成相应功能。举例来说，要触发星图界面的“取消”选项，只需通过回车键，该按钮便会切换至被按下的状态。

五、按钮位置1. 按钮在外部空间的位置

各种界面或信息集合都可以围绕一个中心思想展开，这个中心思想的说明能够概括为三个方面，

2. 按钮内部的顺序

多个按钮并排时，如何安排主次顺序是个常见问题，尤其是疑问类按钮的摆放位置。

苹果、另外两大操作系统领导者提出的计划互有差异，然而只要能在软件内部维持一致性，这些方案同样能够获得用户的认可。

个人主张按照视线移动的次序来布置按钮的次序。比如说，当用户阅读了前面的部分，由于视线需要跨越较大的区域，因此会转移到一个容易“停留”的地点——那就是边缘。具体到这个场景，最右侧就是边缘位置，所以按钮的醒目程度从右往左依次递减。

六、其他

Stata-

上方通常指代的是“行为”，不过有时也能见到象征状态的“控件”，例如视频播放中的“静音”，站酷上的“已关注”。这种情况会让使用者感到迷惑留学之路，由于控件的理解存在互相冲突的地方。

经常给设计造成困扰的切换按钮的歧义性。

典型的比如“开/关”按钮。

这种按键必须体现它当前的状况，还得暗示点下去之后会发生什么，当它所关联的功能需要说明、地方太小、或者在不同语言场景中时，这就变得挺麻烦。

能够明白其中需要图形、文字、色彩、警示等多种手段配合才能实现目的，即便如此也不是所有使用者看到就能立刻上手，多数人需要实际操作，借助反馈信息才能掌握。

让用户更清晰得理解“状态切换控件”的含义有下面几种方式：

运用富有表现力的动词表述，引导用户深入领会文字与控件间的内在联系，通过控件自身的特性来巩固用户的理解。根据用户对信息的掌握程度来规划控件的外观，例如在收音机应用中，按钮色调加深能够从环境角度自然地强化用户感知。借助突出的视觉信号和声音提示，帮助用户快速掌握当前界面所处的具体情境。

有关具体说明，请参考State- ——状态切换组件，其使用方法是什么？