控件定义：按钮/Button 篇

鉴于目前国内交互设计名词混乱且不统一，很多设计师不知道如何用一个专业的名词称呼一个控件名称，因此开设了《控件定义》专题，梳理控件的名称、使用规范、使用场景等，希望能为交互设计的长期发展，贡献出自己的一点微薄之力。

--IDUX

定义

按钮用于传递用户触摸时会触发的操作。

可以简单理解为：可进行即时点击操作的按钮，如下图:

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

按钮类型

分为 3 类：

浮动操作按钮：一个圆形的按钮，在点击时会改变海拔高度和触发涟漪效果；

浮动按钮：典型的方形纸片按钮，点击后改变海拔高度和触发涟漪效果；

扁平按钮：点击时会有涟漪效果，但不会改变海拔高度。

用法

所使用的按钮类型应该和它所处的上下文相符。

1.标准对话框

按钮对齐方式：右对齐

将确定按钮放在右边，取消按钮放在左边。

2.表单

按钮对齐方式：左对齐

确定按钮在左边，取消按钮在右边。

3.卡片

按钮最好放在卡片的左侧，以增加其可见度。然而，由于卡片的布局非常灵活，按钮也可以放在适合于内容和上下文的其他位置。

4.非标准的对话框和模态化窗口

在非标准的对话框和模态化窗口中，按钮的位置取决于它们包含的内容的复杂性。

如果对话框中的内容相对简单，推荐把按钮放在对话框右侧，并且确定按钮在取消按钮的右侧。

对于复杂的表单，建议把按钮放在表单左侧，并且确定按钮在取消按钮的左侧。

使用状态

根据不同的即时状态，会有不同的样式效果展示，一般状态分为：Normal（正常）Hover（鼠标滑过）、pressed（按下）、Focused（聚焦）、Disable（禁用） 5 个状态。

文章来源：IDUX 设计（微信公众号）

文章推荐

控件定义：对话框/Modal 篇

控件定义：按钮/Button 篇

被腾讯这支广告刷屏，看到最后泪目了！

华为，挺住！谷歌安卓宣布封杀华为，这些APP以后都不能用了！

Sketch v55，免费领取！！！画裸体模特时，美术生把持得住吗？

这么吊的Logo，史上最骚气！！！

关于 UI 中的投影，该如何更好的处理！