注意,不是每个按钮都是指定的动作调用。有时候你只需要一个按钮,比如在你的评论表单里。不过,这个按钮应该看起来像一个按钮!在这篇文章中,我将讨论五种类型的按钮,并告诉你我作为一个全职网络爱好者对这些按钮的看法。
默认按钮
我发现了一篇很好的文章,关于如何为你的2004年网站设计按钮。虽然这些按钮看起来和感觉上都很像按钮,甚至可能会带你回到更怀旧的时代,让我们把它们留在那里吧。它们是古老的,古老的,属于博物馆。不是在你的网站上。当我要填写那种旧样式的表格时,我总是犹豫。它会让您怀疑表单是否安全,您的数据是否会被您不想接触它的人收集。它是默认的,它绝对是一个按钮,但是拜托,你可以做得更好。
平的按钮
扁平的按钮就像有颜色的正方形或长方形,上面有文字。它可以是一个横幅,也可以是一些强调的词。我知道扁平化设计已经流行了相当一段时间了。很多设计师喜欢按钮因为它更容易适合你的设计。但我认为我们会在10年后回顾这一现象并想知道我们为什么会使用这些。我并不是说扁平按钮本身就是错误的,但我喜欢我的按钮看起来像按钮。让它们模仿真实的物体:
平面按钮设计
第一个(左上角)是平面按钮,看起来像一个横幅。右上角是一个轻微的改进。圆角让它看起来更像一个按钮。左下角的更好:一个凸起的按钮。阴影传递深度,表明它是可能的点击它。出于转换的原因,我在上一个基础上增加了一些信任。当它是你网站上的主要行动号召时,这可能会起作用,但是对于表单按钮来说,这是不必要的。我宁愿在这些表单按钮下面添加一个好的推荐来增强信任。
鬼按钮
虽然幽灵按钮(或概括按钮)似乎在用户体验设计中使用得更频繁,但我并不鼓励使用它们。这和我不使用平面按钮的原因是一样的。UXMag有一些很好的幽灵按钮的例子。我特别喜欢村上春树的例子,因为这个网站看起来确实令人印象深刻。这里有一个:
幽灵按钮的例子
幽灵按钮在使用。
但是,就像许多列出的网站一样,你很快就能看到哪里出了问题。“现在可用”按钮实际上看起来不像一个按钮。如果有什么区别的话,那就是它看起来像一个标签或横幅。就像一个传递信息的元素,而不是一个行动的号召。虽然它看起来很棒,但它只是融入了页面的其他部分,这几乎让它变得毫无用处……
这是否意味着你永远都不应该使用幽灵按钮?我认为这很大程度上取决于你想要使用它们的上下文。当它们与第二个按钮并列使用时,它们会非常有效,而且强调程度更高。因为幽灵按钮在视觉上很轻,所以将它与包含的按钮配对,就会自动传达层次结构。它会自动将访问者指向你的主要操作。到你认为更重要的按钮。
一个状态按钮
这里还有第二个重要的元素(或维度)。对于访问者来说,最初的按钮是什么样子并不重要,重要的是它是如何交互的。它是关于悬停一个按钮,发现什么都没有改变。它是一个按钮,还是不是?我需要点击它来确定这个看起来像按钮的东西是不是真的是按钮。嗯。人们在点击前往往会犹豫,而使用一种状态按钮而没有设计的悬浮状态只会让他们更加犹豫。
添加悬浮状态非常简单,只需在按钮上的文字下划线或更改背景颜色即可。或两者兼而有之。
最佳按钮用户体验
在我看来,一个好按钮背后的原则实际上是永恒的,不受任何趋势的影响。在Blogs.adobe.com上有一个很好的、简单的按钮最佳实践的汇总,我想把它和DesignExcellent上的一个结合起来:
让它看起来像一个按钮(大小,形状,颜色,深度)。
添加一个明确的消息,说明单击后发生了什么。
注意按钮的顺序和位置。
附加链接:按钮颜色对比如何引导用户行动。
上面列表中的第一项总结了我的观点:按钮就是按钮。算不上是设计元素。按钮用户体验设计是关于识别和清晰。
精神食粮
当我在写这篇文章的时候,我突然意识到我们并没有按照这些最好的做法去做。总有改进的余地。当你要检查你自己的按钮时,从最重要的按钮开始。像购买按钮在你的产品页或订阅按钮为你的通讯。记住,不是所有的东西都是按钮,或者看起来像按钮。