纯干货 | UI界面中按钮设计可临摹编辑素材！

时间：2023-09-19 08:36:01 | 来源：网站运营

时间：2023-09-19 08:36:01 来源：网站运营

纯干货 | UI界面中按钮设计可临摹编辑素材！：按钮是UI界面中最常见的交互元素之一，所以，如果要创建一个稳固的互动且积极有效的用户体验，需要设计好按钮元素。今天我们将搜集整理一些网页app上常见的按钮类型，了解这些不同的按钮设计方法。

Viro媒体控件UI

什么是按钮？

按钮是一个交互式元素，可以根据特定命令从系统获得预期的交互式反馈。基本上，按钮是允许用户直接与数字产品通信并发送必要命令以实现特定目标的控件。例如，可能需要发送电子邮件，购买产品，下载一些数据或一些内容，打开播放器以及大量其他可能的操作。

关闭PSD按钮

按钮如此受欢迎且用户体验友好的原因之一，就是它们有效地模仿了物理世界中的交互。

黑暗必备开关和切换PSD

现代UI按钮非常多样化，可以满足各种用途。典型且经常使用的按钮，其呈现交互式区域，通常清楚地标出可见性并具有特定的几何形状，通过该按钮解释将实现什么样的动作。设计师必须花费大量的时间和精力来创造有效且引人注目的按钮，这些按钮自然地融入了一般的风格概念中，但是它们的对比度足以在布局中脱颖而出。

分类：


1、CTA按钮

CTA按钮的目的是在鼓励用户采取某种行动的用户界面的互动元素。此操作为特定页面或屏幕提供链接（例如：购买，联系，订阅等），换句话说，它将普通用户变为订阅用户。

巨大的按钮PSD

2、文字按钮

这是一个带有一段文字的按钮。这意味着文本周围没有任何形状，色块填充等。因此，在我们对物理世界中这种现象的标准理解中，它看起来并不像按钮。

网页按钮样式PSD


3、下拉按钮

单击下拉按钮时，将显示项目的下拉列表。您通常可以在设置按钮中遇到此类型。当用户选择列表中的一个选项时，它通常被标记为活动。

下拉式上传小部件


4、汉堡按钮

它是隐藏菜单的按钮。单击或点击它时，菜单会展开。这种菜单（以及按钮）的名称由于它的形状由三条水平线组成，看起来像典型的汉堡包。


5、加号按钮

点击加号按钮使用户可以向系统添加一些新内容。根据应用的类型，它可以是列表中的新帖子，联系人，位置，注释，项目等。有些情况下点击此按钮，用户将直接转移到创建内容的模式窗口，另外一种情况，点击后出现更多菜单选项，这是在不使屏幕过载的情况下设置适当的交互流的一种方式，这对于屏幕空间有限的移动界面尤其重要。


6、分享按钮

随着社交网络，聊天和电子邮件的高度普及，这些按钮简化了将应用或网站内容与其它人分享的过程。此类按钮可以直接将内容或成就分享给社交网络账户。为了使分享简单清晰，它呈现的图标具有特定社交网络的品牌标志，并且易于识别。


7、虚拟按钮

虚拟按钮，顾名思义，也就是在设计网页中的按钮之时，不再设计复杂色彩、样式和纹理，而是外仅以线框示意轮廓，内只用文字示意功能，背景透出，与整个页面/背景合而为一的设计方式。


8、浮动操作按钮（FAB）

Floating Action Button (FAB)（FAB）是浮动在用户界面上方的图标。它的形状，位置和颜色使它与界面的其余部分明显区分开来。

具体实例UI界面中按钮设计到模库网（ MCOOL) www.mcool.com

按钮的设计原则

尺寸

大小是告知用户布局元素的重要性和构建组件层次结构的核心方法之一。一个有吸引力和高效的号召性用语按钮需要足够大，以便能够快速找到，但不要太大，以免布局结构被破坏。设计规范对按钮对尺寸有严格的建议，Apple建议移动UI中的CTA应至少为44Х44像素，而Microsoft推荐34Х26像素。如果您为移动设计，对不同类型的按钮的要求可能非常严格，因此要彻底研究设计规范指南，以最大限度地降低因UI设计不佳而导致应用拒绝的风险。

颜色

为了使一些按钮容易引人注意并且一些次要按钮，选择合适的颜色至关重要。问题在于人类的情绪和行为与视觉环境高度相关，而颜色是这方面最强大的工具之一。在为CTA选择颜色时要记住这一点至关重要：按钮和背景颜色必须对比良好才能使按钮从其他UI组件中快速脱颖而出。

形状

至于CTA按钮，它们通常看起来像水平矩形。原因是你要清楚这个按钮是可点击和交互的，人们习惯将这个形状看作一个按钮。按钮的形状还要与网页或者app的设计风格保持一致。

位置

按钮的放置位置对于构建可靠的视觉层次结构和清晰的导航至关重要。如果它们位于用户眼睛无法捕捉到的区域，则其他视觉方面（例如颜色和大小）可能无法有效工作。设计人员必须学习可扫描的区域，并在用户可以操作的空间中放置核心功能的按钮。