UI设计：UI设计用户界面按钮有哪些类型？影响按钮因素有哪些？

UI设计按钮是什么？其实按钮是一种交互元素，允许您通过特定命令从系统中获得期望的交互反馈。基本来说，按钮是一种控制，允许用户直接与数字产品交流，并发送必要的命令以达到特定的目的。比如发送电子邮件，购买一个产品，下载一些数据或者内容，打开一个播放器等等。按键之所以流行的一个原因是按钮可以有效地模拟和真实世界中对象的交互。

接下来我们就来详细的了解一下：UI设计用户界面按钮有哪些类型？影响按钮因素有哪些？

UI设计用户界面按钮有哪些类型？

1、CTA按钮

召唤式语言(CTA)按钮是用户界面的一个交互元素，旨在鼓励用户进行交互行为，然后提供特定页面或屏幕的转换(例如，购买，联系，订阅等等)，换句话说，就是将被动用户变成积极的状态。所以，从技术上讲，它可以是任何类型的按钮，通过号召性语言文字支持。这款按钮和网页上其他所有按钮的区别就是它引人注目的特点：CTA按钮必须引起用户的注意，并且刺激用户执行所需的动作。

2、文字按钮

如其名文字按钮表示没有任何形状、填充标签或类似内容。所以从直觉上看，它不像是按钮。但是，如果使用这些标记为颜色或者带下划线的按钮，仍然能够实现用户交互的转换。文字按钮通常用来创建次要的部分，而不会分散主标题或CTA元素的注意力。

特定的网站设计：整个交互部分采用文字按钮，其它功能只包含标题和标签的复制功能，此文本按钮方式通常用于网页简洁风格的网页

3、下拉按钮

当点击下拉按钮时，互斥项的下拉列表出现。通常通常是设置按钮。通常当用户从列表中选择一个选项时，就会根据颜色来标记。

下面的图表是这样的：当你点击按钮，选项下拉列表就会打开。当你选择完成一个项目时，下拉列表消失，只保留选择选项和加号按钮，以防你再一次选择下拉列表。

4、“汉堡”按钮

这是隐藏的菜单式按钮。当点击或光标选择按钮时，菜单展开。这个菜单(或按钮)的名字是由三条水平线组成的，看起来就像典型的面包-肉-面包，正如“汉堡”按钮。如今，它已经成为一个应用广泛的Web和移动布局的交互元素；对其优缺点的争论也非常激烈。

对活跃的因特网用户来说，知道这个按钮默认隐藏了不同类别的网站内容，所以这种技巧无需额外的说明和提示。当然，汉堡按钮菜单释放出空间，使界面更加简洁和舒适；从功能上来说，它可以为其它重要布局元素节省大量空间。响应和适应性设计隐藏了导航元素，使得不同的设备上的界面看起来更加协调。

讨厌“汉堡”按钮的人认为，这一设计元素可能会使不经常使用网站的人迷惑，并被高度抽象的标志所误导。这样做会对导航有负面影响，并且会导致用户体验差。所以，应该根据用户对目标用户的能力和需求进行调查，然后决定是否使用“汉堡”按钮。

这里有一个使用“汉堡”按钮的例子。为了把用户的注意力集中在视觉效果和核心信息上，它可以隐藏扩展的选项菜单。

5、可伸缩的按钮

单击或点击该按钮后，该按钮将打开多种选项。另外一种不会让屏幕超载的方式来设置合适的交互流程，这对有限屏幕空间的移动界面特别重要。

某个APP：标签栏的中心交互元素是一个加号按钮，用户在操作期间可以添加新的行程或项目。要简化操作，按钮扩展成一组按钮，标记明确类型的内容，这样用户就可以从一开始做出选择，到达需要的屏幕。

6、***享按钮

***享按钮可以直接向社交网络帐户***享内容或***享。为让这种联系变得更清晰，网站上会出现带有特定社会网络logo的图标。若用户并非专门为***享登录站点而设计，通常无需精心设计***享按钮(没有额外的图形、颜色标记、下划线等)，只看到图标也是可以的，这种方法适合于简洁风格，有效利用负空间。不要让用户太关注分享按钮，而是抢到页面主要内容的风头。

风格各异的一家网站。从首页的左下方，你可以看到logo图标的社交平台。容易引起注意，但是不影响站点的内容平衡，也不会分散核心导航和CTA按钮的注意力。

7、镂空按钮

中空按钮是一个看上去很透明的按钮。以细线形状环绕按钮来呈现视觉效果。如果有多个CTA元素导致用户难以识别主要信息的CTA元素，这样的按钮可以帮助分类视觉层次结构：核心CTA将显示为填充按钮，而中间的CTA则是镂空按钮。

某个APP首页：有三种不同类型的按钮：核心CTA上的填充按钮，提供快速注册方式；中空按钮提供第二个选项；文本按钮放到下一行，用颜色标注。此方法帮助构建屏幕上按钮的可靠视觉层次结构

8.浮动操作按钮(FAB)

浮动式操作按钮(简称FAB)是在APP屏幕上显示主要操作的按钮。一般情况下，它是一个圆形图标的按钮，内容高于其他页面。这个按钮通常会立即访问用户通过APP执行的基本动作或常用动作。基于手机APP设计和信息架构，FAB可以：

1.执行典型的核心操作(打开新电子邮件的屏幕，打开添加照片或视频内容的屏幕，搜索所需内容等等)

2.显示附加操作

3.转换成其他UI元素。

FAB在屏幕上的位置通常取决于高可见度因素，它可以根据屏幕的总体设计理念而改变。最好的办法是每个屏幕只使用一个FAB，以避免注意力分散。

影响按钮因素有哪些？

1、尺寸：按键尺寸是告诉用户布局元素的重要性和构成部分层次结构的核心方法之一。一个吸引人、高效的CTA按钮应该足够大，以便快速找到，但不要太大，以免破坏布局结构。例如，苹果表示，移动UI中的CTA应该至少是44-44像素，而苹果则建议34-26像素。

2、颜色：选择合适的颜色对于使次要按钮同样容易引起注意至关重要。人的情绪和行为与视觉环境密切相关，颜色是这方面最有力的工具之一。选择CTA颜色时要记住：按钮和背景颜色必须对比得当，这样按钮才能从其他UI内容中一目了然。

3、形状：在CTA按钮方面，一般采用水平矩形。这是因为人们习惯于把这种形状当作一个按钮。另外，建议设计带圆角的CTA，因为圆角可以指向按钮内部，从而引起按钮本身的注意。这种形状当然是在与网页或APP屏幕风格一致时使用的。

4、布局：按钮的布局对于构建良好的视觉层次和清晰的导航非常重要。如果它们位于用户一眼就找不到的位置，即使使用颜色和尺寸也没用。设计师必须掌握核心功能的按钮，放置最有效的位置。

现代化的UI按钮非常多样，可以满足多种用途。通常是呈现交互部分的典型的、常用的按钮，通常以可见性和特定的几何图形显示，同时有副本支持通过按钮所执行的操作的说明。按钮设计者需要精心设计有效且引人入胜的按钮，这些按钮要自然地与整个设计风格相融合，在对比度和布局上要明显突出。最后，学习UI设计，就上~