完美按钮的 7 个设计技巧

最常见的 UI 组件之一是按钮。无论是表单、网站、对话框还是工具栏，按钮随处可见。它们让用户与系统进行交互，并通过选择选项来采取行动。

链接和按钮之间应该有明显的区别。当你想让用户执行任何操作（例如提交、取消或删除）时，可以使用按钮；当你想让他们转到另一个页面时，可以使用链接。

精心设计的按钮能让访客轻松完成你希望的操作，从而提升转化率。让我们在本文中详细了解网站按钮的设计建议。

1.使按钮看起来像按钮。

用户体验设计研究表明，人们在使用用户界面时，需要立即知道哪些是“可点击的”，哪些不是。用户需要花费时间和精力来解读设计中的所有内容。消费者理解界面的时间越长，其价值就越低。

问题是，用户如何知道某个特定元素是否具有交互性？UI 对象可以通过先前的专业知识和视觉提示更加直观地呈现。利用合适的视觉符号（例如大小、形状、颜色、阴影、按钮悬停效果等）来使元素看起来像可点击元素至关重要。视觉符号对界面可供性的创建至关重要，因为它们承载着决定性的信息价值。

因此，当交互迹象很少且需要用户付出努力时，界面的可发现性就会受到影响；这是不幸的。

如果用户一开始就无法分辨哪些功能可点击，那么无论设计多么精美，也无济于事。如果设计难以使用，用户就会感到沮丧，觉得不值得花时间。

对于移动用户来说，弱指示符是一个更大的问题。桌面用户可以将鼠标移到某个元素上，查看其状态是否发生变化，从而判断该部分是否可交互。移动用户则没有这样的选项。用户必须触摸元素才能判断它是否可交互；没有其他方法可以做到这一点。

设计师经常会将按钮标记为不带交互组件标签，因为他们认为用户应该知道它们是什么。创建界面时，请记住以下规则：

使用熟悉的图片，让按钮设计更具辨识度。大多数用户都能识别以下按钮：

“带阴影的填充按钮”设计是所有设计中最人性化的。当用户看到物体的立体感时，他们立刻就能意识到这是一个按钮。

空白至关重要，所以不要忽视它。

然而，按钮的功能与美观同样重要。根据按钮周围的空白大小，用户可以判断控制器是否具有交互性。这里有一些很酷的CSS 按钮，可以供您参考。

用户应该能够发现并期待在关键位置看到按钮。确保用户能够轻松找到按钮。如果按钮不易触及，用户将完全意识不到它的存在。尽可能遵循常规布局和用户界面标准。

遵循行业标准的按钮布局可以提高可用性。每个按钮都应具有清晰的功能和一致的布局，这样消费者就不会因为缺乏视觉提示而感到困惑。利用足够的空白、统一的结构和简洁的视觉风格可以提高可读性。

按钮标签过于笼统或具有误导性可能会给客户带来很多麻烦。请在标签上清晰地说明每个按钮的功能。理论上，按钮标签应该能够准确传达其功能。

当用户点击按钮时，他们应该清楚地知道接下来会发生什么。这里有一个简单的例子来解释我的意思。想象一下，如果你不小心删除了任何东西，然后看到了这个错误信息，会发生什么。

这个对话框中“确定”和“取消”的含义比较模糊。大多数人会疑惑，如果点击了“取消”按钮会发生什么。

使用“删除”而不是“确定”作为标签。这样，用户就能知道按下按钮后会发生什么。您也可以使用红色来表示按下“删除”按钮是危险操作。

在现代用户体验设计趋势中，按钮的大小应与其在屏幕上的重要性成正比。大按钮的存在表明了按钮的重要性。请根据按钮的重要性进行组织。使最重要的按钮看起来最为重要。使主要操作按钮尽可能显眼。通过增大按钮，您可以向消费者传达一种重要感，并与设计的其他部分形成对比色。

让移动设备上的按钮更容易用手指按下。
移动应用程序中的按钮通常太小，因此很容易造成输入错误。

根据麻省理工学院触觉实验室的数据，指腹的平均厚度为 10 至 14 毫米，而手指的平均厚度为 8 至 10 毫米。因此，10 毫米 x 10 毫米的触摸目标是一个合理的起点。

当用户和系统交互时，按钮出现的顺序应该反映这一点。考虑用户预期在这个屏幕上看到内容的顺序，并构建相应的屏幕。

比如分页的“上一页/下一页”按钮怎么安排？前进按钮应该在右边，后退按钮应该在左边，这样比较合理。

很多应用程序和网站都存在这个问题。如果你给用户太多选择，他们就会无所事事。在创建应用或网站的页面时，请考虑你希望用户执行的最重要的操作。

摄影：Aaron Iker

根据您正在执行的操作类型，可以使用视觉或听觉反馈。点击或轻触按钮应该会引起用户界面的响应。如果交互缺乏反馈，用户可能会认为系统未收到他们的订单，从而重复相同的操作。这种行为通常会导致多个不必要的操作。

这是怎么回事？作为人类，当我们与任何事物互动时，我们都会期待它做出一些回应。视觉、听觉或触觉反馈都是可接受的交互确认形式。例如，在下载时，确认用户输入并同时提供下载进度更新至关重要。

为了避免用户体验设计错误，即使按钮是用户界面设计中常见的部分，也值得花时间和精力将按钮设计得尽可能美观。一致性和可识别性始终是按钮用户体验设计的首要考虑因素。