按钮设计的基本规则
生活中的一切都有一些应该考虑的基本规则。按钮设计的典型之处在于它看起来相当简单，但设计师必须考虑许多看似很小的因素。这些是您在下一个 UX 设计中要遵循的一些准则。
1. 让它看起来可点击
每当用户使用任何产品时，他们都必须解码界面中每个元素背后的含义和功能。就像所有其他元素一样，您不希望用户花很长时间来理解和解码他们看到的任何元素——他们花的时间越长，您的可用性就越差。
这就是为什么你需要停下来想一想那个按钮是否真的可以点击。作为设计师，您对自己的创作非常熟悉。你知道每一个小的交互，每一个链接。另一方面，用户从未见过您的产品，也不知道它的作用或工作原理。你不能确定人们会认出那个按钮是花哨的链接，这取决于你在他们心中没有任何怀疑的余地。
因此，尝试使用我们都熟悉的按钮形状和样式。这包括方形按钮、圆角方形或人们可以在其他常见界面中找到的其他形式的按钮。我们理解每个设计师都希望他们的作品具有原创性，但如果人们无法使用它，那么提供真正独特的东西是没有用的。
我们推荐带有阴影的圆角方块。我们喜欢为按钮添加阴影，因为它增加了一种深度感，可以向用户显示该按钮可以被点击。您还可以添加微交互，以便当光标悬停在按钮上时，会发生某种反应。这可能是颜色的轻微变化或向上的小动作——重要的是用户知道可以点击该元素。
2. 让查找和预测变得容易
就像我们在形状方面都习惯于某种类型的按钮设计一样，用户也知道按钮在任何给定屏幕中的位置。我们打开一个网页并希望立即找到按钮——没有用户喜欢四处寻找按钮。
这些是对任何网站的预先形成的期望，最好不要与它们作斗争。相反，尝试将它们应用到您的设计中作为起点，看看如何将其提升为符合您风格的东西。
你不想与人们关于按钮应该去哪里的观念作斗争的原因是可用性需要可预测的设计——包括按钮设计。您希望您的产品对用户有意义，确保良好的可发现性和可学习性。这意味着通过反映人们对您的设计的期望，您可以让他们更轻松地第一次浏览产品并了解它的工作方式或它可以为他们做什么。
使用对比色以将用户的注意力引导到按钮上，并传达按钮的重要性。充分利用负空间将眼睛引导到屏幕上并直接到达按钮，而不是让用户在他们清楚地看到按钮之前咀嚼内容。
在考虑您的按钮设计如何影响产品的可用性时，您必须考虑产品的一致性需求。即使你让你的按钮看起来像人们期望的那样并将它放在屏幕上的一个公共位置——如果每个按钮看起来都不一样，人们也会混淆它们是否提供相同的功能或是否会以与其他按钮相同的方式运行.
您需要有一个连贯的按钮设计，无论它们与什么功能相关，都可以在网站的每个屏幕上闪耀。一旦您拥有了可以在所有按钮中复制的样式，就可以在您的网站中为按钮建立标准位置。遵循逻辑和普通用户的期望——例如，当面对“上一个”或“下一个”按钮时，大多数用户会期望“上一个”在左侧，而“下一个”在右侧。
3. 告诉用户每个按钮的作用。不要让他们猜。
当有人告诉你微文不重要时，永远不要相信它。诚然，作家会辩称，在传达信息时每一个词都很重要，但这并不会使它变得不那么真实。如果没有合适的微文案，您的按钮设计就不会完整。
按钮内的文本不需要限制为“确定”和“取消”。事实上，通过将这些通用术语放在一边并专注于每个按钮所做的操作，您的可用性会得到提高。拥有“删除”或“取消预订”的按钮可以保证您的用户理解每个按钮，甚至通过减少用户犯错的机会来提高可用性。
另一个有用的按钮设计技巧是取缔只有经典的“继续”或“取消”按钮的弹出框。相反，尝试创建包含至少一行文本的框，说明正在执行的操作及其对用户的意义。
4.大小很重要：有按钮人们可以实际点击
按钮设计还意味着决定您希望每个按钮有多大。这似乎是一个小细节，实际上它绝不是肤浅的。
按钮的大小对于移动设计尤为重要。按钮太大会导致画面充满视觉冲击，而按钮太小则无法用普通手指点击。麻省理工学院的触控实验室在 2003 年发表了一项研究，发现大多数指尖的宽度为 8-10 毫米。
明确的含义是您不希望按钮小于 10 毫米 - 除非您愿意冒着设计的可用性风险，因为您的用户手指非常细小。旨在在您的设计中建立视觉层次结构按钮设计。这意味着重要的功能，任何给定屏幕的主要转换，应该是大的按钮。当你有两个相反的按钮时，这也适用——让积极的结果按钮看起来更重要，让它比消极的按钮稍大。
如今，没有任何设计师能够在不担心响应性的情况下过自己的生活，即使是在按钮设计方面也是如此。在查看设计并与之交互时，您需要考虑可能使用多种设备。这可以通过根据用户喜欢的屏幕尺寸来考虑按钮尺寸的定义变化来完成。
5. 不要为所有东西都设置一个按钮
在同一个屏幕上为用户提供每一个功能听起来是个好主意，但这是一个陷阱。人们觉得他们想要拥有所有选择，但实际上我们并不欣赏要做出的决定浪潮。正如选择悖论和希克定律所指出的，给用户太多的选择会导致他们僵住并感到不知所措。
当然，将所有按钮放在主屏幕上看起来很酷——除了您的产品不是飞机驾驶舱。您无需为了让用户点击几下而牺牲产品的可用性。尝试找到可以让用户以合乎逻辑的方式达到预期结果的方法，将您的按钮设计用作工具。在适当的信息架构框架上投入一些时间是一个很好的起点。
按钮设计不仅与按钮的外观或功能有关，还与您将它们呈现给用户的方式有关。合乎逻辑，不要急于求成——创建人们可以轻松遵循的路径，安装通向产品所有关键点的路径框架。
6. 总是提供反馈或冒着用户愤怒的风险
与真实的人不同，计算机不会给你反馈，除非你让它这样做。在现实生活中的对话中，人们的肢体语言总是让我们知道他们在倾听并且理解我们在说什么。这使得对话变得更加容易——这就是用户在使用您的产品时所做的事情。这就像人与软件之间的对话。
您的产品应始终及时地让用户知道该命令已注册。在将信号提供给用户之前让太多时间过去，用户甚至可能没有意识到该信号与什么有关。确保在转换过程中不会丢失任何内容的一个好方法是在按钮设计中定义按钮状态。
每当用户与按钮交互时，它应该改变状态以让用户知道由于他们的操作而发生了某些事情。他们需要知道有来自计算机的反应。
与此相关的一点是，微交互也是向用户传达系统状态的好方法，正如我们在之前的一篇博文中所探讨的那样。通过智能微交互，您可以平滑用户和软件之间的通信——事实上，您可以在设计这些微小交互时获得很多乐趣，这只是一个奖励。
Android 和 iOS 应用程序上的移动按钮设计
按钮不是 UI 设计中复杂的方面，但它们是必不可少的。这个问题主要发生在移动屏幕上，因为空间的减少往往会加剧任何设计错误，并导致用户体验不佳。断开的链接、无法点击或无响应的按钮以及缺乏视觉反馈只是我们全面看到的一些移动 UI 按钮设计缺陷。
那么我们如何设计用户无法获得足够的移动用户界面按钮呢？请继续阅读我们关于设计令人惊叹的按钮以响应用户交互并提供有用的、可操作的反馈的七个技巧。不要忘记随身携带您喜欢的应用程序原型制作工具！
1.坚持核心UI设计原则
当谈到设计按钮的 UI 设计原则时，重要的是关注按钮的用途。在整个 UI 按钮设计过程中，从拟物化设计的三维风潮到扁平化设计革命和浮动操作按钮热潮，可访问性始终是用户的第一任务。但是为了实现这一点，按钮需要看起来像按钮。我们正在谈论大小、形状和填充。
谁告诉你尺寸无关紧要，从来没有设计过移动按钮。按钮的大小和形状可以决定用户交互的可能性。如果用户无法识别可点击的元素，他们就不会与之交互。如果它对他们的手指来说太小，他们也不会与它互动，但他们肯定会生气。
尺寸
当“tap”是移动应用的主要输入方式时，Android 的 Material Design 原则建议触摸目标至少应为 48 x 48dp，它们之间至少应有 8dp（或更多）。这是为了确保平衡的信息密度和可用性。
形状
在形状方面，这实际上取决于您的设计目的。例如，在 Android UI 设计中，平面和凸起的材质按钮应该是 36dp 高，最小宽度为 88dp，并且具有 2dp 角半径（平面）/默认高度为 2dp（凸起）。
填充
填充，本质上是内容或组件周围的空白，为 UI 提供呼吸空间并避免让用户感到不知所措。在此处阅读有关UI 设计中留白的更多信息。
2. 使用颜色使您的 UI 按钮设计具有可操作性
多年来，UI 按钮设计视觉效果发生了巨大变化，但有一件事没有改变：引导用户采取有意义的行动的颜色和对比度的使用。
用户渴望可预测性和熟悉度，因此使用颜色来帮助他们识别和解释您的应用程序的内容并与正确的元素进行交互。请记住，您选择的调色板将决定用户如何识别和记住用户界面中的元素。UI 中的颜色应帮助用户导航按钮并预测每次点击背后的操作，并与您的品牌相匹配。
应该使用对比度来帮助用户在不同的按钮之间进行选择。无法在操作之间进行破译会给用户带来不确定性，并可能减慢他们的旅程，从而导致糟糕的用户体验，并且很可能导致他们点击离开您的应用程序。
通过颜色和对比度专注于识别和清晰度。对比的 UI 按钮设计规则很简单：积极动作的高对比度，消极动作的中等对比度，中性动作的低对比度。放置在它旁边的任何中性或负面动作都应该具有较低的颜色对比度以淡化它们，尊重视觉层次。
iOS 有浅色和深色配色方案，使用对比度和半透明度来防止界面元素变得过于强烈或平淡无奇。
3.通过消除屏幕上的摩擦来帮助用户确定任务的优先级
当涉及优先任务时，您应该消除任何减慢用户进度的摩擦，以确保他们能够完成任务。通过将色彩和对比度与巧妙的分层、浮雕和微妙的阴影配对，您可以在平面屏幕上创造 3-D 错觉。这会引起人们对提升或主要操作的关注，并将它们与周围的 UI 元素区分开来。同样，投影和高光有助于用户解释视觉层次结构并了解哪些组件是交互式的。
考虑在重要的按钮之间添加突出显示以区分主要和次要按钮。正确使用分层和阴影以及元素的正确定位将帮助您实现更高的着陆页转化率，因为用户可能会注意到号召性用语 (CTA) 按钮并参与其中。
幽灵按钮，透明的，基本的矩形或方形，以非常细的线条为边界，可以是消除 UI 设计中摩擦的好方法。凭借巧妙匹配的背景，幽灵按钮充当次要内容，将用户的注意力吸引到主要内容或按钮上，而不会让用户感到不知所措。
考虑以下示例，该示例直接取自Material Design的官方指南。它使用每个按钮的视觉效果，以创建一个视觉层次结构，清楚地表示每个按钮的重要性。
4. 在你的 UI 按钮设计中用视觉反馈奖励用户
反馈应该在用户旅程的每一步中发挥作用。作为习惯的产物，它激励用户知道他们在做正确的事情或系统承认他们的行为。设计师可以通过有用的反馈来塑造这种互动。
请记住，按钮不是单一状态的对象，我们应该始终提供有关用户即将/刚刚执行的任务的反馈。奖励用户交互的一个特别重要的时间是在他们单击主按钮执行重要任务之前，例如注册时事通讯或下载免费试用版。
按钮的颜色更改将向用户显示他们的操作已被接受。微妙的动画和动作将传达按钮的意图，并鼓励用户通过点击来完成——用户快乐，你快乐！
测试您的按钮设计
用户测试任何设计都是一个值得拥有自己的指南的主题——这就是我们为您制作的原因！如果您想更深入地了解测试的理论和实践，请查看我们的用户测试指南。对于更概括的聊天，让我们回顾一些可以测试用户如何交互和对您的按钮做出反应的好方法。
导航测试
在您开始担心如何让按钮看起来很棒之前，您必须覆盖您的基础并验证您的基本导航设计。绝对重要的是，您的所有主要导航按钮都能发挥作用，让用户在设计中无所遁形，而不会出现任何重大问题。
我们始终提倡快速制作产品基本框架的线框图，并开始测试导航和信息架构是否有意义。有了线框，您就可以开始某种形式的用户测试来回答基本问题，例如：
用户能否找到所有主要功能？
对于每个功能，它们平均需要多长时间？
用户是否了解每个功能在重要问题上与其他功能之间的关系？
导航对用户来说是否合乎逻辑？
A/B 测试
当谈到微调按钮设计时，也许很少有方法像A/B 测试一样具有启发性。营销人员特别喜欢 CTA 按钮，这种测试是关于测试同一按钮的两个不同版本并比较它们的性能。如果您的团队想要同时测试许多不同的按钮设计，多变量测试可能是一个更快、更实用的选择。
热图
尽管与 A/B 测试相比，热图可能无法直接为我们提供答案，但这种用户测试方法仍然会对您的产品产生巨大影响。它以一种非常直观的方式告诉我们用户关注的地方，这在测试您的按钮设计时会非常方便。
可以将您的按钮设计提升到新水平的 UI 套件
这里有一些UI 套件，它们带有几种不同风格的按钮设计——也许在这里您可以找到与您最新项目的完美匹配，或者可以开始您的下一个设计的坚实基础。
材料设计
该材料设计UI套件既丰富又实用。享受 170 多种不同的组件，可在您的移动应用程序原型中使用，包括您可能需要的所有按钮和操作控件。每个按钮已经带有一些集成到组件中的基本交互以节省时间，阴影在设计中占有重要地位。
IOS
与 Justinmind 中的其他 UI 套件一样，iOS UI 套件由数百个最新组件组成，全部为您的下一个项目做好准备。享受您想要的所有按钮，所有这些按钮都是完全可扩展和可定制的。这些组件还带有反映 iOS 感觉和外观的基本但经典的交互。
网络线框图库
这款 UI 套件具有简单的按钮，具有锐利的实心形状，是大多数线框图项目的完美起点。采用简单而经典的按钮设计并旋转它以适合您的风格和项目的风格。除了按钮之外，您还可以找到 UX 设计师从一开始就想出一个想法所需的所有基本构建块。所有这些都在一个 UI 套件中！
这个 UI 套件已经预先安装在 Justinmind 中，但如果您愿意，请查看Web Wireframing 库组件。
引导程序
Bootstrap 是一个更加多样化和有趣的 UI 工具包，带有各种颜色的圆形边缘按钮。按钮设计更年轻，为那些希望为其设计增添一点流行色彩的人提供更多选择。按钮包括所有经典和几个下拉选项。
您可以在我们的专门帖子中阅读有关Bootstrap UI 套件的更多信息。
Kendo
在KendoUI工具包是一个有趣的工具，在您的处置。它带有各种尺寸的按钮，包括主要和次要的。通过多种尺寸选项，使用 Kendo 可以更轻松、更快捷地制作您的下一个 UX 设计。更不用说，我们只是喜欢按钮组上的按钮设计！
总结
按钮设计很重要，因为按钮可以帮助用户浏览您的产品，还因为它们可以迫使用户转换为任何想要的结果。它们需要仔细规划，以便您的用户可以立即知道按钮的位置，同时永远不会停下来思考该按钮。让它浮华，让它有用——让用户尽情享受你的产品。