Michiel Heijmans
Michiel 是 Yoast 的合伙人和我们的首席运营官。 互联网老手。 他的大部分文章的主要目标是启动网站优化。 还有很多事情要做！
页面上作为主要号召性用语的按钮有一半没有邀请我点击。 您可以而且应该测试按钮设计，但有时，它只是从常识开始。 按钮 UX 设计在过去十年中发生了很大变化。 一个长期趋势似乎是在设计中加入一个按钮。 也许在美学上令人愉悦，但您实际上希望它脱颖而出并让访问者点击它，对吗？
请注意并不是每个按钮都是指定的呼吁采取行动。 有时您只需要一个按钮，例如在评论表单中。 但是，按钮应该看起来像一个按钮！ 在本文中，我将讨论五种类型的按钮，并作为一名全职网络冲浪者给出我的看法。
默认按钮
我找到了一篇关于 的非常好的文章span style="vertical-align: inherit;">如何为 2004 网站设置按钮样式。 这些按钮看起来和感觉起来都像按钮，甚至可能会带你回到一个更怀旧的时代，让我们把它们放在那里吧。 它们很旧，很旧，属于博物馆。 不在您的网站上。 当我不得不用旧样式填写表格时，我总是犹豫不决。 这让您想知道表单是否安全以及您不希望接触的人是否没有收集您的数据。 这是默认设置，而且绝对是一个按钮，但是来吧，你可以做得更好。
平面按钮
平面按钮就像带有文本的彩色正方形或矩形。 它可以是横幅或只是强调的文本。 我知道扁平化设计已经流行了一段时间。 而且，你们中的许多设计师都喜欢按钮，因为按钮更容易适合您的设计。 但我认为我们回顾十年后会想知道为什么我们曾经使用过这些。 并不是说平面按钮本身就是错误的，但我喜欢按钮看起来像按钮的样子。 让它们模仿现实生活中的物体：
第一个（左上角）是一个看起来像横幅的平面按钮。 右上角略有改进。 圆角让它看起来有点像按钮。 左下更好：a凸起按钮。 阴影传达深度，表示可以点击。 出于转换原因，我对最后一个添加了一些额外的信任。 何时在您的网站上Main号召性用语这可能有效,但表单按钮不需要。 我宁愿在这些表单按钮下方加个好看的推荐 以增强信任。
幽灵按钮
虽然幻影按钮（或轮廓按钮）似乎在 UX 中使用得更多设计，但我不鼓励使用它们。 出于同样的原因，我不会使用平面按钮。 UXMag 有幽灵按钮的一些很好的例子。 我特别喜欢Haruki Murakami 的例子，因为该网站实际上看起来令人印象深刻. 还是：
正在使用幽灵按钮。
但是，在许多列出的网站中，您很快就会发现问题出在哪里。 “立即可用”按钮看起来不像按钮。 如果有的话，它看起来像标签或横幅。 就像一个传达信息的元素，而不是号召性用语。 虽然它看起来很棒，但它只是与页面的其余部分融为一体，使其变得毫无用处...
这是否意味着你不应该使用幻像按钮？ 我认为这在很大程度上取决于您要使用它们的上下文。 当与第二个按钮并排使用时，它们会非常有效并且更加集中。 因为幽灵按钮在视觉上很轻，将它与包含的按钮配对会自动传达层次结构。 这会自动将访问者指向您的主要操作。 对于你认为比较重要的按钮。
一个状态按钮
这里还有一个重要的第二个元素（或维度）。 与其说初始按钮对访问者来说是什么样子，不如说它是如何交互的。 这是关于悬停按钮并看到没有任何变化。 它是不是按钮？ 我必须实际点击它才能确定看起来像按钮的东西是否真的是按钮。 嗯人们在点击和使用没有设计的悬停之前往往会犹豫一个单一的状态按钮停下来只会让他们更加犹豫。
添加悬停状态可以像 Just 这样简单在按钮下划线或更改背景颜色。 或两者兼而有之。
最佳按钮用户体验
我觉得好的按钮背后的原则其实是永恒的，永不改变随着趋势。 在Blogs.adobe.com , 我很好地简化了这些按钮的最佳实践总结，我想把它和DesignExcellent 结合起来/span>关于组合：
- 让它看起来像一个按钮（大小、形状、颜色、深度）。
- 点击后添加清晰信息。
- 注意顺序和位置按钮（放置）。
打赏链接：按钮颜色对比如何引导用户采取行动 。
上面列表中的第一项总结了我的要点：一个按钮就是一个按钮。 与其说是设计元素，不如说是设计元素。 按钮 UX 设计是关于识别和清晰度的。
思考的食物
在撰写本文时，令我惊讶的是，我们还没有遵循本网站通信中的一些最佳实践。 总有改进的余地。 查看按钮时，从最重要的按钮开始。 例如产品页面上的购买按钮或时事通讯的订阅按钮。 记住，不是所有东西都是按钮，也不应该看起来像按钮。
随时分享您对按钮 UX 的看法. 我很好奇你的想法！
阅读更多： / span>主要辅助功能检查»
资源
