交互设计

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

0
登录或者登记去做吧。

 

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

02e08f56ed47746ac7257d20f14b43

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

为按钮做些最佳实践

让按钮看起来像按钮

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

02fdcb56ed403d32f875a9447f9d50

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

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

02793756ed40736ac7257d20c45da4

位置和命令

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

02bbd056ed408d32f875a944e82679

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

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

02305956ed40b432f875a94473c6fe

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

标签

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

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

 

0287b256ed40db6ac7257d20914da8

没有文字标签

唤起行动(Call to action)

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

02f70256ed40f36ac7257d20857e1c

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

按钮形状

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

02015556ed411532f875a944c1138a

圆角矩形按钮

 

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

020b0f56ed413e6ac7257d2050bb5d

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

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

按钮样式和行为

1.突出按钮

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

028f2256ed415d32f875a944f6e319

使用

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

行为

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

021adf56ed417d6ac7257d20d6ab9e

例子

突出按钮比扁平按钮更加显眼。例如安卓的应用

022b9156ed41906ac7257d206f868a

 

2.扁平按钮

扁平样式的按钮不会突出出来,但是在点击时会改变颜色。主要的优势在于界面的简洁——最不容易被内容打扰。

0258f656ed41b36ac7257d20abc0a6

使用

在会话中(统一按钮行为和会话内容)

02408156ed41e332f875a944b18b0c

安卓会话当中的扁平按钮

在工具条上

020d5556ed42026ac7257d20fdaace

在工具条上的扁平按钮

于留白对齐,一遍用户能够轻易找到它们。

02d73d56ed421832f875a944336553

扁平按钮

行为

02bed956ed423c32f875a944920a67

例子

安卓应用上的扁平按钮

02bbff56ed42526ac7257d203c41e2

3.切换按钮

切换按钮能够允许用户从两种状态中改变设置。

02684456ed428f6ac7257d205e4deb

切换按钮

使用

多数的切换按钮都是以开或关的形式使用。

还有就是切换按钮可以在成组相关的选项中使用。但是你的布局应当是将切换按钮作为一组选项中的组成部分。所以切换按钮要求:

1.一组中有至少3个切换按钮

2按钮上使用文字,icon或者两者结合作为标签。

 

02938656ed42ab32f875a944771421

一个被选中的切换按钮

在切换按钮上使用icon是最好的方法,因为它只接受一个选择,比如添加或者转移一个星星到另一个项目上。最好在APP的bar,toolbar,动作按钮或者切换按钮上使用它们。

0214ac56ed42c832f875a944ee521aTwitter的”LIKE”上的切换按钮

为一个按钮上选择一个正确的icon是非常重要的。我将会在另外一篇文章上讲解icon 扮演着完美用户体验的重要角色。

例子

iOS上使用切换按钮作为设置选项。

02ff7556ed43e06ac7257d2016cccf

4.幽灵按钮

幽灵按钮就是一种透明的或者空按钮的使用基本形状的形式。当内部的内容为简单的文字形式时,通常使用非常细的描边作为幽灵按钮的轮廓。

02b72d56ed44176ac7257d2061b1bb

不同的幽灵按钮

使用

使用幽灵按钮做为一个主要的唤起动作其实并不是一个好主意。你能看到下面的例子就是幽灵按钮上Download Bootstrap的样子看起来和他们产品的logo很相似容易引起用户的困惑。

026ead56ed44a56ac7257d2045cad5

Download Bootstrap是一个按钮,你看出来了么?颗颗。。。。

幽灵按钮最好是用在第二或第三层级的内容上,哪怕他最终无法完全传达你想要唤起行动的目的。你当然想用户能够返现你主要想要传达的唤起行动的内容,然后再跳过它看到第二级的按钮。

积极动作会有更高的反差以便用户能看到清晰的动作。

023c5f56ed448132f875a944149563

主要动作(CTA)是Purchase Now,幽灵按钮是第二级按钮

行为

正常状态(左)和高亮态(右)

02597856ed44d46ac7257d20f46404

例子

Airbnb的网站有一个幽灵按钮“Become a Host”

029db656ed44e56ac7257d20cadf93

5.FAB浮动按钮是谷歌设计的重要部分。它是一个圆形的材质按钮,点按之后按钮浮起并表现墨水晕开的效果。

使用

浮动按钮用于驱动动作时使用。

行为

悬浮按钮利用本身的圆形形状悬浮于界面之上与其他元素进行区分,加上运动动作,包括渐变,展开和转化为单一定点。

02639b56ed45046ac7257d208f08d9

选择按钮样式

选择一个按钮样式其实是取决于按钮的权重,屏幕上的容器个数和视觉布局。

 

02ffec56ed451f32f875a9446c8c36

谷歌设计中的按钮类型的选择

02dadd56ed454832f875a9447253d4

Z-depth

功能:

这个按钮的重要程度和普遍程度到了要使用浮动按钮的地步了么?

维度

选择按钮样式取决于容器和多少个Z轴空间的布局。

布局:

每个容器使用一个最主要的按钮样式。除非你有很好的理由才可以混用,比如为了强调一个重要的功能。

按钮状态

这一点跟这个按钮给用户的第一印象是没有太大关系,但是跟犹豫是否去点击一个按钮和发现没有改变有关。用户会感到迷惑:“这是不是一个按钮呢?现在我是不是得点它去验证一下它是不是一个按钮呢。额……”

按钮不是单一—状态目标。它是多状态的。并且可以为用户提供一个可视的反馈去表明当前的状态应该是优先级最高的任务。

正常状态

这一状态的主要规则就是—按钮应当在正常态时就能被识别出是一个按钮。Windows 8是一个很好的反例—用户很难看出上面的元素在设置菜单中是否是可点的。

021d3b56ed45676ac7257d20a55235

Windows8中按钮的正常态

关注状态(高亮状态)

为用户营造一个具有很好的视觉反馈效果的按钮非常具有实践意义。用户能够立即明白按钮的含义从而接受并且视觉上的反馈也起到了相应的作用。

02bfa456ed458e6ac7257d206f5284

点击态

将不同的元素设计成有创意和有驱动性的动效能为用户带来兴奋和愉悦的体验。

02fad656ed45c232f875a94452294e

不活跃状态

显示方式有两种可能—隐藏按钮或者不可用状态。

隐藏按钮的争议:

明确性。只需在旁边显示任务的需求。

  • 保存草稿。允许用户改变设置,不同的命令使用同一个位置。这样很方便。Gmail就是是这样做的。

02472356ed460732f875a944999560Gmail隐藏了不可用的按钮

021c5156ed46216ac7257d20ce4a48只有在用户进行了启用操作时才会让它可见

不可用状态的争议:

表明动作的可执行性。虽然按钮不可用,用户有机会去得知动作是可以执行的。甚至要提供一个提示去解释按钮如何使用。

控制面板的位置。用户能够学习到控制面板和按钮在界面上的具体位置。

02216e56ed463432f875a944c14258

不可用按钮状态

总结

按钮意味着用户能够直接执行我们希望他们去执行的任务。一个平滑的转场能够保持会话流畅性,小差错比如找不到正确的按钮,最好的情况是是打断进程,最差是程序崩溃。

按钮体验设计总是关乎于识别性和明确性。想想一个很忙碌的用户开启网页或者APP展开会话的情况。按钮起到相当重要的作用。

译者:Blackbird

原文链接:https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6#.rhppbpkr3

原译文链接:http://www.zcool.com.cn/article/ZMzk0ODA0.html

 

 

从业务视角看交互设计师的价值
PM的职责