A button is an important UI element that will heavily affect your interaction design. Buttons have the power to compel users to convert, to carry out an action. Buttons are a middleman between user and product, and are charged with keeping the conversation between person and machine going.

按钮是重要的UI元素，它将严重影响您的交互设计。 按钮具有迫使用户进行转换，执行操作的功能。 按钮是用户和产品之间的中间人，负责保持人与机器之间的对话持续进行。

How do users understand an element is a button? The answer is simple. Visual cues help people determine clickability. It’s important to use proper visual signifiers on clickable elements to make them look like buttons.

用户如何理解元素是按钮？ 答案很简单。 视觉提示可帮助人们确定可点击性。 在可点击元素上使用适当的视觉指示符，使其看起来像按钮，这一点很重要。

Everything in life has a few ground rules that should be taken into. Button design is typical in that it looks fairly easy but comes with lots of seemingly small factors the designer must consider. These are some tips to follow in your next UX design.

生活中的一切都有一些基本规则应予以考虑。 按钮设计的典型之处在于它看起来相当简单，但伴随着设计者必须考虑的许多看似很小的因素。 这些是您下一个UX设计中要遵循的一些技巧。

让它看起来像“即时” (Make it look ‘on-point’)

Here’s why you need to stop and wonder if that button actually looks on-point and clickable. As the designer, you are very familiar with your creation. You will know every small interaction you will add on your design. Users, on the other hand, have never seen your product and have no idea what it does or how it works. You can’t be sure that people will recognize that button for the fancy link it is, and it’s up to you to leave no room for doubt in their minds.

这就是为什么您需要停下来并想知道该按钮是否看起来像是可点击的。 作为设计师，您对创作非常熟悉。 您将知道将在设计中添加的每个小交互。 另一方面，用户从未看过您的产品，也不知道它的功能或工作方式。 您无法确定人们是否会意识到该按钮是花哨的链接，而这取决于您的想法。

And so, try to use shapes and styles of buttons that we are all familiar with. That includes square buttons, rounded squares or other forms of buttons that people can find in other common interfaces. We understand that every designer wants to be original in their work, but it’s no use delivering something truly unique if people can’t use it.

因此，请尝试使用我们都熟悉的按钮的形状和样式。 这包括人们可以在其他常见界面中找到的方形按钮，圆角正方形或其他形式的按钮。 我们知道，每个设计师都希望在他们的作品中独具匠心，但是如果人们不能使用它，那么提供真正独特的东西就没有用了。

从视觉上区分主要动作和次要动作 (Make it visually differentiate on primary and secondary actions)

The primary action is an action that allows the user to accomplish their most common or most important goal. Secondary actions are any actions that are less important. When in doubt, the default action is the primary one. Be sure to give prominence to the primary action button by making the secondary action appear secondary, visually.

主要动作是允许用户实现其最常见或最重要目标的动作。 次要动作是任何次要的动作。 如有疑问，默认操作为主要操作。 确保通过使次要操作在视觉上显示为次要操作来突出显示主要操作按钮。

轻松找到 (Make it easy to find)

The placement of buttons matter. Users have an idea of where your buttons will be. Again, they have used many sites and applications before yours and gotten used to certain button placement patterns.

按钮的位置很重要。 用户对按钮的位置有所了解。 同样，他们在您使用过许多站点和应用程序之前，已经习惯了某些按钮的放置方式。

Just like we are all used to a certain type of button design in terms of shapes, users also have an idea of where buttons should go in any given screen. We open a webpage and expect to find the button immediately–no one ever enjoyed looking around for a button to press.

就像我们都习惯了某种形状的按钮设计一样，用户也对按钮在任何给定屏幕中的位置都有所了解。 我们打开一个网页，希望立即找到该按钮-从来没有人喜欢四处寻找要按下的按钮。

The reason why you don’t want to fight people’s notions of where buttons should go is that usability calls for predictable design–including button design. You want your product to make sense to users, ensuring good discoverability and learnability. That means by reflecting people’s expectations on your design, you make it easier for them to navigate the product for the first time and come to learn the way it works or what it can do for them.

您不想与人们对按钮应该放哪里去的观念作斗争的原因是，可用性要求可预测的设计，包括按钮设计。 您希望您的产品对用户有意义，从而确保良好的发现性和学习性。 这意味着通过反映人们对您设计的期望，您可以使他们更轻松地第一次浏览产品，并了解产品的工作方式或对他们可以做什么。

