按钮体验设计:最佳的感受,形式和状态

按钮体验设计:最佳的感受,形式和状态

按钮是一个普通的,几乎我们每天都要接触的设计元素.除了这个,由于按钮是一个在网页或者app上创造流畅的会话流体验的必不可少的元素,所以它值得我们为按钮这样最基本的元素提供最佳的体验做出努力.

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

为按钮做些最佳实践

让按钮看起来像按钮

想想如何达到设计沟通的可供性吧.用户是怎么理解一个按钮的呢?用形状和颜色是界面上的元素看起来像一个按钮.

Groupon 的登录页面关注于最主要的动作.

另外,手指点击的尺寸也是要在设计时仔细考虑的事情.按钮的大小在帮助用户分辨这些元素的过程中起到了决定性的作用.不同的平台提供了热区的最小尺寸的不同设计规范.MIT Touch Lab的研究结果表明手指接触面积平均为10-14mm之间,指尖平均为8-10mm,所以最佳的热区尺寸应设定为10mmX10mm.

位置和命令

按钮应放置在用户能够直接找到或者他有预期能看到的地方.例如,iOS UI 设计规范给明了按钮的合理位置.

按钮要执行的命令和位置的关系.按钮要执行的命令非常重要,特别是在出现成对的选项时(就像"上一个"和"下一个").确保设计强调了最主要或者最重要的动作.

在下面的例子中我们使用了红色的按钮颜色表现一个潜在的具有破坏性的动作.并且，主要动作不但可以通过颜色和对比度去引起注意，还可以看它是否置于对话段落的右边。

删除按钮比取消按钮更加显眼

标签

按钮上的标签告诉给人们这个按钮能做什么。清楚的说明点击之后将会发生的事情。

我们讲上面的图片去掉文字。你能发现什么区别么？

没有文字标签

唤起行动（Call to action）

让最重要的按钮（特别在你想要用他们唤起行动时）看起来它是最重要的。

Create Resume 就是一个很明显唤起行动按钮

按钮形状

通常，根据网站或者APP的风格，我们会把按钮设计成矩形或者圆角矩形。一些研究建议圆角能够加强信息的传递并且能够将人的实现集中在元素的中心位置。

圆角矩形按钮

我们有时也会根据自己的创意使用其他的形状例如圆形，三角形或者自定义形状，但是你要知道这样的尝试其实是有风险的。

Floating Action Bar 是一个自定义按钮形状的好的例子

一定要确保统一性能够把控你的界面设计，以便用户能够识别出你的界面元素。

按钮样式和行为

1.突出按钮

突出的按钮样式特别是突出的长方形按钮。（投影表现出按钮是可以点击的）。突出的按钮样式相较于扁平的设计增加了一维空间。在复杂或宽裕的空间中强调功能。

使用

成直线的排列（在布局上根据诸多不同的内容使用更显著的引导）。

行为

让按钮凸起并在点击是填充颜色。