设计完美的按钮

Buttons are one of the main UI elements in interactive design. Some of the more complex interfaces can have hundreds of buttons on a single website. Most businesses measure their success by button clicks. So it’s crucial to communicate to the user how a button works and where it’ll lead them. Over the years, our design system has fine-tuned the craft of our buttons.

按钮是互动设计中的主要UI元素之一。一些比较复杂的界面在一个网站上可以有数百个按钮。大多数企业通过按钮的点击量来衡量他们的成功。因此，向用户传达一个按钮是如何工作的，以及它将把他们引向何处，是至关重要的。多年来，我们的设计系统已经对按钮的工艺进行了微调。

Buttons allow users to control the product and achieve their goals. It can help them navigate the interface, modify content or both.

按钮使用户能够控制产品并实现他们的目标。它可以帮助他们浏览界面，修改内容或两者兼而有之。

Three examples. First example shows “home” button which navigates to home page. Second example shows “duplicate button which makes a copy. Third example shows “add new product” button which redirects to a new page and make new product at once.

Principles

原则

As Google explains, a good button design follows 3 principles. It must be Identifiable, Findable and Clear. We keep close to these principles at Wix.

正如谷歌解释的那样，一个好的按钮设计遵循3个原则。它必须是可识别的，可找到的和清晰的。在Wix，我们紧跟这些原则。

Making a button clear

让一个按钮变得清晰

A button must clearly communicate what it does, with zero space for interpretation. Text is the primary element that explains intention.

一个按钮必须清楚地传达它的作用，没有解释的空间。文字是解释意图的主要元素。

Of course, you can include an icon which helps to identify and understand the context. But without any text, it’ll lack full meaning. The text is a promise of what exactly will happen when that button is clicked.

当然，你可以包括一个图标，这有助于识别和理解背景。但如果没有任何文字，它就会缺乏完整的意义。文字是对点击该按钮后到底会发生什么的承诺。

Sometimes buttons need to include multiple messages, where the text and icon can even have different meanings.

有时，按钮需要包括多个信息，其中的文字和图标甚至可以有不同的含义。

A button with icon and label.

In this example “More Actions ▾”, the text indicates that here you’ll find more actions, while the icon indicates that the menu of more actions will display in a dropdown once you click the arrow.

在这个例子中，"更多行动▾"，文字表示在这里你会找到更多的行动，而图标表示一旦你点击箭头，更多行动的菜单将以下拉方式显示。

Case study

案例研究

In 2019 the OS Team at Wix decided to change the button hierarchy. When we first launched, our design system had buttons with text only in our primary CTAs. Any secondary CTAs we had on the page were indicated with just a button — no text. After ...