You need to have a coherent button design that shines through in every single screen of your website, no matter what feature they relate to. Once you have a style you can replicate in all your buttons, establish the standard place for buttons within your website. Follow logic and common user’s expectations. Don’t make them guess.

您需要一个连贯的按钮设计，无论它们涉及什么功能，它都可以在您网站的每个屏幕上闪耀。 拥有样式后，您可以复制所有按钮，在网站中为按钮建立标准位置。 遵循逻辑和普通用户的期望。 不要让他们猜测。

大小事项 (Size matters)

The first element of button design to consider when designing in button design is size, it means deciding just how big you want each button to be. You should consider how large a button is in relation to the other elements on the website page or especially the size of your button is particularly important for mobile app designs. At the same time, you need to make sure that the buttons you design are large enough for people to interact with. Making a button too big will lead to a visually charged screen, while a button that is too small cannot be clicked on by a normal finger.

在按钮设计中进行设计时，要考虑的按钮设计的第一个元素是尺寸，这意味着确定每个按钮的大小。 您应该考虑一个按钮相对于网站页面上其他元素的大小，或者按钮的大小对于移动应用程序设计尤为重要。 同时，您需要确保设计的按钮足够大，以便人们与之交互。 将按钮设置得太大会导致屏幕看上去带电，而普通的手指无法单击过小的按钮。

The clear implication is that you don’t want a button to be any smaller than 10mm–unless you’re willing to risk the usability of your design on the chance that your users have very tiny fingers. A good rule of thumb comes from the MIT Touch Lab. Studies by the Touch Lab say that making your button a minimum of 10mm x 10mm is a great place to start. Aim to establish a visual hierarchy in your button design. That means that the most important functionalities, the primary conversion of any given screen, should be the biggest button in sight. That also applies when you have two opposite buttons–make the positive outcome button seem more important by making it slightly bigger than the negative one.

明确的含义是，您不希望按钮的直径小于10mm，除非您愿意为用户手指很小的机会冒险设计的可用性。 MIT Touch Lab是一个很好的经验法则。 触摸实验室的研究表明，使按钮最小为10mm x 10mm是一个不错的起点。 旨在在按钮设计中建立视觉层次。 这意味着最重要的功能，即任何给定屏幕的主要转换，应该是眼前最大的按钮。 当您有两个相对的按钮时，这也适用–通过使正面结果按钮稍大于负面按钮，使正面结果按钮显得更为重要。

不要为所有事情做一个按钮 (Don’t make one button for the whole things)

Offering users every single functionality on the same screen may sound like a good idea, but that’s a trap. People feel like they want to have all the options on their hands but in reality we don’t appreciate the wave of decisions to be made. We should never give users too many options that will lead them to freeze and feel overwhelmed.

在同一屏幕上为用户提供所有单个功能听起来不错，但这是一个陷阱。 人们觉得自己想拥有所有选择，但实际上，我们不欣赏即将做出的决定浪潮。 我们绝不应该给用户太多选择，而这些选择会导致用户冻结并感到不知所措。

Sure, placing all the buttons on the home screen seems cool enough–except that your product isn’t an airplane flight deck or book a hotel. There’s no need for you to compromise product usability just to save users a few clicks. Try to find ways you can get users to reach the desired outcome in a logical way, using your button design as a tool. Investing some time into a proper frame of information architecture is a good place to start.

当然，将所有按钮放在主屏幕上似乎很酷-除非您的产品不是飞机驾驶舱或预订酒店。 您无需为了节省用户的点击次数而损害产品的可用性。 尝试使用按钮设计作为工具，找到使用户以合乎逻辑的方式达到期望结果的方法。 将时间花在适当的信息体系结构框架上是一个不错的起点。

结论 (Conclusion)

Designing for the CTA button is a critical part of creating user interfaces on websites or mobile apps. It’s how you help users take the steps to accomplish their goals. Poor button design can result in users taking the wrong action, taking no action, or being uncertain about what to do next. You should pay attention to how you design your buttons will streamline any user workflow and help users feel more certainty before they click.

设计CTA按钮是在网站或移动应用上创建用户界面的关键部分。 这是您如何帮助用户采取步骤实现其目标的方式。 错误的按钮设计可能导致用户采取错误的措施，不采取任何措施或不确定下一步的操作。 您应注意按钮的设计方式将简化任何用户的工作流程，并帮助用户在单击之前更加确定。

Contributor: Deta Ayudhia S

贡献者： Deta Ayudhia S